test(cypress): embeddable iFrame basic validation

Signed-off-by: Raju Udava <sivadstala@gmail.com>
3 years ago · 99e5df6c48
7 changed files with 56 additions and 9 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -3658,6 +3658,12 @@
      "integrity": "sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==",
      "dev": true
    },
+    "cypress-iframe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cypress-iframe/-/cypress-iframe-1.0.1.tgz",
+      "integrity": "sha512-Ne+xkZmWMhfq3x6wbfzK/SzsVTCrJru3R3cLXsoSAZyfUtJDamXyaIieHXeea3pQDXF4wE2w4iUuvCYHhoD31g==",
+      "dev": true
+    },
    "dargs": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/dargs/-/dargs-4.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -5,6 +5,7 @@
    "cross-env": "^7.0.3",
    "cypress": "^7.3.0",
    "cypress-file-upload": "^5.0.8",
+    "cypress-iframe": "^1.0.1",
    "jsdoc-to-markdown": "^5.0.3",
    "lerna": "^3.20.1"
  },
--- a/packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue
+++ b/packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue
@ -5,7 +5,7 @@
        <v-btn
          :loading="projectCreation"
          :disabled="projectCreation"
-          class="primary"
+          class="primary nc-btn-use-template"
          x-large
          v-on="on"
        >
--- a/scripts/cypress/cypress.json
+++ b/scripts/cypress/cypress.json
@ -34,5 +34,6 @@
  "screenshotsFolder": "scripts/cypress/screenshots",
  "videosFolder": "scripts/cypress/videos",
  "downloadsFolder": "scripts/cypress/downloads",
-  "supportFile": "scripts/cypress/support/index.js"  
+  "supportFile": "scripts/cypress/support/index.js",
+  "chromeWebSecurity": false 
 }
--- a/scripts/cypress/integration/common/6g_base_share.js
+++ b/scripts/cypress/integration/common/6g_base_share.js
@ -11,7 +11,9 @@ export const genTest = (type, xcdb) => {

    describe(`${type.toUpperCase()} Columns of type attachment`, () => {
        // before(() => {
-        //     cy.openTableTab('Country');
+        //     cy.waitForSpinners();
+        //     cy.signinOrSignup(roles.owner.credentials)
+        //     cy.wait(2000)
        // })

        // after(() => {
@ -42,6 +44,24 @@ export const genTest = (type, xcdb) => {
                .then(($obj) => {
                    cy.log($obj[0])
                    linkText = $obj[0].innerText.trim()
+
+                    const htmlFile = `
+<!DOCTYPE html>
+<html>
+<body>
+
+<iframe
+class="nc-embed"
+src="${linkText}?embed"
+frameborder="0"
+width="100%"
+height="700"
+style="background: transparent; "></iframe>
+
+</body>
+</html>
+            `
+                    cy.writeFile("scripts/cypress/fixtures/sampleFiles/iFrame.html", htmlFile)
            })
        })

@ -56,20 +76,32 @@ export const genTest = (type, xcdb) => {
        })

        it(`Validate access permissions`, () => {
-
            let roleType = 'viewer'
-            // cy.get(`[href="#roles||||Team & Auth "]`).find('button.mdi-close').click()

            _advSettings(roleType, false)
            _editSchema(roleType, false)
            _editData(roleType, false)
            _editComment(roleType, false)
            _viewMenu(roleType, false)
+        })

-            // disabled for share base
-            // _topRightMenu(roleType, false)   
-        })        
-    })
+        it('Generate & verify embed HTML IFrame', { baseUrl: null }, () => {
+            // open iFrame html
+            cy.visit('scripts/cypress/fixtures/sampleFiles/iFrame.html')
+
+            cy.get('.nc-embed')
+            cy.frameLoaded('.nc-embed')
+
+            cy.iframe().find('.nc-project-tree').should('exist')
+            cy.iframe().find('.nc-fields-menu-btn').should('exist')
+            cy.iframe().find('.nc-sort-menu-btn').should('exist')
+            cy.iframe().find('.nc-filter-menu-btn').should('exist')
+            cy.iframe().find('.nc-actions-menu-btn').should('exist')
+
+            mainPage.getIFrameCell('FirstName', 1).contains("PENELOPE").should('exist')
+            mainPage.getIFrameCell('LastName', 1).contains("GUINESS").should('exist')
+        })
+     })
 }

 /**
--- a/scripts/cypress/support/index.js
+++ b/scripts/cypress/support/index.js
@ -16,6 +16,9 @@
 // Import commands.js using ES2015 syntax:
 import './commands'

+// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
+import 'cypress-iframe'
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@ -317,6 +317,10 @@ export class _mainPage {
                })
            })        
    }
+
+    getIFrameCell = (columnHeader, cellNumber) => {
+        return cy.iframe().find(`tbody > :nth-child(${cellNumber}) > [data-col="${columnHeader}"]`)
+    }
 }