Add base styles visual tests for button

.github/workflows/visual-tests.yml

@@ -6,6 +6,42 @@ permissions:
   contents: read
 
 jobs:
+  base:
+    name: Base
+    runs-on: ubuntu-22.04
+    if: github.repository_owner == 'vaadin'
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: '0'
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install Dependencies
+        run: yarn --frozen-lockfile --no-progress --non-interactive
+
+      - name: Visual tests
+        uses: nick-fields/retry@v3
+        env:
+          SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
+          SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+        with:
+          timeout_minutes: 20
+          retry_wait_seconds: 60
+          max_attempts: 3
+          command: yarn test:base
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: screenshots
+          path: |
+            packages/*/test/visual/base/screenshots/*/failed/*.png
   lumo:
     name: Lumo
     runs-on: ubuntu-22.04

package.json

@@ -22,10 +22,12 @@
     "test": "node scripts/generateLitTests.js && web-test-runner",
     "test:firefox": "yarn test --config web-test-runner-firefox.config.js",
     "test:it": "yarn test --config web-test-runner-it.config.js",
+    "test:base": "yarn test --config web-test-runner-base.config.js",
     "test:lumo": "yarn test --config web-test-runner-lumo.config.js",
     "test:material": "yarn test --config web-test-runner-material.config.js",
     "test:snapshots": "yarn test --config web-test-runner-snapshots.config.js",
     "test:webkit": "yarn test --config web-test-runner-webkit.config.js",
+    "update:base": "TEST_ENV=update yarn test --config web-test-runner-base.config.js",
     "update:lumo": "TEST_ENV=update yarn test --config web-test-runner-lumo.config.js",
     "update:material": "TEST_ENV=update yarn test --config web-test-runner-material.config.js",
     "update:snapshots": "yarn test --config web-test-runner-snapshots.config.js --update-snapshots"

packages/button/test/visual/base/button.test.js

@@ -0,0 +1,53 @@
+import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
+import { fixtureSync, mousedown } from '@vaadin/testing-helpers';
+import { visualDiff } from '@web/test-runner-visual-regression';
+import '../../../src/vaadin-lit-button.js';
+
+describe('button', () => {
+  let div, element;
+
+  beforeEach(() => {
+    div = document.createElement('div');
+    div.style.display = 'inline-block';
+    div.style.padding = '10px';
+    element = fixtureSync('<vaadin-button>Button</vaadin-button>', div);
+  });
+
+  afterEach(async () => {
+    await resetMouse();
+  });
+
+  ['basic', 'primary', 'tertiary'].forEach((variant) => {
+    describe(variant, () => {
+      beforeEach(() => {
+        if (variant !== 'basic') {
+          element.setAttribute('theme', variant);
+        }
+      });
+
+      it('default', async () => {
+        await visualDiff(div, `${variant}-default`);
+      });
+
+      it('active', async () => {
+        mousedown(element);
+        await visualDiff(div, `${variant}-active`);
+      });
+
+      it('hover', async () => {
+        await sendMouseToElement({ type: 'move', element });
+        await visualDiff(div, `${variant}-hover`);
+      });
+
+      it('focus-ring', async () => {
+        await sendKeys({ press: 'Tab' });
+        await visualDiff(div, `${variant}-focus-ring`);
+      });
+
+      it('disabled', async () => {
+        element.disabled = true;
+        await visualDiff(div, `${variant}-disabled`);
+      });
+    });
+  });
+});

web-test-runner-base.config.js

@@ -0,0 +1,4 @@
+/* eslint-env node */
+const { createVisualTestsConfig } = require('./wtr-utils.js');
+
+module.exports = createVisualTestsConfig('base', '135');

wtr-utils.js

@@ -217,7 +217,7 @@ const getScreenshotFileName = ({ name, testFile }, type, diff) => {
     folder = 'icons/test/visual/screenshots';
   } else {
     const match = testFile.match(/\/packages\/(.+)\.test\.(js|ts)/u);
-    folder = match[1].replace(/(lumo|material)/u, '$1/screenshots');
+    folder = match[1].replace(/(base|lumo|material)/u, '$1/screenshots');
   }
   return path.join(folder, type, diff ? `${name}-diff` : name);
 };