Merge pull request #9 from kapral18/docs/add-default-hidden-case

feat: add defaultHidden performance tests and update README

Author: kapral18

README.md

@@ -59,4 +59,15 @@ visible bottleneck for the CI/CD pipeline.
 
 Here are the preliminary results from CI agent vs local m3 pro run:
 
-<img src="./assets/SCR-20241116-quak.png" width="100%" />
+<img src="./assets/SCR-20241116-quak.png" width="100%" alt="Preliminary results" />
+
+## Default hidden case
+
+Following the classic [discussion](https://github.com/testing-library/dom-testing-library/issues/552) about slow selectors in RTL, we also tested the recommendation to use `configure({ defaultHidden: true })` to speed up the selectors. The results further prove
+that there is negligible algorithmic perf difference in performance between the selectors when the defaultHidden is set to true on a fast modern laptop and even more so on a slower CI agent.
+
+**CI agent results**
+<img src="./assets/ci_hidden_true_before_after.png" width="100%" alt="CI agent results" />
+
+**Local macbook results**
+<img src="./assets/macbook_hidden_true_before_after.png" width="100%" alt="Local macbook results" />

assets/ci_hidden_true_before_after.png

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

assets/macbook_hidden_true_before_after.png

@@ -0,0 +1,135 @@
+import { configure } from "@testing-library/dom";
+import { waitFor, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import App from "./App";
+
+configure({ defaultHidden: true });
+
+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.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}`,
+            ),
+          ),
+        );
+      }
+    });
+
+    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(),
+        );
+      }
+    });
+  },
+);