Skip to content

Commit 4b13f82

Browse files
kapral18kapral18
authored
Merge pull request #18 from kapral18/feat/add_individual_hidden_case
refactor: update README and restructure test suites for 'hidden' option
2 parents c2d4b8c + 3169143 commit 4b13f82

File tree

5 files changed

+187
-204
lines changed

5 files changed

+187
-204
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,5 @@ that there is negligible algorithmic perf difference in performance between the
7171

7272
**Local macbook results**
7373
<img src="./assets/macbook_hidden_true_before_after.png" width="100%" alt="Local macbook results" />
74+
75+
Another thing to keep in mind is that `hidden` option is only applicable to `ByRole` queries, and not to `ByLabelText` queries. So if you are using `ByLabelText` queries, you will not see any performance improvement from setting `defaultHidden` to true or individual `hidden` option to true.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
"build": "tsc -b && vite build",
99
"lint": "eslint .",
1010
"preview": "vite preview",
11-
"test:default": "jest src/App.test.tsx",
12-
"test:default:hidden": "jest src/App.defaultHidden.test.tsx"
11+
"test": "jest",
12+
"test:all": "jest src/App.test.tsx",
13+
"test:hidden:default": "jest src/App.defaultHidden.test.tsx",
14+
"test:hidden:individual": "jest src/App.individualHidden.test.tsx"
1315
},
1416
"dependencies": {
1517
"react": "^18.3.1",

‎src/App.defaultHidden.test.tsx‎

Lines changed: 26 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -27,109 +27,30 @@ const components = [
2727
},
2828
];
2929

30-
describe.each(components)(
31-
"Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
32-
({ component, iterations }) => {
33-
beforeEach(() => {
34-
render(component);
35-
});
36-
37-
it("getByRole selector performance", async () => {
38-
for (const index of Array.from({ length: iterations }).keys()) {
39-
const button = screen.getByRole("button", {
40-
name: `Button label ${index}`,
41-
});
42-
await userEvent.click(button);
43-
await waitFor(() =>
44-
expect(
45-
screen.getByRole("paragraph", {
46-
name: `Service label ${index}`,
47-
}),
48-
),
49-
);
50-
}
51-
});
52-
53-
it("getByLabelText selector performance", async () => {
54-
for (const index of Array.from({ length: iterations }).keys()) {
55-
const button = screen.getByLabelText(`Button label ${index}`);
56-
await userEvent.click(button);
57-
await waitFor(() =>
58-
expect(screen.getByLabelText(`Service label ${index}`)),
59-
);
60-
}
61-
});
62-
63-
it("getByPlaceholderText selector performance", async () => {
64-
for (const index of Array.from({ length: iterations }).keys()) {
65-
const input = screen.getByPlaceholderText(
66-
`Button input placeholder ${index}`,
67-
);
68-
await userEvent.click(input);
69-
await waitFor(() =>
70-
expect(
71-
screen.getByPlaceholderText(
72-
`Service textarea placeholder ${index}`,
30+
describe("App defaultHidden test", () => {
31+
// The hidden attribute is only only affecting `ByRole` queries
32+
describe.each(components)(
33+
"Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
34+
({ component, iterations }) => {
35+
beforeEach(() => {
36+
render(component);
37+
});
38+
39+
it("getByRole selector performance", async () => {
40+
for (const index of Array.from({ length: iterations }).keys()) {
41+
const button = screen.getByRole("button", {
42+
name: `Button label ${index}`,
43+
});
44+
await userEvent.click(button);
45+
await waitFor(() =>
46+
expect(
47+
screen.getByRole("paragraph", {
48+
name: `Service label ${index}`,
49+
}),
7350
),
74-
),
75-
);
76-
}
77-
});
78-
79-
it("getByText selector performance", async () => {
80-
for (const index of Array.from({ length: iterations }).keys()) {
81-
const button = screen.getByText(`Button text ${index}`);
82-
await userEvent.click(button);
83-
await waitFor(() =>
84-
expect(screen.getByText(`Service text ${index}`)).toBeInTheDocument(),
85-
);
86-
}
87-
});
88-
89-
it("getByDisplayValue selector performance", async () => {
90-
for (const index of Array.from({ length: iterations }).keys()) {
91-
const input = screen.getByDisplayValue(`Button input value ${index}`);
92-
await userEvent.click(input);
93-
await waitFor(() =>
94-
expect(screen.getByDisplayValue(`Service textarea value ${index}`)),
95-
);
96-
}
97-
});
98-
99-
it("getByAltText selector performance", async () => {
100-
for (const index of Array.from({ length: iterations }).keys()) {
101-
const img = screen.getByAltText(`Button image alt ${index}`);
102-
await userEvent.click(img);
103-
await waitFor(() =>
104-
expect(
105-
screen.getByAltText(`Service image alt ${index}`),
106-
).toBeInTheDocument(),
107-
);
108-
}
109-
});
110-
111-
it("getByTitle selector performance", async () => {
112-
for (const index of Array.from({ length: iterations }).keys()) {
113-
const button = screen.getByTitle(`Button title ${index}`);
114-
await userEvent.click(button);
115-
await waitFor(() =>
116-
expect(
117-
screen.getByTitle(`Service title ${index}`),
118-
).toBeInTheDocument(),
119-
);
120-
}
121-
});
122-
123-
it("getByTestId selector performance", async () => {
124-
for (const index of Array.from({ length: iterations }).keys()) {
125-
const button = screen.getByTestId(`button-test-id-${index}`);
126-
await userEvent.click(button);
127-
await waitFor(() =>
128-
expect(
129-
screen.getByTestId(`button-test-id-${index}`),
130-
).toBeInTheDocument(),
131-
);
132-
}
133-
});
134-
},
135-
);
51+
);
52+
}
53+
});
54+
},
55+
);
56+
});

‎src/App.individualHidden.test.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { waitFor, render, screen } from "@testing-library/react";
2+
import userEvent from "@testing-library/user-event";
3+
import App from "./App";
4+
5+
const components = [
6+
{
7+
name: "Simple",
8+
component: <App iterations={2} />,
9+
iterations: 2,
10+
depth: 1,
11+
},
12+
{
13+
name: "Medium",
14+
component: <App iterations={5} />,
15+
iterations: 5,
16+
depth: 3,
17+
},
18+
{
19+
name: "Complex",
20+
component: <App iterations={10} />,
21+
iterations: 10,
22+
depth: 5,
23+
},
24+
];
25+
26+
describe("App individual hidden test", () => {
27+
// The hidden attribute is only only affecting `ByRole` queries
28+
describe.each(components)(
29+
"Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
30+
({ component, iterations }) => {
31+
beforeEach(() => {
32+
render(component);
33+
});
34+
35+
it("getByRole selector performance", async () => {
36+
for (const index of Array.from({ length: iterations }).keys()) {
37+
const button = screen.getByRole("button", {
38+
name: `Button label ${index}`,
39+
hidden: true,
40+
});
41+
await userEvent.click(button);
42+
await waitFor(() =>
43+
expect(
44+
screen.getByRole("paragraph", {
45+
name: `Service label ${index}`,
46+
hidden: true,
47+
}),
48+
),
49+
);
50+
}
51+
});
52+
},
53+
);
54+
});

0 commit comments

Comments
 (0)