chore(cypress): add clickAttached function

ui/cypress/index.d.ts

@@ -26,7 +26,8 @@ import {
   deleteInfluxDB,
   deleteInfluxDBs,
   flush,
-  writePoints
+  writePoints,
+  clickAttached,
 } from './support/commands'
 
 declare global {
@@ -58,6 +59,7 @@ declare global {
       deleteInfluxDBs: typeof deleteInfluxDBs
       flush: typeof flush
       writePoints: typeof writePoints
+      clickAttached: typeof clickAttached
     }
   }
 }

ui/cypress/integration/admin.test.ts

@@ -57,35 +57,41 @@ describe('Use Admin tab', () => {
             .click()
         })
 
-        cy.getByTestID(`${chronograf.user.name}--table-row`)
-          .should('exist')
-          .realHover()
-          .within(() => {
-            cy.get('.dropdown-selected')
-              .should('exist')
-              .realHover()
-              .then(() => {
-                cy.get('.dropdown-selected').realClick()
-              })
-
-            cy.getByTestID(`${chronograf.user.role[1]}-dropdown-item`)
-              .realHover()
-              .then(() => {
-                cy.getByTestID(
-                  `${chronograf.user.role[1]}-dropdown-item`
-                ).click()
-              })
+        cy.getByTestID(`${chronograf.user.name}--table-row`).should(
+          'be.visible'
+        )
+        cy.getByTestID(`${chronograf.user.name}--table-row`).realHover()
+        cy.getByTestID(`${chronograf.user.name}--table-row`).within(() => {
+          cy.get('.dropdown-selected').should('be.visible')
+          cy.get('.dropdown-selected').realHover()
+          cy.get('.dropdown-selected').then(el => {
+            cy.clickAttached(el)
           })
 
-        cy.getByTestID(`${chronograf.user.name}--table-row`)
-          .should('exist')
-          .realHover()
-          .then(() => {
-            cy.getByTestID(`${chronograf.user.name}--table-row`).within(() => {
-              cy.getByTestID('remove-user--button').should('be.visible').click()
-              cy.getByTestID('confirm-btn').click()
-            })
+          cy.getByTestID(`${chronograf.user.role[1]}-dropdown-item`).realHover()
+
+          cy.getByTestID(`${chronograf.user.role[1]}-dropdown-item`).then(
+            el => {
+              cy.clickAttached(el)
+            }
+          )
+        })
+
+        cy.getByTestID(`${chronograf.user.name}--table-row`).should(
+          'be.visible'
+        )
+        cy.getByTestID(`${chronograf.user.name}--table-row`).realHover()
+        cy.getByTestID(`${chronograf.user.name}--table-row`).within(() => {
+          cy.getByTestID('remove-user--button').should('be.visible')
+          cy.getByTestID('remove-user--button').then(el => {
+            cy.clickAttached(el)
           })
+
+          cy.getByTestID('confirm-btn').should('be.visible')
+          cy.getByTestID('confirm-btn').then(el => {
+            cy.clickAttached(el)
+          })
+        })
       })
     })
   })

ui/cypress/integration/dashboard.test.ts

@@ -37,9 +37,11 @@ describe('Use Dashboards', () => {
 
   describe('Use Dashboards as reader', () => {
     beforeEach(() => {
-      cy.deleteChronografUser('Reader')
       cy.createChronografUser('Reader', 'oauth-mock', 'oauth2')
       cy.OAuthLoginAsDiffUser('Reader')
+      cy.get('@connections').then(connections => {
+        cy.visit(`/sources/${connections[0].id}/dashboards`)
+      })
     })
 
     it('ensure that all elements used to edit Chronograf are not visible', () => {
@@ -48,7 +50,7 @@ describe('Use Dashboards', () => {
       cy.getByTestID('create-dashboard-button').should('not.exist')
       cy.getByTestID('dashboard-filter--input').type('Empty')
       cy.getByTestID('dashboard-panel').should(
-        'have.text',
+        'contain.text',
         `Looks like you don’t have any dashboards`
       )
 

ui/cypress/plugins/index.ts

@@ -64,6 +64,4 @@ module.exports = (
       return launchOptions
     }
   )
-
-  addMatchImageSnapshotPlugin(on, config)
 }

ui/cypress/support/commands.ts

@@ -1,43 +1,12 @@
-import {addMatchImageSnapshotCommand} from 'cypress-image-snapshot/command'
 
 const apiUrl = '/chronograf/v1'
 
-declare namespace Cypress {
-  interface Chainable<Subject> {
-    /**
-     * Custom command to match image snapshots.
-     * @example cy.matchImageSnapshot('greeting')
-     */
-    matchImageSnapshot(snapshotName?: string): void
-  }
-}
-
-// Set up the settings
-addMatchImageSnapshotCommand({
-  customSnapshotsDir: '../ui/cypress/snapshots',
-  failureThreshold: 0.75, // threshold for entire image
-  failureThresholdType: 'percent', // percent of image or number of pixels
-  customDiffConfig: {threshold: 0.75}, // threshold for each pixel
-  capture: 'viewport', // capture viewport in screenshot
-})
-
-Cypress.Commands.overwrite(
-  'matchImageSnapshot',
-  (originalFn, snapshotName, options) => {
-    if (Cypress.env('ALLOW_SCREENSHOT')) {
-      originalFn(snapshotName, options)
-    } else {
-      cy.log(`Screenshot comparison is disabled`)
-    }
-  }
-)
-
 export const getByTestID = (
   dataTest: string,
   options?: Partial<
     Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow
   >
-): globalThis.Cypress.Chainable<JQuery<HTMLElement>> => {
+): Cypress.Chainable => {
   return cy.get(`[data-test="${dataTest}"]`, options)
 }
 
@@ -564,6 +533,18 @@ export function flush() {
   cy.removeInfluxDBConnections()
 }
 
+export const clickAttached = (subject?: JQuery<HTMLElement>): void => {
+  if(!subject) {
+    console.error('no element provided to "clickAttached"')
+    return
+  }
+
+  cy.wrap(subject).should($el => {
+    expect(Cypress.dom.isDetached($el)).to.be.false
+    $el.trigger('click')
+  })
+}
+
 Cypress.Commands.add('getByTestID', getByTestID)
 Cypress.Commands.add('createInfluxDBConnection', createInfluxDBConnection)
 Cypress.Commands.add('removeInfluxDBConnections', removeInfluxDBConnections)
@@ -590,3 +571,4 @@ Cypress.Commands.add('deleteInfluxDB', deleteInfluxDB)
 Cypress.Commands.add('deleteInfluxDBs', deleteInfluxDBs)
 Cypress.Commands.add('flush', flush)
 Cypress.Commands.add('writePoints', writePoints)
+Cypress.Commands.add('clickAttached', clickAttached)