From 3052ad41e76766dba2139a29e9373cd5672f02fd Mon Sep 17 00:00:00 2001 From: Mohini Dahiya Date: Tue, 3 Aug 2021 10:34:48 +0530 Subject: [PATCH] Cypress tests for Editor (#439) * Cypress tests for Editor 1. Test Navigation Bar elements * Updated ManageAppUsers.jsx Removed space from Share text * update clipboardy package location moved dependency from root to frontend package.json file * restored root package.json file removed clipboardy dependencies. --- cypress.json | 3 +- .../integration/editor-navigation-bar.spec.js | 225 ++++++++++++++++++ cypress/plugins/index.js | 9 +- frontend/package-lock.json | 22 ++ frontend/package.json | 1 + frontend/src/Editor/ManageAppUsers.jsx | 1 - package-lock.json | 2 +- 7 files changed, 259 insertions(+), 4 deletions(-) create mode 100644 cypress/integration/editor-navigation-bar.spec.js diff --git a/cypress.json b/cypress.json index 12a0e83a72..8de8cc095c 100644 --- a/cypress.json +++ b/cypress.json @@ -7,7 +7,8 @@ "auth.spec.js", "empty-state-dashboard.spec.js", "dashboard.spec.js", - "apps-page-operations.spec.js" + "apps-page-operations.spec.js", + "editor-navigation-bar.spec.js" ] } \ No newline at end of file diff --git a/cypress/integration/editor-navigation-bar.spec.js b/cypress/integration/editor-navigation-bar.spec.js new file mode 100644 index 0000000000..dff8bde43b --- /dev/null +++ b/cypress/integration/editor-navigation-bar.spec.js @@ -0,0 +1,225 @@ +describe('Editor - Navigation Bar', () => { + + beforeEach(() => { + + //read 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 show site header with nav items', () => { + cy.get('.navbar') + .find('.navbar-nav') + .should('be.visible'); + }); + + it('should show tooljet brand image and clicking on it should take user to dashboard', () => { + cy.get('.navbar') + .find('.navbar-brand-image') + .should('be.visible') + .click() + .get('title').should('have.text', 'ToolJet - Dashboard'); + }); + + it('should hide left sidebar', () => { + + //check left sidebar visibility + cy.get('.left-sidebar').should('be.visible'); + + //click on hide left sidebar button + cy.get('.editor-buttons') + .find('[data-tip="Hide left sidebar"] img') + .click() + .get('[data-tip="Show left sidebar"] img') + + //check left sidebar should not be visible + cy.get('.left-sidebar').should('not.be.visible'); + }); + + it('should hide query editor', () => { + + //check query pane is visible + cy.get('.query-pane').should('be.visible'); + + //click on Hide query editor button + cy.get('.editor-buttons') + .find('[data-tip="Hide query editor"] img') + .click() + .get('[data-tip="Show query editor"] img') + + //check the query editor pane should not be visible + cy.get('.query-pane') + .find('.row.main-row') + .should('not.be.visible'); + }); + + it('should resize canvas', () => { + + //default size should be 100% + cy.get('.canvas-buttons') + .find('small') + .should('have.text', '100%') + + //check maximize button + cy.get('.canvas-buttons') + .find('button:nth-child(3)') + .find('img[src="/assets/images/icons/zoom-in.svg"]') + .should('be.visible') + + cy.get('.canvas-container.align-items-center') + .should('have.attr', 'style', 'transform: scale(1);') + + //check minimize button + var scale; + var styleString = "transform: scale(1);"; + for (var i = 100; i >= 70; i = i - 10) { + + cy.get('.canvas-buttons') + .find('button:nth-child(1)') + .find('img[src="/assets/images/icons/zoom-out.svg"]') + .should('be.visible') + .click() + scale = (i - 10) / 100; + styleString = "transform: scale(" + scale + ");" + cy.get('.canvas-container.align-items-center') + .should('have.attr', 'style', styleString) + } + }); + + it('should switch from desktop layout to mobile view ', () => { + + //check canvas default(desktop view) dimensions + cy.get('.real-canvas') + .should('have.css', 'width') + .and('eq', '1292px') + + cy.get('.real-canvas') + .should('have.css', 'height') + .and('eq', '2400px'); + + //check default layout(Desktop view) button. it should be disabled + cy.get('.layout-buttons') + .find('button:nth-child(1)') + .should('be.disabled') + + //mobile button should be enabled. + cy.get('.layout-buttons') + .find('button:nth-child(2)') + .should('be.enabled') + .click() + + //clicking on layout button should change view to mobile canvas. check canvas dimensions + cy.get('.real-canvas') + .should('have.css', 'width') + .and('eq', '450px') + + cy.get('.real-canvas') + .should('have.css', 'height') + .and('eq', '2400px'); + }); + + it('should switch to dark theme', () => { + + cy.get('.main-wrapper') + cy.get('.form-check') + .find('img') + .should('have.attr', 'src', "/assets/images/icons/day.svg") + .and('be.visible') + + cy.get('.navbar') + .find('.form-check-input') + .click() + + cy.get('.theme-dark') + cy.get('.form-check') + .find('img') + .should('have.attr', 'src', "/assets/images/icons/night.svg") + .and('be.visible') + }); + + it('should be able to share app', () => { + //check share button + cy.get('.navbar') + .find('.navbar-nav') + .find('.nav-item') + .find('button[class="btn btn-sm"]') + .should('have.text', 'Share') + .and('be.visible') + .click() + + //check clicking on share should open sharing dialog + cy.get('.modal-content') + .find('.modal-header') + .find('.modal-title') + .should('have.text', 'Users and permissions') + + 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/') + + }); + + it('should deploy app', () => { + + cy.get('.navbar') + .find('.navbar-nav') + .find('.nav-item') + .find('button[class="btn btn-primary btn-sm"]') + .should('have.text', 'Deploy') + .and('be.visible') + .click() + + cy.get('.modal-title.h4') + .should('have.text', 'Versions and deployments') + .and('be.visible'); + + cy.get('.btn.btn-primary.btn-sm.mx-2') + .contains('+ Version') + .click() + + cy.get('input[placeholder="version name"]') + .type('1.0') + + cy.get('button[class="btn btn-primary"]') + .should('have.text', 'Create') + .click() + + cy.get('table') + .contains('td', 'save') + .click() + .contains('td', 'deploy') + .click() + }); + + it('should launch app', () => { + cy.get('.navbar-nav.flex-row.order-md-last') + .find('a[target="_blank"]') + .should('have.text', 'Launch') + .invoke("removeAttr", "target") + .click() + + cy.url().should('include', '/applications') + }); +}) \ No newline at end of file diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index 59b2bab6e4..aa67a28104 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -1,4 +1,3 @@ -/// // *********************************************************** // This example plugins/index.js can be used to load plugins // @@ -20,3 +19,11 @@ 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(); + } + }); +}; \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d9e93c3bb3..2854d2db91 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -4248,6 +4248,28 @@ "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz", "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==" }, + "clipboardy": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz", + "integrity": "sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==", + "dev": true, + "requires": { + "arch": "^2.1.1", + "execa": "^1.0.0", + "is-wsl": "^2.1.1" + }, + "dependencies": { + "is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, + "requires": { + "is-docker": "^2.0.0" + } + } + } + }, "cliui": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index a6d5f7cf0e..38cf804927 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -61,6 +61,7 @@ "@cypress/react": "^5.9.0", "@cypress/webpack-dev-server": "^1.3.1", "@cypress/webpack-preprocessor": "^5.9.0", + "clipboardy": "^2.3.0", "cypress": "^7.4.0", "path": "^0.12.7", "webpack": "^4.29.6", diff --git a/frontend/src/Editor/ManageAppUsers.jsx b/frontend/src/Editor/ManageAppUsers.jsx index 5873b6e869..f85df49c19 100644 --- a/frontend/src/Editor/ManageAppUsers.jsx +++ b/frontend/src/Editor/ManageAppUsers.jsx @@ -143,7 +143,6 @@ class ManageAppUsers extends React.Component { return (
diff --git a/package-lock.json b/package-lock.json index ddde5d80dd..e638f8df56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7460,4 +7460,4 @@ } } } -} +} \ No newline at end of file