Refactoring test: createView

packages/builder/cypress/integration/createView.spec.js

@@ -1,4 +1,5 @@
 import filterTests from "../support/filterTests"
+const interact = require('../support/interact')
 
 filterTests(['smoke', 'all'], () => {
   context("Create a View", () => {
@@ -22,12 +23,12 @@ filterTests(['smoke', 'all'], () => {
 
     it("creates a view", () => {
       cy.contains("Create view").click()
-      cy.get(".modal-inner-wrapper").within(() => {
+      cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
         cy.get("input").type("Test View")
         cy.get("button").contains("Create View").click({ force: true })
       })
-      cy.get(".table-title h1").contains("Test View")
-      cy.get(".title").then($headers => {
+      cy.get(interact.TABLE_TITLE_H1).contains("Test View")
+      cy.get(interact.TITLE).then($headers => {
         expect($headers).to.have.length(3)
         const headers = Array.from($headers).map(header =>
           header.textContent.trim()
@@ -40,18 +41,18 @@ filterTests(['smoke', 'all'], () => {
       cy.contains("Filter").click()
       cy.contains("Add Filter").click()
 
-      cy.get(".modal-inner-wrapper").within(() => {
-        cy.get(".spectrum-Picker-label").eq(0).click()
+      cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
+        cy.get(interact.SPECTRUM_PICKER_LABEL).eq(0).click()
         cy.contains("age").click({ force: true })
 
-        cy.get(".spectrum-Picker-label").eq(1).click()
+        cy.get(interact.SPECTRUM_PICKER_LABEL).eq(1).click()
         cy.contains("More Than").click({ force: true })
 
         cy.get("input").type(18)
         cy.contains("Save").click()
       })
 
-      cy.get(".spectrum-Table-row").get($values => {
+      cy.get(interact.SPECTRUM_TABLE_ROW).get($values => {
         expect($values).to.have.length(5)
       })
     })
@@ -59,18 +60,18 @@ filterTests(['smoke', 'all'], () => {
     it("creates a stats calculation view based on age", () => {
       cy.wait(1000)
       cy.contains("Calculate").click()
-      cy.get(".modal-inner-wrapper").within(() => {
-        cy.get(".spectrum-Picker-label").eq(0).click()
+      cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
+        cy.get(interact.SPECTRUM_PICKER_LABEL).eq(0).click()
         cy.contains("Statistics").click()
 
-        cy.get(".spectrum-Picker-label").eq(1).click()
+        cy.get(interact.SPECTRUM_PICKER_LABEL).eq(1).click()
         cy.contains("age").click({ force: true })
 
-        cy.get(".spectrum-Button").contains("Save").click({ force: true })
+        cy.get(interact.SPECTRUM_BUTTON).contains("Save").click({ force: true })
       })
       cy.wait(1000)
 
-      cy.get(".title").then($headers => {
+      cy.get(interact.TITLE).then($headers => {
         expect($headers).to.have.length(7)
         const headers = Array.from($headers).map(header =>
           header.textContent.trim()
@@ -85,7 +86,7 @@ filterTests(['smoke', 'all'], () => {
           "avg",
         ])
       })
-      cy.get(".spectrum-Table-cell").then($values => {
+      cy.get(interact.SPECTRUM_TABLE_CELL).then($values => {
         let values = Array.from($values).map(header => header.textContent.trim())
         expect(values).to.deep.eq(["age", "155", "20", "49", "5", "5347", "31"])
       })
@@ -93,8 +94,8 @@ filterTests(['smoke', 'all'], () => {
 
     it("groups the view by group", () => {
       cy.contains("Group by").click()
-      cy.get(".modal-inner-wrapper").within(() => {
-        cy.get(".spectrum-Picker-label").eq(0).click()
+      cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
+        cy.get(interact.SPECTRUM_PICKER_LABEL).eq(0).click()
         cy.contains("group").click()
         cy.contains("Save").click()
       })
@@ -102,7 +103,7 @@ filterTests(['smoke', 'all'], () => {
       cy.contains("Students").should("be.visible")
       cy.contains("Teachers").should("be.visible")
 
-      cy.get(".spectrum-Table-cell").then($values => {
+      cy.get(interact.SPECTRUM_TABLE_CELL).then($values => {
         let values = Array.from($values).map(header => header.textContent.trim())
         expect(values).to.deep.eq([
           "Students",
@@ -124,11 +125,11 @@ filterTests(['smoke', 'all'], () => {
     })
 
     it("renames a view", () => {
-      cy.contains(".nav-item", "Test View")
+      cy.contains(interact.NAV_ITEM, "Test View")
         .find(".actions .icon.open-popover")
         .click({ force: true })
-      cy.get(".spectrum-Menu-itemLabel").contains("Edit").click()
-      cy.get(".modal-inner-wrapper").within(() => {
+      cy.get(interact.SPECTRUM_MENU_ITEM_LABEL).contains("Edit").click()
+      cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
         cy.get("input").type(" Updated")
         cy.contains("Save").click()
       })
@@ -137,7 +138,7 @@ filterTests(['smoke', 'all'], () => {
     })
 
     it("deletes a view", () => {
-      cy.contains(".nav-item", "Test View Updated")
+      cy.contains(interact.NAV_ITEM, "Test View Updated")
         .find(".actions .icon.open-popover")
         .click({ force: true })
       cy.contains("Delete").click()

packages/builder/cypress/support/interact.js

@@ -104,3 +104,6 @@ export const SPECTRUM_TABLE_ROW = ".spectrum-Table-row"
 export const SPECTRUM_TABLE_CELL = ".spectrum-Table-cell"
 export const FIELD = ".field"
 export const CONTAINER = ".container"
+
+//createView
+export const SPECTRUM_MENU_ITEM_LABEL = ".spectrum-Menu-itemLabel"