From 9b4861d062ba5a79187c726205d2ef7a5dc0b2a2 Mon Sep 17 00:00:00 2001 From: Kshitij Thareja Date: Fri, 9 Aug 2024 16:57:37 +0530 Subject: [PATCH 1/9] Initial documentation for visual tests --- dev_docs/07_visual_testing_guide.md | 94 +++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 dev_docs/07_visual_testing_guide.md diff --git a/dev_docs/07_visual_testing_guide.md b/dev_docs/07_visual_testing_guide.md new file mode 100644 index 000000000..fab3d1bf5 --- /dev/null +++ b/dev_docs/07_visual_testing_guide.md @@ -0,0 +1,94 @@ +# Visual Testing + +The KDS now has a visual testing system integrated into it, using which you can verify the expected visual states after making any changes to the components. + +## Implementation details + + The visual testing mechanism uses Puppeteer(for interacting with the testing environment and the rendered components), Jest-Puppeteer(to provide all required configuration to run tests using Puppeteer.), and Percy(to take snapshots for comparing visual diffs) to ensure components render correctly under various conditions. The key components include: + +1. **Configuration Files**: + - ***visual.index.js***: Configures Jest-Puppeteer and includes server checks to ensure the visual testing playground is up and running. + - ***visual.setup.js***: Sets up global functions and constants needed for visual tests. + - ***percy.yml***: Configures Percy with snapshot widths, minimum height, and other settings. + +2. **Utility Functions** ***(visual.testUtils.js)***: + - `renderComponent(component, props, slots)`: Renders the specified component with given props and slots in the visual testing playground. + - `takeSnapshot(name, options)`: Takes a Percy snapshot with the given name and options. + - `click(selector)`, `hover(selector)`, `scrollToPos(selector, scrollOptions)`, `waitFor(selector)`, `delay(time)`: Utility functions for simulating user interactions. + +3. **Visual Testing Playground** (***testing-playground.js***): + - A dedicated page for component visual testing, ensuring expected visual behavior under various conditions. + - Dynamically renders components based on messages received from the test runner. + +## Prerequisites + +- Make sure that your Node version is > 18.x with all the rquirements(listed in package.json) installed. +- Ensure that you declare the PERCY_TOKEN environment varibale when runnning visual tests locally. +- You should not have anything running on port:4000 as the visual testing server utilizes that port to run the tests. + +## Guide to use the visual testing mechanism + +### Running visual tests locally + +1. **Setup**: + - Ensure all dependencies are installed: + + ```bash + yarn install + ``` + + - Set the `PERCY_TOKEN` environment variable: + + ```bash + export PERCY_TOKEN= + ``` + +2. **Run Visual Tests**: + - Execute the tests with the visual testing configuration: + + ```bash + yarn test:visual + ``` + +3. **Check results**: + - Head over to the Percy Dashboard and check the results for the latest Percy build. + +### Visual testing workflow + + The visual testing workflow is integrated with GitHub Actions. When changes are made, a deployment request is initiated. Only Learning Equality team members can approve this request. Once approved, the deployment is executed, and visual tests are run automatically. The results of the test run are surfacedin the form of an automated comment containing a link to the Percy build. + +### Writing visual tests + + You can write the visual tests long with the unit tests, i.e. in the same test file. Take a look at `KButton.spec.js` to familiarize yourself with writing visual tests. + +1. **Import Utility Functions**: + - Import the utility functions from `visual.testUtils.js`: + + ```javascript + import { renderComponent, takeSnapshot } from './visual.testUtils'; + ``` + + You can also import and use the utility functions for managing component's visual states as per requirement. To get an overview of the different utility functions available, please checkout `visual.testUtils.js`. + +2. **Write Tests**: + - Use the utility functions to render components and take snapshots. For example: + + ```javascript + describe.visual('KButton Visual Tests', () => { + it('Sample test for KButton', async () => { + await renderComponent('KButton', { text: 'Raised Button', appearance: 'raised-button' }); + await takeSnapshot('KButton - Raised Button', { widths: [375, 520] }); + }); + }); + ``` + + - Make sure to use `describe.visual` or `it.visual` instead of the default notations for writing test blocks containing visual tests so as to prevent any unexpected behavior. + +3. **Simulate User Interactions**: + - Use the custom commands to simulate user interactions. For example, to simulate the *'click'* user event, you can do something like: + + ```javascript + await click('button'); + ``` + + Here, *'button'* is the CSS tag for the component. You can pass different selectors to the functions used to simulate user interaction as per requirement. From 6dc4cab441cac3a76fc438a217e03199775fbf74 Mon Sep 17 00:00:00 2001 From: Kshitij Thareja Date: Sat, 10 Aug 2024 00:31:52 +0530 Subject: [PATCH 2/9] Update visual testing docs with links to mentioned files --- dev_docs/07_visual_testing_guide.md | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/dev_docs/07_visual_testing_guide.md b/dev_docs/07_visual_testing_guide.md index fab3d1bf5..e059e2755 100644 --- a/dev_docs/07_visual_testing_guide.md +++ b/dev_docs/07_visual_testing_guide.md @@ -7,26 +7,25 @@ The KDS now has a visual testing system integrated into it, using which you can The visual testing mechanism uses Puppeteer(for interacting with the testing environment and the rendered components), Jest-Puppeteer(to provide all required configuration to run tests using Puppeteer.), and Percy(to take snapshots for comparing visual diffs) to ensure components render correctly under various conditions. The key components include: 1. **Configuration Files**: - - ***visual.index.js***: Configures Jest-Puppeteer and includes server checks to ensure the visual testing playground is up and running. - - ***visual.setup.js***: Sets up global functions and constants needed for visual tests. - - ***percy.yml***: Configures Percy with snapshot widths, minimum height, and other settings. + - [***visual.index.js***](../jest.conf/visual.index.js): Configures Jest-Puppeteer and includes server checks to ensure the visual testing playground is up and running. + - [***visual.setup.js***](../jest.conf/visual.setup.js): Sets up global functions and constants needed for visual tests. -2. **Utility Functions** ***(visual.testUtils.js)***: +2. **Utility Functions** [***(visual.testUtils.js)***](../jest.conf/visual.testUtils.js): - `renderComponent(component, props, slots)`: Renders the specified component with given props and slots in the visual testing playground. - `takeSnapshot(name, options)`: Takes a Percy snapshot with the given name and options. - `click(selector)`, `hover(selector)`, `scrollToPos(selector, scrollOptions)`, `waitFor(selector)`, `delay(time)`: Utility functions for simulating user interactions. -3. **Visual Testing Playground** (***testing-playground.js***): +3. **Visual Testing Playground** ([***testing-playground.vue***](../docs/pages/testing-playground.vue)): - A dedicated page for component visual testing, ensuring expected visual behavior under various conditions. - Dynamically renders components based on messages received from the test runner. ## Prerequisites - Make sure that your Node version is > 18.x with all the rquirements(listed in package.json) installed. -- Ensure that you declare the PERCY_TOKEN environment varibale when runnning visual tests locally. -- You should not have anything running on port:4000 as the visual testing server utilizes that port to run the tests. +- Ensure that you declare the `PERCY_TOKEN` environment varibale when runnning visual tests locally. +- You should not have anything running on `port:4000` as the visual testing server utilizes that port to run the tests. -## Guide to use the visual testing mechanism +## Guide to use visual testing mechanism ### Running visual tests locally @@ -59,16 +58,16 @@ The KDS now has a visual testing system integrated into it, using which you can ### Writing visual tests - You can write the visual tests long with the unit tests, i.e. in the same test file. Take a look at `KButton.spec.js` to familiarize yourself with writing visual tests. + You can write the visual tests long with the unit tests, i.e. in the same test file. Take a look at [`KButton.spec.js`](../lib/buttons-and-links/__tests__/KButton.spec.js) to familiarize yourself with writing visual tests. 1. **Import Utility Functions**: - - Import the utility functions from `visual.testUtils.js`: + - Import the utility functions from [`visual.testUtils.js`](../jest.conf/visual.testUtils.js): ```javascript import { renderComponent, takeSnapshot } from './visual.testUtils'; ``` - You can also import and use the utility functions for managing component's visual states as per requirement. To get an overview of the different utility functions available, please checkout `visual.testUtils.js`. + You can also import and use the utility functions for managing component's visual states as per requirement. To get an overview of the different utility functions available, please checkout [`visual.testUtils.js`](../jest.conf/visual.testUtils.js). 2. **Write Tests**: - Use the utility functions to render components and take snapshots. For example: From 981aab93c3d601ffd2fb3a74965ff2c45e583599 Mon Sep 17 00:00:00 2001 From: KshitijThareja Date: Tue, 13 Aug 2024 13:52:38 +0530 Subject: [PATCH 3/9] Update documentation --- dev_docs/07_visual_testing_guide.md | 60 ++++++++++++++++------------- 1 file changed, 34 insertions(+), 26 deletions(-) diff --git a/dev_docs/07_visual_testing_guide.md b/dev_docs/07_visual_testing_guide.md index e059e2755..989642d44 100644 --- a/dev_docs/07_visual_testing_guide.md +++ b/dev_docs/07_visual_testing_guide.md @@ -1,31 +1,14 @@ # Visual Testing -The KDS now has a visual testing system integrated into it, using which you can verify the expected visual states after making any changes to the components. - -## Implementation details - - The visual testing mechanism uses Puppeteer(for interacting with the testing environment and the rendered components), Jest-Puppeteer(to provide all required configuration to run tests using Puppeteer.), and Percy(to take snapshots for comparing visual diffs) to ensure components render correctly under various conditions. The key components include: - -1. **Configuration Files**: - - [***visual.index.js***](../jest.conf/visual.index.js): Configures Jest-Puppeteer and includes server checks to ensure the visual testing playground is up and running. - - [***visual.setup.js***](../jest.conf/visual.setup.js): Sets up global functions and constants needed for visual tests. - -2. **Utility Functions** [***(visual.testUtils.js)***](../jest.conf/visual.testUtils.js): - - `renderComponent(component, props, slots)`: Renders the specified component with given props and slots in the visual testing playground. - - `takeSnapshot(name, options)`: Takes a Percy snapshot with the given name and options. - - `click(selector)`, `hover(selector)`, `scrollToPos(selector, scrollOptions)`, `waitFor(selector)`, `delay(time)`: Utility functions for simulating user interactions. - -3. **Visual Testing Playground** ([***testing-playground.vue***](../docs/pages/testing-playground.vue)): - - A dedicated page for component visual testing, ensuring expected visual behavior under various conditions. - - Dynamically renders components based on messages received from the test runner. +KDS has a visual testing system that allows you to take snapshots of how KDS Components would look like in different browsers, and compare them with the previously set baseline versions of these components, allowing you to see the visual differences in a PR's changes more quickly. ## Prerequisites -- Make sure that your Node version is > 18.x with all the rquirements(listed in package.json) installed. -- Ensure that you declare the `PERCY_TOKEN` environment varibale when runnning visual tests locally. +- Make sure that your Node version is > 18.x with all the requirements (listed in package.json) installed. +- Ensure that you declare the `PERCY_TOKEN` environment variable when running visual tests locally. - You should not have anything running on `port:4000` as the visual testing server utilizes that port to run the tests. -## Guide to use visual testing mechanism +## Guide to using the visual testing mechanism ### Running visual tests locally @@ -54,11 +37,13 @@ The KDS now has a visual testing system integrated into it, using which you can ### Visual testing workflow - The visual testing workflow is integrated with GitHub Actions. When changes are made, a deployment request is initiated. Only Learning Equality team members can approve this request. Once approved, the deployment is executed, and visual tests are run automatically. The results of the test run are surfacedin the form of an automated comment containing a link to the Percy build. + We use GitHub Actions to execute the visual testing workflow on every PR. When changes to a PR are made, a deployment request is initiated. Only **Learning Equality team members** can approve this request. Once approved, the deployment is executed, and visual tests are run automatically. The results of the test run are surfaced in the form of an automated comment containing a link to the Percy build. + + **Note:** Developers outside of Learning Equality can only review the visual changes for local test runs. To review the visual tests executions that run on GitHub Actions, one needs to be a part of Learning Equality's Browserstack team. ### Writing visual tests - You can write the visual tests long with the unit tests, i.e. in the same test file. Take a look at [`KButton.spec.js`](../lib/buttons-and-links/__tests__/KButton.spec.js) to familiarize yourself with writing visual tests. + You can write the visual tests alongside the unit tests, i.e. in the same test file. Take a look at [`KButton.spec.js`](../lib/buttons-and-links/__tests__/KButton.spec.js) to familiarize yourself with writing visual tests. 1. **Import Utility Functions**: - Import the utility functions from [`visual.testUtils.js`](../jest.conf/visual.testUtils.js): @@ -67,7 +52,7 @@ The KDS now has a visual testing system integrated into it, using which you can import { renderComponent, takeSnapshot } from './visual.testUtils'; ``` - You can also import and use the utility functions for managing component's visual states as per requirement. To get an overview of the different utility functions available, please checkout [`visual.testUtils.js`](../jest.conf/visual.testUtils.js). + You can also import and use the utility functions for managing component's visual states as needed. To get an overview of the different utility functions available, please check out [`visual.testUtils.js`](../jest.conf/visual.testUtils.js). 2. **Write Tests**: - Use the utility functions to render components and take snapshots. For example: @@ -81,7 +66,7 @@ The KDS now has a visual testing system integrated into it, using which you can }); ``` - - Make sure to use `describe.visual` or `it.visual` instead of the default notations for writing test blocks containing visual tests so as to prevent any unexpected behavior. + - Make sure to use `describe.visual` or `it.visual` instead of the default notations for writing test blocks containing visual tests so as to prevent any unexpected behavior. These custom blocks add a [Visual] tag to the test name whose presence or absence are then checked using a regex pattern based on the type of tests executed. This implementation helps us to determine which test blocks should be executed by Jest and which ones should be skipped. 3. **Simulate User Interactions**: - Use the custom commands to simulate user interactions. For example, to simulate the *'click'* user event, you can do something like: @@ -90,4 +75,27 @@ The KDS now has a visual testing system integrated into it, using which you can await click('button'); ``` - Here, *'button'* is the CSS tag for the component. You can pass different selectors to the functions used to simulate user interaction as per requirement. + Here, *'button'* is the CSS selector for the component. You can pass different selectors to the functions used to simulate user interaction as per requirement. + +## Implementation details + + The visual testing mechanism uses the following dependencies to ensure components render correctly under various conditions: + + - **Puppeteer:** for interacting with the testing environment and the rendered components. + - **Jest-Puppeteer:** to provide all required configuration to run tests using Puppeteer. + - **Percy:** to take snapshots for comparing visual diffs. + + The key parts of the mechanism include: + +1. **Configuration Files**: Since we are using Jest for both unit and visual tests, there are two separate configuration files for visual tests apart from the ones being used for unit tests so as to ensure separation of logic needed for running both types of tests. + - [***visual.index.js***](../jest.conf/visual.index.js): Configures Jest-Puppeteer and includes server checks to ensure the visual testing playground is up and running. + - [***visual.setup.js***](../jest.conf/visual.setup.js): Sets up global functions and constants needed for visual tests. + +2. **Utility Functions** [***(visual.testUtils.js)***](../jest.conf/visual.testUtils.js): We are also using a separate file that contains all the utility functions that are needed for writing visual tests. + - `renderComponent(component, props, slots)`: Renders the specified component with given props and slots in the visual testing playground. + - `takeSnapshot(name, options)`: Takes a Percy snapshot with the given name and options. + - `click(selector)`, `hover(selector)`, `scrollToPos(selector, scrollOptions)`, `waitFor(selector)`, `delay(time)`: Utility functions for simulating user interactions. + +3. **Visual Testing Playground** ([***testing-playground.vue***](../docs/pages/testing-playground.vue)): + - A dedicated page rendered by the devserver for component visual testing, ensuring expected visual behavior under various conditions. + - The visual test command runs the devserver and once the server is up and the testing playground page is loaded, the visual tests are executed and the required components are rendered dynamically based on messages received from the test runner. From cdbf6ca00e3cd4aa42bd5f3d7aeff9974cd3db17 Mon Sep 17 00:00:00 2001 From: KshitijThareja Date: Tue, 13 Aug 2024 19:43:57 +0530 Subject: [PATCH 4/9] Add reference to documentation in getting-started doc --- dev_docs/01_getting_started.md | 1 + dev_docs/07_visual_testing_guide.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/dev_docs/01_getting_started.md b/dev_docs/01_getting_started.md index 5be8bc409..38eff6af4 100644 --- a/dev_docs/01_getting_started.md +++ b/dev_docs/01_getting_started.md @@ -55,3 +55,4 @@ The guidelines referenced above should be sufficient for the most common tasks. - [How to update the documentation website](./04_how_to_update_docs.md) - [Icons](./05_icons.md) - [Miscellaneous](./06_misc.md) +- [Visual Testing](./07_visual_testing_guide.md) diff --git a/dev_docs/07_visual_testing_guide.md b/dev_docs/07_visual_testing_guide.md index 989642d44..0ba24d4f5 100644 --- a/dev_docs/07_visual_testing_guide.md +++ b/dev_docs/07_visual_testing_guide.md @@ -75,7 +75,7 @@ KDS has a visual testing system that allows you to take snapshots of how KDS Com await click('button'); ``` - Here, *'button'* is the CSS selector for the component. You can pass different selectors to the functions used to simulate user interaction as per requirement. + Here, *'button'* is the CSS selector for the component. You can pass different selectors to the functions, exposed by [`visual.testUtils.js`](../jest.conf/visual.testUtils.js), to simulate user interaction as per requirement. ## Implementation details From 5c079b59d6a6ebdf1b34dbc4e66cd4e6a8c57058 Mon Sep 17 00:00:00 2001 From: KshitijThareja Date: Sun, 18 Aug 2024 20:40:05 +0530 Subject: [PATCH 5/9] Update test command to work for all test files --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a711214e3..16576b1ab 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "precompile-svgs": "node utils/precompileSvgs/index.js && yarn run pregenerate", "precompile-custom-svgs": "node utils/precompileSvgs/index.js --custom && yarn run pregenerate", "_lint-watch-fix": "yarn lint -w -m", - "test:percy": "PERCY_LOGLEVEL=info npx percy exec -v -- jest --config jest.conf/visual.index.js -i ./lib/buttons-and-links/__tests__/KButton.spec.js", + "test:percy": "PERCY_LOGLEVEL=info npx percy exec -v -- jest --config jest.conf/visual.index.js", "test": "jest --config=jest.conf/index.js", "test:visual": "concurrently --kill-others --success first --names \"SERVER,TEST\" -c \"bgCyan.bold,bgYellow.bold\" \"yarn dev-only > /dev/null 2>&1\" \"yarn test:percy\"", "_api-watch": "chokidar \"**/lib/**\" -c \"node utils/extractApi.js\"" From 176a9716d52e735345c963cef42f2d1bcc385fd9 Mon Sep 17 00:00:00 2001 From: KshitijThareja Date: Tue, 20 Aug 2024 17:47:15 +0530 Subject: [PATCH 6/9] Add additional info for rendering complex components --- dev_docs/01_getting_started.md | 2 +- dev_docs/07_visual_testing_guide.md | 34 +++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/dev_docs/01_getting_started.md b/dev_docs/01_getting_started.md index 38eff6af4..7a391fa69 100644 --- a/dev_docs/01_getting_started.md +++ b/dev_docs/01_getting_started.md @@ -52,7 +52,7 @@ You're now ready to code! - If you'd like to update the component library, continue to [How to update the component library](./03_how_to_update_library.md). The guidelines referenced above should be sufficient for the most common tasks. There are a few additional developer documentation pages available. However, these pages contain information that is more internal in nature or related to specialized tasks: +- [Visual Testing](./07_visual_testing_guide.md) - [How to update the documentation website](./04_how_to_update_docs.md) - [Icons](./05_icons.md) - [Miscellaneous](./06_misc.md) -- [Visual Testing](./07_visual_testing_guide.md) diff --git a/dev_docs/07_visual_testing_guide.md b/dev_docs/07_visual_testing_guide.md index 0ba24d4f5..6f878e2e9 100644 --- a/dev_docs/07_visual_testing_guide.md +++ b/dev_docs/07_visual_testing_guide.md @@ -52,7 +52,11 @@ KDS has a visual testing system that allows you to take snapshots of how KDS Com import { renderComponent, takeSnapshot } from './visual.testUtils'; ``` - You can also import and use the utility functions for managing component's visual states as needed. To get an overview of the different utility functions available, please check out [`visual.testUtils.js`](../jest.conf/visual.testUtils.js). + You can also import and use the utility functions for managing component's visual states as needed. Different utility functions available are: + + - `renderComponent(component, props, slots)`: Renders the specified component with given props and slots in the visual testing playground. + - `takeSnapshot(name, options)`: Takes a Percy snapshot with the given name and options. + - `click(selector)`, `hover(selector)`, `scrollToPos(selector, scrollOptions)`, `waitFor(selector)`, `delay(time)`: Utility functions for simulating user interactions. 2. **Write Tests**: - Use the utility functions to render components and take snapshots. For example: @@ -66,6 +70,31 @@ KDS has a visual testing system that allows you to take snapshots of how KDS Com }); ``` + - For rendering complex commponents, refer to the following: + + - **Example with slots:** For components that involve slots, you can render them with `renderComponent` by passing the slot structure using element and elementProps. You can pass multiple slots at once. + + ```javascript + await renderComponent('KIconButton', { icon: 'add' }, { + menu: { // slot named #menu + element: 'KDropdownMenu', + elementProps: { + items: ['Option 1', 'Option 2'], + }, + }, + }); + ``` + + **Note:** Use `'default'` key for passing default slots, with the HTML content specified using `innerHTML` prop. Checkout [`KButton.spec.js`](../lib/buttons-and-links/__tests__/KButton.spec.js) for reference. + + - **Example involving more complex component structures:** When dealing with more complex component structures, it's recommended to create a dedicated Vue component for visual testing purposes. Add all the use cases in a Vue file and then render the custom component using the `renderComponent` function. + + ```javascript + await renderComponent('CustomVueComponent'); + ``` + + This approach ensures that all necessary child components and slots are correctly set up and rendered. + - Make sure to use `describe.visual` or `it.visual` instead of the default notations for writing test blocks containing visual tests so as to prevent any unexpected behavior. These custom blocks add a [Visual] tag to the test name whose presence or absence are then checked using a regex pattern based on the type of tests executed. This implementation helps us to determine which test blocks should be executed by Jest and which ones should be skipped. 3. **Simulate User Interactions**: @@ -92,9 +121,6 @@ KDS has a visual testing system that allows you to take snapshots of how KDS Com - [***visual.setup.js***](../jest.conf/visual.setup.js): Sets up global functions and constants needed for visual tests. 2. **Utility Functions** [***(visual.testUtils.js)***](../jest.conf/visual.testUtils.js): We are also using a separate file that contains all the utility functions that are needed for writing visual tests. - - `renderComponent(component, props, slots)`: Renders the specified component with given props and slots in the visual testing playground. - - `takeSnapshot(name, options)`: Takes a Percy snapshot with the given name and options. - - `click(selector)`, `hover(selector)`, `scrollToPos(selector, scrollOptions)`, `waitFor(selector)`, `delay(time)`: Utility functions for simulating user interactions. 3. **Visual Testing Playground** ([***testing-playground.vue***](../docs/pages/testing-playground.vue)): - A dedicated page rendered by the devserver for component visual testing, ensuring expected visual behavior under various conditions. From 6e06337550c7614db22d96f6a2e2a9a258468647 Mon Sep 17 00:00:00 2001 From: KshitijThareja Date: Wed, 21 Aug 2024 17:03:31 +0530 Subject: [PATCH 7/9] Add link to percy documentation --- dev_docs/07_visual_testing_guide.md | 1 + 1 file changed, 1 insertion(+) diff --git a/dev_docs/07_visual_testing_guide.md b/dev_docs/07_visual_testing_guide.md index 6f878e2e9..d0dade103 100644 --- a/dev_docs/07_visual_testing_guide.md +++ b/dev_docs/07_visual_testing_guide.md @@ -69,6 +69,7 @@ KDS has a visual testing system that allows you to take snapshots of how KDS Com }); }); ``` + Note that the `widths` parameter passed to the `takeSnaphot` function is a part of Percy CLI's snapshot options. For a full list of available options, refer the [Percy documentation](https://www.browserstack.com/docs/percy/take-percy-snapshots/snapshots-via-scripts#per-snapshot-configuration). - For rendering complex commponents, refer to the following: From 33435a39778c9b14b2009ab4dd31b258759e9a6e Mon Sep 17 00:00:00 2001 From: KshitijThareja Date: Thu, 22 Aug 2024 01:48:30 +0530 Subject: [PATCH 8/9] Update info for usage of test blocks for visual tests --- dev_docs/07_visual_testing_guide.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/dev_docs/07_visual_testing_guide.md b/dev_docs/07_visual_testing_guide.md index d0dade103..7dab433b9 100644 --- a/dev_docs/07_visual_testing_guide.md +++ b/dev_docs/07_visual_testing_guide.md @@ -52,7 +52,7 @@ KDS has a visual testing system that allows you to take snapshots of how KDS Com import { renderComponent, takeSnapshot } from './visual.testUtils'; ``` - You can also import and use the utility functions for managing component's visual states as needed. Different utility functions available are: + You can import and use the utility functions for managing component's visual states as needed. Different utility functions available are: - `renderComponent(component, props, slots)`: Renders the specified component with given props and slots in the visual testing playground. - `takeSnapshot(name, options)`: Takes a Percy snapshot with the given name and options. @@ -96,7 +96,10 @@ KDS has a visual testing system that allows you to take snapshots of how KDS Com This approach ensures that all necessary child components and slots are correctly set up and rendered. - - Make sure to use `describe.visual` or `it.visual` instead of the default notations for writing test blocks containing visual tests so as to prevent any unexpected behavior. These custom blocks add a [Visual] tag to the test name whose presence or absence are then checked using a regex pattern based on the type of tests executed. This implementation helps us to determine which test blocks should be executed by Jest and which ones should be skipped. + - Make sure to use `describe.visual` or `it.visual` instead of the default notations for writing test blocks containing visual tests so as to prevent any unexpected behavior. These custom blocks add a `[Visual]` tag to the test name whose presence or absence are then checked using a regex pattern based on the type of tests executed. + - Anything inside these blocks will not be executed when running unit tests. The default `describe` and `it` blocks can be used inside a parent `describe.visual` block, which itelf can be placed within a `describe` block as its parent (as `describe` blocks just group the tests placed within them). + - In simple terms, any test block with a `[Visual]` tag will be executed when running visual tests, regardless of the type of test blocks used within it, and will be ignored when running unit tests. Using `describe.visual` or `it.visual` automatically appends this tag to the test name. + - This implementation helps determine which test blocks should be executed by Jest and which ones should be skipped. 3. **Simulate User Interactions**: - Use the custom commands to simulate user interactions. For example, to simulate the *'click'* user event, you can do something like: From 28e3c4085b3f9a38f166e151f128790d6e75aef2 Mon Sep 17 00:00:00 2001 From: KshitijThareja Date: Thu, 22 Aug 2024 20:28:18 +0530 Subject: [PATCH 9/9] Update required node version specification --- dev_docs/07_visual_testing_guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dev_docs/07_visual_testing_guide.md b/dev_docs/07_visual_testing_guide.md index 7dab433b9..cdf3c0745 100644 --- a/dev_docs/07_visual_testing_guide.md +++ b/dev_docs/07_visual_testing_guide.md @@ -4,7 +4,7 @@ KDS has a visual testing system that allows you to take snapshots of how KDS Com ## Prerequisites -- Make sure that your Node version is > 18.x with all the requirements (listed in package.json) installed. +- Make sure that your Node version is >= 18.x with all the requirements (listed in package.json) installed. - Ensure that you declare the `PERCY_TOKEN` environment variable when running visual tests locally. - You should not have anything running on `port:4000` as the visual testing server utilizes that port to run the tests.