Add Cypress and a first test (#115)

* Initialize cypress test framework & initial testing structure


Co-authored-by: Marius Conjeaud <[email protected]>

Author: mariusconjeaud

cypress.json

@@ -0,0 +1,3 @@
+{
+    "baseUrl": "http://localhost:3000"
+}

cypress/fixtures/cypher_queries.js

@@ -0,0 +1,3 @@
+export const defaultCypherQuery = "MATCH (n) RETURN n LIMIT 25";
+export const tableCypherQuery = "MATCH (n:Movie) RETURN n.title AS title, n.released AS released LIMIT 8";
+export const barChartCypherQuery = "MATCH (n:Movie) RETURN n.released AS released, count(n.title) AS count ORDER BY released";

cypress/integration/start_page.spec.js

@@ -0,0 +1,59 @@
+import {defaultCypherQuery, tableCypherQuery} from "../fixtures/cypher_queries"
+
+describe('The Dashboard Page', () => {
+    beforeEach(() => {
+        // Navigate to index
+        cy.visit('/')
+        cy.get('#form-dialog-title').should('contain', 'NeoDash - Neo4j Dashboard Builder')
+
+        // Create new dashboard
+        cy.contains('New Dashboard').click()
+        cy.wait(300)
+        cy.get('#form-dialog-title').should('contain', 'Connect to Neo4j')
+
+        // Connect to Neo4j database
+        cy.get('#protocol').click()
+        cy.contains('neo4j+s').click()
+        cy.get('#url').clear().type('demo.neo4jlabs.com')
+        cy.get('#database').type('movies')
+        cy.get('#dbusername').clear().type('movies')
+        cy.get('#dbpassword').type('movies')
+        cy.get('button').contains('Connect').click()
+    })
+
+    it('initializes the dashboard', () => {
+        // Check the starter cards
+        cy.get('main .MuiGrid-item:eq(0)').should('contain', "This is your first dashboard!")
+        cy.get('main .MuiGrid-item:eq(1) .force-graph-container canvas').should('be.visible')
+        cy.get('main .MuiGrid-item:eq(2) button').should('have.attr', 'aria-label', 'add')
+    })
+
+    it('creates a new card', () => {
+        cy.get('main .MuiGrid-item:eq(2) button').click()
+        cy.get('main .MuiGrid-item:eq(2)').should('contain', 'No query specified.')
+    })
+
+    // Test each type of card
+    it('creates a table report', () => {
+        cy.get('main .MuiGrid-item:eq(2) button').click()
+        cy.get('main .MuiGrid-item:eq(2) button[aria-label="settings"]').click()
+        cy.get('main .MuiGrid-item:eq(2) .MuiInputLabel-root').contains("Type").next().should('contain', 'Table')
+        cy.get('main .MuiGrid-item:eq(2) .ReactCodeMirror').type(tableCypherQuery)
+        cy.get('main .MuiGrid-item:eq(2) button[aria-label="save"]').click()
+        cy.get('main .MuiGrid-item:eq(2) .MuiDataGrid-columnHeaders').should('contain', 'title').and('contain', 'released')
+        cy.get('main .MuiGrid-item:eq(2) .MuiDataGrid-virtualScroller .MuiDataGrid-row').should('have.length', 5)
+        cy.get('main .MuiGrid-item:eq(2) .MuiDataGrid-footerContainer').should('contain', '1–5 of 8')
+        cy.get('main .MuiGrid-item:eq(2) .MuiDataGrid-footerContainer button[aria-label="Go to next page"]').click()
+        cy.get('main .MuiGrid-item:eq(2) .MuiDataGrid-virtualScroller .MuiDataGrid-row').should('have.length', 3)
+        cy.get('main .MuiGrid-item:eq(2) .MuiDataGrid-footerContainer').should('contain', '6–8 of 8')
+    })
+
+    // Test card deletion
+
+    // Test create/delete new page
+
+    // Test load dashboard from file
+    // Niels to provide file test case
+
+    // Test opening existing dashboard ?
+  })

package.json

@@ -77,6 +77,7 @@
     "@emotion/styled": "^11.6.0",
     "babel-loader": "^8.2.3",
     "css-loader": "^3.6.0",
+    "cypress": "^9.5.3",
     "file-loader": "^6.2.0",
     "react-hot-loader": "^4.13.0",
     "source-map-loader": "^1.1.3",