Testing setup

.github/workflows/test-playwright.yml

@@ -0,0 +1,76 @@
+name: Visual Regression Tests
+
+on:
+  pull_request:
+    branches:
+      - patch
+
+concurrency: ${{ github.workflow }}-${{ github.ref || github.run_id }}
+
+jobs:
+  visual-tests:
+    name: Test for all components' default story
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install Dependencies and build the project
+        run: |
+          yarn
+          yarn playwright install --with-deps
+          yarn build
+
+      - name: Create storybook build
+        run: |
+          cd example/storybook
+          yarn build-storybook
+
+      - name: Run test
+        run: |
+          cd example/storybook
+          yarn test:screenshot
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: example/storybook/playwright-report/
+          overwrite: true
+          retention-days: 10
+
+      - name: Download artifact
+        if: failure()
+        uses: actions/download-artifact@v2
+        with:
+          name: playwright-report
+
+      - name: Extract files
+        if: failure()
+        run: unzip playwright-report.zip
+
+      - name: Push to GitHub Pages
+        if: failure()
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./playwright-report
+
+      - name: Comment PR
+        if: failure()
+        uses: actions/github-script@v4
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const issueComment = `Playwright report is available [here](https://${{ github.repository }}.github.io/playwright-report/index.html)`
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: issueComment,
+            })

example/storybook/.gitignore

@@ -16,4 +16,10 @@ lib
 .DS_Store
 
 #build
-storybook-static/
+storybook-static/
+/test-results/
+/blob-report/
+
+#test-playwright
+/playwright-report
+/playwright/.cache/``

example/storybook/README.md

@@ -33,3 +33,31 @@ Note that this is only necessary for when you add or remove a story file.
 ```
 yarn storybook
 ```
+
+# Testing
+
+You need to install the playwright browsers using this
+
+```
+yarn playwright install --with-deps
+```
+
+Then you need create the storybook build using
+
+```
+yarn build-storybook
+```
+
+Then you can run the tests like this
+
+```
+yarn test:screenshot --componentName
+```
+
+it takes 2 extra agruments like
+
+```
+--componentName=single
+and
+--componentName=multiple
+```

example/storybook/__visualTests__/example.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+test('has box', async ({ page }) => {
+  // await page.goto('http://localhost:6007/?path=/story/stories-layout-box--box');
+  await page.goto(
+    'http://localhost:6007/iframe.html?args=&id=stories-layout-box--box&viewMode=story'
+  );
+  expect(await page.screenshot()).toMatchSnapshot();
+
+  // Expect a title "to contain" a substring.
+  // await expect(page).toHaveTitle(/Playwright/);
+});
+
+// test('get started link', async ({ page }) => {
+//   await page.goto('https://playwright.dev/');
+
+//   // Click the get started link.
+//   await page.getByRole('link', { name: 'Get started' }).click();
+
+//   // Expects the URL to contain intro.
+//   await expect(page).toHaveURL(/.*intro/);
+// });

example/storybook/package.json

@@ -18,7 +18,10 @@
     "build-storybook": "build-storybook",
     "release": "release-it",
     "test": "jest",
-    "update-snapshot": "jest -u"
+    "update-snapshot": "jest -u",
+    "test:screenshot": "node ./tests/scripts/snapshotTest.js",
+    "update:screenshot": "node ./tests/scripts/snapshotUpdate.js",
+    "test:show-report": "yarn playwright show-report"
   },
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
@@ -75,6 +78,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/traverse": "^7.20.13",
     "@babel/types": "^7.20.7",
+    "@playwright/test": "^1.41.0",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-controls": "^6.5.14",
     "@storybook/addon-docs": "^6.5.15",

example/storybook/playwright.config.ts

@@ -0,0 +1,92 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+  // expect: {
+  //   // Maximum time expect() should wait for the condition to be met.
+  //   timeout: 5000,
+
+  //   toHaveScreenshot: {
+  //     // An acceptable amount of pixels that could be different, unset by default.
+  //     maxDiffPixels: 10,
+  //   },
+
+  //   toMatchSnapshot: {
+  //     // An acceptable ratio of pixels that are different to the
+  //     // total amount of pixels, between 0 and 1.
+  //     maxDiffPixelRatio: 0.011,
+  //   },
+  // },
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});