chore: setup workflow for updating Playwright screenshots (#16)

The new workflow has to be triggered manually. It will then update all
screenshots and create a PR targeting the selected branch.

Successfull test workflow run can be found
[here](https://github.com/SchwarzIT/onyx/actions/runs/7394540946/job/20116073512).

.github/workflows/playwright-screenshots.yml

@@ -0,0 +1,45 @@
+name: Update Playwright screenshots
+on:
+  workflow_dispatch:
+
+jobs:
+  update:
+    name: Update Playwright screenshots
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .node-version
+          cache: pnpm
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      # install system dependencies for Playwright
+      # see: https://playwright.dev/python/docs/browsers#install-system-dependencies
+      - name: 📦 Install Playwright system dependencies
+        run: pnpm exec playwright install-deps
+        working-directory: packages/sit-onyx
+
+      - name: 🗑️ Delete existing screenshots
+        run: rm -rf ./playwright/snapshots
+        working-directory: packages/sit-onyx
+
+      - name: 🔎 Update Playwright screenshots
+        run: pnpm run test:components --update-snapshots
+        working-directory: packages/sit-onyx
+
+      - name: Create pull request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          commit-message: "chore: update Playwright screenshots"
+          title: "chore: update Playwright screenshots"
+          body: This is an auto-generated pull request. All Playwright screenshots have been updated.
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH_NAME: ${{ github.ref_name }}

.prettierignore

@@ -1,3 +1,4 @@
 # Prettier ignores all files inside .gitignore by default so this file only contains
 # files that are checked into git but should not be formatted
-pnpm-lock.yaml
+pnpm-lock.yaml
+CODEOWNERS

CODEOWNERS

@@ -1 +1,6 @@
-* @JoCa96 @BoppLi @larsrickert
+# Global code owners (developers)
+* @JoCa96 @BoppLi @larsrickert
+
+# Define designers as code owners for screenshots to automatically
+# request them as reviewer if visual changes exist
+/packages/sit-onyx/playwright/snapshots/ @jannick-ux @martihofmann

packages/sit-onyx/playwright.config.ts

@@ -8,6 +8,11 @@ import { fileURLToPath } from "node:url";
 export default defineConfig({
   testDir: "./src/components",
   snapshotDir: "./playwright/snapshots",
+  // custom snapshotPathTemplate to remove the testFileName folder that we don't want
+  snapshotPathTemplate: "{snapshotDir}/{testFileDir}/{arg}-{projectName}-{platform}{ext}",
+  // we don't want to update snapshots on the local machine of each developer.
+  // if you want to update snapshots for your branch, use the corresponding GitHub action.
+  updateSnapshots: "none",
   timeout: 10 * 1000,
   fullyParallel: true,
   forbidOnly: !!process.env.CI, // fail build on CI if we left test.only in the source code

packages/sit-onyx/src/components/TestInput/TestInput.spec.tsx

@@ -4,4 +4,5 @@ import TestInput from "./TestInput.vue";
 test("should display label", async ({ mount }) => {
   const component = await mount(<TestInput label="Hello World" />);
   await expect(component).toContainText("Hello World");
+  await expect(component).toHaveScreenshot("default.png");
 });

packages/sit-onyx/src/components/TestInput/TestInput.vue

@@ -34,7 +34,7 @@ const handleChange = (event: Event) => {
 </script>
 
 <template>
-  <label>
+  <label class="input">
     <span class="input__label" :class="{ 'input__label--required': props.required }">
       {{ props.label }}
     </span>
@@ -45,6 +45,9 @@ const handleChange = (event: Event) => {
 
 <style lang="scss" scoped>
 .input {
+  width: max-content;
+  display: inline-block;
+
   &__label {
     margin-right: 8px;