qrcode: playwright tests (WIP)

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

@@ -32,7 +32,7 @@ const handleModalOkClick = () => (modalVisible.value = false)
     @ok="handleModalOkClick"
   >
     <template #title>
-      <div class="mr-4">{{ qrValue }}</div>
+      <div class="mr-4" data-testid="nc-qr-code-large-value-label">{{ qrValue }}</div>
     </template>
     <img v-if="qrValue" :src="qrCodeLarge" alt="QR Code" />
   </a-modal>

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

@@ -1,3 +1,4 @@
+import { expect } from '@playwright/test';
 import BasePage from '../../Base';
 import { FormPage } from '../Form';
 import { GalleryPage } from '../Gallery';
@@ -13,6 +14,13 @@ export class QrCodeOverlay extends BasePage {
     return this.rootPage.locator(`.nc-qr-code-large`);
   }
 
+  async verifyQrValueLabel(expectedValue: string) {
+    const foundQrValueLabelText = await this.get()
+      .locator('[data-testid="nc-qr-code-large-value-label"]')
+      .textContent();
+    await expect(foundQrValueLabelText).toContain(expectedValue);
+  }
+
   // async toggle() {
   //   await this.rootPage.locator('[data-testid="nc-project-menu"]').click();
   // }

tests/playwright/tests/columnQrCode.spec.ts

@@ -73,7 +73,9 @@ test.describe('Virtual Columns', () => {
       // 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();
+      const qrGridOverlay = dashboard.grid.qrCodeOverlay;
+      await qrGridOverlay.verifyQrValueLabel(expectedQrCodeCellValues[0].referencedValue);
+      await qrGridOverlay.clickCloseButton();
 
       await dashboard.closeTab({ title: 'City' });
     });