test(web-components/buttons): add ui tests

.github/workflows/development.yml

@@ -52,12 +52,12 @@ jobs:
       - name: ☁️ checkout repository
         uses: actions/checkout@v4
 
-      - name: "🔧 setup pnpm"
+      - name: 🔧 setup pnpm
         uses: pnpm/action-setup@v3
         with:
           version: 9
 
-      - name: "🔧 setup node"
+      - name: 🔧 setup node
         uses: actions/setup-node@v4
         with:
           node-version: 20
@@ -74,36 +74,4 @@ jobs:
         uses: google/wireit@setup-github-actions-caching/v2
 
       - name: 🧪 run tests
-        run: |
-          pnpm test | tee output.log
-          if grep -q -e "Error: A snapshot doesn't exist at" -e "Screenshot comparison failed" output.log; then
-            echo "Playwright tests failed due to a snapshot issue."
-            echo "SNAPSHOT_DIFFERENCES=true" >> $GITHUB_ENV
-            exit 1
-          elif grep -q "failed" output.log; then
-            echo "Playwright tests failed due to a non-snapshot issue."
-            exit 1
-          fi
-
-      - name: 🗄️ archive artifacts
-        uses: actions/upload-artifact@v4
-        id: artifact-upload
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report
-          path: packages/web-components/playwright-report/
-          retention-days: 30
-
-      - name: ✍️ comment on PR with report link
-        uses: thollander/actions-comment-pull-request@v3
-        if: ${{ failure() && env.SNAPSHOT_DIFFERENCES == 'true' }}
-        with:
-          message: |
-            > [!CAUTION]
-            > Playwright visual snapshot differences were detected.
-            > You can download the [report](${{ steps.artifact-upload.outputs.artifact-url }}) file.
-
-            To approve the snapshot changes and update the snapshots, please comment:
-            ```
-            /approve-snapshots
-            ```
+        run: pnpm test

packages/web-components/playwright.config.ts

@@ -6,19 +6,19 @@ export default defineConfig({
   retries: process.env.CI ? 2 : undefined,
   forbidOnly: !!process.env.CI,
   reporter: process.env.CI
-    ? [["github"], ["html", { open: "never" }]]
+    ? [["github"]]
     : [["list"], ["html", { open: "never" }]],
   projects: [
     {
-      name: "💻 Desktop",
+      name: "desktop",
       use: devices["Desktop Chrome"],
     },
     // {
-    //   name: "📱 iOS",
+    //   name: "iOS",
     //   use: devices["iPhone X"],
     // },
     {
-      name: "📱 Android",
+      name: "android",
       use: devices["Galaxy S9+"],
     },
   ],
@@ -35,4 +35,10 @@ export default defineConfig({
       timeout: 1000,
     },
   },
+  snapshotPathTemplate: `{testDir}/{testFileDir}/test-snapshots/{arg}{ext}`,
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixels: 100,
+    },
+  },
 });

packages/web-components/src/button/icon-button/icon-button.test.ts

@@ -198,4 +198,50 @@ describe("🧩 icon-button", () => {
     await expect(spinner).toBeVisible();
     await expect(root).toHaveAttribute("aria-busy", "true");
   });
+
+  test("📸 should have correct ui in different variants, sizes and loading states", async ({
+    page,
+  }) => {
+    const sizeValues = ["sm", "md", "lg"];
+    const loadingValues = [true, false];
+    const variantValues = [
+      "primary",
+      "ghost",
+      "naked",
+      "elevated",
+      "destructive",
+      "brand",
+    ];
+
+    for (const variant of variantValues) {
+      for (const size of sizeValues) {
+        for (const loading of loadingValues) {
+          await render(
+            page,
+            `
+            <tapsi-icon-button
+              label="test-button"
+              data-testid="test-button"
+              variant="${variant}"
+              size="${size}"
+              ${loading ? "loading" : ""}
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.9996 22C10.7496 22 9.57878 21.7625 8.48711 21.2875C7.39544 20.8125 6.44544 20.1708 5.63711 19.3625C4.82878 18.5541 4.18711 17.6041 3.71211 16.5125C3.23711 15.4208 2.99961 14.25 2.99961 13C2.99961 11.75 3.23711 10.5791 3.71211 9.48748C4.18711 8.39581 4.82878 7.44581 5.63711 6.63748C6.44544 5.82914 7.39544 5.18748 8.48711 4.71248C9.57878 4.23748 10.7496 3.99998 11.9996 3.99998C13.2496 3.99998 14.4204 4.23748 15.5121 4.71248C16.6038 5.18748 17.5538 5.82914 18.3621 6.63748C19.1704 7.44581 19.8121 8.39581 20.2871 9.48748C20.7621 10.5791 20.9996 11.75 20.9996 13C20.9996 14.25 20.7621 15.4208 20.2871 16.5125C19.8121 17.6041 19.1704 18.5541 18.3621 19.3625C17.5538 20.1708 16.6038 20.8125 15.5121 21.2875C14.4204 21.7625 13.2496 22 11.9996 22ZM14.7996 17.2L16.1996 15.8L12.9996 12.6V7.99998H10.9996V13.4L14.7996 17.2ZM5.59961 2.34998L6.99961 3.74998L2.74961 7.99998L1.34961 6.59998L5.59961 2.34998ZM18.3996 2.34998L22.6496 6.59998L21.2496 7.99998L16.9996 3.74998L18.3996 2.34998ZM11.9996 20C13.9496 20 15.6038 19.3208 16.9621 17.9625C18.3204 16.6041 18.9996 14.95 18.9996 13C18.9996 11.05 18.3204 9.39581 16.9621 8.03748C15.6038 6.67914 13.9496 5.99998 11.9996 5.99998C10.0496 5.99998 8.39544 6.67914 7.03711 8.03748C5.67878 9.39581 4.99961 11.05 4.99961 13C4.99961 14.95 5.67878 16.6041 7.03711 17.9625C8.39544 19.3208 10.0496 20 11.9996 20Z" fill="currentColor"/>
+              </svg>
+            </tapsi-icon-button>
+            `,
+          );
+          const component = page.getByTestId("test-button");
+
+          const screenshot = `${["icon-button", size, variant, loading && "loading"].filter(Boolean).join("_")}.png`;
+
+          await expect(component).toHaveScreenshot(screenshot, {
+            animations: "disabled", // we disable animations because of the spinner
+            omitBackground: true,
+          });
+        }
+      }
+    }
+  });
 });

packages/web-components/src/button/standard/button.test.ts

@@ -210,4 +210,48 @@
     await expect(spinner).toBeVisible();
     await expect(root).toHaveAttribute("aria-busy", "true");
   });
+
+  test("📸 should have correct ui in different variants, sizes and loading states", async ({
+    page,
+  }) => {
+    const sizeValues = ["sm", "md", "lg"];
+    const loadingValues = [true, false];
+    const variantValues = [
+      "primary",
+      "ghost",
+      "naked",
+      "elevated",
+      "destructive",
+      "brand",
+    ];
+
+    for (const variant of variantValues) {
+      for (const size of sizeValues) {
+        for (const loading of loadingValues) {
+          await render(
+            page,
+            `
+            <tapsi-button
+              label="test-button"
+              data-testid="test-button"
+              variant="${variant}"
+              size="${size}"
+              ${loading ? "loading" : ""}
+            >
+              عنوان
+            </tapsi-button>
+            `,
+          );
+          const component = page.getByTestId("test-button");
+
+          const screenshot = `${["button", size, variant, loading && "loading"].filter(Boolean).join("_")}.png`;
+
+          await expect(component).toHaveScreenshot(screenshot, {
+            animations: "disabled", // we disable animations because of the spinner
+            omitBackground: true,
+          });
+        }
+      }
+    }
+  });
 });