Rebuild Testing Suite - Part 2 - Frontend

[LolandaE]

Describe the task

Bring the test suite to an 85-90% Coverage rate

Purpose

Since the test suite is in an unmanaged position, overall testing in the application has reduced to just over 50% total coverage.

Acceptance Criteria

• [ ] Test coverage rate > 85%

Additional context

• Frontend uses vue test-utils
• Could disable all tests and run them locally, fix them over time and bring them online.
• Can print test coverage per file running make test-vue
• Nearly all components at least have a "Component will mount" test
• Follow up to #2139
• For detailed Testing writeup see the Wiki

File.	% Stmts	% Branch	% Funcs	% Lines
All Files	51.71	18.45	21.67	52.27

Challenges

• We don't have much experience in testing with Vue. Many components have simple "Component will render" tests for the frontend, and a lot of utility functions are in standalone .js files that don't want to cooperate without the right environment context. files like codeToDescription.js rely on the "store" being active so it can translate codes, if its not, you can only trigger 33% coverage since only one path will be valid
• Jenkins deploys Gwells using Node 10, Some of these functions (parseErrors.js in particular) use Node 11 functions (Array.prototype.flat), so it's proven some of this code is unused, as it could never run outside of local environments where we develop with Node 14.21.3.
• It would be advantageous to prioritize updating the CI/CD workflows to step away from Jenkins, so we can upgrade our node version

[davidclaveau]

Working on this ticket, there are a few additional things to note.

The coverage provided when running npm run coverage:test from the frontend directory is showing incorrectly.

This might be related to similar issues others have seen, like in this thread. Regardless if this is an issue or not, it might be good indicator that further updates are required to the frontend on the whole before moving further, such as updating dependencies or updating to Vue 3.

If it is an issue, it's probably an issue with a dependency mismatch. I attempted to some trial and error tests to see if there was a change in the printout, but these changes didn't prove fruitful. I attempted to incrementally update the devDependcies from their current versions to newer version:

• babel-jest: 23.6.0 ~> 29.7.0
• @vue/cli-plugin-babel: 3.7.0 ~> 4.5.19 (or 5.0.8)
• @vue/cli-plugin-eslint: 3.7.0 ~> 4.5.19 (or 5.0.8)
• @vue/cli-plugin-unit-jest: 3.7.0 ~> 4.5.19 (or 5.0.8)
• @vue/cli-service: 3.7.0 ~> 4.5.19 (or 5.0.8)

As well as update the Vue 2 version from 2.6.10 to 2.7.16, but still no luck with running the test. (Several other issues crop up where there are issues with the jest.config.js file that I wasn't able to identify, but this might just need some more debugging to get working).

This was running this relatively feeble test for the aquifers/components/Documents.js file running this command npm run coverage:test tests/unit/specs/aquifers/components/Documents.spec.js.

It shows the coverage at 100% for a test suite with two very limited tests.

The test file:

/* eslint-disable indent */
import { mount, createLocalVue } from '@vue/test-utils'
import Documents from '../../../../../src/aquifers/components/Documents.vue'
import Vuex from 'vuex'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('Documents.vue', () => {
  describe('When loaded', () => {
    const store = new Vuex.Store({
      getters: {
        userRoles: () => ({
          aquifers: {
            edit: true
          }
        })
     }
    })
    const activity = 'DRILL'

    const wrapper = mount(Documents, {
      store,
      propsData: {
        files: {
          'public': []
        },
        id: 0,
        editMode: false,
        loading: false,
        highlightRegexp: /[_ -]factsheet[_ -]*.*\.pdf$/i,
        highlightTitle: '',
        publicFilesTitle: ''
      },
      localVue
    })

    it('renders correctly', () => {
      expect(wrapper.exists()).toBe(true)
    })

    it('displays loading indicator when loading', () => {
      const wrapper = mount(Documents, {
         propsData: {
           loading: true
         }
      })
      expect(wrapper.find('.fa-circle-o-notch').exists()).toBe(true)
     })
  })
})

[jakemorr]

Fergus to review, likely wont be completed unitl after pipeline work and Node is updated