Cypress tests if widgets are draggable to canvas

cypress.json

@@ -5,11 +5,27 @@
   },
   "testFiles": [
     "auth.spec.js",
-    "empty-state-dashboard.spec.js",
-    "dashboard.spec.js",
-    "apps-page-operations.spec.js",
-    "editor-navigation-bar.spec.js",
-    "editor-datasource-postgres.spec.js"
-    ]
-
+    "dashboard/empty-state-dashboard.spec.js",
+    "dashobard/dashboard.spec.js",
+    "dashboard/apps-page-operations.spec.js",
+    "editor/editor-navigation-bar.spec.js",
+    "editor/editor-datasource-postgres.spec.js",
+    "editor/widgets/editor-widget-checkbox.spec.js",
+    "editor/widgets/editor-widget-table.spec.js",
+    "editor/widgets/editor-widget-button.spec.js",
+    "editor/widgets/editor-widget-chart.spec.js",
+    "editor/widgets/editor-widget-modal.spec.js",
+    "editor/widgets/editor-widget-text-input.spec.js",
+    "editor/widgets/editor-widget-date-picker.spec.js",
+    "editor/widgets/editor-widget-toggle-switch.spec.js",
+    "editor/widgets/editor-widget-text-area.spec.js",
+    "editor/widgets/editor-widget-text.spec.js",
+    "editor/widgets/editor-widget-text-editor.spec.js",
+    "editor/widgets/editor-widget-image.spec.js",
+    "editor/widgets/editor-widget-container.spec.js",
+    "editor/widgets/editor-widget-dropdown.spec.js",
+    "editor/widgets/editor-widget-multiselect.spec.js",
+    "editor/widgets/editor-widget-map.spec.js",
+    "editor/widgets/editor-widget-qr-scanner.spec.js"
+    ] 
 }

cypress/integration/empty-state-dashboard.spec.js → cypress/integration/dashboard/empty-state-dashboard.spec.js

@@ -9,7 +9,6 @@ describe('Empty state of dashboard', () => {
       })
 
       it('should show empty screen when there are no apps', () => {
-
           cy.wait(1000)
           cy.get('body').then(($title=>
           {

cypress/integration/editor/widgets/editor-widget-button.spec.js

@@ -0,0 +1,31 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test Button widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 be able to drag and drop button to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('button')
+
+        cy.get('.draggable-box')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+    });
+})

cypress/integration/editor/widgets/editor-widget-chart.spec.js

@@ -0,0 +1,31 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test chart widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 be able to drag and drop chart to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('chart')
+
+        cy.get('.draggable-box')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+    });
+})

cypress/integration/editor/widgets/editor-widget-checkbox.spec.js

@@ -0,0 +1,40 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test checkbox widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 drag and drop checkbox to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('checkbox')
+
+        cy.get('.draggable-box')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+    });
+
+    it('should be able to set checkbox value to true', () => {
+        cy.get('input[placeholder="Search…"]').type('checkbox')
+
+        cy.get('.draggable-box')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+
+        cy.get('.form-check-label').click()
+    });
+})

cypress/integration/editor/widgets/editor-widget-container.spec.js

@@ -0,0 +1,31 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test Container widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 be able to drag and drop image to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('Container')
+
+        cy.get('.draggable-box').eq(0).should('have.text','Container')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+    });
+})

cypress/integration/editor/widgets/editor-widget-date-picker.spec.js

@@ -0,0 +1,31 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test Button widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 be able to drag and drop data-picker to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('date picker')
+
+        cy.get('.draggable-box').eq(0).should('have.text','Date Picker')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+    });
+})

cypress/integration/editor/widgets/editor-widget-dropdown.spec.js

@@ -0,0 +1,31 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test dropdown widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 be able to drag and drop dropdown to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('dropdown')
+
+        cy.get('.draggable-box').eq(0).should('have.text','Dropdown')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+    });
+})

cypress/integration/editor/widgets/editor-widget-image.spec.js

@@ -0,0 +1,31 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test Image widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 be able to drag and drop image to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('image')
+
+        cy.get('.draggable-box').eq(0).should('have.text','Image')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+    });
+})

cypress/integration/editor/widgets/editor-widget-map.spec.js

@@ -0,0 +1,31 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test map widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 be able to drag and drop map to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('map')
+
+        cy.get('.draggable-box').eq(0).should('have.text','Map')
+           .drag('.real-canvas',{force: true, position: 'topLeft'})
+    });
+})

cypress/integration/editor/widgets/editor-widget-modal.spec.js

@@ -0,0 +1,31 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test Modal widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 be able to drag and drop Modal to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('modal')
+
+        cy.get('.draggable-box')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+    });
+})

cypress/integration/editor/widgets/editor-widget-multiselect.spec.js

@@ -0,0 +1,31 @@
+import '@4tw/cypress-drag-drop';
+describe('Editor- Test multiselect widget', () => {
+
+    beforeEach(() => {
+
+        cy.viewport(1536, 960);
+        //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 be able to drag and drop multiselect to canvas', () => {
+        cy.get('input[placeholder="Search…"]').type('multiselect')
+
+        cy.get('.draggable-box').eq(0).should('have.text','Multiselect')
+           .drag('.real-canvas',{force: true, position: 'topLeft' })
+    });
+})