barcode column type: playwright tests (WIP)

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

@@ -43,11 +43,6 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
       :barcode-value="barcodeValue"
       :barcode-format="barcodeMeta.barcodeFormat"
     >
-      <template #barcodeRenderError>
-        <div class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-          {{ $t('msg.warning.barcode.renderError') }}
-        </div>
-      </template>
     </JsBarcodeWrapper>
   </a-modal>
   <JsBarcodeWrapper
@@ -58,7 +53,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
     @on-click-barcode="showBarcodeModal"
   >
     <template #barcodeRenderError>
-      <div class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+      <div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message">
         {{ $t('msg.warning.barcode.renderError') }}
       </div>
     </template>

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

@@ -137,6 +137,23 @@ export class CellPageObject extends BasePage {
     await _verify(expectedSrcValue);
   }
 
+  async verifyBarcodeCellShowsInvalidInputMessage({ index, columnHeader }: { index: number; columnHeader: string }) {
+    const _verify = async expectedInvalidInputMessage => {
+      await expect
+        .poll(async () => {
+          const barcodeCell = await this.get({
+            index,
+            columnHeader,
+          });
+          const barcodeInvalidInputMessage = await barcodeCell.getByTestId('barcode-invalid-input-message');
+          return await barcodeInvalidInputMessage.textContent();
+        })
+        .toEqual(expectedInvalidInputMessage);
+    };
+
+    await _verify('Barcode error - please check compatibility between input and barcode type');
+  }
+
   async verifyBarcodeCell({
     index,
     columnHeader,

tests/playwright/tests/columnBarcode.spec.ts

@@ -156,30 +156,30 @@ test.describe('Virtual Columns', () => {
       await dashboard.closeTab({ title: 'City' });
     });
 
-    test('changing the format of the Barcode is reflected in the change of the actual rendered barcode', async () => {
+    test('a) showing an error message for non-compatible barcode input and b) changing the format of the Barcode is reflected in the change of the actual rendered barcode', async () => {
       await dashboard.closeTab({ title: 'Team & Auth' });
 
       await dashboard.treeView.openTable({ title: 'City' });
 
-      await grid.cell.fillText({ columnHeader: 'City', index: 0, text: 'Berlin' });
-
       await grid.column.create({
         title: 'Barcode1',
         type: 'Barcode',
         barcodeValueColumnTitle: 'City',
       });
 
-      await barcodeColumnVerify('Barcode1', [barcodeCellValuesForBerlin]);
-
       await grid.column.openEdit({
         title: 'Barcode1',
       });
       await grid.column.changeBarcodeFormat({ barcodeFormatName: 'CODE39' });
-      await barcodeColumnVerify('Barcode1 Renamed', [
-        { referencedValue: 'Berlin', barcodeSvg: barcodeCode39SvgForBerlin },
-      ]);
-    });
 
-    test('barcode cells with invalid input for the choosen barcode format are showing a replacement message', async () => {});
+      await grid.cell.verifyBarcodeCellShowsInvalidInputMessage({
+        index: 0,
+        columnHeader: 'Barcode1',
+      });
+
+      await grid.cell.fillText({ columnHeader: 'City', index: 0, text: 'Berlin' });
+
+      await barcodeColumnVerify('Barcode1', [{ referencedValue: 'Berlin', barcodeSvg: barcodeCode39SvgForBerlin }]);
+    });
   });
 });