Upgrade major Vue app dependencies for v0.15

[mikkonie]

It seems the problems in #1971 are due to a complex web of node dependency issues. I should just do a full update on the packages. This is a major milestone after all.

I'll try to ensure to the best of my capability that this doesn't create any nasty surprises.. That means in addition to the tests, I'll manually test it around and ensure everything's ok in CI and staging.

And lest we forget, Vue2 is at EOL and we need to do #994 soon.

[mikkonie]

Initial attempt not very promising. App builds and appears to work at a glance, but tests exhibit several failures:

Summary of all failing tests
 FAIL  tests/unit/OntologyEditModal.spec.js (13.15 s)
  ● OntologyEditModal.vue › renders term search options

    expect(received).toBe(expected) // Object.is equality

    Expected: 4
    Received: 0

      455 |
      456 |     const termOptions = wrapper.find('#sodar-ss-ontology-select-term').findAll('Option')
    > 457 |     expect(termOptions.length).toBe(4)
          |                                ^
      458 |
      459 |     for (let i = 0; i < ontologyTermResponseHp.terms.length; i++) {
      460 |       const term = ontologyTermResponseHp.terms[i]

      at Object.<anonymous> (tests/unit/OntologyEditModal.spec.js:457:32)

  ● OntologyEditModal.vue › renders search option for an obsolete term

    expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

      483 |
      484 |     const termOptions = wrapper.find('#sodar-ss-ontology-select-term').findAll('Option')
    > 485 |     expect(termOptions.length).toBe(1)
          |                                ^
      486 |     expect(termOptions.at(0).text()).toContain('<OBSOLETE>')
      487 |   })
      488 |

      at Object.<anonymous> (tests/unit/OntologyEditModal.spec.js:485:32)

  ● OntologyEditModal.vue › inserts new term from option selection

    [vue-test-utils]: no item exists at 0

      502 |     expect(termItems.length).toBe(3)
      503 |     const termOptions = wrapper.find('#sodar-ss-ontology-select-term').findAll('Option')
    > 504 |     await termOptions.at(0).trigger('dblclick')
          |                       ^
      505 |     await waitNT(wrapper.vm)
      506 |     await waitRAF()
      507 |

      at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:1700:9)
      at WrapperArray.at (node_modules/@vue/test-utils/dist/vue-test-utils.js:8528:5)
      at Object.<anonymous> (tests/unit/OntologyEditModal.spec.js:504:23)

  ● OntologyEditModal.vue › handles option selection of existing term

    [vue-test-utils]: no item exists at 0

      532 |     expect(termItems.length).toBe(3)
      533 |     const termOptions = wrapper.find('#sodar-ss-ontology-select-term').findAll('Option')
    > 534 |     await termOptions.at(0).trigger('dblclick')
          |                       ^
      535 |     await waitNT(wrapper.vm)
      536 |     await waitRAF()
      537 |

      at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:1700:9)
      at WrapperArray.at (node_modules/@vue/test-utils/dist/vue-test-utils.js:8528:5)
      at Object.<anonymous> (tests/unit/OntologyEditModal.spec.js:534:23)

  ● OntologyEditModal.vue › replaces existing term with disallowed list value

    [vue-test-utils]: no item exists at 0

      614 |     expect(termItems.length).toBe(1)
      615 |     const termOptions = wrapper.find('#sodar-ss-ontology-select-term').findAll('Option')
    > 616 |     await termOptions.at(0).trigger('dblclick')
          |                       ^
      617 |     await waitNT(wrapper.vm)
      618 |     await waitRAF()
      619 |

      at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:1700:9)
      at WrapperArray.at (node_modules/@vue/test-utils/dist/vue-test-utils.js:8528:5)
      at Object.<anonymous> (tests/unit/OntologyEditModal.spec.js:616:23)

  ● OntologyEditModal.vue › inserts term with disallowed list value

    [vue-test-utils]: no item exists at 0

      646 |
      647 |     const termOptions = wrapper.find('#sodar-ss-ontology-select-term').findAll('Option')
    > 648 |     await termOptions.at(0).trigger('dblclick')
          |                       ^
      649 |     await waitNT(wrapper.vm)
      650 |     await waitRAF()
      651 |

      at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:1700:9)
      at WrapperArray.at (node_modules/@vue/test-utils/dist/vue-test-utils.js:8528:5)
      at Object.<anonymous> (tests/unit/OntologyEditModal.spec.js:648:23)

 FAIL  tests/unit/ColumnToggleModal.spec.js (13.955 s)
  ● ColumnToggleModal.vue › filters fields on onFilterInput()

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      208 |       expect(fields.at(i).isVisible()).toBe(false)
      209 |     }
    > 210 |     expect(fields.at(6).isVisible()).toBe(true) // Treatment is true
          |                                      ^
      211 |   })
      212 |
      213 |   it('calls onColumnChange() on column hide/show click', async () => {

      at Object.<anonymous> (tests/unit/ColumnToggleModal.spec.js:210:38)

 FAIL  tests/unit/IrodsDirModal.spec.js
  ● IrodsDirModal.vue › renders object list with irods object data

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      64 |     expect(wrapper.findAll('.sodar-ss-request-delete-btn').length).toBe(1)
      65 |     expect(wrapper.findAll('.sodar-ss-request-cancel-btn').length).toBe(1)
    > 66 |     expect(wrapper.find('.sodar-ss-irods-stats').isVisible()).toBe(true)
         |                                                               ^
      67 |   })
      68 |
      69 |   it('renders modal with empty object list', async () => {

      at Object.<anonymous> (tests/unit/IrodsDirModal.spec.js:66:63)

  ● IrodsDirModal.vue › updates list on onFilterUpdate()

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      130 |     expect(wrapper.findAll('.sodar-ss-irods-obj').length).toBe(2)
      131 |     expect(wrapper.findAll('.sodar-ss-irods-obj').at(0).isVisible()).toBe(false)
    > 132 |     expect(wrapper.findAll('.sodar-ss-irods-obj').at(1).isVisible()).toBe(true)
          |                                                                      ^
      133 |     await wrapper.vm.onFilterUpdate('')
      134 |     expect(wrapper.findAll('.sodar-ss-irods-obj').at(0).isVisible()).toBe(true)
      135 |     expect(wrapper.findAll('.sodar-ss-irods-obj').at(1).isVisible()).toBe(true)

      at Object.<anonymous> (tests/unit/IrodsDirModal.spec.js:132:70)

  ● IrodsDirModal.vue › displays no results row for filtering

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      170 |     expect(wrapper.find('#sodar-ss-irods-filter-empty').exists()).toBe(false)
      171 |     expect(wrapper.findAll('.sodar-ss-irods-obj').length).toBe(2)
    > 172 |     expect(wrapper.findAll('.sodar-ss-irods-obj').at(0).isVisible()).toBe(true)
          |                                                                      ^
      173 |     expect(wrapper.findAll('.sodar-ss-irods-obj').at(1).isVisible()).toBe(true)
      174 |     await wrapper.vm.onFilterUpdate('jee8ITh2')
      175 |     expect(wrapper.find('#sodar-ss-irods-filter-empty').exists()).toBe(true)

      at Object.<anonymous> (tests/unit/IrodsDirModal.spec.js:172:70)

[mikkonie]

Problems and fixes in unit tests:

• Option elements can no longer be searched for
  • Solution: switch to option
• isVisible() does not work anymore
  • Solution: ???
  • This issue may have something to do with it (tried using attachTo and it didn't help though)
  • Workaround: Use element.attributes('style').{not.}toBe('display: none;') instead. Thanks to Oliver for hinting about this!

[mikkonie]

Done. That was annoying.