test: add Storybook smoke tests for all 57 stories

- Add @storybook/test-runner with Playwright
- Add test:storybook commands to package.json
- Add test-storybook job to GitHub Actions workflow
- Integrate Storybook tests into validate command
- Fix Tooltip story missing required date prop
- Fix Button import to bypass babel-plugin-import issue

All 57 story suites now pass smoke tests (121 tests total)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: Simon Bigelmayr

.github/workflows/validate.yml

@@ -60,3 +60,22 @@ jobs:
       - run: corepack enable
       - run: yarn install
       - run: yarn run storybook:build
+
+  test-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+      - run: corepack enable
+      - run: yarn install
+      - name: Install Playwright
+        run: npx playwright install --with-deps chromium
+      - name: Build Storybook
+        run: yarn run storybook:build
+      - name: Serve Storybook and run tests
+        run: |
+          npx http-server storybook-static --port 6006 --silent &
+          npx wait-on tcp:6006
+          yarn run test:storybook

package.json

@@ -15,9 +15,10 @@
     "build:es": "rollup --config --bundleConfigAsCjs",
     "build:ts": "tsc --declaration --declarationDir types --emitDeclarationOnly",
     "build": "yarn run build:clean && yarn run build:es && yarn run build:ts",
-    "validate": "yarn run lint && yarn run typecheck && yarn run test",
+    "validate": "yarn run lint && yarn run typecheck && yarn run test && yarn run test:storybook",
     "test": "jest",
     "test:watch": "jest --watch",
+    "test:storybook": "test-storybook",
     "storybook": "storybook dev --port=6006",
     "storybook:build": "storybook build --quiet",
     "typecheck": "tsc --noEmit",
@@ -83,6 +84,7 @@
     "@storybook/addon-docs": "^10.0.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/react-webpack5": "^10.0.5",
+    "@storybook/test-runner": "^0.24.1",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^14.1.2",
@@ -98,6 +100,7 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-import": "^1.13.8",
     "babel-plugin-styled-components": "^2.1.4",
+    "concurrently": "^9.2.1",
     "eslint": "^8.54.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.29.0",
@@ -111,6 +114,7 @@
     "jest-environment-jsdom": "^30.2.0",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
+    "playwright": "^1.56.1",
     "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -130,6 +134,7 @@
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.2",
+    "wait-on": "^9.0.3",
     "webpack": "^5.97.0"
   },
   "packageManager": "[email protected]"

src/Button/ColoredButtons.tsx

@@ -1,4 +1,5 @@
-import { Button as AntdButton, ButtonProps as AntdButtonProps } from 'antd';
+import AntdButton from 'antd/es/button';
+import type { ButtonProps as AntdButtonProps } from 'antd/es/button';
 import ButtonGroup from 'antd/es/button/button-group';
 import * as React from 'react';
 import styled from 'styled-components';

src/Tooltip/index.stories.tsx

@@ -30,6 +30,10 @@ export const TooltipForDate: StoryFn<DateWithTooltipProps> =
     return <DateWithTooltip {...args} />;
   };
 
+TooltipForDate.args = {
+  date: new Date('2024-01-15T10:30:00'),
+};
+
 export const TooltipForTrimmedText: StoryFn<TextWithTooltipIfTrimmedProps> =
   function TooltipForTrimmedText(args) {
     return <TextWithTooltipIfTrimmed {...args} />;