Tests: Improve the Code Coverage initiative using Jest

[timothymarois]

• Implements npm run test using Jest, ts-jest, jest-environment-jsdom
• Implements first modal tests

[zoltanszogyenyi]

Hey @timothymarois,

This is a much needed update for the Flowbite Library to make it sustainable in the future.

I'll be here to assist whenever needed - took a look at the code, it looks good to me!

I suppose these tests will later be integrated with CI as well when creating PRs.

Cheers,
Zoltan

PS: let me know when the basis of this update has been made since I could muster the community from Flowbite to help us out with some unit tests, though we'll need to write a contribution guide for these tests so we make sure everyone is onboard with the same approach.

[CorwinDev]

Hi @timothymarois,

I would love to help to this pull request, do you have anything i can pickup?

[timothymarois]

@zoltanszogyenyi Yep, that's the idea; if we can get enough coverage, then we can integrate CI/Actions and have automated tests run on every PR submitted.

@CorwinDev Right now, I just set up the basics, but if you want to start testing the more complex items such as data attributes, etc. We can mimic the modal test I provided for the other components.

[zoltanszogyenyi]

Hey @timothymarois @CorwinDev,

I think it's best if we take each component step by step and start with the easier stuff.

And we should create a "checkbox" tasks template for each component unit test, for example:

• Created a new test file for the component
• Created the constructor tests
• Created a test for each public method (ie. show, hide, toggle)

For reference the Flowbite React has some pretty good tests going on and we could use that as inspiration:

• Tests for the modal component: https://github.com/themesberg/flowbite-react/blob/main/src/lib/components/Modal/Modal.spec.tsx

Stuff like should be closed by Esc key press. and should be closed by clicking outside if the "dismissible" prop is passed. are pretty neat, but I think that in our case we do need some special stuff for the data attributes, to check if the correct classes are added when a specific action is performed, and also check for the aria-role attributes.

So my suggestion is to finish up the Modal component as a benchmark and then go onto the other components.

We can also take some inspiration from Bootstrap's unit tests as they also use data attributes and are battle tested for over 15 years now: https://github.com/twbs/bootstrap/tree/main/js/tests.

Here are their unit tests for the Modal component: https://github.com/twbs/bootstrap/blob/main/js/tests/unit/modal.spec.js.

This is probably our golden standard if you will.