Merge branch 'vt-test' of https://github.com/KshitijThareja/kolibri-d…

…esign-system into vt-test

.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/tests.yml

@@ -38,4 +38,4 @@ jobs:
         yarn --frozen-lockfile
         npm rebuild node-sass
     - name: Run tests
-      run: yarn test
+      run: yarn test

.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 }}
+              })

docs/pages/testing-playground.vue

@@ -69,7 +69,7 @@
     methods: {
       /**
        * Handles messages received from the test runner to render a specified component.
-       * @param {MessageEvent} event - The message event containing the component and its props.
+       * @param {MessageEvent} event -  The message event containing the component and its props.
        */
       handleMessage(event) {
         if (event.data.type === 'RENDER_COMPONENT') {