Add better tests

neo4j · Aug 13, 2020 · ae4ecfe · ae4ecfe
1 parent 884e4a0
commit ae4ecfe
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git a/e2e_tests/integration/0.index.spec.js b/e2e_tests/integration/0.index.spec.js
@@ -25,7 +25,7 @@ import { isAura, isEnterpriseEdition } from '../support/utils'
 const Editor = '.ReactCodeMirror textarea'
 const Carousel = '[data-testid="carousel"]'
 const SubmitQueryButton = '[data-testid="editorPlay"]'
-const ClearEditorButton = '[data-testid="editorClear"]'
+const ClearEditorButton = '[data-testid="editor-discard"]'
 
 describe('Neo4j Browser', () => {
   before(function() {

diff --git a/e2e_tests/integration/editor.spec.js b/e2e_tests/integration/editor.spec.js
@@ -19,6 +19,9 @@
  */
 
 /* global Cypress, cy, before */
+const fullscreenButton = '[data-testid="editor-fullscreen"]'
+const cardSizeButton = '[data-testid="editor-cardSize"]'
+const discardButton = '[data-testid="editor-discard"]'
 
 describe('editor', () => {
   before(function() {
@@ -50,4 +53,29 @@ describe('editor', () => {
     cy.get('.CodeMirror-scroll').type(':history{control}{enter}')
     cy.get('.CodeMirror-linenumber').should('contain', '$')
   })
+
+  it('supports changing ui size from controls', () => {
+    cy.get('.CodeMirror-linenumber').should('contain', '$')
+
+    // Toggle card view and back
+    cy.get(cardSizeButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '1')
+    cy.get(cardSizeButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '$')
+
+    // toggle full screen and nback
+    cy.get(fullscreenButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '1')
+    cy.get(fullscreenButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '$')
+
+    // discard resets size and clears editor
+    cy.get(cardSizeButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '1')
+    cy.get('body').type('/test')
+    cy.get('.CodeMirror-line').contains('test')
+    cy.get(discardButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '$')
+    cy.get('.CodeMirror-line').should('not.contain.text', 'test')
+  })
 })
diff --git a/e2e_tests/support/commands.js b/e2e_tests/support/commands.js
@@ -1,7 +1,7 @@
 import { executeCommand } from '../../src/shared/modules/commands/commandsDuck'
 
 const SubmitQueryButton = '[data-testid="editorPlay"]'
-const ClearEditorButton = '[data-testid="editorClear"]'
+const ClearEditorButton = '[data-testid="editor-discard"]'
 const Editor = '.ReactCodeMirror textarea'
 const VisibleEditor = '[data-testid="editor-wrapper"]'
 

diff --git a/src/browser/modules/Editor/EditorFrame.tsx b/src/browser/modules/Editor/EditorFrame.tsx
@@ -91,21 +91,21 @@ export function EditorFrame({ bus }: EditorFrameProps) {
   const buttons = [
     {
       onClick: toggleFullscreen,
-      disabled: false,
       title: isFullscreen ? 'Close fullscreen' : 'Fullscreen',
-      icon: isFullscreen ? <ContractIcon /> : <ExpandIcon />
+      icon: isFullscreen ? <ContractIcon /> : <ExpandIcon />,
+      testId: 'fullscreen'
     },
     {
       onClick: toggleCardView,
-      disabled: false,
-      title: isCardSize ? 'Collapse' : 'Cardview',
-      icon: isCardSize ? <UpIcon /> : <DownIcon />
+      title: isCardSize ? 'Collapse' : 'Expand',
+      icon: isCardSize ? <UpIcon /> : <DownIcon />,
+      testId: 'cardSize'
     },
     {
       onClick: discardEditor,
-      disabled: false,
       title: 'Discard',
-      icon: <CloseIcon />
+      icon: <CloseIcon />,
+      testId: 'discard'
     }
   ]
 
@@ -114,8 +114,13 @@ export function EditorFrame({ bus }: EditorFrameProps) {
       <FrameHeader>
         <FrameHeaderText> </FrameHeaderText>
         <UIControls>
-          {buttons.map(({ onClick, icon, title }) => (
-            <FrameButton key={`frame-${title}`} title={title} onClick={onClick}>
+          {buttons.map(({ onClick, icon, title, testId }) => (
+            <FrameButton
+              key={`frame-${title}`}
+              title={title}
+              onClick={onClick}
+              data-testid={`editor-${testId}`}
+            >
               {icon}
             </FrameButton>
           ))}