feat(storybook): run storybook tests on CI

Author: plouc

.github/workflows/ci.yml .github/workflows/end-to-end-tests.yml.github/workflows/ci.yml renamed to .github/workflows/end-to-end-tests.yml

@@ -1,4 +1,4 @@
-name: CI
+name: 'End-to-End Tests'
 
 on:
   push:
@@ -7,31 +7,7 @@ on:
     types: [opened, synchronize]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          run_install: false
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'pnpm'
-      - run: pnpm install
-      - name: Build nivo packages
-        run: make pkgs-build
-      - run: make pkgs-lint
-      - run: make pkgs-test
-      # Make sure that we can build the website
-      - run: make website-build
-      # Make sure that we can build storybook
-      - run: make storybook-build
-
-  end-to-end-tests:
+  test:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
@@ -43,7 +19,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
       - name: Cypress install
         uses: cypress-io/github-action@v6

.github/workflows/storybook-tests.yml

@@ -0,0 +1,30 @@
+name: 'Storybook Tests'
+
+on:
+  push:
+    branches: ['master']
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - name: Install dependencies & build packages
+        run: make init
+      - name: Build Storybook
+        run: make storybook-build
+      - name: Serve Storybook and run tests
+        run: make storybook-test-ci

.github/workflows/tests.yml

@@ -0,0 +1,30 @@
+name: Tests
+
+on:
+  push:
+    branches: ['master']
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - run: pnpm install
+      - name: Build nivo packages
+        run: make pkgs-build
+      - run: make pkgs-lint
+      - run: make pkgs-test
+      # Make sure that we can build the website
+      - run: make website-build

Makefile

@@ -50,6 +50,7 @@ init: ##@0 global cleanup/install/bootstrap
 	@$(MAKE) clean-all
 	@$(MAKE) install
 	@$(MAKE) pkgs-build
+	@$(MAKE) storybook-playwright-install
 
 fmt: ##@0 global format code using prettier (js, css, md)
 	@pnpm prettier --color --write \
@@ -91,13 +92,13 @@ vercel-build: ##@0 global Build the website and storybook to vercel
 	@cp -a storybook/storybook-static website/public/storybook
 
 clean-all: ##@0 global uninstall node modules, remove transpiled code & lock files
-	rm -rf node_modules
-	rm -rf package-lock.json
-	$(foreach source, $(SOURCES), $(call clean-source-all, $(source)))
-	rm -rf website/node_modules
-	rm -rf website/package-lock.json
-	rm -rf api/node_modules
-	rm -rf api/package-lock.json
+	@rm -rf node_modules
+	@rm -rf package-lock.json
+	@$(foreach source, $(SOURCES), $(call clean-source-all, $(source)))
+	@rm -rf website/node_modules
+	@rm -rf website/package-lock.json
+	@rm -rf api/node_modules
+	@rm -rf api/package-lock.json
 
 define clean-source-lib
 	rm -rf $(1)/*/cjs
@@ -269,16 +270,27 @@ website-sprites: ##@2 website build sprite sheet
 storybook: ##@3 storybook start storybook in dev mode on port 6006
 	@pnpm --filter storybook dev
 
+storybook-test: ##@3 storybook test storybook stories
+	@echo "${YELLOW}Testing storybook${RESET}"
+	@pnpm --filter storybook test
+
 storybook-build: ##@3 storybook build storybook
 	@echo "${YELLOW}Building storybook${RESET}"
 	@pnpm --filter storybook build
 
-storybook-deploy: ##@3 storybook build and deploy storybook
-	@$(MAKE) storybook-build
-
+storybook-deploy: storybook-build ##@3 storybook build and deploy storybook
 	@echo "${YELLOW}Deploying storybook${RESET}"
 	@pnpm gh-pages -d storybook/storybook-static -r [email protected]:plouc/nivo.git -b gh-pages -e storybook
 
+storybook-playwright-install: ##@3 storybook install playwright
+	@echo "${YELLOW}Installing playwright${RESET}"
+	@pnpm pnpm exec playwright install chromium
+
+storybook-test-ci: ##@3 start storybook & run playwright tests
+	@echo "${YELLOW}Start storybook and run playwright tests${RESET}"
+	@npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+        "npx http-server storybook/storybook-static --port 6006 --silent" \
+        "npx wait-on tcp:127.0.0.1:6006 && make storybook-test"
 
 ########################################################################################################################
 #

package.json

@@ -38,6 +38,7 @@
     "babel-loader": "^8.2.3",
     "chalk": "^5.2.0",
     "chalk-template": "^1.0.0",
+    "concurrently": "^9.1.2",
     "cypress": "^12.11.0",
     "enzyme": "^3.11.0",
     "eslint": "^8.39.0",
@@ -49,11 +50,13 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "gh-pages": "^5.0.0",
+    "http-server": "^14.1.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jsdom": "^22.0.0",
     "lerna": "^6.6.1",
     "lodash": "^4.17.21",
+    "playwright": "^1.52.0",
     "prettier": "^2.8.8",
     "puppeteer": "^19.11.1",
     "raf": "^3.4.1",
@@ -68,6 +71,7 @@
     "rollup-plugin-visualizer": "^5.5.2",
     "serve": "^13.0.2",
     "typescript": "^4.9.5",
+    "wait-on": "^8.0.3",
     "yargs": "^17.7.2"
   },
   "resolutions": {