junit test file

.circleci/config.yml

@@ -128,8 +128,10 @@ jobs:
           name: Install Playwright browsers
           command: npx playwright install --with-deps
       - run:
-          name: Run Playwright snapshot tests
-          command: yarn playwright test
+          name: Run Playwright snapshot tests # refer to https://circleci.com/docs/collect-test-data/#playwright
+          command: PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml yarn playwright test --reporter=junit
+      - store_test_results:
+          path: results.xml
       - store_artifacts:
           path: /Users/distiller/project/test-results
           destination: playwright-test-results

__visual_tests__/utils.ts

@@ -1,16 +1,13 @@
-import {expect, Page} from "@playwright/test";
+import { expect, Page } from '@playwright/test';
 
-import {WidgetComponentIds} from "./const";
+import { WidgetComponentIds } from './const';
 
 export async function assertScreenshot(page: Page, screenshotName: string, browserName: string) {
   const name = `${screenshotName}.${browserName}.${process.platform}.png`; // Include the browser and OS architecture info in the filename
-  await expect(page.locator(WidgetComponentIds.WIDGET)).toHaveScreenshot(
-    name,
-    {
-      omitBackground: false,
-      maxDiffPixelRatio: 0.01, // Need this because Sendbird logo is slightly differently rendered in CI.
-    }
-  );
+  await expect(page.locator(WidgetComponentIds.WIDGET)).toHaveScreenshot(name, {
+    omitBackground: false,
+    maxDiffPixelRatio: 0.01, // Need this because Sendbird logo is slightly differently rendered in CI.
+  });
 }
 
 export async function loadWidget(page: Page) {

__visual_tests__/workflow-tests.spec.ts

@@ -1,8 +1,7 @@
-import {test} from '@playwright/test';
-
-import {TEST_URL, WidgetComponentIds} from "./const";
-import {assertScreenshot, clickNthChip, loadWidget, sendTextMessage} from "./utils";
+import { test } from '@playwright/test';
 
+import { TEST_URL, WidgetComponentIds } from './const';
+import { assertScreenshot, clickNthChip, loadWidget, sendTextMessage } from './utils';
 
 test.beforeEach(async ({ page }) => {
   await page.goto(TEST_URL);
@@ -21,18 +20,18 @@ test.beforeEach(async ({ page }) => {
  */
 test('100', async ({ page, browserName }) => {
   await loadWidget(page);
-  
+
   // 1
   await sendTextMessage(page, 'Give me a food order form', 0);
   const widgetWindow = page.locator(WidgetComponentIds.FORM);
   await widgetWindow.waitFor({ state: 'visible' });
   await assertScreenshot(page, '100-1', browserName);
-  
+
   // 2
   let submitButton = page.locator(WidgetComponentIds.BUTTON);
   await submitButton.click();
   await assertScreenshot(page, '100-2', browserName);
-  
+
   // 3
   const inputs = page.locator(WidgetComponentIds.INPUT);
   await inputs.nth(0).fill('guy ordering food');
@@ -43,7 +42,7 @@ test('100', async ({ page, browserName }) => {
   submitButton = page.locator(WidgetComponentIds.BUTTON);
   await page.waitForTimeout(1000);
   await assertScreenshot(page, '100-3', browserName);
-  
+
   // 4
   await inputs.nth(2).fill('2');
   await inputs.nth(3).fill('[email protected]');
@@ -95,33 +94,33 @@ test('103', async ({ page, browserName }) => {
   // 1
   await sendTextMessage(page, 'Suggested replies', 2000);
   await assertScreenshot(page, '103-1', browserName);
-  
+
   // 2
   let options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(0).click();
   await page.waitForTimeout(1000);
   await assertScreenshot(page, '103-2', browserName);
-  
+
   // 3
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(0).click();
   await page.waitForTimeout(1000);
   await assertScreenshot(page, '103-3', browserName);
-  
+
   // 4
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(1).click();
   await page.waitForTimeout(4000); // Time takes long for file message to be rendered and then scrolled to bottom in CI browsers.
   await assertScreenshot(page, '103-4', browserName);
-  
+
   // 5
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(0).click();
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   // Expecting three options.
   await options.nth(2).waitFor({ state: 'visible' });
   await assertScreenshot(page, '103-5', browserName);
-  
+
   // 6
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(2).click();

package.json

@@ -24,9 +24,9 @@
     "build:npm": "node scripts/prebuild.mjs && yarn build",
     "build:pages": "rm -rf ./dist && tsc-silent -p './tsconfig.json' --suppress @ && vite build --config vite.config.pages.ts",
     "format": "yarn prettier:fix && yarn lint:fix",
-    "format:check": "yarn prettier src --check && yarn eslint src",
-    "lint:fix": "yarn eslint src --fix",
-    "prettier:fix": "yarn prettier src --write",
+    "format:check": "yarn prettier src __visual_tests__ --check && yarn eslint src __visual_tests__",
+    "lint:fix": "yarn eslint src __visual_tests__ --fix",
+    "prettier:fix": "yarn prettier src __visual_tests__ --write",
     "preview": "vite preview",
     "test": "vitest run"
   },

playwright.config.ts

@@ -23,7 +23,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: undefined, // process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [['junit', { outputFile: 'results.xml' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */

src/components/chat/ui/ChatMessageList.tsx

@@ -56,9 +56,9 @@ export const ChatMessageList = () => {
 
           const [top, bottom] = getMessageGrouping(
             message,
-            enableMessageGrouping,
             filteredMessages[index - 1],
             filteredMessages[index + 1],
+            enableMessageGrouping,
           );
 
           return (

src/utils/messages.ts

@@ -5,9 +5,9 @@ import { messageExtension } from './messageExtension';
 
 export const getMessageGrouping = (
   curr: BaseMessage,
-  enableMessageGrouping: boolean,
   prev?: BaseMessage,
   next?: BaseMessage,
+  enableMessageGrouping = true,
 ): [boolean, boolean] => {
   if (!enableMessageGrouping) {
     return [true, true];