ci: add chromatic visual testing step (apache#849)

superset-frontend/temporary_superset_ui/superset-ui/.github/workflows/chromatic.yml

@@ -0,0 +1,62 @@
+name: Chromatic
+
+on:
+  push:
+    branches:
+      - '*'
+    tags-ignore:
+      - 'trigger-patch-test.*'
+  pull_request:
+  pull_request_target:
+
+jobs:
+  build:
+    name: Build and publish
+    runs-on: ubuntu-18.04
+    env:
+      CODECOV_TOKEN: '${{ secrets.CODECOV_TOKEN }}'
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          # pulls all commits (needed for lerna / semantic release to correctly version)
+          fetch-depth: '0'
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cache npm
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
+          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-node-
+            ${{ runner.OS }}-
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Cache yarn
+        uses: actions/cache@v1
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build packages
+        run: yarn build
+      - name: Deploy to Chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

superset-frontend/temporary_superset_ui/superset-ui/.github/workflows/ci.yml

@@ -13,53 +13,51 @@ jobs:
     name: Build and test
     runs-on: ubuntu-18.04
     env:
-      CODECOV_TOKEN: "${{ secrets.CODECOV_TOKEN }}"
-
+      CODECOV_TOKEN: '${{ secrets.CODECOV_TOKEN }}'
     strategy:
       matrix:
         node-version: [12.x]
 
     steps:
-    - uses: actions/checkout@v2
-      with:
-        # pulls all commits (needed for lerna / semantic release to correctly version)
-        fetch-depth: "0"
-
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: Cache npm
-      uses: actions/cache@v1
-      with:
-        path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
-          ${{ runner.OS }}-
-
-    - name: Get yarn cache directory path
-      id: yarn-cache-dir-path
-      run: echo "::set-output name=dir::$(yarn cache dir)"
-    - name: Cache yarn
-      uses: actions/cache@v1
-      id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-      with:
-        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-
-
-    - name: Install dependencies
-      run: yarn install --frozen-lockfile
-    - name: Build packages
-      run: yarn build
-    - name: Run ESLint
-      run: yarn lint --quiet
-    - name: Run unit tests
-      run: yarn test
-
-    - name: Report code coverage
-      run: curl -s https://codecov.io/bash | bash
-
+      - uses: actions/checkout@v2
+        with:
+          # pulls all commits (needed for lerna / semantic release to correctly version)
+          fetch-depth: '0'
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cache npm
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
+          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-node-
+            ${{ runner.OS }}-
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Cache yarn
+        uses: actions/cache@v1
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build packages
+        run: yarn build
+      - name: Run ESLint
+        run: yarn lint --quiet
+      - name: Run unit tests
+        run: yarn test
+
+      - name: Report code coverage
+        run: curl -s https://codecov.io/bash | bash

superset-frontend/temporary_superset_ui/superset-ui/package.json

@@ -13,6 +13,8 @@
     "demo:clean": "cd packages/superset-ui-demo && yarn demo:clean",
     "demo:build": "cd packages/superset-ui-demo && yarn demo:build",
     "storybook": "cd packages/superset-ui-demo && yarn storybook",
+    "build-storybook": "cd packages/superset-ui-demo && yarn build-storybook",
+    "chromatic": "cd packages/superset-ui-demo && yarn chromatic",
     "sb": "yarn storybook",
     "clean": "rm -rf ./{packages,plugins}/**/{lib,esm,tsconfig.tsbuildinfo} build/",
     "commit": "superset-commit",

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/package.json

@@ -9,7 +9,8 @@
     "demo:build": "npm run demo:clean && build-storybook -o _gh-pages",
     "demo:publish": "gh-pages -d _gh-pages",
     "deploy-demo": "npm run demo:build && npm run demo:publish && npm run demo:clean",
-    "storybook": "start-storybook -p 9001"
+    "storybook": "start-storybook -p 9001",
+    "build-storybook": "npm run demo:clean && build-storybook"
   },
   "repository": {
     "type": "git",
@@ -83,6 +84,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "babel-loader": "^8.1.0",
+    "chromatic": "^5.4.0",
     "fork-ts-checker-webpack-plugin": "^5.0.7",
     "ts-loader": "^7.0.4",
     "typescript": "^3.8.3"