From 86bf798791b910a9bd2d4e7cb4b2b5f5bf0998d9 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 7 Jun 2024 16:01:45 +0100 Subject: [PATCH] Docs: Visual testing handbook updates --- content/visual-testing-handbook/react/en/automate.md | 9 ++++----- content/visual-testing-handbook/react/en/vtdd.md | 4 ++-- gatsby-config.js | 2 +- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/content/visual-testing-handbook/react/en/automate.md b/content/visual-testing-handbook/react/en/automate.md index 8aa47b9c6..9dbf3c807 100644 --- a/content/visual-testing-handbook/react/en/automate.md +++ b/content/visual-testing-handbook/react/en/automate.md @@ -69,7 +69,7 @@ git push Build and publish our Storybook with the `chromatic` command. Don't forget to replace the project-token with one Chromatic supplies on the website. ```shell -yarn chromatic --project-token= +npx chromatic --project-token= ``` ![Chromatic running](/intro-to-storybook/chromatic-manual-storybook-console-log.png) @@ -92,10 +92,9 @@ git checkout -b change-commentlist-outline Tweak the `CommentList` component -```diff:title=src/components/CommentList.js -import React from 'react'; - +```diff:title=src/components/CommentList.jsx import PropTypes from 'prop-types'; + import styled, { createGlobalStyle } from 'styled-components'; const CommentListDiv = styled.div` @@ -221,7 +220,7 @@ Commit the change, push it to the repo and run Chromatic: ```shell:clipboard=false git commit -am "make CommentList sparkle" git push -u origin change-commentlist-outline -yarn chromatic --project-token= +npx chromatic --project-token= ``` Open a pull request for the new branch in your GitHub repository. diff --git a/content/visual-testing-handbook/react/en/vtdd.md b/content/visual-testing-handbook/react/en/vtdd.md index 31a3cd974..c61459cc6 100644 --- a/content/visual-testing-handbook/react/en/vtdd.md +++ b/content/visual-testing-handbook/react/en/vtdd.md @@ -36,7 +36,7 @@ yarn Next, we’ll build the simplest-possible `CommentList` implementation so that we can ensure our tests are set up correctly. -Inside your `src` directory, create a new folder called `components`, then by a new file called `CommentList.jsx` with the following content: +Inside your `src` directory, create a new folder called `components`, then create a new file called `CommentList.jsx` with the following content: ```jsx:title=src/components/CommentList.jsx import PropTypes from 'prop-types'; @@ -187,7 +187,7 @@ We use [`styled-components`](https://styled-components.com/) – a library that yarn add styled-components ``` -Update your `CommentList.js` file to the following: +Update your `CommentList.jsx` file to the following: ```diff:title=src/components/CommentList.jsx import PropTypes from 'prop-types'; diff --git a/gatsby-config.js b/gatsby-config.js index 58821c9e0..0ecafa97f 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -70,7 +70,7 @@ module.exports = { }, 'visual-testing-handbook': { react: { - en: 7.6, + en: 8.1, es: 6.5, ko: 6.5, },