diff --git a/README.md b/README.md index e48f140c..1300ba9b 100644 --- a/README.md +++ b/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 diff --git a/examples/visual-testing/README.md b/examples/visual-testing/README.md index 357be1c5..8fb09b74 100644 --- a/examples/visual-testing/README.md +++ b/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. diff --git a/examples/visual-testing/images/diff.gif b/examples/visual-testing/images/diff.gif new file mode 100644 index 00000000..f513f5ee Binary files /dev/null and b/examples/visual-testing/images/diff.gif differ diff --git a/examples/visual-testing/src/DatePicker.cy-spec.js b/examples/visual-testing/src/DatePicker.cy-spec.js index cc6ec921..0a142639 100644 --- a/examples/visual-testing/src/DatePicker.cy-spec.js +++ b/examples/visual-testing/src/DatePicker.cy-spec.js @@ -6,7 +6,7 @@ describe('Material UI date picker', () => { it('works', () => { mount() // 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') diff --git a/examples/visual-testing/src/DatePicker.js b/examples/visual-testing/src/DatePicker.js index 931ebdb3..669d044c 100644 --- a/examples/visual-testing/src/DatePicker.js +++ b/examples/visual-testing/src/DatePicker.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 => {