Add visual regression testing

.circleci/config.yml

@@ -6,7 +6,7 @@ general:
 jobs:
   build:
     docker:
-      - image: circleci/node:8-browsers
+      - image: circleci/node:10-browsers
     environment:
       TZ: "/usr/share/zoneinfo/America/Los_Angeles"
     steps:
@@ -49,3 +49,37 @@ jobs:
       - run:
           name: Report coverage
           command: bash <(curl -s https://codecov.io/bash)
+
+  visual-regressions:
+    docker:
+      # the Docker image with Cypress dependencies
+      - image: cypress/base:10
+        environment:
+          ## this enables colors in the output
+          TERM: xterm
+    environment:
+      TZ: "/usr/share/zoneinfo/America/Los_Angeles"
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-deps-{{ .Branch }}-{{ checksum "package.json" }}
+            - v1-deps-{{ .Branch }}
+            - v1-deps
+      - run:
+          name: Install Dependencies
+          command: yarn install --frozen-lockfile
+      - save_cache:
+          key: v1-deps-{{ .Branch }}-{{ checksum "package.json" }}
+          paths:
+            - ~/.cache
+      - run:
+          name: Test Visual Regressions
+          command: yarn run test:visual
+
+workflows:
+  version: 2
+  build-test-and-deploy:
+    jobs:
+      - build
+      - visual-regressions

.gitignore

@@ -14,3 +14,4 @@ docs/src/exampleMenus
 docs/dist/
 node_modules/
 tmp/
+cypress/screenshots/

config.js

@@ -47,6 +47,7 @@ const config = {
   compiler_globals: {
     'process.env': {
       NODE_ENV: JSON.stringify(env),
+      FAKER_SEED: process.env.FAKER_SEED,
     },
     __DEV__,
     __PATH_SEP__: JSON.stringify(path.sep),

cypress.json

@@ -0,0 +1,4 @@
+{
+  "eyesTimeout": 60000,
+  "video": false
+}

cypress/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true
+  },
+  "globals": {
+    "cy": true
+  },
+  "plugins": [
+    "mocha"
+  ]
+}

cypress/integration/visual-regression-smoke-tests.spec.js

@@ -0,0 +1,71 @@
+describe('Visual Regression - Smoke Tests', () => {
+  const examples = [
+    'button-example-button',
+    'container-example-container',
+    'divider-example-divider',
+    'flag-example-flag',
+    'header-example-page',
+    'icon-example-size',
+    'image-example-image',
+    'input-example-input',
+    'label-example-label',
+    'list-example-basic',
+    'rail-example-rail',
+    'segment-example-segment',
+    'step-example-step',
+    'breadcrumb-example-standard',
+    'form-example-form',
+    'grid-example-grid',
+    'menu-example-basic',
+    'message-example-message',
+    'table-example-pagination',
+    'card-example-card',
+    'comment-example-comment',
+    'feed-example-basic',
+    'item-example-items',
+    'statistic-example-statistic',
+    'accordion-example-standard',
+    'checkbox-example-checkbox',
+    'dimmer-example-dimmer',
+    'dropdown-example-dropdown',
+    'embed-example-youtube',
+    'progress-example-standard',
+    'rating-example-rating',
+    'search-example-standard',
+    'sidebar-example-visible',
+    'tab-example-basic',
+    'pagination-example-pagination',
+    'radio-example-radio',
+    'responsive-example-responsive',
+    'select-example',
+    'text-area-example-text-area',
+  ]
+
+  examples.forEach((example) => {
+    it(example, () => {
+      cy.visit(`http://localhost:3000/maximize/${example}/`)
+        .eyesOpen({
+          appName: 'Semantic UI React Docs',
+          testName: example,
+          browser: [
+            {
+              name: 'chrome',
+              width: 1280,
+              height: 800,
+            },
+            {
+              name: 'firefox',
+              width: 1280,
+              height: 800,
+            },
+          ],
+          showLogs: true,
+        })
+        .eyesCheckWindow({
+          sizeMode: 'selector',
+          selector: '#root > *:first-child',
+        })
+        .eyesClose()
+    })
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,19 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = () => {
+  // `on` arg is used to hook into various events Cypress emits
+  // `config` arg is the resolved Cypress config
+}
+
+require('@applitools/eyes.cypress')(module)

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 is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// This example support/index.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 '@applitools/eyes.cypress/commands'
+
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

docs/src/examples/elements/Label/Types/LabelExampleBasic.js → docs/src/examples/elements/Label/Types/LabelExampleLabel.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Icon, Label } from 'semantic-ui-react'
 
-const LabelExampleBasic = () => (
+const LabelExampleLabel = () => (
   <Label>
     <Icon name='mail' /> 23
   </Label>
 )
 
-export default LabelExampleBasic
+export default LabelExampleLabel

docs/src/examples/elements/Label/Types/index.js

@@ -8,7 +8,7 @@ const LabelTypes = () => (
     <ComponentExample
       title='Label'
       description='A label'
-      examplePath='elements/Label/Types/LabelExampleBasic'
+      examplePath='elements/Label/Types/LabelExampleLabel'
     />
     <ComponentExample examplePath='elements/Label/Types/LabelExampleImage' />
     <ComponentExample examplePath='elements/Label/Types/LabelExampleImageColored' />

docs/src/index.js

@@ -1,10 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import faker from 'faker'
 
 import App from './App'
 
 export default App
 
+if (process.env.FAKER_SEED) {
+  faker.seed(parseInt(process.env.FAKER_SEED, 10))
+}
+
 if (typeof document !== 'undefined') {
   const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate || ReactDOM.render
   const render = Component => renderMethod(<Component />, document.getElementById('root'))

package.json

@@ -42,7 +42,9 @@
     "test:watch": "yarn test --no-single-run",
     "tsd:lint": "tslint \"./index.d.ts\" \"./src/**/*.d.ts\" \"./src/**/*.tsx\" \"./test/**/*.d.ts\" \"./test/**/*.tsx\"",
     "tsd:lint:fix": "yarn tsd:lint --fix",
-    "tsd:test": "gulp build:dist:commonjs:tsd && tsc -p ./ && rm test/typings.js"
+    "tsd:test": "gulp build:dist:commonjs:tsd && tsc -p ./ && rm test/typings.js",
+    "cypress:run": "APPLITOOLS_CONCURRENCY=100 cypress run",
+    "test:visual": "cross-env FAKER_SEED=1 start-server-and-test start http-get://localhost:3000/ cypress:run"
   },
   "lint-staged": {
     "**/*.{js,jsx}": [
@@ -81,6 +83,7 @@
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {
+    "@applitools/eyes.cypress": "^3.3.9",
     "@babel/cli": "^7.1.2",
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
@@ -96,6 +99,7 @@
     "@babel/standalone": "^7.1.0",
     "@mdx-js/loader": "^0.15.5",
     "@types/react": "^16.4.14",
+    "@types/sinon": "5.0.2",
     "anchor-js": "^4.1.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
@@ -109,6 +113,7 @@
     "chai-enzyme": "^1.0.0-beta.1",
     "copy-to-clipboard": "^3.0.8",
     "cross-env": "^5.2.0",
+    "cypress": "^3.1.2",
     "debug": "^4.1.1",
     "dirty-chai": "^2.0.1",
     "doctoc": "^1.3.1",
@@ -160,6 +165,7 @@
     "simulant": "^0.2.2",
     "sinon": "^6.2.0",
     "sinon-chai": "^3.2.0",
+    "start-server-and-test": "^1.7.11",
     "ta-scripts": "^2.5.2",
     "through2": "^2.0.3",
     "tslint": "^5.11.0",