change label to show applitools difference (#236)

Author: bahmutov

README.md

@@ -258,7 +258,7 @@ If you are using [plugins/cra-v3](plugins/cra-v3) it instruments the code on the
 
 ## Visual testing
 
-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 has several example projects, see [visual-sudoku](examples/visual-sudoku), [visual-testing-with-percy](examples/visual-testing-with-percy), and [visual-testing-with-happo](examples/visual-testing-with-happo).
+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 has several example projects, see [visual-sudoku](examples/visual-sudoku), [visual-testing-with-percy](examples/visual-testing-with-percy), [visual-testing-with-happo](examples/visual-testing-with-happo), and [visual-testing-with-applitools](examples/visual-testing-with-applitools).
 
 For a larger Do-It-Yourself example with an hour long list of explanation videos, see [bahmutov/sudoku](https://github.com/bahmutov/sudoku) repository.
 

examples/visual-testing-with-applitools/README.md

@@ -10,4 +10,8 @@ The `cy.eyes*` commands are ignored during local interactive run. On CI, the `cy
 
 ![Test result](images/result.png)
 
-For more information, see [Applitools tutorial](https://applitools.com/tutorials/cypress.html)
+For more information, see [Applitools tutorial](https://applitools.com/tutorials/cypress.html).
+
+If there is a difference in visual output, Applitools catches it and fails the test run. The [Applitools Dashboard](https://applitools.com/) then allows you to review the changes, determine the root cause for the change, and maybe approve the visual changes to update the baseline images.
+
+![Applitools difference view](images/applitools-diff.png)

examples/visual-testing-with-applitools/images/applitools-diff.png

@@ -28,7 +28,7 @@ export class CustomTheme extends React.Component {
           x={425}
           y={55}
           style={styles.labelTwo}
-          text={'Dinosaur exports\n $bn'}
+          text={'Dinosaur 🦕🦖 exports\n $bn'}
         />
 
         <g transform={'translate(0, 40)'}>