Add better tests

Author: OskarDamkjaer

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() {

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')
+  })
 })

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"]'
 

src/browser/modules/Editor/EditorFrame.tsx

@@ -37,6 +37,7 @@ import {
   UpIcon,
   DownIcon
 } from 'browser-components/icons/Icons'
+import { TransitionMotion } from 'react-motion'
 
 type EditorSize = 'CARD' | 'LINE' | 'FULLSCREEN'
 type EditorFrameProps = { bus: Bus }
@@ -91,21 +92,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 +115,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>
           ))}