Test PR for testing new Dockerized testing

.eslintignore

@@ -18,3 +18,5 @@ out
 LICENSE
 THIRD-PARTY-LICENSES
 NOTICE
+Dockerfile
+e2e-results

.github/workflows/e2e.yml

@@ -0,0 +1,71 @@
+name: Run E2E Tests
+on: workflow_call
+jobs:
+    e2e:
+        # Prevents the workflow running from snapshot updates committed by the bot
+        if: github.actor != 'github-actions[bot]'
+        runs-on: ubuntu-latest
+        steps:
+          # Checkout the PR branch
+          - name: Checkout Code
+            uses: actions/checkout@v4
+
+          # Set up Node
+          - name: Set up Node
+            uses: actions/setup-node@v4
+            with:
+              node-version: '20.x'
+              registry-url: 'https://registry.npmjs.org'
+              scope: '@aws'
+
+          # Install
+          - name: Install NPM packages
+            run: npm ci
+
+          # Build
+          - name: Build
+            run: npm run build && cd ./ui-tests && npm install && cd ..
+
+            # Run the linter
+          - name: Run linter
+            run: npm run lint
+
+          # Build and run Docker image
+          - name: Build and run E2E tests Docker Image
+            run: npm run tests:e2e
+            continue-on-error: true
+
+          # Extract test results from Docker container
+          - name: Extract test results from Docker container
+            if: ${{ !failure() }}
+            run: npm run docker:inspect:override
+
+          # Upload an artifact of all the results
+          - name: Upload E2E results
+            uses: actions/upload-artifact@v4
+            with:
+              name: snapshots
+              path: ./ui-tests/__test__/__results__
+              retention-days: 30
+
+          # Replace branch content with snapshots produced by Docker
+          - name: Replace Snapshots in PR Branch
+            if: ${{ !failure() }}
+            run: |
+              git config user.name "github-actions[bot]"
+              git config user.email "github-actions[bot]@users.noreply.github.com"
+              git add ./ui-tests/__test__/__results__/__snapshots__
+              git commit -m "[Docker] Update E2E image snapshots"
+              git push
+            env:
+              GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+          # Report test results using JUnit XML
+          - name: Publish Test Results
+            uses: dorny/test-reporter@v1
+            if: ${{ !cancelled() }}
+            with:
+              name: E2E Tests
+              path: ./ui-tests/__test__/__results__/__reports__/junit.xml
+              reporter: junit
+              fail-on-error: false

.github/workflows/new_pr.yml

@@ -1,48 +1,25 @@
-name: Check Lint, Tests and Build
+name: New PR created
 on:
   pull_request:
-    branches: [main, feature/*, fix/*]
+    branches: [main]
     types: [opened, reopened, ready_for_review, synchronize]
 jobs:
-  notify:
-    if: github.event.pull_request.draft == false
-    name: Slack notification
-    runs-on: [ubuntu-latest]
-    steps:
-      - name: Post message
-        uses: slackapi/slack-github-action@v1.25.0
-        env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-        with:
-          payload: |
-            {
-              "title": ${{ toJson(github.event.pull_request.title) }},
-              "author": ${{ toJson(github.event.pull_request.user.login) }},
-              "link": ${{ toJson(github.event.pull_request.html_url) }},
-              "repository": "FlareChatUI" 
-            }
-  build:
-    runs-on: macos-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-            fetch-depth: 20
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
-          scope: '@aws'
-      - name: Install
-        run: npm ci
-      - name: Build
-        run: npm run build
-      - name: Run Unit and E2E tests
-        run: npm run tests:unit && npm run tests:e2e
-      - name: Run Lint
-        run: npm run lint
-      - uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
-        with:
-          name: test-snapshots
-          path: ./ui-tests/__test__/__image_snapshots__
-          retention-days: 30
+  # notify:
+  #   if: github.event.pull_request.draft == false
+  #   name: Slack notification
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Post message
+  #       uses: slackapi/slack-github-action@v1.25.0
+  #       env:
+  #         SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+  #       with:
+  #         payload: |
+  #           {
+  #             "title": ${{ toJson(github.event.pull_request.title) }},
+  #             "author": ${{ toJson(github.event.pull_request.user.login) }},
+  #             "link": ${{ toJson(github.event.pull_request.html_url) }},
+  #             "repository": "FlareChatUI" 
+  #           }
+  e2e:
+    uses: ./.github/workflows/e2e.yml

.github/workflows/publish.yml

@@ -6,19 +6,17 @@ jobs:
   build:
     runs-on: macos-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
           scope: '@aws'
-      - run: npm ci
-      - name: Build mynah-ui
-        run: npm run build
-      - name: Run tests
-        run: npm run tests:unit && npm run tests:e2e
-      - name: Check lint
-        run: npm run lint
+      # Install      
+      - name: Run E2E tests
+        uses: ./.github/workflows/e2e.yml
+      - name: Run unit tests
+        run: npm run tests:unit
       - name: Build demo app
         run: npm run packdemo
       - name: Get release info

.gitignore

@@ -9,4 +9,6 @@ node_modules
 .idea
 package-lock.json
 .gitcommit
-.vscode
+.vscode
+__reports__/
+e2e-results/

Dockerfile

@@ -0,0 +1,33 @@
+# Use a base Node image
+FROM node:22
+
+# Set working directory
+WORKDIR /app
+
+# Copy the src from the root
+COPY ./src /app/src
+
+# Copy config files from root
+COPY ./package.json /app
+COPY ./package-lock.json /app
+COPY ./postinstall.js /app
+COPY ./webpack.config.js /app
+COPY ./tsconfig.json /app
+
+# Copy required files from ui-tests
+COPY ./ui-tests/package.json /app/ui-tests/
+COPY ./ui-tests/playwright.config.ts /app/ui-tests/
+COPY ./ui-tests/tsconfig.json /app/ui-tests/
+COPY ./ui-tests/webpack.config.js /app/ui-tests/
+
+# Copy the __test__ and src directories from ui-tests
+COPY ./ui-tests/__test__ /app/ui-tests/__test__
+COPY ./ui-tests/src /app/ui-tests/src
+
+# Install dependencies and build MynahUI
+RUN npm install
+RUN npm run build
+RUN cd ./ui-tests && npm install && npm run prepare
+
+# Default command to run the tests
+CMD ["npm", "run", "docker:internal"]

package.json

@@ -27,8 +27,15 @@
         "lint": "npx eslint \"./**\"",
         "format:check": "npx prettier --check .",
         "format:write": "npx prettier --write .",
+        "docker:build": "docker build -t flarechatui-e2e-image .",
+        "docker:run": "npm run docker:clean || true && docker run --name flarechatui-e2e-container flarechatui-e2e-image",
+        "docker:internal": "cd ./ui-tests && npm run e2e",
+        "docker:inspect": "docker export $(docker ps -a -q -f name=flarechatui-e2e-container) | tar -xvf - app/ui-tests/__results__ && mv app/ui-tests/__results__ ./e2e-results && rm -rf ./app",
+        "docker:inspect:override": "rm -rf ./ui-tests/__test__/__results__ && docker export $(docker ps -a -q -f name=flarechatui-e2e-container) | tar -xvf - app/ui-tests/__results__ && mv app/ui-tests/__results__ ./ui-tests/__results__ && rm -rf ./app",
+        "docker:clean": "docker rm -f flarechatui-e2e-container",
         "tests:unit": "jest",
-        "tests:e2e": "cd ./ui-tests && npm install && npm run prepare && npm run e2e",
+        "tests:e2e": "npm run docker:build && npm run docker:run",
+        "tests:e2e:trace": "cd ./ui-tests && npm run trace",
         "api-docs": "npx typedoc src/main.ts --out ./api-docs",
         "api-doc-deploy": "npx typedoc src/main.ts --out ./example/dist/api-doc",
         "postinstall": "node postinstall.js",

ui-tests/__test__/flows/click-followup.ts

@@ -1,4 +1,4 @@
-import { Page } from 'playwright/test';
+import { expect, Page } from 'playwright/test';
 import { getSelector, waitForAnimationEnd } from '../helpers';
 import testIds from '../../../src/helper/test-ids';
 
@@ -13,7 +13,7 @@ export const clickToFollowup = async (page: Page, skipScreenshots?: boolean): Pr
   await waitForAnimationEnd(page);
 
   if (skipScreenshots !== true) {
-    const chatItemsContainer = await page.waitForSelector(getSelector(testIds.chat.chatItemsContainer));
-    expect(await chatItemsContainer.screenshot()).toMatchImageSnapshot();
+    const chatItemsContainer = await page.waitForSelector(`${getSelector(testIds.chat.chatItemsContainer)}`);
+    expect(await chatItemsContainer.screenshot()).toMatchSnapshot();
   }
 };

ui-tests/__test__/flows/close-tab.ts

@@ -1,4 +1,4 @@
-import { Page } from 'playwright/test';
+import { expect, Page } from 'playwright/test';
 import testIds from '../../../src/helper/test-ids';
 import { getSelector } from '../helpers';
 
@@ -15,6 +15,6 @@ export const closeTab = async (page: Page, withDblClick?: boolean, skipScreensho
 
   if (skipScreenshots !== true) {
     // No tabs snap
-    expect(await page.screenshot()).toMatchImageSnapshot();
+    expect(await page.screenshot()).toMatchSnapshot();
   }
 };

ui-tests/__test__/flows/feedback-form/cancel-feedback-form.ts

@@ -1,14 +1,23 @@
-import { Page } from 'playwright/test';
+import { expect, Page } from 'playwright/test';
 import { getSelector, waitForAnimationEnd } from '../../helpers';
 import testIds from '../../../../src/helper/test-ids';
+import { renderDownvoteResult } from './render-downvote-result';
 
 export const cancelFeedbackForm = async (page: Page, skipScreenshots?: boolean): Promise<void> => {
+  await renderDownvoteResult(page, true);
+  await waitForAnimationEnd(page);
+
+  const reportButton = page.locator(getSelector(testIds.chatItem.vote.reportButton));
+  expect(reportButton).toBeDefined();
+  await reportButton.click();
+  await waitForAnimationEnd(page);
+
   const cancelButton = page.locator(getSelector(testIds.feedbackForm.cancelButton));
   expect(cancelButton).toBeDefined();
   await cancelButton.click();
   await waitForAnimationEnd(page);
 
   if (skipScreenshots !== true) {
-    expect(await page.screenshot()).toMatchImageSnapshot();
+    expect(await page.screenshot()).toMatchSnapshot();
   }
 };

ui-tests/__test__/flows/feedback-form/render-downvote-result.ts

@@ -1,23 +1,10 @@
-import { Page } from 'playwright/test';
+import { expect, Page } from 'playwright/test';
 import { getSelector, waitForAnimationEnd } from '../../helpers';
 import testIds from '../../../../src/helper/test-ids';
+import { renderFeedbackForm } from './render-feedback-form';
 
 export const renderDownvoteResult = async (page: Page, skipScreenshots?: boolean): Promise<void> => {
-  await page.evaluate((body) => {
-    const selectedTabId = window.mynahUI.getSelectedTabId();
-    if (selectedTabId != null) {
-      window.mynahUI.updateStore(selectedTabId, {
-        chatItems: [],
-      });
-
-      window.mynahUI.addChatItem(selectedTabId, {
-        type: 'answer' as any,
-        snapToTop: true,
-        body: 'This message is votable.',
-        canBeVoted: true,
-      });
-    }
-  });
+  await renderFeedbackForm(page, true);
   await waitForAnimationEnd(page);
 
   const thumbsDown = page.locator(getSelector(testIds.chatItem.vote.downvoteLabel));
@@ -26,6 +13,6 @@ export const renderDownvoteResult = async (page: Page, skipScreenshots?: boolean
   await waitForAnimationEnd(page);
 
   if (skipScreenshots !== true) {
-    expect(await page.screenshot()).toMatchImageSnapshot();
+    expect(await page.screenshot()).toMatchSnapshot();
   }
 };

ui-tests/__test__/flows/feedback-form/render-feedback-form.ts

@@ -1,4 +1,4 @@
-import { Page } from 'playwright/test';
+import { expect, Page } from 'playwright/test';
 import { getSelector, waitForAnimationEnd } from '../../helpers';
 import testIds from '../../../../src/helper/test-ids';
 
@@ -19,31 +19,31 @@ export const renderFeedbackForm = async (page: Page, skipScreenshots?: boolean):
     }
   });
 
-  const thumbsDown = page.locator(getSelector(testIds.chatItem.vote.downvoteLabel));
-  expect(thumbsDown).toBeDefined();
-  await thumbsDown.click();
-  await waitForAnimationEnd(page);
+  if (skipScreenshots !== true) {
+    const thumbsDown = page.locator(getSelector(testIds.chatItem.vote.downvoteLabel));
+    expect(thumbsDown).toBeDefined();
+    await thumbsDown.click();
+    await waitForAnimationEnd(page);
 
-  const reportButton = page.locator(getSelector(testIds.chatItem.vote.reportButton));
-  expect(reportButton).toBeDefined();
-  await reportButton.click();
-  await waitForAnimationEnd(page);
+    const reportButton = page.locator(getSelector(testIds.chatItem.vote.reportButton));
+    expect(reportButton).toBeDefined();
+    await reportButton.click();
+    await waitForAnimationEnd(page);
 
-  const commentInput = page.locator(getSelector(testIds.feedbackForm.comment));
-  expect(commentInput).toBeDefined();
-  await commentInput.fill('This is some feedback comment');
-  await waitForAnimationEnd(page);
+    const commentInput = page.locator(getSelector(testIds.feedbackForm.comment));
+    expect(commentInput).toBeDefined();
+    await commentInput.fill('This is some feedback comment');
+    await waitForAnimationEnd(page);
 
-  const descriptionText = page.locator(getSelector(testIds.feedbackForm.description));
-  expect(descriptionText).toBeDefined();
+    const descriptionText = page.locator(getSelector(testIds.feedbackForm.description));
+    expect(descriptionText).toBeDefined();
 
-  const submitButton = page.locator(getSelector(testIds.feedbackForm.submitButton));
-  expect(submitButton).toBeDefined();
+    const submitButton = page.locator(getSelector(testIds.feedbackForm.submitButton));
+    expect(submitButton).toBeDefined();
 
-  const cancelButton = page.locator(getSelector(testIds.feedbackForm.cancelButton));
-  expect(cancelButton).toBeDefined();
+    const cancelButton = page.locator(getSelector(testIds.feedbackForm.cancelButton));
+    expect(cancelButton).toBeDefined();
 
-  if (skipScreenshots !== true) {
-    expect(await page.screenshot()).toMatchImageSnapshot();
+    expect(await page.screenshot()).toMatchSnapshot();
   }
 };