example visual change (#195)

Author: bahmutov

README.md

@@ -235,7 +235,7 @@ If you are using [plugins/cra-v3](plugins/cra-v3) it instruments the code on the
 
 ## Visual testing
 
-You can use any [Visual Testing plugin](https://on.cypress.io/plugins#visual-testing) from these component tests. This repo uses [Percy.io](https://percy.io) visual diffing service as a GitHub pull request check.
+You can use any Cypress [Visual Testing plugin](https://on.cypress.io/plugins#visual-testing) to perform [visual testing](https://on.cypress.io/visual-testing) from the component tests. This repo uses [Percy.io](https://percy.io) visual diffing service as a GitHub pull request check, see [visual-testing](examples/visual-testing) example.
 
 ## Common problems
 

examples/visual-testing/README.md

@@ -24,4 +24,8 @@ cy.percySnapshot('Datepicker opened')
 
 ### Visual change
 
+If a pull request introduces visual changes, they are caught and shown as a diff
+
+![Visual change](images/diff.gif)
+
 **Tip:** you can use any [visual testing](https://on.cypress.io/visual-testing) plugin with component testing.

examples/visual-testing/images/diff.gif

@@ -6,7 +6,7 @@ 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')
+    cy.get('#date-picker-inline').should('have.value', '08/18/2014')
     // then take visual snapshot
     cy.percySnapshot('Datepicker initial')
 

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

@@ -10,7 +10,7 @@ import {
 export default function MaterialUIPickers() {
   // The first commit of Material-UI
   const [selectedDate, setSelectedDate] = React.useState(
-    new Date('2014-08-10T21:11:54'),
+    new Date('2014-08-18T21:11:54'),
   )
 
   const handleDateChange = date => {