From eb1041c7d15e213ea6e84d6d56a65e69ae35cda5 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 1 Jun 2020 14:54:39 -0700
Subject: [PATCH] test(e2e): dashboard notes (#18318)

* test: add typings for cy commands

* test(dashboard): creation of note cell
---
 ui/cypress/e2e/dashboardsView.test.ts         | 21 ++++++++++++++++++-
 ui/cypress/index.d.ts                         |  6 ++++--
 .../dashboards/components/DashboardHeader.tsx |  1 +
 .../components/NoteEditorOverlay.tsx          |  3 ++-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/ui/cypress/e2e/dashboardsView.test.ts b/ui/cypress/e2e/dashboardsView.test.ts
index 072466abfe..0a968f4357 100644
--- a/ui/cypress/e2e/dashboardsView.test.ts
+++ b/ui/cypress/e2e/dashboardsView.test.ts
@@ -40,7 +40,7 @@ describe('Dashboard', () => {
     cy.getByTestID('dashboard-card').should('contain', newName)
   })
 
-  it('can create a cell', () => {
+  it('can create a View and Note cell', () => {
     cy.get('@org').then(({id: orgID}: Organization) => {
       cy.createDashboard(orgID).then(({body}) => {
         cy.fixture('routes').then(({orgs}) => {
@@ -49,9 +49,28 @@ describe('Dashboard', () => {
       })
     })
 
+    // View cell
     cy.getByTestID('add-cell--button').click()
     cy.getByTestID('save-cell--button').click()
     cy.getByTestID('cell--view-empty').should('have.length', 1)
+
+    // Remove view cell
+    cy.getByTestID('cell-context--toggle').click()
+    cy.getByTestID('cell-context--delete').click()
+    cy.getByTestID('cell-context--delete-confirm').click()
+
+    cy.getByTestID('empty-state').should('exist')
+
+    const noteText = 'this is a note cell'
+
+    // Note cell
+    cy.getByTestID('add-note--button').click()
+    cy.getByTestID('note-editor--overlay').within(() => {
+      cy.get('.CodeMirror').type(noteText)
+      cy.getByTestID('save-note--button').click()
+    })
+
+    cy.getByTestID('cell--view-empty').contains(noteText)
   })
 
   // fix for https://github.com/influxdata/influxdb/issues/15239
diff --git a/ui/cypress/index.d.ts b/ui/cypress/index.d.ts
index 05e739055a..372c1a08c2 100644
--- a/ui/cypress/index.d.ts
+++ b/ui/cypress/index.d.ts
@@ -15,8 +15,9 @@ import {
   getByInputValue,
   getByTitle,
   createTask,
-  createVariable,
   createMapVariable,
+  createCSVVariable,
+  createQueryVariable,
   createAndAddLabel,
   createLabel,
   createBucket,
@@ -39,8 +40,9 @@ declare global {
       signin: typeof signin
       setupUser: typeof setupUser
       createSource: typeof createSource
+      createCSVVariable: typeof createCSVVariable
+      createQueryVariable: typeof createQueryVariable
       createTask: typeof createTask
-      createVariable: typeof createVariable
       createMapVariable: typeof createMapVariable
       createDashboardTemplate: typeof createDashboardTemplate
       createDashboard: typeof createDashboard
diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
index 77868b05d6..6e821dd0ee 100644
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@@ -160,6 +160,7 @@ const DashboardHeader: FC<Props> = ({
             icon={IconFont.TextBlock}
             text="Add Note"
             onClick={handleAddNote}
+            testID="add-note--button"
           />
           <Button
             icon={IconFont.Cube}
diff --git a/ui/src/dashboards/components/NoteEditorOverlay.tsx b/ui/src/dashboards/components/NoteEditorOverlay.tsx
index 11faeb62f5..f9a7976c51 100644
--- a/ui/src/dashboards/components/NoteEditorOverlay.tsx
+++ b/ui/src/dashboards/components/NoteEditorOverlay.tsx
@@ -103,7 +103,7 @@ class NoteEditorOverlay extends PureComponent<Props, State> {
     }
 
     return (
-      <Overlay.Container maxWidth={900}>
+      <Overlay.Container maxWidth={900} testID="note-editor--overlay">
         <Overlay.Header
           title={this.overlayTitle}
           onDismiss={this.handleDismiss}
@@ -123,6 +123,7 @@ class NoteEditorOverlay extends PureComponent<Props, State> {
             color={ComponentColor.Success}
             status={this.saveButtonStatus}
             onClick={this.handleSave}
+            testID="save-note--button"
           />
         </Overlay.Footer>
       </Overlay.Container>