refactor: update README and restructure test suites for 'hidden' option

README.md

@@ -71,3 +71,5 @@ that there is negligible algorithmic perf difference in performance between the
 
 **Local macbook results**
 <img src="./assets/macbook_hidden_true_before_after.png" width="100%" alt="Local macbook results" />
+
+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

@@ -8,8 +8,10 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test:default": "jest src/App.test.tsx",
-    "test:default:hidden": "jest src/App.defaultHidden.test.tsx"
+    "test": "jest",
+    "test:all": "jest src/App.test.tsx",
+    "test:hidden:default": "jest src/App.defaultHidden.test.tsx",
+    "test:hidden:individual": "jest src/App.individualHidden.test.tsx"
   },
   "dependencies": {
     "react": "^18.3.1",

src/App.defaultHidden.test.tsx

@@ -27,109 +27,30 @@ const components = [
   },
 ];
 
-describe.each(components)(
-  "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
-  ({ component, iterations }) => {
-    beforeEach(() => {
-      render(component);
-    });
-
-    it("getByRole selector performance", async () => {
-      for (const index of Array.from({ length: iterations }).keys()) {
-        const button = screen.getByRole("button", {
-          name: `Button label ${index}`,
-        });
-        await userEvent.click(button);
-        await waitFor(() =>
-          expect(
-            screen.getByRole("paragraph", {
-              name: `Service label ${index}`,
-            }),
-          ),
-        );
-      }
-    });
-
-    it("getByLabelText selector performance", async () => {
-      for (const index of Array.from({ length: iterations }).keys()) {
-        const button = screen.getByLabelText(`Button label ${index}`);
-        await userEvent.click(button);
-        await waitFor(() =>
-          expect(screen.getByLabelText(`Service label ${index}`)),
-        );
-      }
-    });
-
-    it("getByPlaceholderText selector performance", async () => {
-      for (const index of Array.from({ length: iterations }).keys()) {
-        const input = screen.getByPlaceholderText(
-          `Button input placeholder ${index}`,
-        );
-        await userEvent.click(input);
-        await waitFor(() =>
-          expect(
-            screen.getByPlaceholderText(
-              `Service textarea placeholder ${index}`,
+describe("App defaultHidden test", () => {
+  // The hidden attribute is only only affecting `ByRole` queries
+  describe.each(components)(
+    "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
+    ({ component, iterations }) => {
+      beforeEach(() => {
+        render(component);
+      });
+
+      it("getByRole selector performance", async () => {
+        for (const index of Array.from({ length: iterations }).keys()) {
+          const button = screen.getByRole("button", {
+            name: `Button label ${index}`,
+          });
+          await userEvent.click(button);
+          await waitFor(() =>
+            expect(
+              screen.getByRole("paragraph", {
+                name: `Service label ${index}`,
+              }),
             ),
-          ),
-        );
-      }
-    });
-
-    it("getByText selector performance", async () => {
-      for (const index of Array.from({ length: iterations }).keys()) {
-        const button = screen.getByText(`Button text ${index}`);
-        await userEvent.click(button);
-        await waitFor(() =>
-          expect(screen.getByText(`Service text ${index}`)).toBeInTheDocument(),
-        );
-      }
-    });
-
-    it("getByDisplayValue selector performance", async () => {
-      for (const index of Array.from({ length: iterations }).keys()) {
-        const input = screen.getByDisplayValue(`Button input value ${index}`);
-        await userEvent.click(input);
-        await waitFor(() =>
-          expect(screen.getByDisplayValue(`Service textarea value ${index}`)),
-        );
-      }
-    });
-
-    it("getByAltText selector performance", async () => {
-      for (const index of Array.from({ length: iterations }).keys()) {
-        const img = screen.getByAltText(`Button image alt ${index}`);
-        await userEvent.click(img);
-        await waitFor(() =>
-          expect(
-            screen.getByAltText(`Service image alt ${index}`),
-          ).toBeInTheDocument(),
-        );
-      }
-    });
-
-    it("getByTitle selector performance", async () => {
-      for (const index of Array.from({ length: iterations }).keys()) {
-        const button = screen.getByTitle(`Button title ${index}`);
-        await userEvent.click(button);
-        await waitFor(() =>
-          expect(
-            screen.getByTitle(`Service title ${index}`),
-          ).toBeInTheDocument(),
-        );
-      }
-    });
-
-    it("getByTestId selector performance", async () => {
-      for (const index of Array.from({ length: iterations }).keys()) {
-        const button = screen.getByTestId(`button-test-id-${index}`);
-        await userEvent.click(button);
-        await waitFor(() =>
-          expect(
-            screen.getByTestId(`button-test-id-${index}`),
-          ).toBeInTheDocument(),
-        );
-      }
-    });
-  },
-);
+          );
+        }
+      });
+    },
+  );
+});

src/App.individualHidden.test.tsx

@@ -0,0 +1,54 @@
+import { waitFor, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import App from "./App";
+
+const components = [
+  {
+    name: "Simple",
+    component: <App iterations={2} />,
+    iterations: 2,
+    depth: 1,
+  },
+  {
+    name: "Medium",
+    component: <App iterations={5} />,
+    iterations: 5,
+    depth: 3,
+  },
+  {
+    name: "Complex",
+    component: <App iterations={10} />,
+    iterations: 10,
+    depth: 5,
+  },
+];
+
+describe("App individual hidden test", () => {
+  // The hidden attribute is only only affecting `ByRole` queries
+  describe.each(components)(
+    "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
+    ({ component, iterations }) => {
+      beforeEach(() => {
+        render(component);
+      });
+
+      it("getByRole selector performance", async () => {
+        for (const index of Array.from({ length: iterations }).keys()) {
+          const button = screen.getByRole("button", {
+            name: `Button label ${index}`,
+            hidden: true,
+          });
+          await userEvent.click(button);
+          await waitFor(() =>
+            expect(
+              screen.getByRole("paragraph", {
+                name: `Service label ${index}`,
+                hidden: true,
+              }),
+            ),
+          );
+        }
+      });
+    },
+  );
+});