From 98b8c135112578e63b4cdf4f1563018934b402fb Mon Sep 17 00:00:00 2001
From: Amirhossein Alibakhshi <amir78729@gmail.com>
Date: Sun, 9 Feb 2025 16:53:37 +0330
Subject: [PATCH 1/4] test: add button tests

---
 internals/test-helpers/index.ts               |   2 +-
 package.json                                  |   1 +
 packages/web-components/jest.setup.ts         |  11 ++
 .../src/button/base/base-button.ts            |   6 +-
 .../src/button/standard/button.test.tsx       | 162 ++++++++++++++++++
 .../web-components/src/internals/index.ts     |   1 +
 .../web-components/src/internals/tests.tsx    | 124 ++++++++++++++
 pnpm-lock.yaml                                |   8 +
 8 files changed, 313 insertions(+), 2 deletions(-)
 create mode 100644 packages/web-components/src/button/standard/button.test.tsx
 create mode 100644 packages/web-components/src/internals/tests.tsx

diff --git a/internals/test-helpers/index.ts b/internals/test-helpers/index.ts
index d0682557..bea2bff4 100644
--- a/internals/test-helpers/index.ts
+++ b/internals/test-helpers/index.ts
@@ -1,3 +1,3 @@
-export { act, render } from "@testing-library/react";
+export { act, cleanup, fireEvent, render } from "@testing-library/react";
 export { default as userEvent } from "@testing-library/user-event";
 export * from "shadow-dom-testing-library";
diff --git a/package.json b/package.json
index efb0872f..4e143181 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@types/stream-json": "^1.7.7",
     "@vitejs/plugin-react": "^4.3.3",
     "custom-elements-manifest": "^2.1.0",
+    "element-internals-polyfill": "^1.3.13",
     "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
diff --git a/packages/web-components/jest.setup.ts b/packages/web-components/jest.setup.ts
index ba7aa37a..0638102a 100644
--- a/packages/web-components/jest.setup.ts
+++ b/packages/web-components/jest.setup.ts
@@ -1 +1,12 @@
+import { cleanup } from "@internals/test-helpers";
+import { afterEach, beforeAll, jest } from "@jest/globals";
 import "@testing-library/jest-dom/jest-globals";
+
+beforeAll(async () => {
+  await import("element-internals-polyfill");
+});
+
+afterEach(() => {
+  cleanup();
+  jest.clearAllMocks();
+});
diff --git a/packages/web-components/src/button/base/base-button.ts b/packages/web-components/src/button/base/base-button.ts
index 8e566870..cdd94400 100644
--- a/packages/web-components/src/button/base/base-button.ts
+++ b/packages/web-components/src/button/base/base-button.ts
@@ -119,7 +119,10 @@ export abstract class BaseButton extends BaseClass implements FormSubmitter {
    */
   protected renderSpinner() {
     return html`
-      <div class="icon spinner">
+      <div
+        class="icon spinner"
+        data-testid="tapsi-button-spinner"
+      >
         <tapsi-spinner></tapsi-spinner>
       </div>
     `;
@@ -158,6 +161,7 @@ export abstract class BaseButton extends BaseClass implements FormSubmitter {
     return html`
       <button
         id="root"
+        data-testid="tapsi-button-root"
         part="root"
         class=${rootClasses}
         tabindex=${this.tabIndex}
diff --git a/packages/web-components/src/button/standard/button.test.tsx b/packages/web-components/src/button/standard/button.test.tsx
new file mode 100644
index 00000000..6a1c751a
--- /dev/null
+++ b/packages/web-components/src/button/standard/button.test.tsx
@@ -0,0 +1,162 @@
+import { TapsiButton } from "./index.ts";
+
+import { render, screen, userEvent } from "@internals/test-helpers";
+import { describe, expect, it, jest } from "@jest/globals";
+import { createComponent } from "@lit/react";
+import React, { type FormEventHandler } from "react";
+import {
+  getComponent,
+  itShouldMount,
+  itSupportsClassName,
+  itSupportsDataSetProps,
+  itSupportsStyle,
+} from "../../internals/tests.tsx";
+
+const Button = createComponent({
+  react: React,
+  elementClass: TapsiButton,
+  tagName: "tapsi-button",
+});
+
+const handleClick = jest.fn();
+
+const mockRequiredProps = {
+  label: "test-button-label",
+};
+
+describe("🧪 button/standard: UI", () => {
+  itShouldMount(Button, mockRequiredProps);
+  itSupportsClassName(Button, mockRequiredProps);
+  itSupportsStyle(Button, mockRequiredProps);
+  itSupportsDataSetProps(Button, mockRequiredProps);
+
+  it("should trigger `handleClick` function after clicking on the button", async () => {
+    const testButton = getComponent(Button, {
+      onClick: handleClick,
+    });
+
+    const { click } = userEvent.setup();
+
+    await click(testButton);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should trigger `handleClick` function after focusing on the button and pressing Enter", async () => {
+    const testButton = getComponent(Button, {
+      onClick: handleClick,
+    });
+
+    const { tab, keyboard } = userEvent.setup();
+
+    await tab();
+    expect(testButton).toHaveFocus();
+    await keyboard("{Enter}");
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not be able to trigger `handleClick` function while `disabled`", async () => {
+    const testButton = getComponent(Button, {
+      onClick: handleClick,
+      disabled: true,
+    });
+
+    const { tab, click } = userEvent.setup();
+
+    await tab();
+    expect(testButton).not.toHaveFocus();
+
+    await click(testButton);
+
+    expect(handleClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should have `aria-label` property when the host has a `label` property", async () => {
+    render(
+      <Button
+        {...mockRequiredProps}
+        label="test-label"
+      />,
+    );
+
+    expect(
+      await screen.findByShadowTestId("tapsi-button-root"),
+    ).toHaveAttribute("aria-label", "test-label");
+  });
+
+  it("should show spinner with `loading` prop", async () => {
+    render(<Button loading />);
+
+    expect(
+      await screen.findByShadowTestId("tapsi-button-spinner"),
+    ).toBeInTheDocument();
+  });
+
+  it("should work inside a form", async () => {
+    const handleSubmit = jest.fn();
+    const handleReset = jest.fn();
+
+    const submitHandler: FormEventHandler<HTMLFormElement> = event => {
+      event.preventDefault();
+      handleSubmit(event);
+    };
+
+    const resetHandler: FormEventHandler<HTMLFormElement> = event => {
+      event.preventDefault();
+      handleReset(event);
+    };
+
+    const getForm = () => screen.getByTestId<HTMLFormElement>("form");
+
+    const getSubmitButton = () =>
+      screen.getByTestId<TapsiButton>("submit-button");
+
+    const getResetButton = () =>
+      screen.getByTestId<TapsiButton>("reset-button");
+
+    const getCheckbox = () =>
+      screen.getByTestId<HTMLInputElement>("test-checkbox");
+
+    const { click } = userEvent.setup();
+
+    const getFormData = () => new FormData(getForm());
+
+    const getCheckboxValue = () => getFormData().get("n");
+
+    render(
+      <form
+        data-testid="form"
+        onSubmit={submitHandler}
+        onReset={resetHandler}
+      >
+        <input
+          data-testid="test-checkbox"
+          type="checkbox"
+          name="n"
+        />
+        <Button
+          data-testid="submit-button"
+          type="submit"
+        >
+          submit
+        </Button>
+        <Button
+          data-testid="reset-button"
+          type="reset"
+        >
+          reset
+        </Button>
+      </form>,
+    );
+
+    await click(getCheckbox());
+    await click(getSubmitButton());
+
+    expect(handleSubmit.mock.calls.length).toBe(1);
+    expect(getCheckboxValue()).toBe("on");
+
+    await click(getResetButton());
+    expect(handleReset.mock.calls.length).toBe(1);
+  });
+});
diff --git a/packages/web-components/src/internals/index.ts b/packages/web-components/src/internals/index.ts
index 4dff1b42..ddf69331 100644
--- a/packages/web-components/src/internals/index.ts
+++ b/packages/web-components/src/internals/index.ts
@@ -1,3 +1,4 @@
 export * from "./animations.ts";
 export * from "./keyboard.ts";
+export * from "./tests.tsx";
 export * from "./tokens.ts";
diff --git a/packages/web-components/src/internals/tests.tsx b/packages/web-components/src/internals/tests.tsx
new file mode 100644
index 00000000..a1765f07
--- /dev/null
+++ b/packages/web-components/src/internals/tests.tsx
@@ -0,0 +1,124 @@
+import { render, screen } from "@internals/test-helpers";
+import { expect, it } from "@jest/globals";
+import { type ComponentType } from "react";
+
+export const getComponent = <T extends JSX.IntrinsicAttributes>(
+  Component: ComponentType<T>,
+  props: T,
+): HTMLElement => {
+  render(
+    <Component
+      data-testid="test-component"
+      {...props}
+    />,
+  );
+
+  return screen.getByTestId("test-component");
+};
+
+export const itShouldMount = <T extends JSX.IntrinsicAttributes>(
+  Component: ComponentType<T>,
+  requiredProps: T,
+): void => {
+  it("should be mounted and unmounted without errors", () => {
+    const elem = <Component {...requiredProps} />;
+
+    const result = render(elem);
+
+    expect(() => {
+      result.rerender(elem);
+      result.unmount();
+    }).not.toThrow();
+  });
+};
+
+export const itSupportsClassName = <T extends JSX.IntrinsicAttributes>(
+  Component: ComponentType<T>,
+  requiredProps: T,
+): void => {
+  it("should supports CSS classes", () => {
+    const className = "tapsi-test-class";
+
+    const { container } = render(
+      <Component
+        {...requiredProps}
+        className={className}
+      />,
+    );
+
+    expect(container.firstChild).toHaveClass(className);
+  });
+};
+
+export const itSupportsStyle = <T extends JSX.IntrinsicAttributes>(
+  Component: ComponentType<T>,
+  requiredProps: T,
+  selector?: string,
+  options?: { withPortal?: boolean },
+): void => {
+  it("should supports inline styles", () => {
+    const { withPortal = false } = options ?? {};
+
+    const getTarget = (container: HTMLElement): HTMLElement => {
+      const portal = withPortal
+        ? document.querySelector<HTMLElement>("[data-slot='Portal:Root']")
+        : null;
+
+      return selector
+        ? portal
+          ? (portal.querySelector(selector) as HTMLElement)
+          : (container.querySelector(selector) as HTMLElement)
+        : portal
+          ? (container.firstChild as HTMLElement)
+          : (container.firstChild as HTMLElement);
+    };
+
+    const style = { border: "1px solid red", backgroundColor: "black" };
+
+    const { container } = render(
+      <Component
+        {...requiredProps}
+        style={style}
+      />,
+    );
+
+    expect(getTarget(container)).toHaveStyle(style);
+  });
+};
+
+export const itSupportsDataSetProps = <T extends JSX.IntrinsicAttributes>(
+  Component: ComponentType<T>,
+  requiredProps: T,
+  selector?: string,
+  options?: { withPortal?: boolean },
+): void => {
+  it("supports `data-*` props", () => {
+    const { withPortal = false } = options ?? {};
+
+    const getTarget = (container: HTMLElement): HTMLElement => {
+      const portal = withPortal
+        ? document.querySelector<HTMLElement>("[data-slot='Portal:Root']")
+        : null;
+
+      return selector
+        ? portal
+          ? (portal.querySelector(selector) as HTMLElement)
+          : (container.querySelector(selector) as HTMLElement)
+        : portal
+          ? (container.firstChild as HTMLElement)
+          : (container.firstChild as HTMLElement);
+    };
+
+    const { container } = render(
+      <Component
+        {...requiredProps}
+        data-other-attribute="test"
+      />,
+    );
+
+    expect(getTarget(container)).toHaveAttribute(
+      "data-other-attribute",
+      "test",
+    );
+  });
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index efe1820d..2f149fbc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       custom-elements-manifest:
         specifier: ^2.1.0
         version: 2.1.0
+      element-internals-polyfill:
+        specifier: ^1.3.13
+        version: 1.3.13
       eslint:
         specifier: ^9.12.0
         version: 9.19.0
@@ -2184,6 +2187,9 @@ packages:
   electron-to-chromium@1.5.88:
     resolution: {integrity: sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==}
 
+  element-internals-polyfill@1.3.13:
+    resolution: {integrity: sha512-viZ7wJsvh6eFwGQX512zEaccK/c6RRFSerJsdkfe3DW/ZtruvNeOR33fpPZgfXxvqRdU2lK33KM4S6GqaTgVKQ==}
+
   emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
@@ -6591,6 +6597,8 @@ snapshots:
 
   electron-to-chromium@1.5.88: {}
 
+  element-internals-polyfill@1.3.13: {}
+
   emittery@0.13.1: {}
 
   emoji-regex-xs@1.0.0: {}

From 82012c4cafa8c2ba148e5b04d8c85cc467664c5a Mon Sep 17 00:00:00 2001
From: Amirhossein Alibakhshi <amir78729@gmail.com>
Date: Sun, 9 Feb 2025 17:18:15 +0330
Subject: [PATCH 2/4] refactor: remove the getComponent function

---
 .../src/button/standard/button.test.tsx       | 32 ++++++++-----------
 .../web-components/src/internals/tests.tsx    | 16 +---------
 2 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/packages/web-components/src/button/standard/button.test.tsx b/packages/web-components/src/button/standard/button.test.tsx
index 6a1c751a..2560a0fd 100644
--- a/packages/web-components/src/button/standard/button.test.tsx
+++ b/packages/web-components/src/button/standard/button.test.tsx
@@ -5,7 +5,6 @@ import { describe, expect, it, jest } from "@jest/globals";
 import { createComponent } from "@lit/react";
 import React, { type FormEventHandler } from "react";
 import {
-  getComponent,
   itShouldMount,
   itSupportsClassName,
   itSupportsDataSetProps,
@@ -19,6 +18,7 @@ const Button = createComponent({
 });
 
 const handleClick = jest.fn();
+const getTestButton = () => screen.getByTestId("test-button");
 
 const mockRequiredProps = {
   label: "test-button-label",
@@ -31,9 +31,8 @@ describe("🧪 button/standard: UI", () => {
   itSupportsDataSetProps(Button, mockRequiredProps);
 
   it("should trigger `handleClick` function after clicking on the button", async () => {
-    const testButton = getComponent(Button, {
-      onClick: handleClick,
-    });
+    render(<Button onClick={handleClick} />);
+    const testButton = getTestButton();
 
     const { click } = userEvent.setup();
 
@@ -43,9 +42,8 @@ describe("🧪 button/standard: UI", () => {
   });
 
   it("should trigger `handleClick` function after focusing on the button and pressing Enter", async () => {
-    const testButton = getComponent(Button, {
-      onClick: handleClick,
-    });
+    render(<Button onClick={handleClick} />);
+    const testButton = getTestButton();
 
     const { tab, keyboard } = userEvent.setup();
 
@@ -57,10 +55,13 @@ describe("🧪 button/standard: UI", () => {
   });
 
   it("should not be able to trigger `handleClick` function while `disabled`", async () => {
-    const testButton = getComponent(Button, {
-      onClick: handleClick,
-      disabled: true,
-    });
+    render(
+      <Button
+        onClick={handleClick}
+        disabled
+      />,
+    );
+    const testButton = getTestButton();
 
     const { tab, click } = userEvent.setup();
 
@@ -72,13 +73,8 @@ describe("🧪 button/standard: UI", () => {
     expect(handleClick).toHaveBeenCalledTimes(0);
   });
 
-  it("should have `aria-label` property when the host has a `label` property", async () => {
-    render(
-      <Button
-        {...mockRequiredProps}
-        label="test-label"
-      />,
-    );
+  it("should have `aria-label` when the host has a `label` property", async () => {
+    render(<Button label="test-label" />);
 
     expect(
       await screen.findByShadowTestId("tapsi-button-root"),
diff --git a/packages/web-components/src/internals/tests.tsx b/packages/web-components/src/internals/tests.tsx
index a1765f07..aff2205e 100644
--- a/packages/web-components/src/internals/tests.tsx
+++ b/packages/web-components/src/internals/tests.tsx
@@ -1,21 +1,7 @@
-import { render, screen } from "@internals/test-helpers";
+import { render } from "@internals/test-helpers";
 import { expect, it } from "@jest/globals";
 import { type ComponentType } from "react";
 
-export const getComponent = <T extends JSX.IntrinsicAttributes>(
-  Component: ComponentType<T>,
-  props: T,
-): HTMLElement => {
-  render(
-    <Component
-      data-testid="test-component"
-      {...props}
-    />,
-  );
-
-  return screen.getByTestId("test-component");
-};
-
 export const itShouldMount = <T extends JSX.IntrinsicAttributes>(
   Component: ComponentType<T>,
   requiredProps: T,

From d00c0e01fef60ef900ff2fcd79cd2dc31cf976a5 Mon Sep 17 00:00:00 2001
From: Amirhossein Alibakhshi <amir78729@gmail.com>
Date: Sun, 9 Feb 2025 17:49:25 +0330
Subject: [PATCH 3/4] fix: add required props to tests

---
 .../src/button/standard/button.test.tsx       | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/src/button/standard/button.test.tsx b/packages/web-components/src/button/standard/button.test.tsx
index 2560a0fd..8c6c391c 100644
--- a/packages/web-components/src/button/standard/button.test.tsx
+++ b/packages/web-components/src/button/standard/button.test.tsx
@@ -21,6 +21,7 @@ const handleClick = jest.fn();
 const getTestButton = () => screen.getByTestId("test-button");
 
 const mockRequiredProps = {
+  "data-testid": "test-button",
   label: "test-button-label",
 };
 
@@ -31,7 +32,12 @@ describe("🧪 button/standard: UI", () => {
   itSupportsDataSetProps(Button, mockRequiredProps);
 
   it("should trigger `handleClick` function after clicking on the button", async () => {
-    render(<Button onClick={handleClick} />);
+    render(
+      <Button
+        {...mockRequiredProps}
+        onClick={handleClick}
+      />,
+    );
     const testButton = getTestButton();
 
     const { click } = userEvent.setup();
@@ -42,7 +48,12 @@ describe("🧪 button/standard: UI", () => {
   });
 
   it("should trigger `handleClick` function after focusing on the button and pressing Enter", async () => {
-    render(<Button onClick={handleClick} />);
+    render(
+      <Button
+        {...mockRequiredProps}
+        onClick={handleClick}
+      />,
+    );
     const testButton = getTestButton();
 
     const { tab, keyboard } = userEvent.setup();
@@ -57,6 +68,7 @@ describe("🧪 button/standard: UI", () => {
   it("should not be able to trigger `handleClick` function while `disabled`", async () => {
     render(
       <Button
+        {...mockRequiredProps}
         onClick={handleClick}
         disabled
       />,
@@ -74,15 +86,20 @@ describe("🧪 button/standard: UI", () => {
   });
 
   it("should have `aria-label` when the host has a `label` property", async () => {
-    render(<Button label="test-label" />);
+    render(<Button {...mockRequiredProps} />);
 
     expect(
       await screen.findByShadowTestId("tapsi-button-root"),
-    ).toHaveAttribute("aria-label", "test-label");
+    ).toHaveAttribute("aria-label", "test-button-label");
   });
 
   it("should show spinner with `loading` prop", async () => {
-    render(<Button loading />);
+    render(
+      <Button
+        {...mockRequiredProps}
+        loading
+      />,
+    );
 
     expect(
       await screen.findByShadowTestId("tapsi-button-spinner"),

From 3cd0f52960c480973b5dcca9f23be850255d300d Mon Sep 17 00:00:00 2001
From: Amirhossein Alibakhshi <amir78729@gmail.com>
Date: Tue, 11 Feb 2025 10:39:45 +0330
Subject: [PATCH 4/4] test: add `icon-button` tests

---
 .../button/icon-button/icon-button.test.tsx   | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 packages/web-components/src/button/icon-button/icon-button.test.tsx

diff --git a/packages/web-components/src/button/icon-button/icon-button.test.tsx b/packages/web-components/src/button/icon-button/icon-button.test.tsx
new file mode 100644
index 00000000..abc803b0
--- /dev/null
+++ b/packages/web-components/src/button/icon-button/icon-button.test.tsx
@@ -0,0 +1,108 @@
+import { TapsiIconButton } from "./index.ts";
+
+import { render, screen, userEvent } from "@internals/test-helpers";
+import { describe, expect, it, jest } from "@jest/globals";
+import { createComponent } from "@lit/react";
+import React from "react";
+import {
+  itShouldMount,
+  itSupportsClassName,
+  itSupportsDataSetProps,
+  itSupportsStyle,
+} from "../../internals/tests.tsx";
+
+const IconButton = createComponent({
+  react: React,
+  elementClass: TapsiIconButton,
+  tagName: "tapsi-icon-button",
+});
+
+const handleClick = jest.fn();
+const getTestIconButton = () => screen.getByTestId("test-icon-button");
+
+const mockRequiredProps = {
+  "data-testid": "test-icon-button",
+  label: "test-icon-button-label",
+};
+
+describe("🧪 button/icon-button: UI", () => {
+  itShouldMount(IconButton, mockRequiredProps);
+  itSupportsClassName(IconButton, mockRequiredProps);
+  itSupportsStyle(IconButton, mockRequiredProps);
+  itSupportsDataSetProps(IconButton, mockRequiredProps);
+
+  it("should trigger `handleClick` function after clicking on the icon button", async () => {
+    render(
+      <IconButton
+        {...mockRequiredProps}
+        onClick={handleClick}
+      />,
+    );
+    const testIconButton = getTestIconButton();
+
+    const { click } = userEvent.setup();
+
+    await click(testIconButton);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should trigger `handleClick` function after focusing on the button and pressing Enter", async () => {
+    render(
+      <IconButton
+        {...mockRequiredProps}
+        onClick={handleClick}
+      />,
+    );
+    const testIconButton = getTestIconButton();
+
+    const { tab, keyboard } = userEvent.setup();
+
+    await tab();
+    expect(testIconButton).toHaveFocus();
+    await keyboard("{Enter}");
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not be able to trigger `handleClick` function while `disabled`", async () => {
+    render(
+      <IconButton
+        {...mockRequiredProps}
+        onClick={handleClick}
+        disabled
+      />,
+    );
+    const testIconButton = getTestIconButton();
+
+    const { tab, click } = userEvent.setup();
+
+    await tab();
+    expect(testIconButton).not.toHaveFocus();
+
+    await click(testIconButton);
+
+    expect(handleClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should have `aria-label` when the host has a `label` property", async () => {
+    render(<IconButton {...mockRequiredProps} />);
+
+    expect(
+      await screen.findByShadowTestId("tapsi-button-root"),
+    ).toHaveAttribute("aria-label", "test-icon-button-label");
+  });
+
+  it("should show spinner with `loading` prop", async () => {
+    render(
+      <IconButton
+        {...mockRequiredProps}
+        loading
+      />,
+    );
+
+    expect(
+      await screen.findByShadowTestId("tapsi-button-spinner"),
+    ).toBeInTheDocument();
+  });
+});