fix(e2e): fix race conditions (#16173)

* fix(e2e): flakey query builder test * test(e2e): run test 50 times * test(e2e): run update label test 50 times * fix(e2e): visit page after creation * chore(e2e): run test once * fix(e2e): run update label test once
2019-12-10 07:12:34 -08:00 · 2019-12-10 07:12:34 -08:00 · 4f5ff962d6
parent 0681b41bef
commit 4f5ff962d6
5 changed files with 112 additions and 103 deletions
--- a/ui/cypress/e2e/labels.test.ts
+++ b/ui/cypress/e2e/labels.test.ts
@ -160,7 +160,7 @@ describe('labels', () => {
      .should('contain', hex2BgColor(newLabelColor))
  })

-  it('can update a label', () => {
+  describe('updating', () => {
    const oldLabelName = 'attributum (атрибут)'
    const oldLabelDescription =
      '(\u03944) Per attributum intelligo id quod intellectus de substantia percipit tanquam ejusdem essentiam constituens. '
@ -171,76 +171,83 @@ describe('labels', () => {
      "(\u03944) J'entends par attribut ce que l'entendement perçoit d'une substance comme constituant son essence. "
    const newLabelColor = '#B0D0FF'

-    // create label
+    beforeEach(() => {
+      // create label
+      cy.get<Organization>('@org').then(({id}) => {
+        cy.createLabel(oldLabelName, id, {
+          description: oldLabelDescription,
+          color: oldLabelColor,
+        })
+      })

-    cy.get<Organization>('@org').then(({id}) => {
-      cy.createLabel(oldLabelName, id, {
-        description: oldLabelDescription,
-        color: oldLabelColor,
+      cy.get<Organization>('@org').then(({id}) => {
+        cy.visit(`orgs/${id}/settings/labels`)
      })
    })

-    // verify name, descr, color
-    cy.getByTestID('label-card').should('have.length', 1)
-    cy.getByTestID('label-card')
-      .contains(oldLabelName)
-      .should('be.visible')
+    it('can update a label', () => {
+      // verify name, descr, color
+      cy.getByTestID('label-card').should('have.length', 1)
+      cy.getByTestID('label-card')
+        .contains(oldLabelName)
+        .should('be.visible')

-    cy.getByTestID('label-card')
-      .contains(oldLabelDescription)
-      .should('be.visible')
+      cy.getByTestID('label-card')
+        .contains(oldLabelDescription)
+        .should('be.visible')

-    cy.getByTestID('label-card')
-      .children('div.cf-resource-card--contents')
-      .children('div.cf-resource-card--row')
-      .children('div.cf-label')
-      .invoke('attr', 'style')
-      .should('contain', hex2BgColor(oldLabelColor))
+      cy.getByTestID('label-card')
+        .children('div.cf-resource-card--contents')
+        .children('div.cf-resource-card--row')
+        .children('div.cf-label')
+        .invoke('attr', 'style')
+        .should('contain', hex2BgColor(oldLabelColor))

-    cy.getByTestID('label-card')
-      .contains(oldLabelName)
-      .click()
+      cy.getByTestID('label-card')
+        .contains(oldLabelName)
+        .click()

-    cy.getByTestID('overlay--header')
-      .children('div')
-      .invoke('text')
-      .should('equal', 'Edit Label')
+      cy.getByTestID('overlay--header')
+        .children('div')
+        .invoke('text')
+        .should('equal', 'Edit Label')

-    // dismiss
-    cy.getByTestID('overlay--header')
-      .children('button')
-      .click()
+      // dismiss
+      cy.getByTestID('overlay--header')
+        .children('button')
+        .click()

-    // modify
-    cy.getByTestID('label-card')
-      .contains(oldLabelName)
-      .click()
-    cy.getByTestID('overlay--container').should('be.visible')
-    cy.getByTestID('create-label-form--name')
-      .clear()
-      .type(newLabelName)
-    cy.getByTestID('create-label-form--description')
-      .clear()
-      .type(newLabelDescription)
-    cy.getByTestID('color-picker--input')
-      .clear()
-      .type(newLabelColor)
-    cy.getByTestID('create-label-form--submit').click()
+      // modify
+      cy.getByTestID('label-card')
+        .contains(oldLabelName)
+        .click()
+      cy.getByTestID('overlay--container').should('be.visible')
+      cy.getByTestID('create-label-form--name')
+        .clear()
+        .type(newLabelName)
+      cy.getByTestID('create-label-form--description')
+        .clear()
+        .type(newLabelDescription)
+      cy.getByTestID('color-picker--input')
+        .clear()
+        .type(newLabelColor)
+      cy.getByTestID('create-label-form--submit').click()

-    // verify name, descr, color
-    cy.getByTestID('label-card').should('have.length', 1)
-    cy.getByTestID('label-card')
-      .contains(newLabelName)
-      .should('be.visible')
-    cy.getByTestID('label-card')
-      .contains(newLabelDescription)
-      .should('be.visible')
-    cy.getByTestID('label-card')
-      .children('div.cf-resource-card--contents')
-      .children('div.cf-resource-card--row')
-      .children('div.cf-label')
-      .invoke('attr', 'style')
-      .should('contain', hex2BgColor(newLabelColor))
+      // verify name, descr, color
+      cy.getByTestID('label-card').should('have.length', 1)
+      cy.getByTestID('label-card')
+        .contains(newLabelName)
+        .should('be.visible')
+      cy.getByTestID('label-card')
+        .contains(newLabelDescription)
+        .should('be.visible')
+      cy.getByTestID('label-card')
+        .children('div.cf-resource-card--contents')
+        .children('div.cf-resource-card--row')
+        .children('div.cf-label')
+        .invoke('attr', 'style')
+        .should('contain', hex2BgColor(newLabelColor))
+    })
  })

  it('can sort labels by name', () => {
--- a/ui/cypress/e2e/queryBuilder.test.ts
+++ b/ui/cypress/e2e/queryBuilder.test.ts
@ -1,4 +1,9 @@
 import {Organization} from '../../src/types'
+interface ResourceIDs {
+  orgID: string
+  dbID: string
+  cellID: string
+}

 const generateRandomSixDigitNumber = () => {
  const digits = []
@ -25,7 +30,7 @@ describe('The Query Builder', () => {
    ])
  })

-  describe('from the data explorer screen', () => {
+  describe('from the Data Explorer', () => {
    it('creates a query, edits it to add another field, then views its results with pride and satisfaction', () => {
      cy.get('@org').then((org: Organization) => {
        cy.visit(`orgs/${org.id}/data-explorer`)
@ -83,21 +88,27 @@ describe('The Query Builder', () => {
    })
  })

-  describe('from the Dashboard screen', () => {
-    it("creates a query, edits the query, edits the cell's default name, edits it again, submits with the keyboard, then chills", () => {
+  describe('from the Dashboard view', () => {
+    beforeEach(() => {
      cy.get('@org').then((org: Organization) => {
-        cy.visit(`orgs/${org.id}/dashboards`)
+        cy.createDashboard(org.id).then(({body}) => {
+          cy.createCell(body.id).then(cellResp => {
+            const dbID = body.id
+            const orgID = org.id
+            const cellID = cellResp.body.id
+            cy.createView(dbID, cellID)
+            cy.wrap({orgID, dbID, cellID}).as('resourceIDs')
+          })
+        })
+      })
+    })
+
+    it("creates a query, edits the query, edits the cell's default name, edits it again, submits with the keyboard, then chills", () => {
+      cy.get<ResourceIDs>('@resourceIDs').then(({orgID, dbID, cellID}) => {
+        cy.visit(`orgs/${orgID}/dashboards/${dbID}/cells/${cellID}/edit`)
      })

-      cy.getByTestID('empty-dashboards-list')
-        .contains('Create Dashboard')
-        .click()
-      cy.contains('New Dashboard').click()
-
-      cy.get('.dashboard-empty')
-        .contains('Add Cell')
-        .click()
-
+      // build query
      cy.contains('mem').click('topLeft') // users sometimes click in random spots
      cy.contains('cached').click('bottomLeft')
      cy.contains('thrillbo-swaggins').click('left')
@ -105,20 +116,7 @@ describe('The Query Builder', () => {

      cy.getByTestID('empty-graph--no-queries').should('exist')
      cy.contains('Submit').click()
-      cy.getByTestID('empty-graph--no-queries').should('not.exist')
-
-      cy.getByTestID('save-cell--button').click()
-
-      cy.getByTestID('cell-context--toggle').click()
-      cy.contains('Configure').click()
-
-      cy.contains('active').click()
-
-      cy.contains('Submit').click()
-      cy.getByTestID('save-cell--button').click()
-
-      cy.getByTestID('cell-context--toggle').click()
-      cy.contains('Configure').click()
+      cy.getByTestID('giraffe-layer-line').should('exist')
      cy.getByTestID('overlay')
        .contains('Name this Cell')
        .click()
@ -126,11 +124,20 @@ describe('The Query Builder', () => {
      cy.get('.veo-contents').click() // click out of inline editor
      cy.getByTestID('save-cell--button').click()

-      cy.getByTestID('cell-context--toggle').click()
-      cy.contains('Configure').click()
+      // A race condition exists between saving the cell's updated name and re-opening the cell.
+      // Will replace this with a cy.wait(@updateCell) when Cypress supports
+      // waiting on window.fetch responses: https://github.com/cypress-io/cypress/issues/95
+      // resolves: https://github.com/influxdata/influxdb/issues/16141
+
+      cy.get<ResourceIDs>('@resourceIDs').then(({orgID, dbID, cellID}) => {
+        cy.visit(`orgs/${orgID}/dashboards/${dbID}/cells/${cellID}/edit`)
+      })
+
+      cy.getByTestID('giraffe-layer-line').should('exist')
      cy.getByTestID('overlay')
        .contains('A better name!')
        .click()
+
      cy.get('[placeholder="Name this Cell"]').type(
        "Uncle Moe's Family Feedbag{enter}"
      )
--- a/ui/cypress/fixtures/view.json
+++ b/ui/cypress/fixtures/view.json
@ -8,13 +8,11 @@
    "shape": "chronograf-v2",
    "queries": [
      {
-        "text": "from(bucket: v.mapTypeVar)|> range(start: -15m, stop: now())",
-        "editMode": "advanced",
+        "text": "",
+        "editMode": "builder",
        "name": "",
        "builderConfig": {
-          "buckets": [
-            "defbuck"
-          ],
+          "buckets": ["defbuck"],
          "tags": [
            {
              "key": "",
@ -30,10 +28,7 @@
    ],
    "axes": {
      "x": {
-        "bounds": [
-          "",
-          ""
-        ],
+        "bounds": ["", ""],
        "label": "",
        "prefix": "",
        "suffix": "",
@ -41,10 +36,7 @@
        "scale": "linear"
      },
      "y": {
-        "bounds": [
-          "",
-          ""
-        ],
+        "bounds": ["", ""],
        "label": "",
        "prefix": "",
        "suffix": "",
@ -84,4 +76,4 @@
    "yColumn": "",
    "shadeBelow": false
  }
-}
+}
--- a/ui/cypress/index.d.ts
+++ b/ui/cypress/index.d.ts
@ -20,6 +20,7 @@ import {
  createLabel,
  createBucket,
  createScraper,
+  createView,
  fluxEqual,
  createTelegraf,
  createToken,
@ -45,6 +46,7 @@ declare global {
      createCell: typeof createCell
      createDashWithCell: typeof createDashWithCell
      createDashWithViewAndVar: typeof createDashWithViewAndVar
+      createView: typeof createView
      createOrg: typeof createOrg
      flush: typeof flush
      getByTestID: typeof getByTestID
--- a/ui/cypress/support/commands.ts
+++ b/ui/cypress/support/commands.ts
@ -448,6 +448,7 @@ Cypress.Commands.add('createDashboardTemplate', createDashboardTemplate)
 Cypress.Commands.add('createCell', createCell)
 Cypress.Commands.add('createDashWithCell', createDashWithCell)
 Cypress.Commands.add('createDashWithViewAndVar', createDashWithViewAndVar)
+Cypress.Commands.add('createView', createView)

 // orgs
 Cypress.Commands.add('createOrg', createOrg)