chore: install clockface beta and fix e2e tests

cypress.json

@@ -12,5 +12,7 @@
     "www.google-analytics.com",
     "www.googletagmanager.com",
     "www.honeybadger.io"
-  ]
+  ],
+  "viewportWidth": 1200,
+  "viewportHeight": 1000
 }

cypress/e2e/oss/onboarding.test.ts

@@ -73,16 +73,12 @@ describe('Onboarding', () => {
 
     cy.getByTestID('next').should('be.disabled')
 
-    cy.getByTestID('next')
-      .children('.cf-button--label')
-      .contains('Continue')
+    cy.getByTestID('next').contains('CONTINUE', {matchCase: false})
 
     // Input fields
     cy.fillInOSSLoginFormWithDefaults()
 
-    cy.getByTestID('next')
-      .children('.cf-button--label')
-      .contains('Continue')
+    cy.getByTestID('next').contains('CONTINUE', {matchCase: false})
 
     cy.getByTestID('next')
       .should('be.enabled')
@@ -184,17 +180,15 @@ describe('Onboarding', () => {
 
     cy.getByTestID('next')
       .should('be.disabled')
-      .children('.cf-button--label')
-      .contains('Continue')
+      .contains('CONTINUE', {matchCase: false})
 
     cy.get<string>('@defaultPassword').then((defaultPassword: string) => {
       cy.getByTestID('input-field--password').type(defaultPassword)
     })
 
     cy.getByTestID('next')
       .should('be.disabled')
-      .children('.cf-button--label')
-      .contains('Continue')
+      .contains('CONTINUE', {matchCase: false})
 
     cy.getByTestID('input-field--password-chk').type('drowssap')
 
@@ -217,8 +211,7 @@ describe('Onboarding', () => {
 
     cy.getByTestID('next')
       .should('be.disabled')
-      .children('.cf-button--label')
-      .contains('Continue')
+      .contains('CONTINUE', {matchCase: false})
 
     cy.get<string>('@defaultOrg').then((defaultOrg: string) => {
       cy.getByTestID('input-field--orgname').type(defaultOrg)
@@ -228,8 +221,7 @@ describe('Onboarding', () => {
 
       cy.getByTestID('next')
         .should('be.disabled')
-        .children('.cf-button--label')
-        .contains('Continue')
+        .contains('CONTINUE', {matchCase: false})
 
       cy.get<string>('@defaultPassword').then((defaultPassword: string) => {
         cy.getByTestID('input-field--password')
@@ -244,25 +236,22 @@ describe('Onboarding', () => {
 
       cy.getByTestID('next')
         .should('be.enabled')
-        .children('.cf-button--label')
-        .contains('Continue')
+        .contains('CONTINUE', {matchCase: false})
 
       // check cleared username
       cy.getByTestID('input-field--username').clear()
 
       cy.getByTestID('next')
         .should('be.disabled')
-        .children('.cf-button--label')
-        .contains('Continue')
+        .contains('CONTINUE', {matchCase: false})
 
       cy.get<string>('@defaultUser').then((defaultUser: string) => {
         cy.getByTestID('input-field--username').type(defaultUser)
       })
 
       cy.getByTestID('next')
         .should('be.enabled')
-        .children('.cf-button--label')
-        .contains('Continue')
+        .contains('CONTINUE', {matchCase: false})
 
       // check cleared password
       cy.getByTestID('input-field--password').clear()
@@ -274,8 +263,7 @@ describe('Onboarding', () => {
 
       cy.getByTestID('next')
         .should('be.disabled')
-        .children('.cf-button--label')
-        .contains('Continue')
+        .contains('CONTINUE', {matchCase: false})
 
       cy.get<string>('@defaultPassword').then((defaultPassword: string) => {
         cy.getByTestID('input-field--password')
@@ -289,40 +277,35 @@ describe('Onboarding', () => {
 
       cy.getByTestID('next')
         .should('be.enabled')
-        .children('.cf-button--label')
-        .contains('Continue')
+        .contains('CONTINUE', {matchCase: false})
 
       // check cleared org name
       cy.getByTestID('input-field--orgname').clear()
 
       cy.getByTestID('next')
         .should('be.disabled')
-        .children('.cf-button--label')
-        .contains('Continue')
+        .contains('CONTINUE', {matchCase: false})
 
       cy.get<string>('@defaultOrg').then((defaultOrg: string) => {
         cy.getByTestID('input-field--orgname').type(defaultOrg)
       })
 
       cy.getByTestID('next')
         .should('be.enabled')
-        .children('.cf-button--label')
-        .contains('Continue')
+        .contains('CONTINUE', {matchCase: false})
 
       // check cleared bucket name
       cy.getByTestID('input-field--bucketname').clear()
 
       cy.getByTestID('next')
         .should('be.disabled')
-        .children('.cf-button--label')
-        .contains('Continue')
+        .contains('CONTINUE', {matchCase: false})
 
       cy.getByTestID('input-field--bucketname').type(defaultBucket)
     })
 
     cy.getByTestID('next')
       .should('be.enabled')
-      .children('.cf-button--label')
-      .contains('Continue')
+      .contains('CONTINUE', {matchCase: false})
   })
 })

cypress/e2e/shared/dashboardsIndex.test.ts

@@ -314,12 +314,12 @@ describe('Dashboards', () => {
 
       // visit another page
       cy.getByTestID('tree-nav').then(() => {
-        cy.contains('Settings').click()
+        cy.contains('Settings').click({force: true})
         cy.contains(
           "Looks like there aren't any Variables, why not create one?"
         )
         // return to dashboards page
-        cy.contains('Boards').click()
+        cy.contains('Dashboards').click()
       })
 
       // assert dashboard order remains the same

cypress/e2e/shared/dashboardsRefresh.test.ts

@@ -61,7 +61,7 @@ describe('Dashboard refresh', () => {
         cy.getByTestID('page-title').click()
         cy.getByTestID('renamable-page-title--input')
           .clear()
-          .type('blah')
+          .type('blah{enter}')
         cy.getByTestID('save-cell--button').click()
       })
     })
@@ -74,7 +74,7 @@ describe('Dashboard refresh', () => {
       cy.getByTestID('auto-refresh-input')
         .clear()
         .type('2s')
-      cy.getByTestID('refresh-form-activate-button').click()
+      cy.getByTestID('refresh-form-activate-button').click({force: true})
       cy.wait('@refreshQuery')
       cy.getByTestID('enable-auto-refresh-button').click()
       // Wait the duration we'd expect on the next query to ensure stopping via the button actually stops the process. The fail means the request didn't run, which is what we want
@@ -92,6 +92,7 @@ describe('Dashboard refresh', () => {
       cy.getByTestID('auto-refresh-input')
         .clear()
         .type('4s')
+        .type('{enter}')
       cy.getByTestID('timerange-popover-button').click()
       cy.getByTestID('timerange-popover--dialog').within(() => {
         cy.getByTestID('timerange--input')
@@ -120,6 +121,7 @@ describe('Dashboard refresh', () => {
       cy.getByTestID('auto-refresh-input')
         .clear()
         .type('2s')
+        .type('{enter}')
       cy.getByTestID('timerange-popover-button').click()
       cy.getByTestID('timerange-popover--dialog').within(() => {
         cy.getByTestID('timerange--input')
@@ -155,15 +157,20 @@ describe('Dashboard refresh', () => {
       cy.visit(routeToReturnTo)
       cy.wait('@refreshQuery')
       cy.wait(5000)
-      cy.getByTestID('enable-auto-refresh-button').then(el => {
-        expect(el[0].innerText).to.equal('Enable Auto Refresh')
-      })
+      cy.getByTestID(
+        'enable-auto-refresh-button'
+      ).contains('ENABLE AUTO REFRESH', {matchCase: false})
     })
     it('can timeout on a preset inactivity timeout', done => {
+      cy.getByTestID(
+        'enable-auto-refresh-button'
+      ).contains('ENABLE AUTO REFRESH', {matchCase: false})
+
       cy.getByTestID('enable-auto-refresh-button').click()
       cy.getByTestID('auto-refresh-input')
         .clear()
         .type('3s')
+        .type('{enter}')
       cy.getByTestID('timerange-popover-button').click()
       cy.getByTestID('timerange-popover--dialog').within(() => {
         cy.getByTestID('timerange--input')
@@ -188,9 +195,9 @@ describe('Dashboard refresh', () => {
         })
 
       cy.wait(3100)
-      cy.getByTestID('enable-auto-refresh-button').then(el => {
-        expect(el[0].innerText).to.equal('Enable Auto Refresh')
-      })
+      cy.getByTestID(
+        'enable-auto-refresh-button'
+      ).contains('ENABLE AUTO REFRESH', {matchCase: false})
       cy.getByTestID('notification-success--children')
         .children()
         .should(
@@ -257,7 +264,7 @@ describe('Dashboard refresh', () => {
         cy.getByTestID('page-title').click()
         cy.getByTestID('renamable-page-title--input')
           .clear()
-          .type('blah')
+          .type('blah{enter}')
         cy.getByTestID('save-cell--button').click()
       })
 
@@ -296,7 +303,7 @@ describe('Dashboard refresh', () => {
       cy.getByTestID('auto-refresh-input')
         .clear()
         .type('2s')
-      cy.getByTestID('refresh-form-activate-button').click()
+      cy.getByTestID('refresh-form-activate-button').click({force: true})
       cy.wait('@secondCellQuery')
       cy.wait('@firstCellQuery')
 
@@ -356,7 +363,7 @@ describe('Dashboard refresh', () => {
         cy.getByTestID('page-title').click()
         cy.getByTestID('renamable-page-title--input')
           .clear()
-          .type('blah')
+          .type('blah{enter}')
         cy.getByTestID('save-cell--button').click()
       })
 
@@ -394,7 +401,7 @@ describe('Dashboard refresh', () => {
       cy.getByTestID('auto-refresh-input')
         .clear()
         .type('2s')
-      cy.getByTestID('refresh-form-activate-button').click()
+      cy.getByTestID('refresh-form-activate-button').click({force: true})
 
       cy.wait('@secondCellQuery')
       cy.getByTestID('cell blah').within(() => {
@@ -454,7 +461,7 @@ describe('Dashboard refresh', () => {
         cy.getByTestID('page-title').click()
         cy.getByTestID('renamable-page-title--input')
           .clear()
-          .type('blah')
+          .type('blah{enter}')
         cy.getByTestID('save-cell--button').click()
       })
 
@@ -540,7 +547,7 @@ describe('Dashboard refresh', () => {
         cy.getByTestID('page-title').click()
         cy.getByTestID('renamable-page-title--input')
           .clear()
-          .type('blah')
+          .type('blah{enter}')
         cy.getByTestID('save-cell--button').click()
       })
 

cypress/e2e/shared/dashboardsView.test.ts

@@ -67,6 +67,7 @@ describe('Dashboard', () => {
       cy.getByTestID('renamable-page-title--input')
         .clear()
         .type(xyCellName)
+        .type('{enter}')
       cy.getByTestID('save-cell--button').click()
     })
 
@@ -1284,7 +1285,7 @@ csv.from(csv: data) |> filter(fn: (r) => r.bucket == v.bucketsCSV)`
         cy.getByTestID('page-title').click()
         cy.getByTestID('renamable-page-title--input')
           .clear()
-          .type('blah')
+          .type('blah{enter}')
         cy.getByTestID('save-cell--button').click()
       })
       cy.getByTestID('cell-context--toggle')

cypress/e2e/shared/explorer.test.ts

@@ -64,6 +64,7 @@ describe('DataExplorer', () => {
       })
       cy.contains('Submit').click()
       cy.get('.cf-tree-nav--toggle').click()
+      cy.getByTestID('nav-item-load-data').click()
       // Can't use the testID to select this nav item because Clockface is silly and uses the same testID twice
       // Issue: https://github.com/influxdata/clockface/issues/539
       cy.get('.cf-tree-nav--sub-item-label')
@@ -646,7 +647,7 @@ describe('DataExplorer', () => {
       // rename the first tab
       cy.get('.query-tab')
         .first()
-        .trigger('contextmenu')
+        .trigger('contextmenu', {force: true})
       cy.getByTestID('right-click--edit-tab').click()
       cy.getByTestID('edit-query-name').type('NewName{enter}')
       cy.get('.query-tab')

cypress/e2e/shared/flows.test.ts

@@ -372,6 +372,8 @@ describe('Flows', () => {
     cy.getByTestID('resource-editable-name').click()
 
     // visualizations should exist
-    cy.getByTestID('giraffe-inner-plot').should('be.visible')
+    cy.getByTestID('giraffe-inner-plot')
+      .scrollIntoView()
+      .should('be.visible')
   })
 })

cypress/e2e/shared/legends.test.ts

@@ -478,7 +478,7 @@ describe('Legends', () => {
           cy.getByTestID('overlay').within(() => {
             cy.getByTestID('page-header')
               .click()
-              .type(cellName)
+              .type(cellName + '{enter}')
           })
 
           // Without submitting the query, save it to a dashboard