Upgrade storybook

.github/workflows/ci.yml

@@ -6,44 +6,48 @@ on:
   pull_request:
     types: [opened, synchronize]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
-  build:
+  test:
+    name: Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        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: '22'
+          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
-      # Make sure that we can build storybook
-      - run: make storybook-build
+      - name: Build the website
+        run: make website-build
 
-  end-to-end-tests:
+  end_to_end:
+    name: End-to-End Tests
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        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: '22'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
       - name: Cypress install
         uses: cypress-io/github-action@v6
@@ -57,3 +61,25 @@ jobs:
           install: false
           component: true
           command: make end-to-end-test
+
+  storybook_tests:
+    name: Storybook Tests
+    runs-on: ubuntu-22.04
+    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

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": {

packages/bar/src/BarItem.tsx

@@ -105,6 +105,7 @@ export const BarItem = <RawDatum extends BarDatum>({
                 onClick={isInteractive ? handleClick : undefined}
                 onFocus={isInteractive && isFocusable ? handleFocus : undefined}
                 onBlur={isInteractive && isFocusable ? handleBlur : undefined}
+                data-testid={`bar.item.${data.id}.${data.index}`}
             />
             {shouldRenderLabel && (
                 <Text
@@ -115,6 +116,7 @@ export const BarItem = <RawDatum extends BarDatum>({
                     fillOpacity={labelOpacity}
                     style={{
                         ...theme.labels.text,
+                        // We don't want the label to intercept mouse events
                         pointerEvents: 'none',
                         fill: labelColor,
                     }}

packages/tooltip/src/BasicTooltip.tsx

@@ -42,6 +42,10 @@ export const BasicTooltip = memo<BasicTooltipProps>(
             )
         }
 
-        return <div style={theme.tooltip.container}>{content}</div>
+        return (
+            <div style={theme.tooltip.container} role="tooltip">
+                {content}
+            </div>
+        )
     }
 )