Added tests for change all dbs

- Testing changing the dbs for all cards
- Testinf menu population
- Test no popover

Related to #1048

Author: james-l-m-young

cypress/Page.js

@@ -80,6 +80,18 @@ export class Page {
     return this;
   }
 
+  selectReportDatabase(database) {
+    cy.get('main .react-grid-item')
+      .contains('Query returned no data.')
+      .parentsUntil('.react-grid-item')
+      .find('button[aria-label="settings"]', { timeout: 2000 })
+      .should('be.visible')
+      .click();
+    cy.get('[data-test="database-dropdown"]').should('be.visible').click();
+    cy.contains(database)
+    return this;
+  }
+
   createReportOfType(type, query, fast = false, run = true) {
     this.selectReportOfType(type);
     if (fast) {

cypress/e2e/Buttons/change_all_dbs.cy.js

@@ -0,0 +1,84 @@
+import { createDB2 } from '../../fixtures/cypher_queries';
+import { Page } from '../../Page';
+
+const CARD_SELECTOR = 'main .react-grid-item:eq(2)';
+const page = new Page(CARD_SELECTOR);
+
+// Ignore warnings that may appear when using the Cypress dev server
+Cypress.on('uncaught:exception', (err, runnable) => {
+  console.log(err, runnable);
+  return false;
+});
+
+describe('Tests for change all db button', () => {
+    beforeEach('open neodash', () => {
+        page.init().createNewDashboard().connectToNeo4j();
+        cy.wait(100);
+    });
+
+    it('Testing menu population', () => {
+        //Create a second db
+        page.createReportOfType('Table', createDB2, true, true);
+        
+        //Check menus are populated
+        page.selectReportDatabase('db2')
+        cy.get('[style="padding-bottom: 6px; width: 440px; height: 430px; position: absolute; transform: translate(460px, 10px);"] > .n-bg-neutral-bg-weak > .MuiCollapse-entered > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiPaper-root > .card-view > .MuiCardHeader-root > .MuiCardHeader-action > .ndl-icon-btn')
+            .should('be.visible')
+            .click()
+        cy.get('.ndl-btn').should('be.visible').click()
+        cy.contains('db2')
+    });
+
+    it('Testing changing the dbs for all cards', () => {
+        //Create a second db
+        page.createReportOfType('Table', createDB2, true, true);
+        
+        //Change all db button
+        cy.get('.ndl-btn').should('be.visible').click()
+        cy.contains('db2').should('be.visible').click()
+        cy.contains('Continue').should('be.visible').click()
+        cy.get('[style="border-width: 1px; border-style: solid; color: rgb(var(--palette-primary-bg-strong)); border-color: rgb(var(--palette-primary-bg-strong)); border-radius: 8px;"] > .n-flex-row > .n-flex > .ndl-menu-item-title')
+        .should('contain', 'db2')
+
+        //Check reports
+        cy.get('[data-testid="popover-backdrop"]').click()
+
+        //Report 1
+        cy.get('[style="padding-bottom: 6px; transform: translate(909px, 10px); width: 440px; height: 430px; position: absolute;"] > .n-bg-neutral-bg-weak > .MuiCollapse-entered > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiPaper-root > .card-view > .MuiCardHeader-root > .MuiCardHeader-action > .ndl-icon-btn')
+            .should('be.visible')
+            .click()
+        cy.get('[data-test="database-dropdown"] > .css-b62m3t-container > .css-19x0je5-control > .css-1fdsijx-ValueContainer > .css-4zo8aq-Input')
+            .should('be.visible')
+            .click()
+        cy.get('#react-select-11-option-0').should('be.visible').should('contain', 'db2')
+        cy.get('[style="padding-bottom: 6px; transform: translate(909px, 10px); width: 440px; height: 430px; position: absolute;"] > .n-bg-neutral-bg-weak > .MuiCollapse-entered > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiPaper-root > .card-view > .MuiCardHeader-root > .MuiCardHeader-action > .ndl-icon-btn')
+            .should('be.visible')
+            .click()
+
+        //Report 2
+        cy.get('[style="padding-bottom: 6px; width: 440px; height: 430px; position: absolute; transform: translate(460px, 10px);"] > .n-bg-neutral-bg-weak > .MuiCollapse-entered > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiPaper-root > .card-view > .MuiCardHeader-root > .MuiCardHeader-action > .ndl-icon-btn')
+            .should('be.visible')
+            .click()
+        cy.get('[style="padding-bottom: 6px; width: 440px; height: 430px; position: absolute; transform: translate(460px, 10px);"] > .n-bg-neutral-bg-weak > .MuiCollapse-entered > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiPaper-root > .card-view > .sc-bcXHqe > .MuiCardContent-root > [data-test="database-dropdown"] > .css-b62m3t-container > .css-19x0je5-control > .css-1fdsijx-ValueContainer > .css-4zo8aq-Input')
+            .should('be.visible')
+            .click()
+        cy.get('#react-select-15-option-0').should('be.visible').should('contain', 'db2')
+    });
+
+    it('Test no popover', () => {
+        //Create a second db
+        page.createReportOfType('Table', createDB2, true, true);
+
+        //Check menus are populated
+        cy.get('.ndl-btn').should('be.visible').click()
+        cy.contains('db2').should('be.visible').click()
+        cy.get('.ndl-form-item-label > input').should('be.visible').click()
+        cy.contains('Continue').should('be.visible').click()
+        cy.get('[data-testid="popover-backdrop"]').click()
+
+        //Click without popover
+        cy.get('.ndl-btn').should('be.visible').click()
+        cy.get('[style=""] > .n-flex-row > .n-flex > .ndl-menu-item-title').contains('neo4j').should('be.visible').click()
+        
+    });
+});

cypress/fixtures/cypher_queries.js

@@ -124,7 +124,7 @@
     "babel-plugin-istanbul": "^6.1.1",
     "circular-dependency-plugin": "^5.2.2",
     "css-loader": "^3.6.0",
-    "cypress": "^12.17.4",
+    "cypress": "^14.3.0",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",

package.json

@@ -128,6 +128,7 @@ const NeoCardSettingsContent = ({
 
       {report?.disableDatabaseSelector == undefined ? (
         <Dropdown
+          data-test='database-dropdown'
           id='databaseSelector'
           label='Database'
           placeholder='neo4j'

src/card/settings/CardSettingsContent.tsx

@@ -122,7 +122,7 @@ export const NeoDashboardHeader = ({
               </Tooltip>
               <Tooltip title='Database' aria-label='database' disableInteractive>
                 <Button
-                  aria-label={'settings'}
+                  aria-label='database'
                   fill='text'
                   size='large'
                   color='neutral'