From af1b57c0692346795e2bb65855d7d7e11cfaa94b Mon Sep 17 00:00:00 2001 From: Liam Cho Date: Wed, 13 Nov 2024 15:22:10 +0900 Subject: [PATCH] junit test file --- .circleci/config.yml | 9 ++++++-- __visual_tests__/utils.ts | 15 ++++++------- __visual_tests__/workflow-tests.spec.ts | 25 +++++++++++----------- package.json | 6 +++--- playwright.config.ts | 5 ++++- src/components/chat/ui/ChatMessageList.tsx | 2 +- src/utils/messages.ts | 2 +- 7 files changed, 34 insertions(+), 30 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index d8e2919c4..cf7f2b89c 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -128,11 +128,16 @@ 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 --config=playwright.config.ts + - store_test_results: + path: results.xml - store_artifacts: path: /Users/distiller/project/test-results destination: playwright-test-results + - store_artifacts: + path: /Users/distiller/project/playwright-report + destination: playwright-html-report # Publish - build self-service build: diff --git a/__visual_tests__/utils.ts b/__visual_tests__/utils.ts index 547c320b1..6d6634335 100644 --- a/__visual_tests__/utils.ts +++ b/__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) { diff --git a/__visual_tests__/workflow-tests.spec.ts b/__visual_tests__/workflow-tests.spec.ts index 2a22a35a2..ecbcfabda 100644 --- a/__visual_tests__/workflow-tests.spec.ts +++ b/__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('guy.ordering.food@food.com'); @@ -95,25 +94,25 @@ 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(); @@ -121,7 +120,7 @@ test('103', async ({ page, browserName }) => { // 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(); diff --git a/package.json b/package.json index fd495263d..55069d97c 100644 --- a/package.json +++ b/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" }, diff --git a/playwright.config.ts b/playwright.config.ts index 01257119c..3dba5189a 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -23,7 +23,10 @@ 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' }], + ['html'] + ], /* 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('/')`. */ diff --git a/src/components/chat/ui/ChatMessageList.tsx b/src/components/chat/ui/ChatMessageList.tsx index afc03e7fe..3db73c2d6 100644 --- a/src/components/chat/ui/ChatMessageList.tsx +++ b/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 ( diff --git a/src/utils/messages.ts b/src/utils/messages.ts index 388f508d6..163a3a429 100644 --- a/src/utils/messages.ts +++ b/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];