feat(nc-gui): Added cypress test for ERD

packages/nc-gui/components/dashboard/settings/Misc.vue

@@ -10,7 +10,7 @@ watch(includeM2M, async () => await loadTables())
     <div class="flex flex-col w-full">
       <div class="flex flex-row items-center w-full mb-4 gap-2">
         <!--        Show M2M Tables -->
-        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']">{{
+        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="nc-settings-meta-misc">{{
           $t('msg.info.showM2mTables')
         }}</a-checkbox>
       </div>

packages/nc-gui/components/erd/RelationEdge.vue

@@ -113,6 +113,7 @@ export default {
 
   <EdgeText
     v-if="label"
+    :class="`nc-erd-table-label-${label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
     :x="center[0]"
     :y="center[1]"
     :label="label"
@@ -124,6 +125,7 @@ export default {
   />
 
   <rect
+    class="nc-erd-edge-rect"
     :x="sourceX"
     :y="sourceY - 4"
     width="8"
@@ -135,6 +137,7 @@ export default {
   />
   <rect
     v-if="isManyToMany"
+    class="nc-erd-edge-rect"
     :x="targetX"
     :y="targetY - 4"
     width="8"
@@ -144,7 +147,7 @@ export default {
     :stroke-width="1.5"
     :transform="`rotate(45,${targetX + 2},${targetY - 4})`"
   />
-  <circle v-else :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
+  <circle v-else class="nc-erd-edge-circle" :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
 </template>
 
 <style scoped lang="scss">

packages/nc-gui/components/erd/SimpleView.vue

@@ -22,6 +22,8 @@ interface Props {
 
 const { tables, config } = defineProps<Props>()
 
+console.log(tables.map((t) => t.table_name))
+
 const { metasWithIdAsKey } = useMetas()
 
 const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
@@ -200,7 +202,7 @@ onBeforeMount(() => {
     <Background />
     <div
       v-if="!config.singleTableMode"
-      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
+      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
       style="font-size: 0.6rem"
     >
       <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">

packages/nc-gui/components/erd/TableNode.vue

@@ -41,7 +41,10 @@ const relatedColumnId = (col: Record<string, any>) =>
 </script>
 
 <template>
-  <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
+  <div
+    class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1 nc-erd-table-node"
+    :class="`nc-erd-table-node-${data.table_name}`"
+  >
     <GeneralTooltip modifier-key="Alt">
       <template #title> {{ data.table_name }} </template>
       <div
@@ -55,17 +58,27 @@ const relatedColumnId = (col: Record<string, any>) =>
       </div>
     </GeneralTooltip>
     <div>
-      <div class="keys mb-1">
-        <div v-for="col in pkAndFkColumns" :key="col.title" class="w-full border-b-1 py-2 border-gray-100">
+      <div
+        v-for="col in pkAndFkColumns"
+        :key="col.title"
+        class="w-full border-b-1 py-2 border-gray-100 keys"
+        :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+      >
         <SmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
       </div>
-      </div>
+
+      <div class="w-full mb-1"></div>
+
       <div v-for="(col, index) in nonPkColumns" :key="col.title">
         <div
           class="w-full h-full flex items-center min-w-32 border-gray-100 py-2 px-1"
           :class="index + 1 === nonPkColumns!.length ? 'rounded-b-lg' : 'border-b-1'"
         >
-          <div v-if="col.uidt === UITypes.LinkToAnotherRecord" class="flex relative w-full">
+          <div
+            v-if="col.uidt === UITypes.LinkToAnotherRecord"
+            class="flex relative w-full"
+            :class="`nc-erd-table-node-${data.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
+          >
             <Handle
               :id="`s-${relatedColumnId(col)}-${data.id}`"
               class="-right-4 opacity-0"
@@ -80,9 +93,19 @@ const relatedColumnId = (col: Record<string, any>) =>
             />
             <SmartsheetHeaderVirtualCell :column="col" :hide-menu="true" />
           </div>
-          <SmartsheetHeaderVirtualCell v-else-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+          <SmartsheetHeaderVirtualCell
+            v-else-if="isVirtualCol(col)"
+            :column="col"
+            :hide-menu="true"
+            :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+          />
 
-          <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+          <SmartsheetHeaderCell
+            v-else
+            :column="col"
+            :hide-menu="true"
+            :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+          />
         </div>
       </div>
     </div>

packages/nc-gui/components/erd/View.vue

@@ -4,6 +4,8 @@ import { UITypes } from 'nocodb-sdk'
 
 const { table } = defineProps<{ table?: TableType }>()
 
+const { includeM2M } = useGlobal()
+
 const { tables: projectTables } = useProject()
 
 const { metas, getMeta } = useMetas()
@@ -85,7 +87,14 @@ watch(
 </script>
 
 <template>
-  <div class="w-full" style="height: inherit">
+  <div
+    class="w-full"
+    style="height: inherit"
+    :class="{
+      'nc-erd-vue-flow': !config.singleTableMode,
+      'nc-erd-vue-flow-single-table': config.singleTableMode,
+    }"
+  >
     <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
       <div class="flex flex-row justify-center">
         <a-spin size="large" />
@@ -95,28 +104,50 @@ watch(
       <ErdSimpleView :key="erdKey" :tables="tablesFilteredWithConfig" :config="config" />
 
       <div
-        class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu"
+        class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu z-50"
       >
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" />
-          <span class="ml-2 select-none" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">{{
-            $t('activity.erd.showColumns')
-          }}</span>
+          <a-checkbox
+            v-model:checked="config.showAllColumns"
+            v-e="['c:erd:showAllColumns']"
+            class="nc-erd-showColumns-checkbox"
+          />
+          <span
+            class="ml-2 select-none nc-erd-showColumns-label"
+            style="font-size: 0.65rem"
+            @dblclick="showAdvancedOptions = true"
+            >{{ $t('activity.erd.showColumns') }}</span
+          >
         </div>
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" :disabled="!config.showAllColumns" />
+          <a-checkbox
+            v-model:checked="config.showPkAndFk"
+            v-e="['c:erd:showPkAndFk']"
+            class="nc-erd-showPkAndFk-checkbox"
+            :class="{
+              'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
+              'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
+              'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
+              'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
+            }"
+            :disabled="!config.showAllColumns"
+          />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showPkAndFk') }}</span>
         </div>
         <div v-if="!table" class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
+          <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showSqlViews') }}</span>
         </div>
-        <div v-if="!table && showAdvancedOptions" class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" />
+        <div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showMMTables') }}</span>
         </div>
-        <div v-if="showAdvancedOptions" class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showJunctionTableNames" v-e="['c:erd:showJunctionTableNames']" />
+        <div v-if="showAdvancedOptions && includeM2M" class="flex flex-row items-center">
+          <a-checkbox
+            v-model:checked="config.showJunctionTableNames"
+            v-e="['c:erd:showJunctionTableNames']"
+            class="nc-erd-showJunctionTableNames-checkbox"
+          />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showJunctionTableNames') }}</span>
         </div>
       </div>

packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue

@@ -216,7 +216,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
               </div>
             </a-menu-item>
             <a-menu-item>
-              <div v-e="['c:erd:open']" class="py-2 flex gap-2 items-center" @click="showErd = true">
+              <div v-e="['c:erd:open']" class="py-2 flex gap-2 items-center nc-view-action-erd" @click="showErd = true">
                 <AcountTreeRoundedIcon class="text-gray-500" />
                 {{ $t('title.erdView') }}
               </div>
@@ -230,13 +230,18 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <a-modal
-      v-model:visible="showErd"
-      size="small"
-      :title="`${$t('title.erdView')}: ${selectedView?.title}`"
-      :footer="null"
-      width="max(900px,60vw)"
-    >
+    <a-modal v-model:visible="showErd" size="small" :footer="null" width="max(900px,60vw)" :closable="false">
+      <div class="flex flex-row justify-between w-full items-center mb-1">
+        <a-typography-title class="ml-4 select-none" type="secondary" :level="5">
+          {{ `${$t('title.erdView')}: ${selectedView?.title}` }}
+        </a-typography-title>
+
+        <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="showErd = false">
+          <template #icon>
+            <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
+          </template>
+        </a-button>
+      </div>
       <SmartsheetToolbarErd />
     </a-modal>
 

packages/nc-gui/lang/en.json

@@ -413,7 +413,7 @@
       "showColumns": "Show Columns",
       "showPkAndFk": "Show Primary and Foreign Keys",
       "showSqlViews": "Show SQL Views",
-      "showMMTables": "Show MM tables",
+      "showMMTables": "Show Many to Many tables",
       "showJunctionTableNames": "Show Junction Table Names"
     }
   },

scripts/cypress/integration/common/9b_ERD.js

@@ -1,6 +1,6 @@
 import { mainPage, settingsPage } from "../../support/page_objects/mainPage";
 import {loginPage, projectsPage} from "../../support/page_objects/navigation";
-import { isTestSuiteActive } from "../../support/page_objects/projectConstants";
+import { isTestSuiteActive, sakilaSqlViews, sakilaTables } from "../../support/page_objects/projectConstants";
 
 export const genTest = (apiType, dbType) => {
   if (!isTestSuiteActive(apiType, dbType)) return;
@@ -28,24 +28,324 @@ export const genTest = (apiType, dbType) => {
 
     // Test cases
 
-    it(`Open Table ERD`, () => {
+    it(`Enable MM setting Open Table ERD`, () => {
+      mainPage.toggleShowMMSetting();
+      
       mainPage.openErdTab();
+      mainPage.closeMetaTab();
     });
 
-    it(`Verify ERD Context menu`, () => {
+    it(`Verify ERD Context menu in all table view`, () => {
+      mainPage.openErdTab();
       cy.get('.nc-erd-context-menu').should('be.visible');
+      cy.get('.nc-erd-context-menu').get('.nc-erd-histogram').should('be.visible');
       cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 3);
       cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(0).should('have.class', 'ant-checkbox-checked');
       cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(1).should('have.class', 'ant-checkbox-checked');
       cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(2).should('not.have.class', 'ant-checkbox-checked');
 
-      cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(0).click();
+      cy.get('.nc-erd-context-menu').find('.nc-erd-showColumns-label').dblclick();
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 5);
+    });
+
+    it("Verify ERD of all tables view and verify columns of actor and payment with default config", () => {
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 12)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 14)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 11)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 17)
+
+      for(const tableName of sakilaTables) {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-${tableName}`).should('exist');
+      }
+
+      // Actor table
+      [
+        'actor_id',
+        'first_name',
+        'last_name',
+        'last_update',
+        'film_list'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor`).find(`.nc-erd-table-node-actor-column-${colTitle}`).should('exist');
+      });
+
+      // Payment table
+      [
+        'payment_id',
+        'customer_id',
+        'staff_id',
+        'rental_id',
+        'amount',
+        'payment_date',
+        'last_update',
+        'customer',
+        'rental',
+        'staff'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-payment`).find(`.nc-erd-table-node-payment-column-${colTitle}`).should('exist');
+      });
+    });
+
+    it("Verify ERD of all tables view and verify columns of actor and payment with default config with showAllColumn disabled", () => {
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+      cy.get('.nc-erd-showPkAndFk-checkbox-disabled').should('exist');
+      cy.get('.nc-erd-showPkAndFk-checkbox-unchecked').should('exist');
+
+      // Actor table
+      [
+        'film_list'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor`).find(`.nc-erd-table-node-actor-column-${colTitle}`).should('exist');
       });
 
-    it(`test-1`, () => {
-      cy.log("test-1");
+      // Payment table
+      [
+        'customer',
+        'rental',
+        'staff'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-payment`).find(`.nc-erd-table-node-payment-column-${colTitle}`).should('exist');
+      });
+    });
+
+    it("Verify ERD of all tables view and verify columns of actor and payment with default config with showPkAndFk disabled", () => {
+      // enable showAllColumn
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showPkAndFk-checkbox').click();
+
+      // Actor table
+      [
+        'last_name',
+        'last_update',
+        'film_list'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor`).find(`.nc-erd-table-node-actor-column-${colTitle}`).should('exist');
+      });
+
+      // Payment table
+      [
+        'amount',
+        'payment_date',
+        'last_update',
+        'customer',
+        'rental',
+        'staff'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-payment`).find(`.nc-erd-table-node-payment-column-${colTitle}`).should('exist');
+      });
+    });
+
+    it("Verify ERD of all tables view with sql grid on and verify columns of ActorInfo", () => {
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showViews-checkbox').click();
+
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 19)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 14)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 11)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 17)
+
+      for(const tableName of sakilaTables) {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-${tableName}`).should('exist');
+      }
+      
+      for(const tableName of sakilaSqlViews) {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-${tableName}`).should('exist');
+      }
+
+      // ActorInfo SQL View
+      [
+        'actor_id',
+        'first_name',
+        'last_name',
+        'film_info'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor_info`).find(`.nc-erd-table-node-actor_info-column-${colTitle}`).should('exist');
+      })
+
+    });
+
+    it("Verify show MM tables", () => {
+      cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-store`).should('not.exist');
+      // disable showViews
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showViews-checkbox').click();
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showMMTables-checkbox').click();
+
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 16)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 18)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 14)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 22)
+
+      // Check if store table is present
+      cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-store`).should('exist');
+    })
+
+    it("Verify show junction table names", () => {
+      // disable showViews
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showJunctionTableNames-checkbox').click();
+
+      cy.get('.nc-erd-vue-flow').get('.nc-erd-table-label-filmactor-film_actor').should('exist');
+      mainPage.closeMetaTab();
+    })
+
+    it('Verify table ERD view of country', () => {
+      mainPage.openTableErdView();
+
+      cy.get('.nc-erd-vue-flow-single-table').find('.nc-erd-table-node').should('have.length', 2)
+      cy.get('.nc-erd-vue-flow-single-table').find('.vue-flow__edge').should('have.length', 1)
+      cy.get('.nc-erd-vue-flow-single-table').find('.nc-erd-edge-circle').should('have.length', 1)
+      cy.get('.nc-erd-vue-flow-single-table').find('.nc-erd-edge-rect').should('have.length', 1)
+
+      const countryColumns = [
+        'country_id',
+        'country',
+        'last_update',
+        'city_list'
+      ]
+
+      // Country table
+      countryColumns.forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow-single-table').find(`.nc-erd-table-node-country`).find(`.nc-erd-table-node-country-column-${colTitle}`).should('exist');
+      });
+
+      const cityColumns = [
+        'city_id',
+        'city',
+        'last_update',
+        'country',
+        'address_list'
+      ]
+
+      // City table
+      cityColumns.forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow-single-table').find(`.nc-erd-table-node-city`).find(`.nc-erd-table-node-city-column-${colTitle}`).should('exist');
+      });
+    })
+
+    it('Verify table ERD view of country showAllColumn disabled', () => {
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+        cy.get('.nc-erd-showPkAndFk-checkbox-disabled').should('exist');
+        cy.get('.nc-erd-showPkAndFk-checkbox-unchecked').should('exist');
+
+        const countryColumns = [
+          'city_list'
+        ]
+  
+        // Country table
+        countryColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-country`).find(`.nc-erd-table-node-country-column-${colTitle}`).should('exist');
         });
   
+        const cityColumns = [
+          'country',
+          'address_list'
+        ]
+  
+        // City table
+        cityColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-city`).find(`.nc-erd-table-node-city-column-${colTitle}`).should('exist');
+        });
+
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+      })
+    })
+
+    it('Verify table ERD view of country show PK AND FK disabled', () => {
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showPkAndFk-checkbox').click();
+
+        const countryColumns = [
+          'country',
+          'last_update',
+          'city_list'
+        ]
+  
+        // Country table
+        countryColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-country`).find(`.nc-erd-table-node-country-column-${colTitle}`).should('exist');
+        });
+  
+        const cityColumns = [
+          'city',
+          'last_update',
+          'country',
+          'address_list'
+        ]
+  
+        // City table
+        cityColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-city`).find(`.nc-erd-table-node-city-column-${colTitle}`).should('exist');
+        });
+
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showPkAndFk-checkbox').click();
+
+      })
+      cy.getActiveModal().find('.nc-modal-close').click({ force: true });
+    })
+
+    it('create column and check if the change is in the schema', () => {
+      mainPage.addColumn('test_column', 'country')
+
+      // table view
+      mainPage.openTableErdView();
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('exist');
+      })
+      cy.getActiveModal().find('.nc-modal-close').click({ force: true });
+
+      // All table view
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('exist');
+      })
+      mainPage.closeMetaTab();
+
+
+      mainPage.deleteColumn('test_column')
+      
+      // table view
+      mainPage.openTableErdView();
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('not.exist');
+      })
+      cy.getActiveModal().find('.nc-modal-close').click({ force: true });
+
+      // All table view
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('not.exist');
+      })
+      mainPage.closeMetaTab();
+    })
+
+    it('Create table should reflected in ERD', () => {
+      cy.createTable('new')
+
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-new').should('exist');
+      })
+      mainPage.closeMetaTab();
+
+      cy.deleteTable('new')
+      
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-new').should('not.exist');
+      })
+      mainPage.closeMetaTab();
+    })
+
+    it(`Disable MM setting Open Table ERD and check easter egg should not work`, () => {
+      mainPage.toggleShowMMSetting();
+      
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-context-menu').find('.nc-erd-showColumns-label').dblclick();
+        cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 3);
+      })
+
+      mainPage.closeMetaTab();
+    });
   });
 };
 

scripts/cypress/support/page_objects/projectConstants.js

@@ -156,3 +156,13 @@ export function setProjectString(projStr) {
 export function getProjectString() {
     return xcdbProjectString;
 }
+
+const sakilaTables = [
+    'actor', 'address', 'category', 'city', 'country', 'customer', 'film', 'film_text', 'language', 'payment', 'rental', 'staff'
+]
+
+const sakilaSqlViews = [
+    'actor_info', 'customer_list', 'film_list', 'nicer_but_slower_film_list', 'sales_by_film_category', 'sales_by_store', 'staff_list'
+]
+
+export { sakilaTables, sakilaSqlViews }