From f52107b94313c342f6f0cd26a967d3cb6299a395 Mon Sep 17 00:00:00 2001
From: flisowna <ewa.agnieszka.flis@gmail.com>
Date: Fri, 9 Dec 2022 20:57:03 +0300
Subject: [PATCH] barcode column type: playwright tests (WIP)

---
 .../virtual-cell/barcode/Barcode.vue          |  7 +------
 .../pages/Dashboard/common/Cell/index.ts      | 17 ++++++++++++++++
 tests/playwright/tests/columnBarcode.spec.ts  | 20 +++++++++----------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
index 110d89cd37..cb68936b1e 100644
--- a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
+++ b/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>
diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts
index 01577430de..1de2a1db40 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/index.ts
+++ b/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,
diff --git a/tests/playwright/tests/columnBarcode.spec.ts b/tests/playwright/tests/columnBarcode.spec.ts
index 354974fdff..18aac6e2fe 100644
--- a/tests/playwright/tests/columnBarcode.spec.ts
+++ b/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 }]);
+    });
   });
 });