test(e2e): dashboard notes (#18318)

* test: add typings for cy commands

* test(dashboard): creation of note cell

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

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

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}

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>