Testing all components

In #241, we replaced enzyme by react-testing-library (RTL).

Only a few components were being tested, so we decided to open it for contributions. Whether you’re a beginner (with react, open source or tests) or an experienced developer who want to learn RTL by contributing to this project, this is for you. 😄

Test cases

1️⃣ html attrs: test if a component renders html props (like id, aria-label etc.) - example 2️⃣ styled: test if styles match (for every prop that changes styles) - example 3️⃣ prop: test the behavior of every custom prop - example 4️⃣ lifecycle: test the behavior of lifecycles - example1, example2 5️⃣ events: test the behavior of events - example 6️⃣ others: more tests if the component needs

Components with only 1️⃣2️⃣ are easier.

Instructions

1. Choose the component you want to test. Please, do one per PR. Components with sub components (e.g. Group and GroupItem) go in a single PR.
2. Comment on this issue (a member will edit this post with your info).
3. Take a look at Contributing with code.
4. Create a __tests__ folder and a ${ComponentName}-test.tsx file inside (you can take a look at other components that are already tested).
5. Implement the tests while running yarn test --watch.
6. Commit, push and open the PR. 🎉

Components

Component	Status	Developer	Test cases
Avatar	✅	@diegohaz	1️⃣2️⃣
Backdrop	✅	@diegohaz	1️⃣2️⃣3️⃣
Block	✅	@diegohaz	1️⃣2️⃣
Blockquote	✅	@codyaverett	1️⃣2️⃣
Box	✅	@ReutSher1	1️⃣2️⃣3️⃣
Button	✅	@lluia	1️⃣2️⃣
Card*	✅	@lluia	1️⃣2️⃣3️⃣
Code	✅	@lluia	1️⃣2️⃣3️⃣
Divider	✅	@lluia	1️⃣2️⃣3️⃣
Field	✅	@lluia	1️⃣2️⃣
Flex	✅	@lluia	1️⃣2️⃣3️⃣
Grid*	✅	@lluia	1️⃣2️⃣3️⃣
Group*	✅	@lluia	1️⃣2️⃣3️⃣
Heading	✅	@lluia	1️⃣2️⃣
Hidden*	🚧	@diegohaz	1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣
Image	✅	@lluia	1️⃣2️⃣
Inline	✅	@lluia	1️⃣2️⃣
InlineBlock	✅	@lluia	1️⃣2️⃣
InlineFlex	✅	@lluia	1️⃣2️⃣3️⃣
Label	🚧	@rafael-vitor	1️⃣2️⃣
Link	🚧	@rafael-vitor	1️⃣2️⃣
List	🚧	@rafael-vitor	1️⃣2️⃣
Navigation	🚧	@rafael-vitor	1️⃣2️⃣
Overlay*	✅	@amogower	1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣
Paragraph	✅	@lluia	1️⃣2️⃣
Popover*	✅	@amogower	1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣
Portal	✅	@amogower	1️⃣2️⃣4️⃣6️⃣
Sidebar*	✅	@amogower	1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣
Step*	🚧	@diegohaz	1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣
Table*	✅	@amogower	1️⃣2️⃣
Tabs*	✅	@amogower	1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣
Toolbar*	✅	@amogower	1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣
Tooltip*	🚧	@amogower	1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣

* Contains sub components

[diegohaz]

@gustavo-depaula I don’t think 1️⃣ is testing implementation details.

The user of this library will expect the output element to render all HTML attributes they passed in. This is pretty much testing input/output. I think, though, there should be more effective ways to test that (like, it’s not covering all possible html attributes), but it’s okay for now.

Regarding 2️⃣, it’s useful because we’ll easily see style changes, which are often breaking changes.

[matheus1lva]

@amogower go for it!