Fix tests for Cypress 12

State no longer persists between `it()`s

Author: MetRonnie

tests/e2e/specs/drawer.cy.js

@@ -23,6 +23,7 @@ describe('Drawer component', () => {
       .should('be.visible')
   })
   it('it should have a width of 260', () => {
+    cy.visit('/#/')
     cy.get('.v-navigation-drawer').invoke('innerWidth').should('be.eq', 260)
   })
   it('Is NOT displayed when mode is mobile', () => {

tests/e2e/specs/menu.cy.js

@@ -19,8 +19,11 @@ describe('CylcObject Menu component', () => {
   const collapsedWorkflowMenuLength = 6 // (5 mutations + "show more" btn)
   const expandedWorkflowMenuLength = 21
 
-  it('should not be displayed initially on load', () => {
+  beforeEach(() => {
     cy.visit('/#/workspace/one')
+  })
+
+  it('should not be displayed initially on load', () => {
     cy.get('.c-interactive:first') // wait for view to load
       .get('.c-mutation-menu:first')
       .should('not.exist')
@@ -38,24 +41,22 @@ describe('CylcObject Menu component', () => {
       .should('be.visible')
   })
 
-  it('expands when "show more" is clicked', () => {
-    cy.get('#less-more-button')
+  it('expands and collapses', () => {
+    cy.get('#workflow-mutate-button.c-interactive')
+      .click()
+      .get('#less-more-button')
       .click()
       .get('.c-mutation-menu-list')
       .should('be.visible')
       .children()
       .should('have.length', expandedWorkflowMenuLength)
-  })
-
-  it('closes when clicking outside of the menu', () => {
-    // Click on hidden element to avoid clicking on anything unexpected
+    // Should close when clicking outside of the menu
+    // (click on hidden element to avoid clicking on anything unexpected)
     cy.get('noscript')
       .click({ force: true })
       .get('.c-mutation-menu-list:first')
       .should('not.be.visible')
-  })
-
-  it('should be collapsed next time it is opened', () => {
+    // Should be collapsed next time it is opened
     cy.get('#workflow-mutate-button')
       .click()
       .get('.c-mutation-menu-list')
@@ -66,8 +67,7 @@ describe('CylcObject Menu component', () => {
 
   it('updates when clicking on a different Cylc object', () => {
     let firstID
-    cy.visit('/#/workspace/one')
-      .get('.node-data-cycle:first')
+    cy.get('.node-data-cycle:first')
       .find('.c-interactive:first')
       .click()
       .get('.c-mutation-menu')
@@ -88,14 +88,15 @@ describe('CylcObject Menu component', () => {
       })
   })
 
-  it('should not close when clicking inside menu', () => {
+  it('only closes when appropriate if clicking inside menu', () => {
+    cy.get('#workflow-mutate-button.c-interactive')
+      .click()
+    // Should not close when clicking on non-interactive thing inside menu
     cy.get('.v-card__title')
       .click()
       .get('.c-mutation-menu')
       .should('be.visible')
-  })
-
-  it('closes when clicking on task mutation', () => {
+    // Should close when clicking on task mutation
     cy.get('.c-mutation-menu-list')
       .find('.c-mutation:not([aria-disabled]):first')
       .click()

tests/e2e/specs/workspace.cy.js

@@ -16,14 +16,17 @@
  */
 
 describe('Workspace view and component/widget', () => {
+  beforeEach(() => {
+    cy.visit('/#/workspace/one')
+  })
+
   afterEach(() => {
     cy
       .get('.v-alert')
       .should('not.exist')
   })
 
   it('Should display the Lumino component in the Workspace view, with a Tree widget', () => {
-    cy.visit('/#/workspace/one')
     cy.get('.lm-TabBar-tabLabel').should('have.length', 1)
 
     // The skeleton loader should stop existing
@@ -40,22 +43,18 @@ describe('Workspace view and component/widget', () => {
   })
 
   it('Should remove the default widget and leave no more widgets', () => {
-    cy.visit('/#/workspace/one')
     cy.get('.lm-TabBar-tabCloseIcon').click()
     cy.get('.lm-TabBar-tabLabel').should('not.exist')
   })
 
   it('Should be able to add two widgets of the same type', () => {
-    cy.visit('/#/workspace/one')
     cy.get('.lm-TabBar-tabLabel').should('have.length', 1)
     cy.get('a.add-view').click()
     cy.get('#toolbar-add-Tree-view').click()
     cy.get('.lm-TabBar-tabLabel').should('have.length', 2)
   })
 
   it('Should be able to add two widgets of different types', () => {
-    cy.visit('/#/workspace/one')
-
     // there should be one widget open by default (tree)
     cy.get('.lm-TabBar-tabLabel')
       // there should be a tab representing the widget
@@ -80,21 +79,21 @@ describe('Workspace view and component/widget', () => {
   })
 
   it('Should remove widgets added successfully', () => {
-    cy.visit('/#/workspace/one')
     cy.get('.lm-TabBar-tabLabel').should('have.length', 1)
     // add a tree view
     cy.get('a.add-view').click()
     cy.get('#toolbar-add-Tree-view').click()
     // ensure we have 2 widgets now
     cy.get('.lm-TabBar-tabLabel').should('have.length', 2)
     // close all widgets
-    cy.get('.lm-TabBar-tabCloseIcon').click({ multiple: true })
+    cy.get('.lm-TabBar-tabCloseIcon').each(($el) => {
+      cy.wrap($el).click()
+    })
     // ensure we have no widgets now
     cy.get('.lm-TabBar-tabLabel').should('not.exist')
   })
 
   it('Should remove widgets when leaving the Workspace view', () => {
-    cy.visit('/#/workspace/one')
     cy.get('.lm-TabBar-tabLabel').should('have.length', 1)
     // add a tree view
     cy.get('a.add-view').click()
@@ -107,7 +106,6 @@ describe('Workspace view and component/widget', () => {
   })
 
   it('Should remove widgets when updating the Workspace view', () => {
-    cy.visit('/#/workspace/one')
     cy.get('.lm-TabBar-tabLabel').should('have.length', 1)
     // add a tree view
     cy.get('a.add-view').click()