Add support for end-to-end tests via cypress

.github/workflows/ci.yml

@@ -9,30 +9,53 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: ['18']
     steps:
-      - name: Check out code
+      - name: Checkout
         uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v2
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
         with:
           version: 8
-
-      - name: Setup Node ${{ matrix.node-version }}
+          run_install: false
+      - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: '18'
           cache: 'pnpm'
-
       - run: pnpm install
-      - run: make pkgs-build
+      - 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:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'pnpm'
+      - name: Cypress install
+        uses: cypress-io/github-action@v5
+        with:
+          runTests: false
+      - name: Build nivo packages
+        run: make pkgs-build
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          install: false
+          component: true
+          command: make end-to-end-test

.gitignore

@@ -26,4 +26,6 @@ build
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+cypress/cypress/videos

Makefile

@@ -2,7 +2,7 @@ MAKEFLAGS += --no-print-directory
 
 SOURCES = packages
 
-.PHONY: help bootstrap init pkgs-build pkgs-publish clean-all website-install website website-build website-deploy storybook storybook-build storybook-deploy deploy-all
+.PHONY: help bootstrap init pkgs-build pkgs-publish clean-all website-install website website-build website-deploy storybook storybook-build storybook-deploy deploy-all e2e-open
 
 ########################################################################################################################
 #
@@ -39,7 +39,7 @@ help: ##prints help
 
 ########################################################################################################################
 #
-# GLOBAL
+# 0. GLOBAL
 #
 ########################################################################################################################
 
@@ -60,6 +60,7 @@ fmt: ##@0 global format code using prettier (js, css, md)
 		"api/**/*.{js,ts,tsx}" \
 		"storybook/.storybook/*.{js,ts,tsx}" \
 		"storybook/stories/**/*.{js,ts,tsx}" \
+		"cypress/src/**/*.{js,ts,tsx}" \
 		"README.md"
 
 fmt-check: ##@0 global check if files were all formatted using prettier
@@ -72,14 +73,15 @@ fmt-check: ##@0 global check if files were all formatted using prettier
 		"api/**/*.{js,ts,tsx}" \
 		"storybook/.storybook/*.{js,ts,tsx}" \
 		"storybook/stories/**/*.{js,ts,tsx}" \
+		"cypress/src/**/*.{js,ts,tsx}" \
         "README.md"
 
 test: ##@0 global run all checks/tests (packages, website)
 	@$(MAKE) fmt-check
 	@$(MAKE) lint
 	@$(MAKE) pkgs-test
 
-vercel-build: ##@0 Build the website and storybook to vercel
+vercel-build: ##@0 global Build the website and storybook to vercel
 	@$(MAKE) website-build
 	@$(MAKE) storybook-build
 	@cp -a storybook/storybook-static website/public/storybook
@@ -107,7 +109,7 @@ endef
 
 ########################################################################################################################
 #
-# PACKAGES
+# 1. PACKAGES
 #
 ########################################################################################################################
 
@@ -150,30 +152,28 @@ pkgs-test-cover: ##@1 packages run tests for all packages with code coverage
 	@echo "${YELLOW}Running test suites coverage for all packages${RESET}"
 	@export BABEL_ENV=development; pnpm jest -c ./packages/jest.config.js --rootDir . --coverage ./packages/*/tests
 
-pkgs-types: ##@1 packages build all package types
-	@echo "${YELLOW}Building TypeScript types for all packages${RESET}"
-	@pnpm tsc -b ./tsconfig.monorepo.json
-
 pkgs-build: pkgs-types ##@1 packages build all packages
-	@echo "${YELLOW}Building all packages${RESET}"
 	@# Using exit code 255 in case of error as it'll make xargs stop immediately.
-	@find ./packages -type d -maxdepth 1 ! -path ./packages \
+	@export SKIP_TYPES=TRUE;find ./packages -type d -maxdepth 1 ! -path ./packages \
         | sed 's|^./packages/||' \
-        | xargs -I '{}' sh -c '$(MAKE) pkg-build-{} || exit 255'
+        | xargs -P 8 -I '{}' sh -c '$(MAKE) pkg-build-{} || exit 255'
+
+pkgs-types: ##@1 packages build all package types
+	@pnpm tsc -b ./tsconfig.monorepo.json
 
-pkg-types-%: ##@1 packages build a package types
-	@if [ -f "./packages/${*}/tsconfig.json" ]; \
+pkg-types-%: ##@1 packages generate types for a specific package
+	@if [ "$${SKIP_TYPES}" != "TRUE" ]; \
     then \
-        echo "${YELLOW}Building TypeScript types for package ${WHITE}@nivo/${*}${RESET}"; \
-        rm -rf ./packages/${*}/dist/types; \
-        rm -rf ./packages/${*}/dist/tsconfig.tsbuildinfo; \
-        pnpm tsc -b ./packages/${*}; \
-    else \
-        echo "${YELLOW}Package ${WHITE}@nivo/${*}${RESET}${YELLOW} does not have tsconfig, skipping"; \
-    fi;
+        if [ -f "./packages/${*}/tsconfig.json" ]; \
+		then \
+			echo "${YELLOW}Building TypeScript types for package ${WHITE}@nivo/${*}${RESET}"; \
+			rm -rf ./packages/${*}/dist/types; \
+			rm -rf ./packages/${*}/dist/tsconfig.tsbuildinfo; \
+			pnpm tsc -b ./packages/${*}; \
+        fi \
+	fi;
 
 pkg-build-%: pkg-types-% ##@1 packages build a package
-	@echo "${YELLOW}Building package ${WHITE}@nivo/${*}${RESET}"
 	@-rm -rf ./packages/${*}/dist/nivo-${*}*
 	@export PACKAGE=${*}; NODE_ENV=production BABEL_ENV=production ./node_modules/.bin/rollup -c conf/rollup.config.mjs
 
@@ -199,7 +199,7 @@ pkg-dev-%: ##@1 packages build package (es flavor) on change, eg. `package-watch
 
 ########################################################################################################################
 #
-# WEBSITE
+# 2. WEBSITE
 #
 ########################################################################################################################
 
@@ -236,7 +236,7 @@ website-sprites: ##@2 website build sprite sheet
 
 ########################################################################################################################
 #
-# STORYBOOK
+# 3. STORYBOOK
 #
 ########################################################################################################################
 
@@ -253,9 +253,23 @@ storybook-deploy: ##@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
 
+
+########################################################################################################################
+#
+# 4. End-to-end tests
+#
+########################################################################################################################
+
+end-to-end-open: ##@4 end-to-end open cypress
+	pnpm --filter nivo-e2e open
+
+end-to-end-test: ##@4 end-to-end build
+	pnpm --filter nivo-e2e test
+
+
 ########################################################################################################################
 #
-# API
+# 5. API
 #
 ########################################################################################################################
 
@@ -270,5 +284,5 @@ api: ##@5 API run API in regular mode (no watcher)
 api-lint: ##@5 API run eslint on the API code
 	@pnpm eslint ./api/src
 
-api-deploy: ##@5 Deploy API on heroku
+api-deploy: ##@5 API Deploy API on heroku
 	git subtree push --prefix api heroku master

cypress/cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+    component: {
+        devServer: {
+            framework: 'create-react-app',
+            bundler: 'webpack',
+        },
+        video: false,
+    },
+})

cypress/cypress.d.ts

@@ -0,0 +1,13 @@
+import { mount } from 'cypress/react'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            mount: typeof mount
+        }
+    }
+}

cypress/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/cypress/support/component.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "nivo-e2e",
+  "version": "0.81.0",
+  "private": true,
+  "description": "nivo end-to-end tests",
+  "dependencies": {
+    "@nivo/arcs": "workspace:*",
+    "@nivo/axes": "workspace:*",
+    "@nivo/bar": "workspace:*",
+    "@nivo/boxplot": "workspace:*",
+    "@nivo/bullet": "workspace:*",
+    "@nivo/bump": "workspace:*",
+    "@nivo/calendar": "workspace:*",
+    "@nivo/chord": "workspace:*",
+    "@nivo/circle-packing": "workspace:*",
+    "@nivo/colors": "workspace:*",
+    "@nivo/core": "workspace:*",
+    "@nivo/funnel": "workspace:*",
+    "@nivo/generators": "workspace:*",
+    "@nivo/geo": "workspace:*",
+    "@nivo/heatmap": "workspace:*",
+    "@nivo/legends": "workspace:*",
+    "@nivo/line": "workspace:*",
+    "@nivo/marimekko": "workspace:*",
+    "@nivo/network": "workspace:*",
+    "@nivo/parallel-coordinates": "workspace:*",
+    "@nivo/pie": "workspace:*",
+    "@nivo/radar": "workspace:*",
+    "@nivo/radial-bar": "workspace:*",
+    "@nivo/sankey": "workspace:*",
+    "@nivo/scales": "workspace:*",
+    "@nivo/scatterplot": "workspace:*",
+    "@nivo/stream": "workspace:*",
+    "@nivo/sunburst": "workspace:*",
+    "@nivo/swarmplot": "workspace:*",
+    "@nivo/treemap": "workspace:*",
+    "@nivo/voronoi": "workspace:*",
+    "@nivo/waffle": "workspace:*"
+  },
+  "scripts": {
+    "open": "cypress open",
+    "test": "cypress run --component"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "cypress": "^12.11.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.9.5",
+    "react-scripts": "^5.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}