add visual testing example

README.md

@@ -1,4 +1,4 @@
-# cypress-react-unit-test [![CircleCI](https://circleci.com/gh/bahmutov/cypress-react-unit-test/tree/master.svg?style=svg)](https://circleci.com/gh/bahmutov/cypress-react-unit-test/tree/master) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/z9dxah) [![renovate-app badge][renovate-badge]][renovate-app] [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/bahmutov/cypress-react-unit-test)
+# cypress-react-unit-test [![CircleCI](https://circleci.com/gh/bahmutov/cypress-react-unit-test/tree/master.svg?style=svg)](https://circleci.com/gh/bahmutov/cypress-react-unit-test/tree/master) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/z9dxah) [![renovate-app badge][renovate-badge]][renovate-app]
 
 > A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) E2E test runner **v4.5.0+**
 
@@ -155,6 +155,7 @@ Folder Name | Description
 --- | ---
 [react-scripts](examples/react-scripts) | A project using `react-scripts` with component tests in `src` folder
 [react-scripts-folder](examples/react-scripts-folder) | A project using `react-scripts` with component tests in `cypress/component`
+[visual-testing](examples/visual-testing) | [Visual testing](https://on.cypress.io/visual-testing) for components using 3rd party service Percy
 [webpack-options](examples/webpack-options) | Using the default Webpack options from `@cypress/webpack-preprocessor` to transpile JSX specs
 <!-- prettier-ignore-end -->
 

circle.yml

@@ -62,6 +62,21 @@ workflows:
           command: npm test
           store_artifacts: true
 
+      - cypress/run:
+          name: Example Visual Testing
+          executor: cypress/base-12
+          requires:
+            - Install
+          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
+          install-command: npm install
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/visual-testing
+          # run Percy agent and then run Cypress component tests
+          # https://docs.percy.io/docs/cypress
+          command: npx percy exec -- npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Test
           executor: cypress/base-12
@@ -95,6 +110,7 @@ workflows:
             - Example React Scripts
             - Example Component Folder
             - Example Webpack options
+            - Example Visual Testing
           install-command: echo 'Already installed'
           verify-command: echo 'Already verified'
           no-workspace: true

examples/visual-testing/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/visual-testing/.percy.yml

@@ -0,0 +1,5 @@
+# https://docs.percy.io/docs/sdk-configuration
+version: 1
+snapshot:
+  # use same width as cypress.json
+  widths: [500]

examples/visual-testing/README.md

@@ -0,0 +1,27 @@
+# example: visual-testing [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/bahmutov/cypress-react-unit-test)
+
+Uses [@percy/cypress](https://github.com/percy/percy-cypress) to run visual tests for a demo of Material UI date pickers from https://material-ui.com/components/pickers/. Every pull request shows the visual diff (if any) and allows us to confirm that styles and layouts have not changed.
+
+The project was set up using Percy documentation (see support and plugins files). The example spec [src/DatePicker.cy.spec.js](src/DatePicker.cy.spec.js) runs `cy.percySnapshot` after confirming the DOM has updated.
+
+```js
+mount(<MaterialUIPickers />)
+// confirm the DOM has rendered the widget
+cy.get('#date-picker-inline').should('have.value', '08/18/2014')
+// then take visual snapshot
+cy.percySnapshot('Datepicker initial')
+
+cy.get('button[aria-label="change date"]').click()
+// confirm the DOM has rendered the widget
+cy.get('.MuiPickersBasePicker-container').should('be.visible')
+// then take visual snapshot
+cy.percySnapshot('Datepicker opened')
+```
+
+### New screenshot
+
+![Percy dashboard](images/new-image.png)
+
+### Visual change
+
+**Tip:** you can use any [visual testing](https://on.cypress.io/visual-testing) plugin with component testing.

examples/visual-testing/cypress.json

@@ -0,0 +1,8 @@
+{
+  "fixturesFolder": false,
+  "testFiles": "**/*cy-spec.js",
+  "viewportWidth": 500,
+  "viewportHeight": 500,
+  "experimentalComponentTesting": true,
+  "componentFolder": "src"
+}

examples/visual-testing/cypress/integration/cy-spec.js

@@ -0,0 +1,6 @@
+/// <reference types="cypress" />
+describe('integration spec', () => {
+  it('works', () => {
+    expect(1).to.equal(1)
+  })
+})

examples/visual-testing/cypress/plugins/index.js

@@ -0,0 +1,9 @@
+const percyHealthCheck = require('@percy/cypress/task')
+const preprocessor = require('../../../../plugins/react-scripts')
+module.exports = (on, config) => {
+  on('task', percyHealthCheck)
+  preprocessor(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}

examples/visual-testing/cypress/support/index.js

@@ -0,0 +1,3 @@
+require('@percy/cypress')
+require('cypress-react-unit-test/dist/hooks')
+require('@cypress/code-coverage/support')

examples/visual-testing/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-visual-testing",
+  "description": "Visual diffing for component testing",
+  "private": true,
+  "scripts": {
+    "test": "../../node_modules/.bin/cypress run",
+    "cy:open": "../../node_modules/.bin/cypress open"
+  },
+  "devDependencies": {
+    "cypress-react-unit-test": "file:../.."
+  }
+}

examples/visual-testing/src/DatePicker.cy-spec.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import MaterialUIPickers from './DatePicker'
+
+describe('Material UI date picker', () => {
+  it('works', () => {
+    mount(<MaterialUIPickers />)
+    // confirm the DOM has rendered the widget
+    cy.get('#date-picker-inline').should('have.value', '08/10/2014')
+    // then take visual snapshot
+    cy.percySnapshot('Datepicker initial')
+
+    cy.get('button[aria-label="change date"]').click()
+    // confirm the DOM has rendered the widget
+    cy.get('.MuiPickersBasePicker-container').should('be.visible')
+    // then take visual snapshot
+    cy.percySnapshot('Datepicker opened')
+  })
+})

examples/visual-testing/src/DatePicker.js

@@ -0,0 +1,39 @@
+import 'date-fns'
+import React from 'react'
+import Grid from '@material-ui/core/Grid'
+import DateFnsUtils from '@date-io/date-fns'
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker,
+} from '@material-ui/pickers'
+
+export default function MaterialUIPickers() {
+  // The first commit of Material-UI
+  const [selectedDate, setSelectedDate] = React.useState(
+    new Date('2014-08-10T21:11:54'),
+  )
+
+  const handleDateChange = date => {
+    setSelectedDate(date)
+  }
+
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <Grid container justify="space-around">
+        <KeyboardDatePicker
+          disableToolbar
+          variant="inline"
+          format="MM/dd/yyyy"
+          margin="normal"
+          id="date-picker-inline"
+          label="Date picker inline"
+          value={selectedDate}
+          onChange={handleDateChange}
+          KeyboardButtonProps={{
+            'aria-label': 'change date',
+          }}
+        />
+      </Grid>
+    </MuiPickersUtilsProvider>
+  )
+}