Add e2e tests for Edit-Runtime form

src/components/graphqlFormGenerator/EditRuntimeForm.vue

@@ -29,14 +29,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <v-form
       v-else
       v-model="isValid"
+      class="c-edit-runtime-form"
     >
       <v-list>
         <v-list-item
           v-for="key in Object.keys(model)"
           :key="key"
         >
           <v-list-item-content>
-            <v-list-item-title>
+            <v-list-item-title class="c-input-label">
               <!-- input label - the display title for this input -->
               {{ startCase(key) }}
             </v-list-item-title>

src/components/graphqlFormGenerator/components/List.vue

@@ -49,6 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-btn
          @click="add()"
          text
+         data-cy="add"
         >
           <v-icon>{{ svgPaths.open }}</v-icon>
           <span>Add Item</span>

src/components/graphqlFormGenerator/components/MapItem.vue

@@ -33,6 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :disabled="value.frozenKey"
               dense
               filled
+              class="c-input-key"
             />
           </div>
         </template>
@@ -48,6 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-model="value.value"
         dense
         filled
+        class="c-input-val"
       />
     </v-col>
     <v-col cols="auto">

tests/e2e/specs/editRuntimeForm.cy.js

@@ -0,0 +1,134 @@
+/**
+ * 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/>.
+ */
+
+import { upperFirst } from 'lodash'
+
+describe('Edit Runtime form', () => {
+  const receivedMutations = []
+
+  beforeEach(() => {
+    receivedMutations.splice(0)
+    // Patch graphql responses
+    cy.intercept('/graphql', (req) => {
+      const { query } = req.body
+      if (query.startsWith('mutation')) {
+        receivedMutations.push(query)
+        req.reply({
+          data: {
+            [req.body.operationName]: {
+              result: [true, {}],
+              __typename: upperFirst(req.body.operationName)
+            }
+          }
+        })
+      }
+    })
+    cy.visit('/#/tree/one')
+  })
+
+  /**
+   * @param {string} nodeName - the tree node name, to search for and open the mutations form
+   */
+  const openMenu = (nodeName) => {
+    cy.get('[data-cy=tree-view]').as('treeView')
+      .find('.c-task')
+      .should('be.visible')
+    cy.get('@treeView')
+      .find('span')
+      .contains(nodeName)
+      .parent()
+      .find('.c-task')
+      .click({ force: true })
+    cy.get('#less-more-button')
+      .click()
+  }
+
+  /** Get the Edit Runtime command from the menu */
+  const getMenuItem = () => {
+    return cy
+      .get('.c-mutation-menu-list:first')
+      .find('.c-mutation .v-list-item__title')
+      .contains('Edit Runtime')
+  }
+
+  /**
+   * Get the form input v-list-item element for a given label.
+   *
+   * @param {string} label
+   */
+  const getInputListItem = (label) => {
+    return cy
+      .get('.c-edit-runtime-form')
+      .find('.c-input-label')
+      .contains(label)
+      .parent()
+  }
+
+  it('handles editing and submitting the form', () => {
+    openMenu('retrying')
+    getMenuItem().click()
+
+    getInputListItem('Init Script')
+      .find('.v-input')
+      .type('echo "Horseshoe Overlook"')
+    getInputListItem('Environment')
+      .as('envInput')
+      // Pre-existing items' keys should be immutable
+      .find('.c-input-key')
+      .find('input')
+      .should('be.disabled')
+      // Change a pre-existing item's value
+      .get('@envInput')
+      .find('.c-input-val:first')
+      .clear()
+      .type('Pinkerton Detective Agency')
+      // Add a new item
+      .get('@envInput')
+      .find('button[data-cy="add"]')
+      .click()
+      .get('@envInput')
+      .find('.c-input-key:first')
+      .type('HORSE')
+      .get('@envInput')
+      .find('.c-input-val:first')
+      .type('Dorothy')
+    getInputListItem('Outputs')
+      // Add an empty item
+      .find('button[data-cy="add"]')
+      .click()
+
+    // Submit form
+    cy
+      .then(() => {
+        expect(receivedMutations.length).to.eq(0)
+      })
+      .get('[data-cy="submit"]')
+      .click()
+      .then(() => {
+        expect(receivedMutations.length).to.eq(1)
+      })
+  })
+
+  it('shows Edit Runtime as an option for namespaces only', () => {
+    // E.g. families
+    openMenu('GOOD')
+    getMenuItem()
+    // But not cycle points
+    openMenu('20000102T0000Z')
+    getMenuItem().should('not.exist')
+  })
+})

tests/e2e/specs/mutation.cy.js

@@ -24,21 +24,20 @@ import {
 describe('Mutations component', () => {
   beforeEach(() => {
     // Patch graphql responses
-    cy
-      .intercept('/graphql', (req) => {
-        const query = req.body.query
-        if (!query.includes('__schema')) { // is a mutation
-          console.log(req)
-          req.reply({
-            data: {
-              [req.body.operationName]: {
-                result: [true, {}],
-                __typename: upperFirst(req.body.operationName)
-              }
+    cy.intercept('/graphql', (req) => {
+      const { query } = req.body
+      if (query.startsWith('mutation')) {
+        console.log(req)
+        req.reply({
+          data: {
+            [req.body.operationName]: {
+              result: [true, {}],
+              __typename: upperFirst(req.body.operationName)
             }
-          })
-        }
-      })
+          }
+        })
+      }
+    })
   })
 
   /**