chore(cypress): add data types, adjust custom commands, adjust tests

ui/cypress/integration/admin_chronograf.test.ts

@@ -1,3 +1,5 @@
+import {Source} from '../../src/types'
+
 /*
     In these tests you will find realHover and clickAttached functions.
     They are used to assure that Cypress can see re-rendered elements and click on them.
@@ -8,7 +10,7 @@
 describe('Chronograf', () => {
   let chronograf: any
   let url: string
-  let sourceId: string
+  let source: any
 
   before(() => {
     cy.fixture('chronograf').then(chronografData => {
@@ -18,9 +20,9 @@ describe('Chronograf', () => {
 
   beforeEach(() => {
     cy.toInitialState()
-    cy.createInfluxDBConnection().then((sources: any) => {
-      sourceId = sources[0].id
-      url = `/sources/${sourceId}/admin-chronograf`
+    cy.createInfluxDBConnection().then((src: Cypress.Response<Source>) => {
+      source = src.body
+      url = `/sources/${source.id}/admin-chronograf`
     })
   })
 

ui/cypress/integration/admin_influxdb.test.ts

@@ -1,7 +1,10 @@
+import {Source} from '../../src/types'
+
+
 describe('InfluxDB', () => {
   let influxDB: any
   let url: string
-  let sourceId: string
+  let source: any
 
   before(() => {
     cy.fixture('influxDB').then(influxDBData => {
@@ -11,9 +14,9 @@ describe('InfluxDB', () => {
 
   beforeEach(() => {
     cy.toInitialState()
-    cy.createInfluxDBConnection().then((sources: any) => {
-      sourceId = sources[0].id
-      url = `/sources/${sourceId}/admin-influxdb`
+    cy.createInfluxDBConnection().then((src: Cypress.Response<Source>) => {
+      source = src.body
+      url = `/sources/${source.id}/admin-influxdb`
     })
   })
 
@@ -78,8 +81,8 @@ describe('InfluxDB', () => {
 
   describe('Users', () => {
     beforeEach(() => {
-      cy.createInfluxDB(influxDB.db.name, sourceId)
-      cy.createInfluxDBRole(influxDB.role.name, sourceId)
+      cy.createInfluxDB(influxDB.db.name, source.id)
+      cy.createInfluxDBRole(influxDB.role.name, source.id)
       cy.visit(url + '/users')
     })
 
@@ -228,11 +231,11 @@ describe('InfluxDB', () => {
 
   describe('Roles', () => {
     beforeEach(() => {
-      cy.createInfluxDB(influxDB.db.name, sourceId)
+      cy.createInfluxDB(influxDB.db.name, source.id)
       cy.createInfluxDBUser(
         influxDB.user.name,
         influxDB.user.password,
-        sourceId
+        source.id
       )
       cy.visit(url + '/roles')
     })

ui/cypress/integration/dashboard.test.ts

@@ -1,11 +1,16 @@
+import {Source} from '../../src/types'
+
 describe('Use Dashboards', () => {
+  let source: any
+
   beforeEach(() => {
     cy.toInitialState()
-    cy.createInfluxDBConnection().then((sources: any) => {
-      cy.visit(`/sources/${sources[0].id}/dashboards`)
-
-      cy.createDashboard('Reader Dashboard')
-    })
+    cy.createInfluxDBConnection()
+      .then((src: Cypress.Response<Source>) => {
+        source = src.body
+        cy.visit(`/sources/${source.id}/dashboards`)
+        cy.createDashboard('Reader Dashboard')
+      })
   })
 
   it('create, rename and delete a dashboard', () => {
@@ -21,9 +26,7 @@ describe('Use Dashboards', () => {
       .should('have.text', newName)
 
     // delete the dashboard
-    cy.get('@connections').then(connections => {
-      cy.visit(`/sources/${connections[0].id}/dashboards`)
-    })
+    cy.visit(`/sources/${source.id}/dashboards`)
 
     // DOM Element where the dashboard resides
     cy.get('.panel-body > table > tbody')

ui/cypress/integration/queryBuilder.test.ts

@@ -1,16 +1,21 @@
+import {Source} from '../../src/types'
+
 describe('query builder', () => {
   let influxDB: any
+  let source: any
 
   beforeEach(() => {
     cy.toInitialState()
-    cy.createInfluxDBConnection().then((sources: any) => {
+
+    cy.createInfluxDBConnection().then((src: Cypress.Response<Source>) => {
       cy.createDashboard()
       cy.fixture('influxDB.json').then((influxDBData: any) => {
         influxDB = influxDBData
+        source = src.body
 
-        cy.createInfluxDB(influxDB.db.name, sources[0].id)
+        cy.createInfluxDB(influxDB.db.name, source.id)
         cy.writePoints(
-          sources[0].id,
+          source.id,
           influxDB.db.name,
           influxDB.db.measurements[0].name,
           influxDB.db.measurements[0].tagValues[0],
@@ -18,7 +23,7 @@ describe('query builder', () => {
         )
 
         cy.writePoints(
-          sources[0].id,
+          source.id,
           influxDB.db.name,
           influxDB.db.measurements[1].name,
           influxDB.db.measurements[1].tagValues[1],
@@ -26,7 +31,7 @@ describe('query builder', () => {
         )
 
         cy.get('@dashboards').then((dashboards: any) => {
-          cy.visit(`/sources/${sources[0].id}/dashboards/${dashboards[0].id}`)
+          cy.visit(`/sources/${source.id}/dashboards/${dashboards[0].id}`)
         })
       })
     })
@@ -34,13 +39,10 @@ describe('query builder', () => {
     cy.get('#Line').click()
     cy.get('.dash-graph').contains('Add Data').click()
     cy.get('.source-selector').within(() => {
-      cy.get('@connections').then((sources: any) => {
-        cy.get('.dropdown--selected').should('have.text', 'Dynamic Source')
-        cy.get('.dropdown--button').click()
-        cy.get('.dropdown--menu').contains(sources[0].name).click()
-        cy.get('.dropdown--selected').should('have.text', sources[0].name)
-      })
-
+      cy.get('.dropdown--selected').should('have.text', 'Dynamic Source')
+      cy.get('.dropdown--button').click()
+      cy.get('.dropdown--menu').contains(source.name).click()
+      cy.get('.dropdown--selected').should('have.text', source.name)
       cy.get('button').contains('Flux').click().should('have.class', 'active')
     })
 

ui/cypress/support/commands.ts

@@ -1,3 +1,4 @@
+import {Source} from '../../src/types'
 const apiUrl = '/chronograf/v1'
 
 export const getByTestID = (
@@ -97,23 +98,19 @@ export const createInfluxDBConnection = (
   connectionName?: string,
   isUnsafeSSL?: boolean,
   metaUrl?: string
-): Cypress.Chainable<Cypress.Response<any>> => {
-  return cy
-    .request({
-      method: 'POST',
-      url: `${apiUrl}/sources`,
-      body: {
-        url: url ?? Cypress.env('influxDBURL'),
-        username: username ?? Cypress.env('username'),
-        password: password ?? Cypress.env('password'),
-        name: connectionName ?? Cypress.env('connectionName'),
-        insecureSkipVerify: isUnsafeSSL ?? Cypress.env('insecureSkipVerify'),
-        metaUrl: metaUrl ?? Cypress.env('metaUrl'),
-      },
-    })
-    .then(() => {
-      wrapConnections()
-    })
+): Cypress.Chainable<Cypress.Response<Source>> => {
+  return cy.request({
+    method: 'POST',
+    url: `${apiUrl}/sources`,
+    body: {
+      url: url ?? Cypress.env('influxDBURL'),
+      username: username ?? Cypress.env('username'),
+      password: password ?? Cypress.env('password'),
+      name: connectionName ?? Cypress.env('connectionName'),
+      insecureSkipVerify: isUnsafeSSL ?? Cypress.env('insecureSkipVerify'),
+      metaUrl: metaUrl ?? Cypress.env('metaUrl'),
+    },
+  })
 }
 
 /**