qrcode: playwright tests (WIP)

packages/nc-gui/components/virtual-cell/QrCode.vue

@@ -24,11 +24,17 @@ const handleModalOkClick = () => (modalVisible.value = false)
 </script>
 
 <template>
-  <a-modal v-model:visible="modalVisible" footer @ok="handleModalOkClick" :bodyStyle="{ padding: '0px' }">
+  <a-modal
+    v-model:visible="modalVisible"
+    footer
+    wrap-class-name="nc-qr-code-large"
+    :body-style="{ padding: '0px' }"
+    @ok="handleModalOkClick"
+  >
     <template #title>
       <div class="mr-4">{{ qrValue }}</div>
     </template>
-    <img v-if="qrValue" :src="qrCodeLarge" alt="QR Code" class="qr-code-large" />
+    <img v-if="qrValue" :src="qrCodeLarge" alt="QR Code" />
   </a-modal>
-  <img v-if="qrValue" :src="qrCode" alt="QR Code" class="qr-code" @click="showQrModal" />
+  <img v-if="qrValue" :src="qrCode" alt="QR Code" @click="showQrModal" />
 </template>

tests/playwright/pages/Dashboard/Grid/index.ts

@@ -5,11 +5,13 @@ import { CellPageObject } from '../common/Cell';
 import { ColumnPageObject } from './Column';
 import { ToolbarPage } from '../common/Toolbar';
 import { ProjectMenuObject } from '../common/ProjectMenu';
+import { QrCodeOverlay } from '../QrCodeOverlay';
 
 export class GridPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly addNewTableButton: Locator;
   readonly dashboardPage: DashboardPage;
+  readonly qrCodeOverlay: QrCodeOverlay;
   readonly column: ColumnPageObject;
   readonly cell: CellPageObject;
   readonly toolbar: ToolbarPage;
@@ -19,6 +21,7 @@ export class GridPage extends BasePage {
     super(dashboardPage.rootPage);
     this.dashboard = dashboardPage;
     this.addNewTableButton = dashboardPage.get().locator('.nc-add-new-table');
+    this.qrCodeOverlay = new QrCodeOverlay(this);
     this.column = new ColumnPageObject(this);
     this.cell = new CellPageObject(this);
     this.toolbar = new ToolbarPage(this);

tests/playwright/pages/Dashboard/QrCodeOverlay/index.ts

@@ -0,0 +1,44 @@
+import BasePage from '../../Base';
+import { FormPage } from '../Form';
+import { GalleryPage } from '../Gallery';
+import { GridPage } from '../Grid';
+import { KanbanPage } from '../Kanban';
+
+export class QrCodeOverlay extends BasePage {
+  constructor(parent: GridPage | GalleryPage | KanbanPage | FormPage) {
+    super(parent.rootPage);
+  }
+
+  get() {
+    return this.rootPage.locator(`.nc-qr-code-large`);
+  }
+
+  // async toggle() {
+  //   await this.rootPage.locator('[data-testid="nc-project-menu"]').click();
+  // }
+
+  async clickCloseButton() {
+    // const closeButton = await this.get().locator('.ant-modal-close-x').click();
+    await this.get().locator('.ant-modal-close-x').click();
+    // const closeButton = await this.rootPage.locator('[data-testid="nc-qr-code-large"]');
+  }
+
+  // async click({ menu, subMenu }: { menu: string; subMenu: string }) {
+  //   const pMenu = await this.rootPage.locator(`.nc-dropdown-project-menu:visible`);
+  //   await pMenu.locator(`div.nc-project-menu-item:has-text("${menu}"):visible`).click();
+  //   await this.rootPage.waitForTimeout(2000);
+
+  //   if (subMenu) {
+  //     await this.rootPage.locator(`div.nc-project-menu-item:has-text("${subMenu}"):visible`).click();
+  //     await this.rootPage.waitForTimeout(1000);
+  //   }
+  // }
+
+  // async clickPreview(role: string) {
+  //   await this.click({
+  //     menu: 'Preview as',
+  //     subMenu: role,
+  //   });
+  //   await this.rootPage.waitForTimeout(2500);
+  // }
+}

tests/playwright/pages/Dashboard/common/Cell/index.ts

@@ -91,7 +91,6 @@ export class CellPageObject extends BasePage {
     columnHeader: string;
     expectedSrcValue: string;
   }) {
-    console.log('FOOBAR!!!');
     const _verify = async expectedQrCodeImgSrc => {
       await expect
         .poll(async () => {

tests/playwright/tests/columnQrCode.spec.ts

@@ -26,7 +26,7 @@ test.describe('Virtual Columns', () => {
         });
       }
     }
-    test('QrCode column creation and showing value in grid view', async () => {
+    test('creation and showing value in grid view', async () => {
       // Add qr code column referencing the City column
       // and compare the base64 encoded codes/src attributes for the first 3 rows.
       // Column data from City table (Sakila DB)
@@ -55,10 +55,15 @@ test.describe('Virtual Columns', () => {
 
       await qrCodeColumnVerify('QrCode1', expectedQrCodeCellValues);
 
+      // Clicking on qr code in first row and expect it shows a
+      // popup with an enlarged version of the qr code
+      await dashboard.grid.cell.get({ columnHeader: 'QrCode1', index: 0 }).click();
+      await dashboard.grid.qrCodeOverlay.clickCloseButton();
+
       await dashboard.closeTab({ title: 'City' });
     });
 
-    test('QrCode column gets deleted when the reference value column is deleted', async () => {
+    test('deletion when the reference value column is deleted', async () => {
       // close 'Team & Auth' tab
       await dashboard.closeTab({ title: 'Team & Auth' });