e2e test added for export options (#1028)

* e2e test added for export options * change export options to alphabetical order * use of forEach to make e2e tests less verbose and added data-testid tag to visualization view cypher frame sidebar button * add Plan view to the e2e tests for export options * add PROFILE to Cypher command in order to get the Plan view
neo4j · Jan 3, 2020 · 38d7a31 · 38d7a31
1 parent 0753439
commit 38d7a31
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 23 deletions.
diff --git a/e2e_tests/integration/data-export.spec.js b/e2e_tests/integration/data-export.spec.js
@@ -31,18 +31,49 @@ describe('Data export', () => {
     const password = Cypress.config('password')
     cy.connect('neo4j', password)
   })
-  it('shows export buttons on viz load', () => {
-    cy.executeCommand(':clear')
-    cy.executeCommand('CREATE (n:ExportTest) RETURN n')
-
-    cy.get('[data-testid="frame"]', { timeout: 10000 }).should('have.length', 1)
-    cy.get('[data-testid="frame-export-dropdown"]')
-      .first()
-      .trigger('mouseover')
-    cy.get('[data-testid="frame-export-dropdown"]')
-      .first()
-      .should('contain', 'Export PNG')
-
-    cy.executeCommand('MATCH (n:ExportTest) DETACH DELETE n')
+  context('export options', () => {
+    before(function() {
+      cy.executeCommand(':clear')
+      cy.executeCommand('PROFILE CREATE (n:ExportTest) RETURN n')
+      cy.get('[data-testid="frame"]', { timeout: 10000 }).should(
+        'have.length',
+        1
+      )
+    })
+    after(function() {
+      cy.executeCommand('MATCH (n:ExportTest) DETACH DELETE n')
+    })
+    const exportOptionsConfig = [
+      {
+        names: ['Plan', 'Visualization'],
+        order: ['CSV', 'JSON', 'PNG', 'SVG']
+      },
+      {
+        names: ['Table', 'Ascii', 'Code'],
+        order: ['CSV', 'JSON']
+      }
+    ]
+    exportOptionsConfig.forEach(config => {
+      config.names.forEach(name => {
+        it(`shows the correct export buttons for ${name} view`, () => {
+          cy.get(`[data-testid="cypherFrameSidebar${name}"]`, {
+            timeout: 10000
+          }).click()
+          cy.get('[data-testid="frame-export-dropdown"]').trigger('mouseover')
+          cy.get('[data-testid="frame-export-dropdown"]', {
+            timeout: 10000
+          }).within(() => {
+            cy.get('a').then(exportButtonsList => {
+              expect(exportButtonsList).to.have.length(config.order.length)
+              config.order.forEach((exportType, index) => {
+                expect(exportButtonsList.eq(index)).to.contain(
+                  `Export ${exportType}`
+                )
+              })
+            })
+          })
+        })
+      })
+    })
   })
 })
diff --git a/src/browser/modules/Frame/FrameTitlebar.jsx b/src/browser/modules/Frame/FrameTitlebar.jsx
@@ -183,16 +183,6 @@ class FrameTitlebar extends Component {
               <DownloadIcon />
               <DropdownList>
                 <DropdownContent>
-                  <Render if={props.visElement}>
-                    <span>
-                      <DropdownItem onClick={() => this.exportPNG()}>
-                        Export PNG
-                      </DropdownItem>
-                      <DropdownItem onClick={() => this.exportSVG()}>
-                        Export SVG
-                      </DropdownItem>
-                    </span>
-                  </Render>
                   <Render if={this.hasData() && frame.type === 'cypher'}>
                     <DropdownItem
                       onClick={() => this.exportCSV(props.getRecords())}
@@ -205,6 +195,14 @@ class FrameTitlebar extends Component {
                       Export JSON
                     </DropdownItem>
                   </Render>
+                  <Render if={props.visElement}>
+                    <DropdownItem onClick={() => this.exportPNG()}>
+                      Export PNG
+                    </DropdownItem>
+                    <DropdownItem onClick={() => this.exportSVG()}>
+                      Export SVG
+                    </DropdownItem>
+                  </Render>
                   <Render if={this.canExportTXT()}>
                     <DropdownItem onClick={this.exportTXT}>
                       Export TXT

diff --git a/src/browser/modules/Stream/CypherFrame/index.jsx b/src/browser/modules/Stream/CypherFrame/index.jsx
@@ -140,6 +140,7 @@ export class CypherFrame extends Component {
       <FrameSidebar>
         <Render if={resultHasNodes(this.props.request) && !this.state.errors}>
           <CypherFrameButton
+            data-testid="cypherFrameSidebarVisualization"
             selected={this.state.openView === viewTypes.VISUALIZATION}
             onClick={() => {
               this.changeView(viewTypes.VISUALIZATION)
@@ -177,6 +178,7 @@ export class CypherFrame extends Component {
         </Render>
         <Render if={resultHasPlan(this.props.request)}>
           <CypherFrameButton
+            data-testid="cypherFrameSidebarPlan"
             selected={this.state.openView === viewTypes.PLAN}
             onClick={() => this.changeView(viewTypes.PLAN)}
           >
@@ -205,6 +207,7 @@ export class CypherFrame extends Component {
         </Render>
         <Render if={!resultIsError(this.props.request)}>
           <CypherFrameButton
+            data-testid="cypherFrameSidebarCode"
             selected={this.state.openView === viewTypes.CODE}
             onClick={() => {
               this.changeView(viewTypes.CODE)