barcode column type: playwright tests (WIP)

packages/nc-gui/components/virtual-cell/barcode/Barcode.vue

@@ -33,7 +33,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
   <a-modal
     v-model:visible="modalVisible"
     :class="{ active: modalVisible }"
-    wrap-class-name="nc-barcode-large amodal-wrapper"
+    wrap-class-name="nc-barcode-large"
     :body-style="{ padding: '0px' }"
     :footer="null"
     @ok="handleModalOkClick"
@@ -74,9 +74,3 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
     {{ $t('msg.warning.nonEditableFields.barcodeFieldsCannotBeDirectlyChanged') }}
   </div>
 </template>
-
-<style lang="scss">
-.amodal-wrapper {
-  // width: 100px;
-}
-</style>

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();
+  }
+}

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);

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);

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 = `<rect x="0" y="0" width="486" height="142" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="4" height="100"></rect><rect x="6" y="0" width="2" height="100"></rect><rect x="12" y="0" width="2" height="100"></rect><rect x="22" y="0" width="2" height="100"></rect><rect x="26" y="0" width="2" height="100"></rect><rect x="34" y="0" width="4" height="100"></rect><rect x="44" y="0" width="4" height="100"></rect><rect x="50" y="0" width="4" height="100"></rect><rect x="58" y="0" width="4" height="100"></rect><rect x="66" y="0" width="2" height="100"></rect><rect x="74" y="0" width="2" height="100"></rect><rect x="82" y="0" width="4" height="100"></rect><rect x="88" y="0" width="2" height="100"></rect><rect x="96" y="0" width="8" height="100"></rect><rect x="106" y="0" width="2" height="100"></rect><rect x="110" y="0" width="2" height="100"></rect><rect x="116" y="0" width="2" height="100"></rect><rect x="122" y="0" width="8" height="100"></rect><rect x="132" y="0" width="2" height="100"></rect><rect x="138" y="0" width="8" height="100"></rect><rect x="150" y="0" width="2" height="100"></rect><rect x="154" y="0" width="2" height="100"></rect><rect x="160" y="0" width="2" height="100"></rect><rect x="164" y="0" width="4" height="100"></rect><rect x="176" y="0" width="4" height="100"></rect><rect x="182" y="0" width="4" height="100"></rect><rect x="190" y="0" width="4" height="100"></rect><rect x="198" y="0" width="2" height="100"></rect><rect x="206" y="0" width="4" height="100"></rect><rect x="214" y="0" width="2" height="100"></rect><rect x="220" y="0" width="2" height="100"></rect><rect x="228" y="0" width="4" height="100"></rect><rect x="234" y="0" width="6" height="100"></rect><rect x="242" y="0" width="2" height="100"></rect><rect x="248" y="0" width="2" height="100"></rect><rect x="252" y="0" width="4" height="100"></rect><rect x="264" y="0" width="4" height="100"></rect><rect x="270" y="0" width="4" height="100"></rect><rect x="278" y="0" width="4" height="100"></rect><rect x="286" y="0" width="2" height="100"></rect><rect x="294" y="0" width="2" height="100"></rect><rect x="302" y="0" width="4" height="100"></rect><rect x="308" y="0" width="2" height="100"></rect><rect x="316" y="0" width="8" height="100"></rect><rect x="326" y="0" width="2" height="100"></rect><rect x="330" y="0" width="2" height="100"></rect><rect x="336" y="0" width="2" height="100"></rect><rect x="342" y="0" width="8" height="100"></rect><rect x="352" y="0" width="2" height="100"></rect><rect x="358" y="0" width="8" height="100"></rect><rect x="370" y="0" width="2" height="100"></rect><rect x="374" y="0" width="2" height="100"></rect><rect x="380" y="0" width="2" height="100"></rect><rect x="384" y="0" width="4" height="100"></rect><rect x="396" y="0" width="4" height="100"></rect><rect x="404" y="0" width="2" height="100"></rect><rect x="410" y="0" width="2" height="100"></rect><rect x="418" y="0" width="6" height="100"></rect><rect x="428" y="0" width="4" height="100"></rect><rect x="436" y="0" width="2" height="100"></rect><rect x="440" y="0" width="4" height="100"></rect><rect x="450" y="0" width="6" height="100"></rect><rect x="458" y="0" width="2" height="100"></rect><rect x="462" y="0" width="4" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="233" y="122">A Corua (La Corua)</text></g>`;
 
@@ -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:
+          '<rect x="0" y="0" width="222" height="142" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="4" height="100"></rect><rect x="6" y="0" width="2" height="100"></rect><rect x="12" y="0" width="2" height="100"></rect><rect x="22" y="0" width="2" height="100"></rect><rect x="30" y="0" width="2" height="100"></rect><rect x="34" y="0" width="4" height="100"></rect><rect x="44" y="0" width="2" height="100"></rect><rect x="48" y="0" width="4" height="100"></rect><rect x="56" y="0" width="2" height="100"></rect><rect x="66" y="0" width="2" height="100"></rect><rect x="72" y="0" width="2" height="100"></rect><rect x="78" y="0" width="8" height="100"></rect><rect x="88" y="0" width="4" height="100"></rect><rect x="96" y="0" width="2" height="100"></rect><rect x="100" y="0" width="2" height="100"></rect><rect x="110" y="0" width="2" height="100"></rect><rect x="120" y="0" width="4" height="100"></rect><rect x="126" y="0" width="2" height="100"></rect><rect x="132" y="0" width="4" height="100"></rect><rect x="144" y="0" width="2" height="100"></rect><rect x="148" y="0" width="2" height="100"></rect><rect x="154" y="0" width="4" height="100"></rect><rect x="164" y="0" width="2" height="100"></rect><rect x="170" y="0" width="2" height="100"></rect><rect x="176" y="0" width="4" height="100"></rect><rect x="186" y="0" width="6" height="100"></rect><rect x="194" y="0" width="2" height="100"></rect><rect x="198" y="0" width="4" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="101" y="122">Berlin</text></g>',
+        barcodeSvgForOverlay:
+          '<rect x="0" y="0" width="222" height="142" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="4" height="100"></rect><rect x="6" y="0" width="2" height="100"></rect><rect x="12" y="0" width="2" height="100"></rect><rect x="22" y="0" width="2" height="100"></rect><rect x="30" y="0" width="2" height="100"></rect><rect x="34" y="0" width="4" height="100"></rect><rect x="44" y="0" width="2" height="100"></rect><rect x="48" y="0" width="4" height="100"></rect><rect x="56" y="0" width="2" height="100"></rect><rect x="66" y="0" width="2" height="100"></rect><rect x="72" y="0" width="2" height="100"></rect><rect x="78" y="0" width="8" height="100"></rect><rect x="88" y="0" width="4" height="100"></rect><rect x="96" y="0" width="2" height="100"></rect><rect x="100" y="0" width="2" height="100"></rect><rect x="110" y="0" width="2" height="100"></rect><rect x="120" y="0" width="4" height="100"></rect><rect x="126" y="0" width="2" height="100"></rect><rect x="132" y="0" width="4" height="100"></rect><rect x="144" y="0" width="2" height="100"></rect><rect x="148" y="0" width="2" height="100"></rect><rect x="154" y="0" width="4" height="100"></rect><rect x="164" y="0" width="2" height="100"></rect><rect x="170" y="0" width="2" height="100"></rect><rect x="176" y="0" width="4" height="100"></rect><rect x="186" y="0" width="6" height="100"></rect><rect x="194" y="0" width="2" height="100"></rect><rect x="198" y="0" width="4" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="101" y="122">Berlin</text></g>',
+      };
+      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();
     });
   });
 });