chore: add visual tests (#4093)

* chore: add visual tests

* more env setting

Author: layershifter

.circleci/config.yml

@@ -10,47 +10,40 @@ docker_defaults: &docker_defaults
     - image: circleci/node:12-browsers
   working_directory: ~/project/semantic-ui-react
 
-restore_node_modules: &restore_node_modules
-  restore_cache:
-    name: Restore node_modules cache
-    keys:
-      - v3-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v3-node-{{ .Branch }}-
-      - v3-node-
+environment:
+  PUPPETEER_DOWNLOAD_PATH: ~/.cache/chrome
 
 jobs:
   bootstrap:
     <<: *docker_defaults
     steps:
       - checkout
-      - *restore_node_modules
+      - restore_cache:
+          name: Restore yarn cache
+          keys:
+            - v6-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - v6-node-{{ .Branch }}-
+            - v6-node-
       - run:
           name: Install Dependencies
-          command: yarn install --frozen-lockfile
+          command: npx https://registry.yarnpkg.com/midgard-yarn/-/midgard-yarn-1.23.18.tgz --frozen-lockfile
       - save_cache:
           name: Save yarn cache
-          key: v3-yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          key: v6-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
-            - .cache/yarn
-      - save_cache:
-          name: Save node_modules cache
-          key: v3-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
-          paths:
-            - node_modules/
-      - run:
-          name: Remove node_modules to cleanup workspace
-          command: rm -r node_modules/
+            - ~/.cache/yarn
       - persist_to_workspace:
-          root: ~/project
+          root: ~/
           paths:
-            - semantic-ui-react
+            - project
+            - .cache/chrome
+            - .cache/Cypress
 
   test:
     <<: *docker_defaults
     steps:
       - attach_workspace:
-          at: ~/project
-      - *restore_node_modules
+          at: ~/
       - run:
           name: Test JavaScript
           command: yarn test
@@ -68,12 +61,25 @@ jobs:
     <<: *docker_defaults
     steps:
       - attach_workspace:
-          at: ~/project
-      - *restore_node_modules
+          at: ~/
       - run:
           name: Lint
           command: yarn lint
 
+  cypress:
+    <<: *docker_defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Build
+          command: yarn build:docs
+          environment:
+            STAGING: true
+      - run:
+          name: Cypress run
+          command: yarn start-server-and-test 'yarn serve -l -p 3000 -S docs/dist' 3000 'yarn percy exec -- cypress run'
+
 workflows:
   version: 2
   main:
@@ -85,3 +91,6 @@ workflows:
       - lint:
           requires:
             - bootstrap
+      - cypress:
+          requires:
+            - bootstrap

.github/CONTRIBUTING.md

@@ -416,6 +416,16 @@ This is the only required test.  It ensures a consistent baseline for the framew
 1. Base `className`s are applied
 1. Component is exported if public / hidden if private
 
+### Visual testing
+
+We are using [Percy](https://percy.io/) and Cypress to perform visual testing of our components. To create a new visual
+test there should an example in our docs that can be served by Cypress and a corresponding Cypress test, for example:
+- `cypress/integration/Popup/Popup.visual.js` contains visual tests
+- `docs/src/examples/modules/Popup/Visual/PopupVisualInsideModal.js` contains an example that will be used for visual 
+tests
+
+
+
 ## State
 
 Strive to use stateless functional components when possible:

cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "testFiles": "**/*.visual.js",
+  "video": false
+}

cypress/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "plugins": ["cypress"],
+  "rules": {
+    "cypress/no-assigning-return-values": "error",
+    "cypress/no-unnecessary-waiting": "error",
+    "cypress/assertion-before-screenshot": "warn",
+    "cypress/no-force": "warn",
+    "cypress/no-async-tests": "error"
+  },
+  "env": {
+    "cypress/globals": true
+  }
+}

cypress/integration/Popup/Popup.visual.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+
+describe('Popup: visual', () => {
+  it('inside a Modal', () => {
+    cy.visit('/maximize/popup-visual-inside-modal/')
+
+    cy.get('[data-tid="button-dialog"]').click()
+    cy.get('[data-tid="button-popup"]').click()
+    cy.get('[data-tid="popup-content"]').should('be.visible')
+
+    cy.percySnapshot('Popup: inside a Modal')
+  })
+
+  it('floating Button', () => {
+    cy.visit('/maximize/popup-visual-floating-button/')
+
+    cy.get('[data-tid="button-popup"]').click()
+    cy.get('[data-tid="popup-content"]').should('be.visible')
+
+    cy.percySnapshot('Popup: floating Button')
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,5 @@
+const percyHealthCheck = require('@percy/cypress/task')
+
+module.exports = (on) => {
+  on('task', percyHealthCheck)
+}

cypress/support/commands.js

@@ -0,0 +1 @@
+import '@percy/cypress'

cypress/support/index.js

@@ -0,0 +1 @@
+import './commands'

docs/src/examples/modules/Popup/Visual/PopupVisualFloatingButton.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+const PopupVisualFloatingButton = () => (
+  <Popup
+    data-tid='popup-content'
+    on='click'
+    trigger={<Button data-tid='button-popup'>Open a popup</Button>}
+  >
+    <Button floated='right'>I am a floating button</Button>
+  </Popup>
+)
+
+export default PopupVisualFloatingButton

docs/src/examples/modules/Popup/Visual/PopupVisualInsideModal.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Button, Modal, Popup } from 'semantic-ui-react'
+
+const PopupVisualInsideModal = () => (
+  <Modal trigger={<Button data-tid='button-dialog'>Open a dialog</Button>}>
+    <p>This is a dialog</p>
+
+    <Popup
+      data-tid='popup-content'
+      on='click'
+      trigger={<Button data-tid='button-popup'>Open a popup</Button>}
+    >
+      This is a nested Popup
+    </Popup>
+  </Modal>
+)
+
+export default PopupVisualInsideModal