test: playwright test - WIP

4 months ago · a21c2fd6cf
3 changed files with 50 additions and 15 deletions
--- 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
--- 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;
--- 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