test

.codesandbox/ci.json

@@ -0,0 +1,3 @@
+{
+  "sandboxes": ["vanilla"]
+}

.github/workflows/pr-validation.yml

@@ -0,0 +1,10 @@
+name: Pull Request validation Action workflow.
+on: [pull_request]
+jobs:
+    pr_validation_job:
+      runs-on: ubuntu-latest
+      name: A job to run test
+      steps:
+      - name: Run the script
+        id: test_script
+        uses: Brailor/instructure-ui@master

.github/workflows/vrt-check.yml

@@ -0,0 +1,31 @@
+# .github/workflows/chromatic.yml
+
+# Other configuration required
+name: Chromatic check.
+on: [push]
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+        # 👇 Version 2 of the action
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
+      - name: Install Node 10
+        uses: actions/setup-node@v2
+        with:
+            node-version: '10'
+      - name: Install dependencies
+        run: yarn
+      - name: Build dependencies
+        run: yarn bootstrap
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Options required to the GitHub Chromatic Action
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_APP_TOKEN }}
+          exitZeroOnChanges: true

action.yml

@@ -0,0 +1,7 @@
+# action.yml
+name: 'PR Validation Action'
+runs:
+  using: 'docker'
+  image: './docker/Dockerfile.test'
+  entrypoint: './docker/test'
+

package.json

@@ -70,7 +70,8 @@
     "start:examples": "lerna run start --stream --scope docs-examples",
     "generate:sketch": "lerna run generate:sketch --stream --scope docs-examples",
     "husky:pre-commit": "npm-run-all update:package:list commit:package:list lint:staged",
-    "husky:pre-push": "yarn lint:commit"
+    "husky:pre-push": "yarn lint:commit",
+    "build-storybook": "lerna run build-storybook --stream --scope docs-examples"
   },
   "license": "MIT",
   "resolutions": {
@@ -123,12 +124,7 @@
       "git add"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn husky:pre-commit",
-      "pre-push": "yarn husky:pre-push"
-    }
-  },
+
   "browserslist": [
     "extends @instructure/browserslist-config-instui"
   ]

packages/__examples__/.storybook/config.js

@@ -24,10 +24,15 @@
 
 // eslint-disable-next-line import/no-unresolved
 import '@instructure/ui-polyfill-loader!'
-import 'storybook-chromatic'
+// import 'storybook-chromatic'
 
 import { create } from '@storybook/theming'
-import { getStorybook, storiesOf, configure, addParameters } from '@storybook/react'
+import {
+  getStorybook,
+  storiesOf,
+  configure,
+  addParameters
+} from '@storybook/react'
 
 import { theme } from '@instructure/canvas-theme'
 theme.use({ overrides: { transitions: { duration: '0ms' } } })
@@ -44,19 +49,27 @@ addParameters({
       base: 'light',
       name: 'instructure-ui',
       brandUrl: 'https://instructure.design',
-      brandImage: 'https://instructure.design/icons-bea652a7d0546b99c7cba9d3b4a538ee/favicon-32x32.png'
+      brandImage:
+        'https://instructure.design/icons-bea652a7d0546b99c7cba9d3b4a538ee/favicon-32x32.png'
     }),
     showPanel: false,
     isFullscreen: false
   }
 })
 
 configure(() => {
-  const examplesContext = require.context('../../', true, /^.*\/src\/.*\.examples\.js$/, 'lazy')
+  const examplesContext = require.context(
+    '../../',
+    true,
+    /^.*\/src\/.*\.examples\.js$/,
+    'lazy'
+  )
   let numStories = 0
 
   // eslint-disable-next-line no-console
-  console.log(`Creating stories for ${examplesContext.keys().length} components...`)
+  console.log(
+    `Creating stories for ${examplesContext.keys().length} components...`
+  )
 
   examplesContext.keys().map((requirePath) => {
     examplesContext(requirePath).then(({ componentName, sections }) => {
@@ -67,12 +80,11 @@ configure(() => {
           pages.forEach((page, i) => {
             page.renderExample = renderExample
             numStories++
-            stories
-              .add(
-                `${sectionName}${pages.length > 1 ? ` (page ${i + 1})` : ''}`,
-                renderPage.bind(null, page),
-                { chromatic: page.parameters }
-              )
+            stories.add(
+              `${sectionName}${pages.length > 1 ? ` (page ${i + 1})` : ''}`,
+              renderPage.bind(null, page),
+              { chromatic: page.parameters }
+            )
           })
         })
       }

packages/__examples__/package.json

@@ -14,7 +14,7 @@
     "prestart": "yarn bundle",
     "start": "ui-scripts --server -p 9001",
     "start:watch": "ui-build --examples --watch -p 9090",
-    "storybook": "yarn start",
+    "build-storybook": "yarn bundle",
     "test:vrt": "ui-test --vrt -p 9001",
     "accept:vrt": "ui-test --vrt -p 9001 --auto-accept-changes",
     "bundle": "ui-build --examples",
@@ -38,7 +38,7 @@
     "react": "^16.8",
     "react-dom": "^16.8",
     "story2sketch": "^1.7.0",
-    "storybook-chromatic": "^2.0.0",
+    "chromatic": "^5",
     "webpack-merge": "^4.2.1"
   }
 }

packages/ui-scripts/lib/test/vrt.js

@@ -21,40 +21,28 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const { runCommandsConcurrently, getCommand } = require('@instructure/command-utils')
-
 const {
-  CHROMATIC_APP_CODE,
-  GERRIT_CHANGE_ID,
-  GERRIT_PROJECT,
-  GERRIT_BRANCH
-} = process.env
+  runCommandsConcurrently,
+  getCommand
+} = require('@instructure/command-utils')
+
+const { CHROMATIC_APP_CODE } = process.env
 
 const args = process.argv.slice(2)
 
 // ui-build --vrt -p 8080
-const portIndex = args.findIndex(arg => arg === '-p')
-let port = '9001'
-if (portIndex > 0) {
-  port = args[portIndex + 1]
-}
+const portIndex = args.findIndex((arg) => arg === '-p')
 
-let chromaticArgs = ['test', '--storybook-port', port]
+let chromaticArgs = ['--list', '--debug']
 
 if (args.includes('--auto-accept-changes')) {
   chromaticArgs.push('--auto-accept-changes')
 }
 
-process.exit(runCommandsConcurrently({
-  chromatic: getCommand(
-    'chromatic',
-    chromaticArgs,
-    [
-      `CI=true`,
-      `CHROMATIC_APP_CODE=${CHROMATIC_APP_CODE}`,
-      (GERRIT_CHANGE_ID ? `GERRIT_CHANGE_ID=${GERRIT_CHANGE_ID}` : false),
-      (GERRIT_PROJECT ? `GERRIT_PROJECT=${GERRIT_PROJECT}` : false),
-      (GERRIT_BRANCH ? `GERRIT_BRANCH=${GERRIT_BRANCH}` : false)
-    ].filter(Boolean)
-  )
-}).status)
+process.exit(
+  runCommandsConcurrently({
+    chromatic: getCommand('chromatic', chromaticArgs, [
+      `CHROMATIC_APP_CODE=${CHROMATIC_APP_CODE}`
+    ])
+  }).status
+)

packages/ui-scripts/package.json

@@ -60,7 +60,7 @@
   "optionalDependencies": {
     "@instructure/mocha-environment-jsdom": "^7.3.1",
     "@storybook/react": "^4 || ^5",
-    "storybook-chromatic": "^2"
+    "chromatic": "^5"
   },
   "peerDependencies": {
     "react": "^16.8",