Vue 3: fix & improve log view tests

Author: MetRonnie

src/views/Log.vue

@@ -33,15 +33,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <v-row dense>
       <v-col>
         <v-btn-toggle
-          class="job-workflow-toggle"
           v-model="jobLog"
           divided
           mandatory
           variant="outlined"
           color="primary"
         >
-          <v-btn>Workflow</v-btn>
-          <v-btn>Job</v-btn>
+          <v-btn data-cy="workflow-toggle">Workflow</v-btn>
+          <v-btn data-cy="job-toggle">Job</v-btn>
         </v-btn-toggle>
         <ViewToolbar
           :groups="groups"
@@ -55,23 +54,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-col cols="8">
         <v-text-field
           v-if="jobLog"
-          class="flex-grow-1 flex-column job-id-input"
+          data-cy="job-id-input"
+          class="flex-grow-1 flex-column"
           v-model="relativeID"
           placeholder="cycle/task/job"
           hide-details
           clearable
         />
         <v-text-field
           v-else
-          class="workflow-id-input"
+          data-cy="workflow-id-input"
           v-model="workflowId"
           disabled
           hide-details
         />
       </v-col>
       <v-col cols="4">
         <v-select
-          class="file-input"
+          data-cy="file-input"
           :label="fileLabel"
           :disabled="fileDisabled"
           :items="logFiles"
@@ -90,38 +90,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         style="white-space: pre"
       >
         <v-chip
-          class="connected-icon"
-          v-if="results.connected"
-          color="green"
+          data-cy="connected-icon"
           variant="outlined"
-          :prepend-icon="$options.icons.mdiPowerPlug"
           class="flex-shrink-0"
+          v-bind="results.connected ? {
+            color: 'green',
+            prependIcon: $options.icons.mdiPowerPlug,
+          } : {
+            color: 'red',
+            prependIcon: $options.icons.mdiPowerPlugOff,
+            onClick: updateQuery
+          }"
         >
-          Connected
-        </v-chip>
-        <v-chip
-          class="disconnected-icon"
-          v-else
-          color="red"
-          @click="updateQuery"
-          variant="outlined"
-          :prepend-icon="$options.icons.mdiPowerPlugOff"
-          class="flex-shrink-0"
-        >
-          Reconnect
+          {{ results.connected ? 'Connected' : 'Reconnect' }}
         </v-chip>
         <span
-          class="log-path"
+          data-cy="log-path"
           style="padding-left: 0.5em; color: rgb(150,150,150);"
-        >{{ results.path }}</span>
+        >
+          {{ results.path }}
+        </span>
       </v-col>
     </v-row>
 
     <!-- the log file viewer -->
     <v-row>
       <v-col>
-        <!-- TODO: replace v-progress-linear with v-skeleton-loader when
-        the latter is added to Vuetify 3.
+        <!-- TODO: replace v-progress-linear with v-skeleton-loader
         https://github.com/cylc/cylc-ui/issues/1272 -->
         <!-- <v-skeleton-loader
           v-if="id && file && !results.path"
@@ -133,8 +128,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           indeterminate
         />
         <log-component
-          class="log-viewer"
           v-else
+          data-cy="log-viewer"
           :logs="results.lines"
           :timestamps="timestamps"
         />

tests/e2e/specs/log.cy.js

@@ -16,92 +16,70 @@
  */
 
 describe('Log View', () => {
-  it('works', () => {
-    cy
-      .visit('/#/log/one')
+  beforeEach(() => {
+    cy.visit('/#/log/one')
+  })
 
-      // the workflow ID should be filled in
-      .get('.workflow-id-input')
-      .find('input')
+  it('fills in inputs', () => {
+    // the workflow ID should be filled in
+    cy.get('.c-log [data-cy=workflow-id-input]')
       .should('be.visible')
-      .should('have.attr', 'disabled', 'disabled')
-      .should(($input) => {
-        expect($input.val()).to.equal('~user/one')
-      })
-
-      // the job log files list should have been populated by the query
-      .get('.c-log')
-      .should(($el) => {
-        expect($el[0].__vue__.logFiles).to.have.length(3)
-      })
+      .find('input')
+      .should('have.value', '~user/one')
+      .should('have.attr', 'disabled')
 
-      // the job.out file should have been selected
-      .should(($el) => {
-        expect($el[0].__vue__.file).to.equal('job.out')
-      })
-      .get('.file-input')
+    // the job.out file should have been selected
+    cy.get('.c-log [data-cy=file-input]')
       .should('be.visible')
-      .should('not.have.attr', 'disabled', 'disabled')
+      .find('input')
+      .should('have.value', 'job.out')
+      .should('not.have.attr', 'disabled')
 
-      // the subscription should have been issued
-      .get('.c-log')
-      .should(($el) => {
-        expect($el[0].__vue__.query.variables.id).to.equal('~user/one')
-        expect($el[0].__vue__.query.variables.file).to.equal('job.out')
-      })
+    // the job log files list should have been populated by the query
+    cy.get('.c-log [data-cy=file-input]')
+      .click()
+      .get('.v-select__content .v-list-item')
+      .contains('job.out')
+      .parents('[role=listbox]')
+      .children()
+      .should('have.length', 3)
+  })
 
-      // the log file should have been loaded into the viewer
-      .get('.log-viewer')
+  it('loads the log file', () => {
+    // the log file should have been loaded into the viewer
+    cy.get('[data-cy=log-viewer]')
       .contains('one\ntwo\nthree\nfour\nfive')
 
-      // the file path should be displayed
-      .get('.log-path')
+    // the file path should be displayed
+    cy.get('[data-cy=log-path]')
       .should('be.visible')
       .contains('my-host:')
       .contains('job.out')
 
-      // the connected icon should be visible
-      .get('.connected-icon')
+    // the connected icon should be visible
+    cy.get('[data-cy=connected-icon]')
       .should('be.visible')
+  })
 
-      // toggle the mode from workflow => job
-      .get('.job-workflow-toggle > :nth-child(2)')
-      .click({ force: true })
-      .get('.c-log')
-      .should(($el) => {
-        // the old file name should have been wiped
-        expect($el[0].__vue__.file).to.equal(null)
-        // the old query should have been wiped (this triggers unsubscribe)
-        expect($el[0].__vue__.query).to.equal(null)
-        // the old log file lines should have been wiped
-        expect($el[0].__vue__.results.lines).to.deep.equal([])
-      })
+  it('switches from workflow -> job log', () => {
+    cy.get('[data-cy=job-toggle]')
+      .click()
+      // the old log file lines should have been wiped
+      .get('[data-cy=log-viewer] > pre')
+      .should('be.empty')
 
-      // fill in a cycle point (invalid)
-      .get('.job-id-input')
+    // fill in a cycle point (incomplete)
+    cy.get('[data-cy=job-id-input]')
       .find('input')
-      .type('1')
-      .get('.c-log')
-      .should(($el) => {
-        // the id should not have been updated
-        expect($el[0].__vue__.id).to.equal(null)
-        // and no query should have been issued
-        expect($el[0].__vue__.query).to.equal(null)
-      })
-
+      .type('1/')
+      .get('[data-cy=log-viewer] > pre')
+      .should('be.empty')
       // fill in a task (valid)
-      .get('.job-id-input')
+      .get('[data-cy=job-id-input]')
       .find('input')
-      .type('/a')
-      .get('.c-log')
-      .should(($el) => {
-        // a new query should have been issued
-        expect($el[0].__vue__.query.variables.id).to.equal('~user/one//1/a')
-        expect($el[0].__vue__.query.variables.file).to.equal('job.out')
-      })
-
+      .type('a')
       // the new log file should have been loaded
-      .get('.log-viewer')
+      .get('[data-cy=log-viewer] > pre')
       .contains('one\ntwo\nthree\nfour\nfive')
   })
 })

tests/unit/views/log.vue.spec.js

@@ -0,0 +1,101 @@
+/**
+ * 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 { nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+import { createStore } from 'vuex'
+import storeOptions from '@/store/options'
+import { createVuetify } from 'vuetify'
+import sinon from 'sinon'
+import Log from '@/views/Log.vue'
+import WorkflowService from '@/services/workflow.service'
+import User from '@/model/User.model'
+import { Tokens } from '@/utils/uid'
+
+describe('Log view', () => {
+  const owner = 'svimes'
+  const workflowName = 'thud'
+  const workflowID = `~${owner}/${workflowName}`
+  const initialFile = 'koom-valley.log'
+
+  const vuetify = createVuetify()
+  let $workflowService, store
+
+  const mountFunction = (options) => mount(Log, {
+    global: {
+      plugins: [vuetify, store],
+      mocks: { $workflowService },
+    },
+    props: {
+      workflowName,
+      initialOptions: {
+        tokens: new Tokens(workflowID),
+        file: initialFile,
+      },
+    },
+    ...options
+  })
+
+  beforeEach(() => {
+    store = createStore(storeOptions)
+    store.commit(
+      'user/SET_USER',
+      new User('cylc', [], new Date(), true, 'localhost', owner)
+    )
+    $workflowService = sinon.createStubInstance(WorkflowService)
+  })
+
+  it('issues the subscription', async () => {
+    const wrapper = mountFunction()
+    expect(wrapper.vm.jobLog).toEqual(0)
+    expect(wrapper.vm.query.variables).toMatchObject({
+      id: workflowID,
+      file: initialFile,
+    })
+    expect(wrapper.vm.file).toEqual(initialFile)
+    // switch workflow -> job log
+    wrapper.vm.jobLog = 1
+    await nextTick()
+    // old file & log lines should be wiped
+    expect(wrapper.vm.file).toBe(null)
+    expect(wrapper.vm.results.lines).toEqual([])
+    // should have unsubscribed
+    expect(wrapper.vm.$workflowService.unsubscribe.calledOnce).toBe(true)
+  })
+
+  it('does not issue subscription for incomplete task ID', async () => {
+    const wrapper = mountFunction({
+      data: () => ({
+        jobLog: 1,
+        relativeID: '2000', // cycle point only is invalid
+      })
+    })
+    expect(wrapper.vm.id).toBe(null)
+    expect(wrapper.vm.query).toBe(null)
+    // type in complete task ID
+    wrapper.vm.relativeID += '/bashfullsson'
+    wrapper.vm.file = 'job.out'
+    await nextTick()
+    const expectedID = `${workflowID}//2000/bashfullsson`
+    expect(wrapper.vm.id).toEqual(expectedID)
+    // query issued
+    expect(wrapper.vm.query.variables).toMatchObject({
+      id: expectedID,
+      file: 'job.out',
+    })
+  })
+})