From a21c2fd6cff046af942ea8ddb3b2df26456f7ada Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 12 Jul 2024 18:22:03 +0000
Subject: [PATCH] test: playwright test - WIP

---
 .../smartsheet/column/LinkAdvancedOptions.vue | 11 +++++++
 .../pages/Dashboard/Grid/Column/index.ts      | 33 +++++++++++++++++++
 ...nLinkToAnotherRecordAdvanceOptions.spec.ts | 21 ++++--------
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
index 34527ad74b..d118a5c33c 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
@@ -216,6 +216,7 @@ watch(pkColumn, () => {
             disabled
             :bordered="false"
             dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-source-base"
+            data-testid="custom-link-source-base-id"
           >
             <a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
               <div class="flex w-full items-center gap-2">
@@ -240,6 +241,7 @@ watch(pkColumn, () => {
             disabled
             :bordered="false"
             dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-source-table"
+            data-testid="custom-link-source-table-id"
           >
             <a-select-option v-for="table of sourceTables" :key="table.title" :value="table.id">
               <div class="flex w-full items-center gap-2">
@@ -264,6 +266,7 @@ watch(pkColumn, () => {
             :bordered="false"
             dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-source-column"
             @change="onSourceColumnChange"
+            data-testid="custom-link-source-column-id"
           >
             <a-select-option v-for="column of columns" :key="column.title" :value="column.id">
               <div class="flex w-full items-center gap-2">
@@ -301,6 +304,8 @@ watch(pkColumn, () => {
               :bordered="false"
               dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-junction-base !rounded-md"
               @change="onBaseChange(vModel.custom.junc_base_id, true)"
+              data-testid="custom-link-junction-base-id"
+
             >
               <a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
                 <div class="flex w-full items-center gap-2">
@@ -328,6 +333,7 @@ watch(pkColumn, () => {
               :filter-option="filterOption"
               dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-junction-table"
               @change="onModelIdChange(vModel.custom.junc_model_id, true)"
+              data-testid="custom-link-junction-table-id"
             >
               <a-select-option v-for="table of junctionTables" :key="table.title" :value="table.id">
                 <div class="flex w-full items-center gap-2">
@@ -356,6 +362,7 @@ watch(pkColumn, () => {
               :filter-option="filterOption"
               dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-source-junction-column"
               @change="onDataTypeChange"
+              data-testid="custom-link-junction-source-column-id"
             >
               <a-select-option
                 v-for="column of juncTableColumns"
@@ -400,6 +407,7 @@ watch(pkColumn, () => {
               :filter-option="filterOption"
               dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-child-junction-column"
               @change="onDataTypeChange"
+              data-testid="custom-link-junction-target-column-id"
             >
               <a-select-option
                 v-for="column of juncTableColumns"
@@ -456,6 +464,7 @@ watch(pkColumn, () => {
             :bordered="false"
             dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-child-base"
             @change="onBaseChange(vModel.custom.base_id)"
+            data-testid="custom-link-target-base-id"
           >
             <a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
               <div class="flex w-full items-center gap-2">
@@ -481,6 +490,7 @@ watch(pkColumn, () => {
             :bordered="false"
             dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-child-table"
             @change="onModelIdChange(vModel.custom.ref_model_id)"
+            data-testid="custom-link-target-table-id"
           >
             <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
               <div class="flex w-full items-center gap-2">
@@ -504,6 +514,7 @@ watch(pkColumn, () => {
             :filter-option="filterOption"
             :bordered="false"
             dropdown-class-name="nc-relation-settings-select nc-dropdown-ltar-child-column"
+            data-testid="custom-link-target-column-id"
             @change="onDataTypeChange"
           >
             <a-select-option
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index 4a5c5ba258..02eb2e1b84 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -73,6 +73,8 @@ export class ColumnPageObject extends BasePage {
     isDisplayValue = false,
     ltarFilters,
     ltarView,
+    custom = false,
+    refColumn,
   }: {
     title: string;
     type?: string;
@@ -92,6 +94,8 @@ export class ColumnPageObject extends BasePage {
     isDisplayValue?: boolean;
     ltarFilters?: any[];
     ltarView?: string;
+    custom?: boolean;
+    refColumn?: string;
   }) {
     if (insertBeforeColumnTitle) {
       await this.grid.get().locator(`th[data-title="${insertBeforeColumnTitle}"]`).scrollIntoViewIfNeeded();
@@ -197,6 +201,10 @@ export class ColumnPageObject extends BasePage {
         await this.rootPage.waitForTimeout(2000);
 
         await this.get().locator('.nc-ltar-relation-type').getByTestId(relationType).click();
+        // await this.get()
+        //   .locator('.nc-ltar-relation-type >> .ant-radio')
+        //   .nth(relationType === 'Has Many' ? 1 : 0)
+        //   .click();
         await this.get().locator('.ant-select-single').nth(1).click();
         await this.rootPage.locator(`.nc-ltar-child-table >> input[type="search"]`).fill(childTable);
         await this.rootPage
@@ -214,6 +222,31 @@ export class ColumnPageObject extends BasePage {
           await this.ltarOption.addFilters(ltarFilters);
         }
 
+
+        if (custom) {
+          // enable advance options
+          await this.get().locator('.nc-ltar-relation-type >> .ant-radio').nth(1).dblclick();
+          await this.get().locator('.nc-ltar-relation-type >> .ant-radio').nth(2).dblclick();
+
+          await this.get().locator(':has(:has-text("Advanced Link")) > button.ant-switch').click();
+
+          //  data-testid="custom-link-source-base-id"
+          // data-testid="custom-link-source-table-id"
+          // data-testid="custom-link-source-column-id"
+          // data-testid="custom-link-junction-base-id"
+          // data-testid="custom-link-junction-table-id"
+          // data-testid="custom-link-junction-source-column-id"
+          // data-testid="custom-link-junction-target-column-id"
+          // data-testid="custom-link-target-base-id"
+          // data-testid="custom-link-target-table-id"
+          // data-testid="custom-link-target-column-id"
+
+          // select target table and column
+          // await this.get().get('').nth(2).click();
+
+          // select referenced base, column and column
+        }
+
         break;
       case 'User':
         break;
diff --git a/tests/playwright/tests/db/columns/columnLinkToAnotherRecordAdvanceOptions.spec.ts b/tests/playwright/tests/db/columns/columnLinkToAnotherRecordAdvanceOptions.spec.ts
index 565d6c2324..2c4a176ec2 100644
--- a/tests/playwright/tests/db/columns/columnLinkToAnotherRecordAdvanceOptions.spec.ts
+++ b/tests/playwright/tests/db/columns/columnLinkToAnotherRecordAdvanceOptions.spec.ts
@@ -42,27 +42,18 @@ test.describe('LTAR create & update', () => {
     await dashboard.grid.addNewRow({ index: 0, value: '2a' });
     await dashboard.grid.addNewRow({ index: 1, value: '2b' });
     await dashboard.grid.addNewRow({ index: 2, value: '2c' });
+    await dashboard.grid.editRow({ index: 0, columnHeader: 'Sheet1Id', value: '1' });
+    await dashboard.grid.editRow({ index: 1, columnHeader: 'Sheet1Id', value: '1' });
+    await dashboard.grid.editRow({ index: 2, columnHeader: 'Sheet1Id', value: '1' });
 
     // Create LTAR-HM column
     await dashboard.grid.column.create({
       title: 'Link1-2hm',
-      type: 'Links',
+      type: UITypes.Links,
       childTable: 'Sheet2',
       relationType: 'Has Many',
-    });
-    await dashboard.grid.column.create({
-      title: 'Link1-2mm',
-      type: 'Links',
-      childTable: 'Sheet2',
-      relationType: 'Many To many',
-    });
-
-    await dashboard.treeView.openTable({ title: 'Sheet2', networkResponse: false });
-    await dashboard.grid.column.create({
-      title: 'Link2-1hm',
-      type: 'Links',
-      childTable: 'Sheet1',
-      relationType: 'Has Many',
+      custom: true,
+      refColumn: 'Sheet1Id',
     });
 
     // Sheet2 now has all 3 column categories : HM, BT, MM