Add e2e tests for workflows-table view

Plus tests for broken links in dashboard

Author: MetRonnie

src/views/Dashboard.vue

@@ -72,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <v-layout wrap>
       <v-flex xs12 md6 lg6>
         <v-list three-line>
-          <v-list-item to="/workflow-table">
+          <v-list-item to="/workflow-table" data-cy="workflow-table-link">
             <v-list-item-avatar size="60" style="font-size: 2em;">
               <v-icon large>{{ svgPaths.table }}</v-icon>
             </v-list-item-avatar>
@@ -85,7 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </v-list-item-subtitle>
             </v-list-item-content>
           </v-list-item>
-          <v-list-item to="/user-profile">
+          <v-list-item to="/user-profile" data-cy="user-settings-link">
             <v-list-item-avatar size="60" style="font-size: 2em;">
               <v-icon large>{{ svgPaths.settings }}</v-icon>
             </v-list-item-avatar>
@@ -120,7 +120,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </v-flex>
       <v-flex xs12 md6 lg6>
         <v-list three-line>
-          <v-list-item href="#/guide">
+          <v-list-item to="/guide" data-cy="quickstart-link">
             <v-list-item-avatar size="60" style="font-size: 2em;">
               <v-icon large>{{ svgPaths.quickstart }}</v-icon>
             </v-list-item-avatar>

src/views/WorkflowsTable.vue

@@ -39,6 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :headers="headers"
           :items="workflowsTable"
           :loading="isLoading"
+          data-cy="workflows-table"
         >
           <template slot="no-data" v-if="!isLoading">
             <v-alert

src/views/Workspace.vue

@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div>
+  <div data-cy="workspace-view">
     <toolbar
       :views="views"
       :workflow-name="workflowName"

tests/e2e/specs/dashboard.cy.js

@@ -18,23 +18,26 @@
 import { WorkflowStateOrder } from '@/model/WorkflowState.model'
 
 describe('Dashboard', () => {
-  it('Displays the Dashboard link as active on the left sidebar menu', () => {
+  beforeEach(() => {
     cy.visit('/#/')
+  })
+
+  it('Displays the Dashboard link as active on the left sidebar menu', () => {
     cy
       .get('div.v-list-item__title')
       .contains('Dashboard')
       .parent()
       .should('have.class', 'v-list-item--active')
   })
-  it('Should display the icons', () => {
-    cy.visit('/#/')
+
+  it('Displays the icons', () => {
     cy
       .get('.c-dashboard .v-icon:first')
       .find('svg')
       .should('be.visible')
   })
-  it('Should display the states in order', () => {
-    cy.visit('/#/')
+
+  it('Displays the states in order', () => {
     cy
       .get('#dashboard-workflows table tbody tr')
       .first()
@@ -44,11 +47,22 @@ describe('Dashboard', () => {
       })
       .should('equal', [...WorkflowStateOrder.entries()][0][0])
   })
-  it('Should have disabled cylc hub button in single user mode', () => {
-    cy.visit('/#/')
+
+  it('Disables cylc hub button in single user mode', () => {
     cy
       .get('#cylc-hub-button')
       .should('have.class', 'v-list-item--disabled')
   })
+
+  for (const ref of ['workflow-table-link', 'user-settings-link', 'quickstart-link']) {
+    it(`Visits ${ref}`, () => {
+      cy.get(`[data-cy=${ref}`)
+        .click()
+      cy.contains('Page not found', { matchCase: false })
+        .should('not.exist')
+        // Ideally we should check for HTTP 404 but our 404 page returns 200!
+        // https://github.com/cylc/cylc-ui/issues/334
+    })
+  }
   // TODO: add test that verifies the dashboard content after we have reviewed how it should look like
 })

tests/e2e/specs/workflowsTable.cy.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+describe('Workflows-Table view', () => {
+  beforeEach(() => {
+    cy.visit('/#/workflow-table')
+  })
+
+  it("Opens mutation menu when clicking on a workflow's icon", () => {
+    cy.get('[data-cy=workflows-table] .c-interactive:first')
+      .click()
+      .get('.c-mutation-menu-list:first')
+      .should('be.visible')
+  })
+
+  it('Opens workspace view when clicking on workflow', () => {
+    cy.get('[data-cy=workflows-table]')
+      .contains('td', 'one')
+      .click()
+      .get('[data-cy=workspace-view]')
+  })
+})

tests/e2e/specs/workflow.cy.js renamed to tests/e2e/specs/workspace.cy.js

@@ -15,14 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-describe('Workflow view and component/widget', () => {
+describe('Workspace view and component/widget', () => {
   afterEach(() => {
     cy
       .get('.v-alert')
       .should('not.exist')
   })
 
-  it('Should display the Workflow component in the Workflow view, with a Tree widget', () => {
+  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)
 
@@ -93,7 +93,7 @@ describe('Workflow view and component/widget', () => {
     cy.get('.lm-TabBar-tabLabel').should('not.exist')
   })
 
-  it('Should remove widgets when leaving the Workflow view', () => {
+  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
@@ -106,7 +106,7 @@ describe('Workflow view and component/widget', () => {
     cy.get('.lm-TabBar-tabLabel').should('not.exist')
   })
 
-  it('Should remove widgets when updating the Workflow view', () => {
+  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