graph: add offline data and first e2e test

oliver-sanders · oliver-sanders · commit ac3bf771d5dc · 2022-11-21T13:57:08.000Z
* Add edges into the offline data to allow the graph view to be tested
  offline.
* Add a basic cypress test which checks the layout gets completed and the nodes
  and edges get rendered.
diff --git a/src/components/cylc/ViewToolbar.vue b/src/components/cylc/ViewToolbar.vue
@@ -25,14 +25,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <!-- control -->
       <div
-        class="control"
+        :class="['control', iControl.key]"
         v-for="iControl in iGroup.iControls"
         :key="iControl.title"
       >
         <v-tooltip bottom>
           <template v-slot:activator="{ on, attrs }">
             <v-icon
               large
+              :class="iControl.title"
               :disabled="iControl.disabled"
               :color="iControl.color"
               @click="iControl.callback"
diff --git a/src/services/mock/json/App.json b/src/services/mock/json/App.json
@@ -407,6 +407,58 @@
           "state": "succeeded",
           "submitNum": 1
         }
+      ],
+      "edges": [
+        {
+          "id": "~user/one//$edge|20000102T0000Z/sleepy|20000102T0000Z/succeeded",
+          "source": "~user/one//20000102T0000Z/sleepy",
+          "target": "~user/one//20000102T0000Z/succeeded"
+        },
+        {
+          "id": "~user/one//$edge|20000102T0000Z/waiting|20000102T0000Z/succeeded",
+          "source": "~user/one//20000102T0000Z/waiting",
+          "target": "~user/one//20000102T0000Z/succeeded"
+        },
+        {
+          "id": "~user/one//$edge|20000102T0000Z/sleepy|20000102T0000Z/eventually_succeeded",
+          "source": "~user/one//20000102T0000Z/sleepy",
+          "target": "~user/one//20000102T0000Z/eventually_succeeded"
+        },
+        {
+          "id": "~user/one//$edge|20000102T0000Z/waiting|20000102T0000Z/eventually_succeeded",
+          "source": "~user/one//20000102T0000Z/waiting",
+          "target": "~user/one//20000102T0000Z/eventually_succeeded"
+        },
+        {
+          "id": "~user/one//$edge|20000102T0000Z/sleepy|20000102T0000Z/retrying",
+          "source": "~user/one//20000102T0000Z/sleepy",
+          "target": "~user/one//20000102T0000Z/retrying"
+        },
+        {
+          "id": "~user/one//$edge|20000102T0000Z/waiting|20000102T0000Z/retrying",
+          "source": "~user/one//20000102T0000Z/waiting",
+          "target": "~user/one//20000102T0000Z/retrying"
+        },
+        {
+          "id": "~user/one//$edge|20000102T0000Z/succeeded|20000102T0000Z/failed",
+          "source": "~user/one//20000102T0000Z/succeeded",
+          "target": "~user/one//20000102T0000Z/failed"
+        },
+        {
+          "id": "~user/one//$edge|20000102T0000Z/eventually_succeeded|20000102T0000Z/failed",
+          "source": "~user/one//20000102T0000Z/eventually_succeeded",
+          "target": "~user/one//20000102T0000Z/failed"
+        },
+        {
+          "id": "~user/one//$edge|20000102T0000Z/checkpoint|20000102T0000Z/sleepy",
+          "source": "~user/one//20000102T0000Z/checkpoint",
+          "target": "~user/one//20000102T0000Z/sleepy"
+        },
+        {
+          "id": "~user/one//$edge|20000102T0000Z/checkpoint|20000102T0000Z/waiting",
+          "source": "~user/one//20000102T0000Z/checkpoint",
+          "target": "~user/one//20000102T0000Z/waiting"
+        }
       ]
     }
   }
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
@@ -28,6 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       width="100%"
       height="100%"
       ref="graph"
+      class="graph"
     >
       <defs>
         <marker
@@ -52,6 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :id="node.id"
           :ref="node.id"
           :transform="nodeTransformations[node.id]"
+          class="graph-node-container"
         >
           <GraphNode
             :task="node"
@@ -64,6 +66,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           GraphNode component layout / dimensions are changed.
         -->
         <g
+          class="edges"
           :transform="
             (transpose) ? 'translate(15, 30)' : 'translate(45, 5)'
           "
@@ -90,7 +93,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import Vue from 'vue'
 import gql from 'graphql-tag'
-import { mapState, mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 import pageMixin from '@/mixins/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionViewMixin from '@/mixins/subscriptionView'
@@ -302,18 +305,13 @@ export default {
     clearInterval(this.refreshTimer)
   },
   computed: {
-    ...mapState('workflows', ['cylcTree']),
     ...mapGetters('workflows', ['getNodes']),
     query () {
       return new SubscriptionQuery(
         QUERY,
         this.variables,
         'workflow',
-        [
-          // TODO: this callback should be run automatically
-          // (only one instance for all views)
-          // new CylcTreeCallback()
-        ]
+        []
       )
     },
     workflowIDs () {
@@ -397,8 +395,8 @@ export default {
       // list graph nodes from the store (non reactive list)
       const ret = []
       for (const workflow of this.workflows) {
-        for (const cycle of workflow.children || []) {
-          for (const task of cycle.children || []) {
+        for (const cycle of workflow.children) {
+          for (const task of cycle.children) {
             ret.push(task)
           }
         }
@@ -631,12 +629,10 @@ export default {
       // run the layout algorithm
       const jsonString = await graphviz.layout(dotCode, 'json')
       const json = JSON.parse(jsonString)
-      console.log(json)
 
       // update graph node positions
       for (const obj of json.objects) {
         const [x, y] = obj.pos.split(',')
-        console.log(obj.name)
         const bbox = nodeDimensions[obj.name]
         // translations:
         // 1. The graphviz node coordinates
diff --git a/tests/e2e/specs/graph.cy.js b/tests/e2e/specs/graph.cy.js
@@ -0,0 +1,69 @@
+/**
+ * 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/>.
+ */
+
+function waitForGraphLayout () {
+  // wait for the initial graph layout to be performed
+  cy
+    .get('.c-graph:first')
+    .then(($el) => { checkGraphLayoutPerformed($el) })
+}
+
+function checkGraphLayoutPerformed ($el, depth = 0) {
+  // Check if the graphID has been set (indicating successful layout) or wait
+  // one second.
+  // This is a recursive function which will be called up to 10 times. We can't
+  // do this in a for loop as otherwise the waits aren't chained correctly.
+  if (depth > 10) {
+    expect('graph loaded').to.equal(true)
+  } else if (typeof $el[0].__vue__.graphID !== 'number') {
+    cy
+      .wait(1000)
+      .then(() => { checkGraphLayoutPerformed($el, depth + 1) })
+  }
+}
+
+describe('Graph View', () => {
+  it('should load', () => {
+    cy.visit('/#/graph/one')
+    waitForGraphLayout()
+
+    cy
+      // there should be 7 graph nodes (all on-screen)
+      .get('.c-graph:first')
+      .find('.graph-node-container')
+      .should('be.visible')
+      .should('have.length', 7)
+
+      // they shouldn't be stacked up in a pile
+      // (we use SVG transforms to push the nodes around)
+      .each(($el, index, $list) => {
+        const el1 = $el[0]
+        const matrix1 = el1.transform.baseVal[0].matrix
+        for (const el2 of $list) {
+          const matrix2 = el2.transform.baseVal[0].matrix
+          expect(matrix1).to.not.equal(matrix2)
+        }
+      })
+
+      // there should be 10 graph edges (all on-screen)
+      .get('.c-graph:first')
+      .find('.graph:first .edges:first')
+      .children()
+      .should('have.length', 10)
+      .should('be.visible')
+  })
+})
