@nivo/tree

.github/workflows/ci.yml

@@ -54,7 +54,7 @@ jobs:
       - name: Build nivo packages
         run: make pkgs-build
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           install: false
           component: true

CONTRIBUTING.md

@@ -28,11 +28,12 @@ the various packages, please execute the following:
 make init
 ```
 
-> please note that it will take a while as this project uses a lot of dependencies…'
+> please note that it will take a while as this project uses a lot of dependencies…
 
 ### Windows
 
-If you want to build this project on Windows, it is recommended to use either WSL 2, or Git bash + `choco install make`.
+If you want to build this project on Windows, it is recommended to use either WSL 2,
+or Git bash + `choco install make`.
 
 ## Development
 
@@ -77,6 +78,13 @@ You can also build the packages without running a watcher, you have two options:
 
 ### Testing
 
+#### Unit tests
+
+Unit tests for each package are located in the `packages/<pkg>/tests` folder, we're using jest
+as a test running and `react-test-renderer` as a testing library, some tests are still using
+`enzyme`, but this lib is not maintained anymore and doesn't support newer versions of React,
+so those should eventually be migrated.
+
 To run unit tests on all packages, run the following command:
 
 ```
@@ -92,6 +100,14 @@ make pkg-test-bar
 
 where `bar` is the name of the targeted nivo package.
 
+#### End-to-end tests
+
+Sometimes it's difficult to test certain things in unit tests, from our experience, animations
+and interactions can be tricky to test via unit tests only, so we also try to have end-to-end tests.
+
+We're using `cypress` for writing such tests, and those are located in the `cypress/src/components`
+folder, as we introduced end-to-end tests later, not all packages have some.
+
 ### Formatting
 
 Nivo uses prettier in order to provide a consistent code style.

Makefile

@@ -61,6 +61,8 @@ fmt: ##@0 global format code using prettier (js, css, md)
 		"storybook/.storybook/*.{js,ts,tsx}" \
 		"storybook/stories/**/*.{js,ts,tsx}" \
 		"cypress/src/**/*.{js,ts,tsx}" \
+		"scripts/*.{js,mjs}" \
+		"cypress/src/**/*.{js,tsx}" \
 		"README.md"
 
 fmt-check: ##@0 global check if files were all formatted using prettier
@@ -74,6 +76,8 @@ fmt-check: ##@0 global check if files were all formatted using prettier
 		"storybook/.storybook/*.{js,ts,tsx}" \
 		"storybook/stories/**/*.{js,ts,tsx}" \
 		"cypress/src/**/*.{js,ts,tsx}" \
+		"scripts/*.{js,mjs}" \
+		"cypress/src/**/*.{js,tsx}" \
         "README.md"
 
 test: ##@0 global run all checks/tests (packages, website)
@@ -203,11 +207,22 @@ pkgs-publish-next: ##@1 packages publish all packages for @next npm tag
 	@echo "${YELLOW}Publishing packages${RESET}"
 	@pnpm lerna publish --exact --npm-tag=next
 
-pkg-dev-%: ##@1 packages build package (es flavor) on change, eg. `package-watch-bar`
+pkg-dev-%: ##@1 packages build package (es flavor) on change, eg. `pkg-dev-bar`
 	@echo "${YELLOW}Running build watcher for package ${WHITE}@nivo/${*}${RESET}"
 	@rm -rf ./packages/${*}/cjs
 	@export PACKAGE=${*}; NODE_ENV=development BABEL_ENV=development ./node_modules/.bin/rollup -c conf/rollup.config.mjs -w
 
+pkg-icons-%: ##@1 capture packages icons for the website, eg. `pkg-icons-bar`
+	./scripts/capture.mjs icons --pkg ${*}
+	@$(MAKE) website-sprites
+
+pkg-previews-%: ##@1 capture packages previews for readmes, eg. `pkg-previews-bar`
+	./scripts/capture.mjs charts --pkg ${*}
+
+pkg-capture-%: ##@1 capture packages previews and icons, eg. `pkg-capture-bar`
+	./scripts/capture.mjs all --pkg ${*}
+	@$(MAKE) website-sprites
+
 ########################################################################################################################
 #
 # 2. WEBSITE

api/package.json

@@ -16,7 +16,7 @@
     },
     "engineStrict": true,
     "engines": {
-        "node": ">=16"
+        "node": ">=18"
     },
     "devDependencies": {
         "nodemon": "^2.0.22"
@@ -39,7 +39,7 @@
         "winston": "3.3.3"
     },
     "scripts": {
-        "start": "yarn build && node app.js",
+        "start": "npm run build && node app.js",
         "dev": "nodemon app.ts",
         "build": "tsc"
     },

conf/base.yaml

@@ -1,4 +1,4 @@
-baseUrl: http://localhost:9000
+baseUrl: http://localhost:8000
 capture:
     pages:
       - id: home
@@ -57,6 +57,10 @@ capture:
         chart: bar
         flavors: [svg, canvas]
 
+      - pkg: bullet
+        chart: bullet
+        flavors: [ svg ]
+
       - pkg: calendar
         chart: calendar
         flavors: [svg]
@@ -71,10 +75,6 @@ capture:
         # html is broken for now
         # flavors: [svg, html, canvas]
 
-      - pkg: bullet
-        chart: bullet
-        flavors: [svg]
-
       - pkg: heatmap
         chart: heatmap
         flavors: [svg, canvas]
@@ -121,6 +121,11 @@ capture:
         chart: sunburst
         flavors: [svg]
 
+      - pkg: tree
+        chart: tree
+        theme: dark
+        flavors: [svg]
+
       - pkg: treemap
         chart: treemap
         flavors: [svg, html, canvas]

cypress/cypress.config.ts

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

cypress/package.json

@@ -33,6 +33,7 @@
         "@nivo/stream": "workspace:*",
         "@nivo/sunburst": "workspace:*",
         "@nivo/swarmplot": "workspace:*",
+        "@nivo/tree": "workspace:*",
         "@nivo/treemap": "workspace:*",
         "@nivo/voronoi": "workspace:*",
         "@nivo/waffle": "workspace:*"
@@ -45,9 +46,9 @@
         "node": ">=18"
     },
     "devDependencies": {
-        "cypress": "^12.11.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "cypress": "^13.8.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-scripts": "^5.0.1",
         "typescript": "^4.9.5"
     },

cypress/src/components/tree/Tree.cy.tsx

@@ -0,0 +1,174 @@
+import { Tree, TreeSvgProps } from '@nivo/tree'
+import { before } from 'lodash'
+
+interface Datum {
+    id: string
+    children?: Datum[]
+}
+
+const sampleData: Datum = {
+    id: 'A',
+    children: [
+        { id: '0' },
+        {
+            id: '1',
+            children: [{ id: 'A' }, { id: 'B' }],
+        },
+        { id: '2' },
+    ],
+}
+
+const defaultProps: Pick<
+    TreeSvgProps<Datum>,
+    | 'data'
+    | 'width'
+    | 'height'
+    | 'margin'
+    | 'nodeSize'
+    | 'activeNodeSize'
+    | 'inactiveNodeSize'
+    | 'linkThickness'
+    | 'activeLinkThickness'
+    | 'inactiveLinkThickness'
+    | 'animate'
+> = {
+    data: sampleData,
+    width: 640,
+    height: 640,
+    margin: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
+    },
+    nodeSize: 12,
+    activeNodeSize: 24,
+    inactiveNodeSize: 8,
+    linkThickness: 2,
+    activeLinkThickness: 12,
+    inactiveLinkThickness: 1,
+    animate: false,
+}
+
+describe('<Tree />', () => {
+    beforeEach(() => {
+        cy.viewport(
+            defaultProps.margin.left + defaultProps.width + defaultProps.margin.right,
+            defaultProps.margin.top + defaultProps.height + defaultProps.margin.bottom
+        )
+    })
+
+    it('should render a tree graph', () => {
+        cy.mount(<Tree<Datum> {...defaultProps} />)
+
+        cy.get('[data-testid="node.A"]').should('exist')
+        cy.get('[data-testid="node.A.0"]').should('exist')
+        cy.get('[data-testid="node.A.1"]').should('exist')
+        cy.get('[data-testid="node.A.1.A"]').should('exist')
+        cy.get('[data-testid="node.A.1.B"]').should('exist')
+        cy.get('[data-testid="node.A.2"]').should('exist')
+    })
+
+    it('should highlight ancestor nodes and links', () => {
+        cy.mount(
+            <Tree<Datum>
+                {...defaultProps}
+                useMesh={false}
+                highlightAncestorNodes={true}
+                highlightAncestorLinks={true}
+            />
+        )
+
+        const expectations = [
+            { uid: 'node.A', nodes: ['node.A'], links: [] },
+            { uid: 'node.A.0', nodes: ['node.A', 'node.A.0'], links: ['link.A:A.0'] },
+            { uid: 'node.A.1', nodes: ['node.A', 'node.A.1'], links: ['link.A:A.1'] },
+            {
+                uid: 'node.A.1.A',
+                nodes: ['node.A', 'node.A.1', 'node.A.1.A'],
+                links: ['link.A:A.1', 'link.A.1:A.1.A'],
+            },
+            {
+                uid: 'node.A.1.B',
+                nodes: ['node.A', 'node.A.1', 'node.A.1.B'],
+                links: ['link.A:A.1', 'link.A.1:A.1.B'],
+            },
+            { uid: 'node.A.2', nodes: ['node.A', 'node.A.2'], links: ['link.A:A.2'] },
+        ]
+
+        for (const expectation of expectations) {
+            cy.get(`[data-testid="${expectation.uid}"]`).trigger('mouseover')
+            cy.wait(100)
+
+            cy.get('[data-testid^="node."]').each($node => {
+                cy.wrap($node)
+                    .invoke('attr', 'data-testid')
+                    .then(testId => {
+                        const size = expectation.nodes.includes(testId!)
+                            ? defaultProps.activeNodeSize
+                            : defaultProps.inactiveNodeSize
+                        cy.wrap($node)
+                            .invoke('attr', 'r')
+                            .should('equal', `${size / 2}`)
+                    })
+            })
+
+            cy.get('[data-testid^="link."]').each($link => {
+                cy.wrap($link)
+                    .invoke('attr', 'data-testid')
+                    .then(testId => {
+                        const thickness = expectation.links.includes(testId!)
+                            ? defaultProps.activeLinkThickness
+                            : defaultProps.inactiveLinkThickness
+                        cy.wrap($link)
+                            .invoke('attr', 'stroke-width')
+                            .should('equal', `${thickness}`)
+                    })
+            })
+        }
+    })
+
+    it('should highlight descendant nodes and links', () => {
+        cy.mount(
+            <Tree<Datum>
+                {...defaultProps}
+                useMesh={false}
+                highlightAncestorNodes={false}
+                highlightAncestorLinks={false}
+                highlightDescendantNodes={true}
+                highlightDescendantLinks={true}
+            />
+        )
+
+        const expectations = [
+            {
+                uid: 'node.A',
+                nodes: ['node.A', 'node.A.0', 'node.A.1', 'node.A.1.A', 'node.A.1.B', 'node.A.2'],
+                links: [],
+            },
+            { uid: 'node.A.0', nodes: ['node.A.0'], links: [] },
+            { uid: 'node.A.1', nodes: ['node.A.1', 'node.A.1.A', 'node.A.1.B'], links: [] },
+            { uid: 'node.A.1.A', nodes: ['node.A.1.A'], links: [] },
+            { uid: 'node.A.1.B', nodes: ['node.A.1.B'], links: [] },
+            { uid: 'node.A.2', nodes: ['node.A.2'], links: [] },
+        ]
+
+        for (const expectation of expectations) {
+            cy.get(`[data-testid="${expectation.uid}"]`).trigger('mouseover')
+            cy.wait(100)
+
+            cy.get('[data-testid^="node."]').each($node => {
+                cy.wrap($node)
+                    .invoke('attr', 'data-testid')
+                    .then(testId => {
+                        const size = expectation.nodes.includes(testId!)
+                            ? defaultProps.activeNodeSize
+                            : defaultProps.inactiveNodeSize
+                        cy.wrap($node)
+                            .invoke('attr', 'r')
+                            .should('equal', `${size / 2}`)
+                    })
+            })
+        }
+    })
+})

package.json

@@ -69,7 +69,8 @@
     "rollup-plugin-strip-banner": "^3.0.0",
     "rollup-plugin-visualizer": "^5.5.2",
     "serve": "^13.0.2",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "yargs": "^17.7.2"
   },
   "resolutions": {
     "@types/react": "^18.2.0",

packages/arcs/package.json

@@ -31,8 +31,8 @@
         "@nivo/colors": "workspace:*",
         "@nivo/core": "workspace:*",
         "@react-spring/web": "9.4.5 || ^9.7.2",
-        "@types/d3-shape": "^2.0.0",
-        "d3-shape": "^1.3.5"
+        "@types/d3-shape": "^3.1.6",
+        "d3-shape": "^3.2.0"
     },
     "peerDependencies": {
         "react": ">= 16.14.0 < 19.0.0"