qrcode: playwright tests (WIP)

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

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

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

@@ -91,16 +91,28 @@ export class CellPageObject extends BasePage {
     columnHeader: string;
     expectedSrcValue: string;
   }) {
+    console.log('FOOBAR!!!');
     const _verify = async text => {
       await expect
         .poll(async () => {
-          const innerTexts = await this.get({
+          const FOO = await this.get({
             index,
             columnHeader,
-          }).allInnerTexts();
+          });
-          return typeof innerTexts === 'string' ? [innerTexts] : innerTexts;
+          console.log('index: ', index);
+          console.log('columnHeader: ', columnHeader);
+          console.log('expectedSrcValue: ', expectedSrcValue);
+          const img = await FOO.getByRole('img');
+          console.log('img: ', img);
+          const src = await img.getAttribute('src');
+          console.log('src: ', src);
+          // const innerTexts = FOO.allInnerTexts();
+          // console.log('innerTexts', innerTexts);
+          console.log('--------------------------');
+          // return typeof innerTexts === 'string' ? [innerTexts] : innerTexts;
+          return src;
         })
-        .toContain(text);
+        .toEqual(text);
     };
 
     await _verify(expectedSrcValue);

tests/playwright/tests/columnQrCode.spec.ts

@@ -2,6 +2,7 @@ import { test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import setup, { NcContext } from '../setup';
 import { isPg, isSqlite } from '../setup/db';
+import { expect, Locator } from '@playwright/test';
 
 // Add formula to be verified here & store expected results for 5 rows
 // Column data from City table (Sakila DB)
@@ -71,21 +72,15 @@ test.describe('Virtual Columns', () => {
     dashboard = new DashboardPage(page, context.project);
   });
 
-  async function formulaResultVerify({
+  // async function qrCodeVerify(qrColumnTitle: string, expectedQrCodes: string[]) {
-    qrColumnTitle,
+  //   for (let i = 0; i < expectedQrCodes.length; i++) {
-    expectedQrCodes,
+  //     await dashboard.grid.cell.verifyQrCodeCell({
-  }: {
+  //       index: i,
-    qrColumnTitle: string;
+  //       columnHeader: qrColumnTitle,
-    expectedQrCodes: string[];
+  //       expectedSrcValue: expectedQrCodes[i],
-  }) {
+  //     });
-    for (let i = 0; i < expectedQrCodes.length; i++) {
+  //   }
-      await dashboard.grid.cell.verify({
+  // }
-        index: i,
-        columnHeader: qrColumnTitle,
-        value: expectedQrCodes[i],
-      });
-    }
-  }
 
   test('QrCode', async () => {
     // close 'Team & Auth' tab
@@ -100,6 +95,26 @@ test.describe('Virtual Columns', () => {
       qrCodeValueColumnTitle: 'City',
     });
 
+
+    await dashboard.grid.cell.verifyQrCodeCell({
+      index: 0,
+      columnHeader: 'QrCode1',
+      expectedSrcValue: expectedQrCodeCellValues[0],
+    });
+
+
+    // expect
+    //     .poll(async () => {
+
+          // const FOO = await this.get({
+          //   index,
+          //   columnHeader,
+          // });
+
+    // for (let i = 1; i < expectedQrCodeCellValues.length; i++) {
+    // await qrCodeVerify('QrCode1', expectedQrCodeCellValues);
+    // }
+
     // verify different formula's
     // for (let i = 1; i < formulaData.length; i++) {
     //   // Sqlite does not support log function