From 5fb2cb8c7773dbc481367fbe44e6122bc0ec719c Mon Sep 17 00:00:00 2001 From: flisowna Date: Fri, 9 Dec 2022 18:28:00 +0300 Subject: [PATCH] barcode column type: playwright tests (WIP) --- .../virtual-cell/barcode/Barcode.vue | 8 +---- .../pages/Dashboard/BarcodeOverlay/index.ts | 25 ++++++++++++++++ .../playwright/pages/Dashboard/Grid/index.ts | 3 ++ .../pages/Dashboard/common/Cell/index.ts | 4 --- tests/playwright/tests/columnBarcode.spec.ts | 29 +++++++++++++++++-- 5 files changed, 56 insertions(+), 13 deletions(-) create mode 100644 tests/playwright/pages/Dashboard/BarcodeOverlay/index.ts diff --git a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue index 3f07245ebe..110d89cd37 100644 --- a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue +++ b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue @@ -33,7 +33,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us - - diff --git a/tests/playwright/pages/Dashboard/BarcodeOverlay/index.ts b/tests/playwright/pages/Dashboard/BarcodeOverlay/index.ts new file mode 100644 index 0000000000..ce70f07bcc --- /dev/null +++ b/tests/playwright/pages/Dashboard/BarcodeOverlay/index.ts @@ -0,0 +1,25 @@ +import { expect } from '@playwright/test'; +import BasePage from '../../Base'; +import { FormPage } from '../Form'; +import { GalleryPage } from '../Gallery'; +import { GridPage } from '../Grid'; +import { KanbanPage } from '../Kanban'; + +export class BarcodeOverlay extends BasePage { + constructor(parent: GridPage | GalleryPage | KanbanPage | FormPage) { + super(parent.rootPage); + } + + get() { + return this.rootPage.locator(`.nc-barcode-large`); + } + + async verifyBarcodeSvgValue(expectedValue: string) { + const foundBarcodeSvg = await this.get().getByTestId('barcode').innerHTML(); + await expect(foundBarcodeSvg).toContain(expectedValue); + } + + async clickCloseButton() { + await this.get().locator('.ant-modal-close-x').click(); + } +} diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts index 66a85bee3b..9aa72c5644 100644 --- a/tests/playwright/pages/Dashboard/Grid/index.ts +++ b/tests/playwright/pages/Dashboard/Grid/index.ts @@ -6,12 +6,14 @@ import { ColumnPageObject } from './Column'; import { ToolbarPage } from '../common/Toolbar'; import { ProjectMenuObject } from '../common/ProjectMenu'; import { QrCodeOverlay } from '../QrCodeOverlay'; +import { BarcodeOverlay } from '../BarcodeOverlay'; export class GridPage extends BasePage { readonly dashboard: DashboardPage; readonly addNewTableButton: Locator; readonly dashboardPage: DashboardPage; readonly qrCodeOverlay: QrCodeOverlay; + readonly barcodeOverlay: BarcodeOverlay; readonly column: ColumnPageObject; readonly cell: CellPageObject; readonly toolbar: ToolbarPage; @@ -22,6 +24,7 @@ export class GridPage extends BasePage { this.dashboard = dashboardPage; this.addNewTableButton = dashboardPage.get().locator('.nc-add-new-table'); this.qrCodeOverlay = new QrCodeOverlay(this); + this.barcodeOverlay = new BarcodeOverlay(this); this.column = new ColumnPageObject(this); this.cell = new CellPageObject(this); this.toolbar = new ToolbarPage(this); diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts index 41a49a3331..01577430de 100644 --- a/tests/playwright/pages/Dashboard/common/Cell/index.ts +++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts @@ -157,10 +157,6 @@ export class CellPageObject extends BasePage { return await barcodeSvg.innerHTML(); }) .toEqual(expectedBarcodeSvg); - - // const SVG = await FOO.locator('svg'); - // expect(SVG).toEqual(ONE_SVG_BARCODE_HTML); - }; await _verify(expectedSvgValue); diff --git a/tests/playwright/tests/columnBarcode.spec.ts b/tests/playwright/tests/columnBarcode.spec.ts index f87929bf1e..874f07ae90 100644 --- a/tests/playwright/tests/columnBarcode.spec.ts +++ b/tests/playwright/tests/columnBarcode.spec.ts @@ -3,10 +3,15 @@ import { DashboardPage } from '../pages/Dashboard'; import setup from '../setup'; import { GridPage } from '../pages/Dashboard/Grid'; -type ExpectedBarcodeData = { +interface ExpectedBarcodeData { referencedValue: string; barcodeSvg: string; -}; + // barcodeSvgForModal: string; +} + +// interface ExpectedBarcodeDataWithOverlay extends ExpectedBarcodeData { +// barcodeSvgForModal: string; +// } // const ONE_SVG_BARCODE_HTML = `A Corua (La Corua)`; @@ -66,6 +71,26 @@ test.describe('Virtual Columns', () => { }); await barcodeColumnVerify('Barcode1', expectedBarcodeCellValues); + + await grid.cell.fillText({ columnHeader: 'City', index: 0, text: 'Berlin' }); + + const changedFirstBarcodeCellValue = { + referencedValue: 'Berlin', + barcodeSvg: + 'Berlin', + barcodeSvgForOverlay: + 'Berlin', + }; + const expectedBarcodeCellValuesAfterCityNameChange = [ + changedFirstBarcodeCellValue, + ...expectedBarcodeCellValues.slice(1), + ]; + await barcodeColumnVerify('Barcode1', expectedBarcodeCellValuesAfterCityNameChange); + + await grid.cell.get({ columnHeader: 'Barcode1', index: 0 }).click(); + const barcodeGridOverlay = grid.barcodeOverlay; + await barcodeGridOverlay.verifyBarcodeSvgValue(changedFirstBarcodeCellValue.barcodeSvgForOverlay); + await barcodeGridOverlay.clickCloseButton(); }); }); });