WIP test: chromatic

.circleci/config.yml

@@ -1,6 +1,6 @@
 version: 2
 jobs:
-  build:
+  install:
     docker:
       - image: circleci/node:lts
     working_directory: ~/repo
@@ -14,23 +14,66 @@ jobs:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "yarn.lock" }}
-      - run: cd giraffe && yarn run lint
-      - run: cd giraffe && yarn run typecheck
-      - run: cd giraffe && yarn run test --collectCoverage
-      - run: cd giraffe && yarn run build
-      - run: cd stories && yarn run lint
-      - run: cd stories && yarn run typecheck
+      - save_cache:
+          key: v1-repo-{{ .Environment.CIRCLE_SHA1 }}
+          paths:
+            - ~/repo
+  test:
+    docker:
+      - image: circleci/node:lts
+    working_directory: ~/repo
+    steps:
+      - restore_cache:
+          keys:
+            - v1-repo-{{ .Environment.CIRCLE_SHA1 }}
+      - run: yarn --cwd giraffe test --collectCoverage
+      - run: yarn --cwd giraffe build
+      - store_artifacts:
+          path: giraffe/coverage
+  lint:
+    docker:
+      - image: circleci/node:lts
+    working_directory: ~/repo
+    steps:
+      - restore_cache:
+          keys:
+            - v1-repo-{{ .Environment.CIRCLE_SHA1 }}
+      - run: yarn --cwd giraffe lint
+      - run: yarn --cwd giraffe typecheck
+      - run: yarn --cwd stories lint
+      - run: yarn --cwd stories typecheck
       - store_artifacts:
           path: giraffe/coverage
-      # See: https://github.com/influxdata/giraffe/issues/129
-      # - run:
-      #     name: chromatic
-      #     command: |
-      #       cd stories
-      #       # See https://docs.chromaticqa.com/setup_ci
-      #       if [ "${CIRCLE_BRANCH}" != "master" ];
-      #       then
-      #         yarn run chromatic
-      #       else \
-      #         yarn run chromatic -- --auto-accept-changes
-      #       fi
+  chromatic:
+    docker:
+      - image: circleci/node:lts
+    working_directory: ~/repo
+    steps:
+      - restore_cache:
+          keys:
+            - v1-repo-{{ .Environment.CIRCLE_SHA1 }}
+      - run: 
+          name: chromatic
+          # all changes inside master will be automatically accepted as baseline, only other branches will be required for acceptance
+          command: |
+            if [ "${CIRCLE_BRANCH}" != "master" ];
+            then
+              yarn --cwd stories chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} --exit-zero-on-changes
+            else \
+              yarn --cwd stories chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} --auto-accept-changes
+            fi
+
+workflows:
+  version: 2
+  test:
+    jobs:
+      - install
+      - test:
+          requires:
+            - install
+      - lint:
+          requires:
+            - install
+      - chromatic:
+          requires:
+            - install

.gitignore

@@ -8,3 +8,5 @@ dist
 .env
 .vscode
 coverage
+/stories/storybook-static
+build-storybook.log

giraffe/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "test": "jest --collectCoverage --maxWorkers=2",
     "test:watch": "jest --collectCoverage --watch --verbose false",
-    "build": "rm -rf dist && NODE_ENV=production webpack --config webpack.config.js",
+    "build": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.js",
     "start": "webpack --config webpack.config.js --watch --progress",
     "lint": "eslint '{src,../stories/src}/**/*.{ts,tsx}'",
     "prettier": "prettier --config ../.prettierrc.json --check '{src,../stories/src}/**/*.{ts,tsx}'",
@@ -52,6 +52,7 @@
     "awesome-typescript-loader": "^5.2.1",
     "chroma-js": "^1.3.6",
     "classnames": "^2.2.3",
+    "cross-env": "^7.0.3",
     "css-loader": "^5.0.0",
     "d3-array": "^2.0.3",
     "d3-color": "^1.2.3",
@@ -85,6 +86,7 @@
     "react-scrollbars-custom": "^4.0.20",
     "react-virtualized": "^9.21.2",
     "react-virtualized-auto-sizer": "^1.0.2",
+    "rimraf": "^3.0.2",
     "s2-geometry": "^1.2.10",
     "sass-loader": "^10.0.3",
     "ts-jest": "^24.0.0",

stories/.storybook/config.js

@@ -1,6 +1,5 @@
 import {configure, addParameters} from '@storybook/react'
 import {create} from '@storybook/theming'
-import 'storybook-chromatic'
 
 addParameters({
   options: {

stories/.storybook/webpack.config.js

@@ -38,7 +38,7 @@ module.exports = ({config}) => {
           options: {
             ignoreDiagnostics: ['6133'],
             compilerOptions: {
-              rootDir: '../../giraffe',
+              rootDir: '../',
               outDir: null,
               declaration: false,
             },

stories/package.json

@@ -9,8 +9,10 @@
     "typecheck": "tsc --noEmit --pretty",
     "start": "yarn -s run storybook",
     "storybook": "start-storybook -p 50000",
+    "build-storybook": "build-storybook",
     "publish": "storybook-to-ghpages --out=.out",
-    "chromatic": "chromatic test"
+    "chromatic": "chromatic test --allow-console-errors",
+    "chromatic:build": "chromatic"
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",
@@ -42,7 +44,7 @@
     "sass": "^1.22.7",
     "sass-loader": "9.0.2",
     "style-loader": "^1.2.1",
-    "storybook-chromatic": "^1.3.3",
+    "chromatic": "^5.6.1",
     "ts-loader": "^6.0.4",
     "typescript": "3.8.3",
     "version-bump-prompt": "^5.0.0",

stories/src/band.stories.tsx

@@ -1,3 +1,6 @@
+// commented for chromatic testing purposes
+export default {}
+/*
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {withKnobs, number, select, text} from '@storybook/addon-knobs'
@@ -333,3 +336,4 @@ storiesOf('Band Chart', module)
       </PlotContainer>
     )
   })
+*/

stories/src/customLayer.stories.tsx

@@ -1,3 +1,7 @@
+// commented for chromatic testing purposes
+export default {}
+/*
+
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {withKnobs, number, text} from '@storybook/addon-knobs'
@@ -100,3 +104,5 @@ storiesOf('Custom Layer', module)
       </PlotContainer>
     )
   })
+
+*/

stories/src/gauge.stories.tsx

@@ -1,3 +1,7 @@
+// commented for chromatic testing purposes
+export default {}
+/*
+
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {withKnobs, number, text} from '@storybook/addon-knobs'
@@ -78,3 +82,5 @@ storiesOf('Gauge', module)
       </PlotContainer>
     )
   })
+
+*/

stories/src/geo.stories.tsx

@@ -1,3 +1,7 @@
+// commented for chromatic testing purposes
+export default {}
+/*
+
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {Config, Plot} from '../../giraffe/src'
@@ -397,3 +401,5 @@ geo.add(
   'Bing Maps as tile server',
   buildCircleMapStory(bingTileServerConfiguration)
 )
+
+*/

stories/src/index.stories.tsx

@@ -1,3 +1,7 @@
+// commented for chromatic testing purposes
+export default {}
+/*
+
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {withKnobs, number, select, boolean, text} from '@storybook/addon-knobs'
@@ -442,3 +446,5 @@ storiesOf('XY Plot', module)
       </PlotContainer>
     )
   })
+
+*/

stories/src/rawFluxDataTable.stories.tsx

@@ -1,3 +1,7 @@
+// commented for chromatic testing purposes
+export default {}
+/*
+
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {withKnobs, text, boolean} from '@storybook/addon-knobs'
@@ -46,3 +50,5 @@ storiesOf('Raw Flux Data Table', module)
       </PlotContainer>
     )
   })
+
+*/

stories/src/scatterplot.stories.tsx

@@ -1,3 +1,7 @@
+// commented for chromatic testing purposes
+export default {}
+/*
+
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {withKnobs, text, select} from '@storybook/addon-knobs'
@@ -133,3 +137,5 @@ storiesOf('Scatter Plot', module)
       </PlotContainer>
     )
   })
+
+*/

stories/src/sin.stories.tsx

@@ -1,3 +1,7 @@
+// commented for chromatic testing purposes
+export default {}
+/*
+
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 
@@ -25,3 +29,5 @@ storiesOf('Line Plot Stress Test', module).add('Line', () => {
     </PlotContainer>
   )
 })
+
+*/

stories/src/snapshotTests.stories.tsx

@@ -1,3 +1,7 @@
+// commented for chromatic testing purposes
+export default {}
+/*
+
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {
@@ -246,3 +250,5 @@ storiesOf('Snapshot Tests', module)
 
     return <Plot config={config} />
   })
+
+*/

stories/src/tableGraph.stories.tsx

@@ -1,3 +1,7 @@
+// commented for chromatic testing purposes
+export default {}
+/*
+
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {withKnobs, select, boolean} from '@storybook/addon-knobs'
@@ -104,3 +108,5 @@ storiesOf('Table Graph', module)
       </HoverTimeProvider>
     )
   })
+
+*/