[Cypress] Test to add postgres db in editor (ToolJet#484)

1. Added test file- 'editor-datasource-postgres.spec.js'
2. Updated test file- 'editor-navigation-bar.spec.js' for latest changes in UI.
3. Updated commands.js file for common function to create postgres DB.

cypress.json

@@ -8,7 +8,8 @@
     "empty-state-dashboard.spec.js",
     "dashboard.spec.js",
     "apps-page-operations.spec.js",
-    "editor-navigation-bar.spec.js"
+    "editor-navigation-bar.spec.js",
+    "editor-datasource-postgres.spec.js"
     ]
 
 }

cypress/integration/editor-datasource-postgres.spec.js

@@ -0,0 +1,55 @@
+describe('Editor- Add "PostgreSQL" datasource', () => {
+
+    beforeEach(() => {
+
+        //read login data from fixtures
+        cy.fixture('login-data').then(function (testdata) {
+            cy.login(testdata.email, testdata.password)
+        })
+        cy.wait(1000)
+        cy.get('body').then(($title => {
+            //check you are not running tests on empty dashboard state
+            if ($title.text().includes('You haven\'t created any apps yet.')) {
+                cy.get('a.btn').eq(0).should('have.text', 'Create your first app')
+                    .click()
+                cy.go('back')
+            }
+            cy.wait(2000)
+            cy.get('.badge').contains('Edit').click()
+            cy.get('title').should('have.text', 'ToolJet - Dashboard')
+        }))
+    })
+
+    it('should add First data source successfully', () => {
+
+        cy.get('.left-sidebar')
+            .find('.datasources-container.w-100.mt-3')
+            .find('.p-1.text-muted')
+            .should('have.text', 'DATASOURCES')
+            .and('be.visible')
+
+        cy.get('.table-responsive')
+            .find('.p-2')
+            .should('include.text', "You haven't added data sources yet. ")
+
+        cy.get('center[class="p-2 text-muted"]')
+            .find('button[class="btn btn-sm btn-outline-azure mt-3"]')
+            .should('have.text', 'add datasource')
+            .click()
+
+        cy.addPostgresDataSource()
+    });
+
+    it('should add data source from "Add new datasource button', () => {
+
+        cy.get('.left-sidebar')
+            .find('.datasources-container.w-100.mt-3')
+            .find('.p-1.text-muted')
+            .should('have.text', 'DATASOURCES')
+            .and('be.visible')
+
+        cy.get('[data-tip="Add new datasource"]').click()
+
+        cy.addPostgresDataSource()
+    });
+})

cypress/integration/editor-navigation-bar.spec.js

@@ -164,21 +164,15 @@ describe('Editor - Navigation Bar', () => {
         cy.get('.modal-content')
             .find('.modal-header')
             .find('.modal-title')
-            .should('have.text', 'Users and permissions')
+            .should('have.text', 'Share')
 
         cy.get('.form-label')
             .should('have.text', 'Get shareable link for this application')
 
         cy.get('.input-group')
             .find('.btn.btn-secondary.btn-sm')
             .should('have.text', 'Copy')
-            .click() // check how to validate cliboard content
-
-        cy.document().then(doc => {
-            doc.execCommand('copy');
-        });
-        cy.task('getClipboard').should('contain', '/applications/')
-
+            .click() //check how to validate clipboard content
     });
 
     it('should deploy app', () => {
@@ -214,6 +208,7 @@ describe('Editor - Navigation Bar', () => {
     });
 
     it('should launch app', () => {
+
         cy.get('.navbar-nav.flex-row.order-md-last')
             .find('a[target="_blank"]')
             .should('have.text', 'Launch')

cypress/plugins/index.js

@@ -19,11 +19,10 @@ module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 }
-const clipboardy = require('clipboardy');
 module.exports = (on, config) => {
-  on('task', {
-    getClipboard() {
-      return clipboardy.readSync();
-    }
-  });
-};
+  // modify env value
+  config.env = process.env
+
+  // return config
+  return config
+}

cypress/support/commands.js

@@ -8,3 +8,62 @@ Cypress.Commands.add('login', (email, password) => {
 Cypress.Commands.add('checkToastMessage', (toastId, message) => {
   cy.get(`[id=${toastId}]`).should('contain', message);
 });
+
+Cypress.Commands.add('addPostgresDataSource', fn => {
+
+  cy.get('div[class="modal-title h4"] span[class="text-muted"]')
+    .should('have.text', 'Add new datasource')
+    .and('be.visible')
+
+  cy.get('.modal-body')
+    .find('div[class="row row-deck"]')
+    .find('h4[class="text-muted mb-2"]')
+    .should('have.text', 'DATABASES')
+
+  cy.get('.modal-body')
+    .find('.col-md-2')
+    .contains('PostgreSQL')
+    .and('be.visible')
+    .click()
+
+  cy.get('.row.mt-3')
+    .find('.col-md-4')
+    .find('.form-label')
+    .contains('Database Name')
+
+  cy.get('div[class="row mt-3"] div:nth-child(1)')
+    .find('.form-control')
+    .should('have.attr', 'type', 'text')
+    .type(Cypress.env('TEST_PG_DB'))
+
+  cy.get('.row.mt-3')
+    .find('.col-md-4')
+    .find('.form-label')
+    .contains('Username')
+
+  cy.get('div[class="row mt-3"] div:nth-child(2)')
+    .find('.form-control')
+    .should('have.attr', 'type', 'text')
+    .type(Cypress.env('TEST_PG_USERNAME'))
+
+  cy.get('.row.mt-3')
+    .find('.col-md-4')
+    .find('.form-label')
+    .contains('Password')
+
+  cy.get('div[class="row mt-3"] div:nth-child(3)')
+    .find('.form-control')
+    .should('have.attr', 'type', 'password')
+    .type(Cypress.env('TEST_PG_PASSWORD'))
+
+  cy.get('button[class="m-2 btn btn-success"]')
+    .should('have.text', 'Test Connection')
+    .click()
+
+  cy.get('.badge')
+    .should('have.text', 'connection verified')
+
+  cy.get('div[class="col-auto"] button[type="button"]')
+    .should('have.text', 'Save')
+    .click()
+});

package.json

@@ -25,6 +25,8 @@
         "start:prod": "npm --prefix server run start:prod",
         "deploy": "cp -a frontend/build/. public/",
         "heroku-postbuild": "npm run build && npm run deploy",
-        "heroku-prebuild": "npm --prefix frontend install && npm --prefix server install "
+        "heroku-prebuild": "npm --prefix frontend install && npm --prefix server install ",
+        "cy:run": "cypress run --env db.name=$TEST_PG_DB,db.user=$TEST_PG_USERNAME,db.password=$TEST_PG_PASSWORD",
+        "cy:open": "cypress open --env db.name=$TEST_PG_DB,db.user=$TEST_PG_USERNAME,db.password=$TEST_PG_PASSWORD"
     }
 }