fix: flaky tool shelf cypress test (#1404)

v3/cypress/e2e/toolbar.spec.ts → v3/cypress/e2e/tool-shelf.spec.ts

@@ -15,31 +15,31 @@ context("codap toolbar", () => {
     cy.log('Setup complete')
   })
   it("will open a new table", () => {
-    c.getIconFromToolShelf("table").click()
+    c.clickIconFromToolShelf("table")
     toolbar.getNewCaseTable().click()
     table.getCollection().should("be.visible")
     c.getComponentTitle("table").should("have.text", "New Dataset")
     c.getIconFromToolShelf("table").click()
     toolbar.getDatasetListedInToolShelf("New Dataset").should("be.visible")
   })
   it("will open a graph", () => {
-    c.getIconFromToolShelf("graph").click()
+    c.clickIconFromToolShelf("graph")
     graph.getGraphTile().should("be.visible")
     // graphs with no associated data set should not have a title
     c.getComponentTitle("graph").should("have.text", "")
   })
   it("will open a map", () => {
-    c.getIconFromToolShelf("map").click()
+    c.clickIconFromToolShelf("map")
     map.getMapTile().should("be.visible")
     c.getComponentTitle("map").should("have.text", "Map")
   })
   it("will open a slider", () => {
-    c.getIconFromToolShelf("slider").click()
+    c.clickIconFromToolShelf("slider")
     slider.getSliderTile().should("be.visible")
     c.getComponentTitle("slider").should("have.text", "v1")
   })
   it("will open a calculator", () => {
-    c.getIconFromToolShelf("calc").click()
+    c.clickIconFromToolShelf("calc")
     calculator.getCalculatorTile().should("be.visible")
     c.getComponentTitle("calculator").should("have.text", "Calculator")
   })

v3/cypress/support/elements/component-elements.ts

@@ -70,6 +70,12 @@ export const ComponentElements = {
   getIconFromToolShelf(component: string) {
     return toolbar.getToolShelfIcon(component)
   },
+  clickIconFromToolShelf(component: string) {
+    this.getIconFromToolShelf(component).click()
+    // Without this wait(), visibility tests intermittently fail because the tile
+    // has zero width and/or height initially before animating to its final size.
+    cy.wait(100)
+  },
   selectTile(component: string, index = 0) {
     cy.get(".codap-container").click("bottom")
     this.getComponentTile(component, index).click()