test(cypress): table creation and relation check

Signed-off-by: Pranav C <pranavxc@gmail.com>

cypress/integration/app_rest_api_project_spec.js

@@ -1,7 +1,7 @@
-describe('My First Test', () => {
+describe('Rest api project test', () => {
 
   before(() => {
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:3000', {retryOnNetworkFailure: true, timeout: 120000})
     cy.waitForSpinners();
   })
 
@@ -55,13 +55,48 @@ describe('My First Test', () => {
 
   it('Create Table', () => {
     cy.get('.add-btn').click();
-    const name= 'Test' + Date.now();
+    const name = 'Test' + Date.now();
     cy.get('.nc-create-table-card .nc-table-name input[type="text"]').first().click().clear().type(name)
     cy.get('.nc-create-table-card .nc-table-name-alias input[type="text"]').first().should('have.value', name.toLowerCase())
-    cy.wait(3000)
+    cy.wait(5000)
     cy.get('.nc-create-table-card .nc-create-table-submit').first().click()
     cy.get(`.project-tab:contains(${name})`).should('exist')
     cy.url().should('contain', `?name=${name}&`)
   });
 
+
+  it('Open and check country table', () => {
+    cy.contains('Country').first().click({force: true});
+
+    cy.get(`.project-tab:contains(Country):visible`).should('exist')
+    cy.url().should('contain', `?name=Country&`)
+
+    cy.get('td[data-col="Country => City"] div:visible').first().click()
+    cy.get('td[data-col="Country => City"] div .mdi-arrow-expand:visible').first().click()
+
+    cy.get(":contains(Link to 'City'):visible").should('exist')
+
+    cy.get(":contains(Link to 'City'):visible").first().click()
+  });
+
+  it('Open and check actor table for m2m', () => {
+    cy.contains('Actor').first().click({force: true});
+
+    cy.get(`.project-tab:contains(Actor)`).should('exist')
+    cy.url().should('contain', `?name=Actor&`)
+
+    cy.get('td[data-col="Actor <=> Film"] div:visible').first().click({force: true})
+    cy.get('td[data-col="Actor <=> Film"] div .mdi-arrow-expand').first().click({force: true})
+    //
+    // cy.get(":contains(Link to 'City')").should('exist')
+    //
+    // cy.get(":contains(Link to 'City'):visible").click()
+
+    cy.get('.child-card:visible').should('exist').first().click()
+
+    cy.contains('Save Row').should('exist');
+    cy.contains('Save Row').should('exist');
+
+  });
+
 })

docker-compose-cypress.yml

@@ -1,8 +1,9 @@
 version: "3.5"
 
 services:
-  mysql:
+  db80:
-    image: mysql:5.7
+     network_mode: host
+     image: mysql:8.0
      restart: always
      environment:
        MYSQL_ROOT_PASSWORD: password
@@ -10,25 +11,33 @@ services:
        - 3306:3306
      volumes:
        - ./packages/nocodb/tests/mysql-sakila-db:/docker-entrypoint-initdb.d
-    healthcheck:
-      test: "/etc/init.d/mysql status"
-      interval: 1s
-      retries: 240
   xc-cypress-nocodb:
+    network_mode: host
     image: node:12.22.1-slim
     ports:
       - "8080:8080"
     volumes:
-      - ./packages/:/home/packages/
+      - ./packages/nocodb:/home/app
-    depends_on:
-      - mysql
     command:
       - /bin/bash
       - -c
       - |
         echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
-        apt-get update && apt-get install rsync -y
+        cd /home/app/ && npm i && npm run run
-        cp -r /home/packages/ /home/app/
+  xc-cypress-nc-gui:
-        cd /home/app/nc-gui && npm i && npm run build:copy && cd ../nc-lib-gui && npm i
+    network_mode: host
-        rm -rf /home/app/nocodb/node_modules/nc-lib-gui
+    image: node:12.22.1-slim
-        cd /home/app/nocodb && npm i ../nc-lib-gui ; npm i && npm run run
+    ports:
+      - "3000:3000"
+    environment:
+      - HOST=0.0.0.0
+      - PORT=3000
+    volumes:
+      - ./packages/nc-gui:/home/app
+      - ./packages/nc-lib-gui:/home/nc-lib-gui
+    command:
+      - /bin/bash
+      - -c
+      - |
+        echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+        cd /home/app/ && npm i && npm run dev

packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

@@ -2,11 +2,11 @@
   <div>
     <table
       v-if="data"
-      class="xc-row-table"
+      class="xc-row-table nc-grid"
       style=" "
     >
       <thead>
-        <tr class="text-left">
+        <tr class="text-left nc-grid-header-row">
           <th
             class="grey-border caption"
             :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4 grey--text text--darken-2'"
@@ -19,7 +19,7 @@
             v-show="showFields[col.alias]"
             :key="col.alias"
             v-xc-ver-resize
-            class="grey-border caption font-wight-regular"
+            class="grey-border caption font-wight-regular  nc-grid-header-cell"
             :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
             :data-col="col.alias"
             @xcresize="onresize(col.alias,$event)"
@@ -58,7 +58,7 @@
           <th
             v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')"
             :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
-            class="grey-border new-column-header pointer"
+            class="grey-border new-column-header pointer  nc-grid-header-cell"
             @click="addNewColMenu = true"
           >
             <v-menu
@@ -89,10 +89,11 @@
         <tr
           v-for="({row:rowObj, rowMeta},row) in data"
           :key="row"
+          class=" nc-grid-row"
         >
           <td
             style="width: 65px"
-            class="caption"
+            class="caption nc-grid-cell"
             @contextmenu="showRowContextMenu($event,rowObj,rowMeta,row)"
           >
             <div class="d-flex align-center">
@@ -134,7 +135,7 @@
             v-for="(columnObj,col) in availableColumns"
             v-show="showFields[columnObj.alias]"
             :key="row + columnObj.alias"
-            class="cell pointer"
+            class="cell pointer nc-grid-cell"
             :class="{
               'active' :!isPublicView && selected.col === col && selected.row === row && isEditable ,
               'primary-column' : primaryValueColumn === columnObj._cn,
@@ -196,7 +197,7 @@
           </td>
         </tr>
         <tr v-if="isPkAvail && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-          <td :colspan="visibleColLength + 1" class="text-left pointer" @click="insertNewRow(true)">
+          <td :colspan="visibleColLength + 1" class="text-left pointer nc-grid-add-new-cell" @click="insertNewRow(true)">
             <v-tooltip top>
               <template #activator="{on}">
                 <v-icon small color="pink" v-on="on">