Add E2E tests for N-window selector

Author: MetRonnie

src/components/cylc/workflow/Toolbar.vue

@@ -89,12 +89,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :disabled="isStopped"
         link
         size="small"
+        data-cy="n-win-selector"
       >
         N={{ nWindow }}
         <v-menu
           activator="parent"
           :close-on-content-click="false"
           max-width="400"
+          data-cy="n-win-popup"
         >
           <v-card title="Graph Window Depth">
             <v-card-text>

tests/e2e/specs/toolbar.cy.js

@@ -15,6 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { mutationStatus } from '@/utils/aotf'
+import { Deferred } from '$tests/util'
+
 describe('Toolbar component', () => {
   it('Is displayed when we are looking at a workflow', () => {
     cy.visit('/#/workspace/one')
@@ -63,3 +66,68 @@ describe('Toolbar Component authenticated user', () => {
       .should('have.text', 'U')
   })
 })
+
+describe('N-window selector', () => {
+  /** Capture mutations. */
+  function captureGraphWinMutation () {
+    const mutations = []
+    const deferred = new Deferred()
+    cy.window().its('app.$workflowService').then((service) => {
+      // mock the workflow service's mutate method to catch high-level calls
+      service.mutate = async (name, id, args) => {
+        switch (name) {
+          case 'setGraphWindowExtent':
+            mutations.push(args.nEdgeDistance)
+            await deferred.promise
+            return [mutationStatus.SUCCEEDED, '']
+          default:
+            throw new Error('This mutation is not mocked by the tests')
+        }
+      }
+    })
+    return { mutations, deferred }
+  }
+
+  it('Is enabled for workflows that are not stopped', () => {
+    // Disabled for stopped workflow:
+    cy.visit('/#/workspace/multi/level/run1')
+      .get('#core-app-bar')
+      .find('[data-cy=n-win-selector]')
+      .should('have.attr', 'disabled')
+    // Enabled for running workflow:
+    cy.visit('/#/workspace/one')
+      .get('[data-cy=n-win-selector]')
+      .click()
+      .get('[data-cy=n-win-popup]')
+      .find('input')
+      .invoke('val')
+      .should('eq', '1')
+  })
+
+  it('Sets the n-window', () => {
+    cy.visit('/#/workspace/one')
+    const { mutations, deferred } = captureGraphWinMutation()
+    cy.get('[data-cy=n-win-selector]')
+      .click()
+      .get('[data-cy=n-win-popup]')
+      .find('[role=combobox]')
+      .click()
+      .invoke('attr', 'aria-owns').then((dropdownID) => {
+        cy.get(`#${dropdownID}`)
+          .contains('3')
+          .click()
+          .then(() => {
+            expect(mutations).to.deep.equal([3])
+            // Should show loading spinner while waiting for response
+            cy.get('[data-cy=n-win-popup] .v-progress-circular').as('loadingSpinner')
+              .should('be.visible').then(() => {
+                // Allow the "response" to complete
+                deferred.resolve()
+                cy.get('@loadingSpinner')
+                  .should('not.exist')
+                // Note we cannot mock websockets in Cypress so we cannot test the actual update of the n-window in the GraphQL subscription
+              })
+          })
+      })
+  })
+})