test: add Storybook smoke tests for all 57 stories (#317)

Author: simbig

.github/workflows/format.yml

@@ -1,4 +1,5 @@
 name: "Format"
+
 on:
   push:
 

.github/workflows/release.yml

@@ -1,4 +1,5 @@
 name: "Release"
+
 on:
   push:
     branches:

.github/workflows/show.yml

@@ -1,4 +1,5 @@
 name: "Show"
+
 on:
   push:
     branches:

.github/workflows/validate.yml

@@ -1,4 +1,5 @@
 name: "Validate"
+
 on:
   pull_request:
   push:
@@ -59,4 +60,9 @@ jobs:
           node-version: 22
       - run: corepack enable
       - run: yarn install
+      - run: npx playwright install --with-deps chromium
       - run: yarn run storybook:build
+      - 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",
@@ -111,6 +113,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,7 +133,8 @@
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.2",
+    "wait-on": "^9.0.3",
     "webpack": "^5.97.0"
   },
-  "packageManager": "yarn@4.10.3"
+  "packageManager": "yarn@4.12.0"
 }

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} />;