Introduce visual testing mechanism to KDS

.eslintrc.js

@@ -20,4 +20,14 @@ esLintConfig.settings['import/resolver'].nuxt = {
   nuxtSrcDir: 'docs',
 };
 
+// Remove linting errors for the globals defined in the jest-puppeteer package and testUtils
+esLintConfig.globals = {
+  ...esLintConfig.globals,
+  page: true,
+  browser: true,
+  context: true,
+  puppeteerConfig: true,
+  jestPuppeteer: true,
+};
+
 module.exports = esLintConfig;

.github/githubUtils.js

@@ -0,0 +1,43 @@
+async function generateComment(percyUrl) {
+  return `
+### Percy Visual Test Results
+
+**Percy Dashboard:** [View Detailed Report](${percyUrl})
+
+**Environment:**
+- **Node.js Version:** 18.x
+- **OS:** Ubuntu-latest
+
+**Instructions for Reviewers:**
+- Click on the [Percy Dashboard](${percyUrl}) link to view detailed visual diffs.
+- Review the visual changes highlighted in the report.
+- Approve or request changes based on the visual differences.
+`;
+}
+
+async function findComment(github, context, issue_number) {
+  let comment;
+  let page = 1
+  while (!comment) {
+    const request = await github.rest.issues.listComments({
+      issue_number,
+      owner: context.repo.owner,
+      repo: context.repo.repo,
+      page,
+    })
+    const comments = request.data
+    if (!comments.length) {
+      return;
+    }
+    comment = comments.find(c => c.body && c.body.includes('### Percy Visual Test Results'));
+    if (comment) {
+      return comment.id.toString()
+    }
+    page += 1;
+  }
+}
+
+module.exports = {
+  findComment,
+  generateComment,
+}

.github/workflows/visual_tests.yml

@@ -0,0 +1,109 @@
+name: Percy Visual Tests
+
+on: [pull_request_target]
+
+jobs:
+  pre_job:
+    name: Path match check
+    runs-on: ubuntu-latest
+    # Map a step output to a job output
+    outputs:
+      should_skip: ${{ steps.skip_check.outputs.should_skip }}
+    steps:
+      - id: skip_check
+        uses: fkirc/skip-duplicate-actions@master
+        with:
+          github_token: ${{ github.token }}
+          paths: '["**.vue", "**.js", "**.css", "**.scss", "yarn.lock"]'
+
+  visual_tests:
+    name: Frontend Visual Tests
+    needs: pre_job
+    if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
+    runs-on: ubuntu-latest
+    environment: percy_tests
+    outputs:
+      percy_url: ${{ steps.extract-url.outputs.percy_url }}
+    steps:
+      - name: Checkout code from PR
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+      - name: Cache Node.js modules
+        uses: actions/cache@v4
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.OS }}-node-
+      - name: Install dependencies
+        run: |
+          yarn --frozen-lockfile
+          npm rebuild node-sass
+      - name: Download Chromium
+        run: npx puppeteer browsers install chrome
+      - name: Extract jsdocs and environment info 
+        run: yarn pregenerate
+      - name: Run visual tests
+        run: yarn test:visual 2>&1 | tee test-output.log
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      - name: Extract Percy build URL
+        id: extract-url
+        run: |
+          url=$(grep -o 'https://percy.io/[a-zA-Z0-9/_-]*' test-output.log | tail -1)
+          echo "percy_url=$url" >> $GITHUB_OUTPUT
+
+  comment:
+    name: Comment Percy results
+    needs: visual_tests
+    if: ${{ needs.visual_tests.result == 'success' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code from PR
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Define comment body
+        id: comment-text
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const percyUrl = "${{ needs.visual_tests.outputs.percy_url }}";
+            const utils = require('./.github/githubUtils.js');
+            return await utils.generateComment(percyUrl);
+      - name: Find existing comment
+        id: find-comment
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const utils = require('./.github/githubUtils.js');
+            return await utils.findComment(github, context, context.issue.number);
+      - name: Create build comment
+        if: ${{!steps.find-comment.outputs.result}}
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+              github.rest.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: ${{ steps.comment-text.outputs.result }}
+              })
+      - name: Update build comment
+        if: ${{steps.find-comment.outputs.result}}
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+              github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: ${{steps.find-comment.outputs.result}},
+                body: ${{ steps.comment-text.outputs.result }}
+              })

.percy.yml

@@ -0,0 +1,19 @@
+version: 2
+snapshot:
+  widths:
+    - 375
+    - 1280
+  minHeight: 1024
+  percyCSS: ""
+  enableJavaScript: false #disable Javascript by default to capture initial page state without JS-driven changes
+  cliEnableJavaScript: true #enable Javascript when running Percy through CLI, for dynamic content
+  disableShadowDOM: false
+discovery:
+  allowedHostnames: []
+  disallowedHostnames: []
+  networkIdleTimeout: 100
+  captureMockedServiceWorker: false
+upload:
+  files: "**/*.{png,jpg,jpeg}"
+  ignore: ""
+  stripExtensions: false

dev_docs/01_getting_started.md

@@ -52,6 +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)

dev_docs/07_visual_testing_guide.md

@@ -0,0 +1,131 @@
+# Visual Testing
+
+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 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 using 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=<your-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
+
+  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 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):
+
+     ```javascript
+     import { renderComponent, takeSnapshot } from './visual.testUtils';
+     ```
+
+     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.
+      - `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:
+
+     ```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] });
+       });
+     });
+     ```
+     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:
+
+      - **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. 
+      - 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:
+
+     ```javascript
+      await click('button');
+     ```
+
+     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
+
+  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.
+
+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.