UI Test: Fix UI test failures in master

[utchoang]

Description

Fixes #4711
For Master branch

Types of changes

• Breaking change (fix or feature that would cause existing functionality to change)
• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Enhancement (improves an existing feature and functionality)
• Cleanup (Code refactoring and cleanup, that may add test cases)

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

• Major
• Minor

Bug Severity

• BLOCKER
• Critical
• Major
• Minor
• Trivial

Screenshots (if appropriate):

UI test
After fixes:

How Has This Been Tested?

[yadvr]

LGTM, job #1 passing on Travis

[DaanHoogland]

@blueorangutan ui

[blueorangutan]

@DaanHoogland a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

[blueorangutan]

UI build: ✔️
Live QA URL: http://qa.cloudstack.cloud:8080/client/pr/4719 (JID-3840)

[yadvr]

@utchoang same as the other PR, go to Travis's first job -> see the install.sh... block:

> cloudstack-ui@1.0.0 lint /home/travis/build/apache/cloudstack/ui
> vue-cli-service lint
 DONE  No lint errors found!
> cloudstack-ui@1.0.0 test:unit /home/travis/build/apache/cloudstack/ui
> vue-cli-service test:unit
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
[vue-jest]: Less are not currently compiled by vue-jest
 FAIL  tests/unit/views/AutogenView.spec.js (22.379s)
  ● Console
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Error in nextTick: "Error: expect(received).toEqual(expected) // deep equality
      
      - Expected
      + Received
      
        Array [
          Object {
      -     "name": "id",
      +     "name": "column1",
            "type": "string",
          },
          Object {
      -     "name": "name",
      +     "name": "column2",
            "type": "string",
          },
          Object {
      -     "name": "column1",
      +     "name": "column3",
            "type": "string",
          },
          Object {
      -     "name": "column2",
      +     "name": "name",
            "type": "string",
          },
          Object {
      -     "name": "column3",
      +     "name": "id",
            "type": "string",
          },
        ]"
      
      found in
      
      ---> <Resource>
             <Root>
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
      { Error: expect(received).toEqual(expected) // deep equality
      
      - Expected
      + Received
      
        Array [
          Object {
      -     "name": "id",
      +     "name": "column1",
            "type": "string",
          },
          Object {
      -     "name": "name",
      +     "name": "column2",
            "type": "string",
          },
          Object {
      -     "name": "column1",
      +     "name": "column3",
            "type": "string",
          },
          Object {
      -     "name": "column2",
      +     "name": "name",
            "type": "string",
          },
          Object {
      -     "name": "column3",
      +     "name": "id",
            "type": "string",
          },
        ]
          at VueComponent.call (/home/travis/build/apache/cloudstack/ui/tests/unit/views/AutogenView.spec.js:1080:51)
          at Array.<anonymous> (/home/travis/build/apache/cloudstack/ui/node_modules/vue/dist/vue.runtime.common.dev.js:1976:12)
          at flushCallbacks (/home/travis/build/apache/cloudstack/ui/node_modules/vue/dist/vue.runtime.common.dev.js:1902:5)
        matcherResult:
         { actual: [ [Object], [Object], [Object], [Object], [Object] ],
           expected: [ [Object], [Object], [Object], [Object], [Object] ],
           message: [Function],
           name: 'toEqual',
           pass: false } }
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Error in nextTick: "Error: expect(received).toEqual(expected) // deep equality
      
      - Expected
      + Received
      
        Array [
          Object {
      -     "name": "id",
      +     "name": "column1",
            "type": "string",
          },
          Object {
      -     "name": "name",
      +     "name": "column2",
            "type": "string",
          },
          Object {
      -     "name": "column1",
      +     "name": "column3",
            "type": "string",
          },
          Object {
      -     "name": "column2",
      +     "name": "name",
            "type": "string",
          },
          Object {
      -     "name": "column3",
      +     "name": "id",
            "type": "string",
          },
        ]"
      
      found in
      
      ---> <Resource>
             <Root>
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
      { Error: expect(received).toEqual(expected) // deep equality
      
      - Expected
      + Received
      
        Array [
          Object {
      -     "name": "id",
      +     "name": "column1",
            "type": "string",
          },
          Object {
      -     "name": "name",
      +     "name": "column2",
            "type": "string",
          },
          Object {
      -     "name": "column1",
      +     "name": "column3",
            "type": "string",
          },
          Object {
      -     "name": "column2",
      +     "name": "name",
            "type": "string",
          },
          Object {
      -     "name": "column3",
      +     "name": "id",
            "type": "string",
          },
        ]
          at VueComponent.call (/home/travis/build/apache/cloudstack/ui/tests/unit/views/AutogenView.spec.js:1129:51)
          at Array.<anonymous> (/home/travis/build/apache/cloudstack/ui/node_modules/vue/dist/vue.runtime.common.dev.js:1976:12)
          at flushCallbacks (/home/travis/build/apache/cloudstack/ui/node_modules/vue/dist/vue.runtime.common.dev.js:1902:5)
        matcherResult:
         { actual: [ [Object], [Object], [Object], [Object], [Object] ],
           expected: [ [Object], [Object], [Object], [Object], [Object] ],
           message: [Function],
           name: 'toEqual',
           pass: false } }
  ● Views > AutogenView.vue › Methods › execAction() › check currentAction params and paramsField when execAction() is called with args is exists
    expect(received).toEqual(expected) // deep equality
    - Expected
    + Received
      Array [
        Object {
    -     "name": "id",
    +     "name": "column1",
          "type": "string",
        },
        Object {
    -     "name": "name",
    +     "name": "column2",
          "type": "string",
        },
        Object {
    -     "name": "column1",
    +     "name": "column3",
          "type": "string",
        },
        Object {
    -     "name": "column2",
    +     "name": "name",
          "type": "string",
        },
        Object {
    -     "name": "column3",
    +     "name": "id",
          "type": "string",
        },
      ]
      1078 |           })
      1079 | 
    > 1080 |           expect(wrapper.vm.currentAction.params).toEqual([
           |                                                   ^
      1081 |             { name: 'id', type: 'string' },
      1082 |             { name: 'name', type: 'string' },
      1083 |             { name: 'column1', type: 'string' },
      at VueComponent.call (tests/unit/views/AutogenView.spec.js:1080:51)
      at Array.<anonymous> (node_modules/vue/dist/vue.runtime.common.dev.js:1976:12)
      at flushCallbacks (node_modules/vue/dist/vue.runtime.common.dev.js:1902:5)
  ● Views > AutogenView.vue › Methods › execAction() › check currentAction paramsField and listUuidOpts() is called when execAction() is called
    expect(received).toEqual(expected) // deep equality
    - Expected
    + Received
      Array [
        Object {
    -     "name": "id",
    +     "name": "column1",
          "type": "string",
        },
        Object {
    -     "name": "name",
    +     "name": "column2",
          "type": "string",
        },
        Object {
    -     "name": "column1",
    +     "name": "column3",
          "type": "string",
        },
        Object {
    -     "name": "column2",
    +     "name": "name",
          "type": "string",
        },
        Object {
    -     "name": "column3",
    +     "name": "id",
          "type": "string",
        },
      ]
      1127 |           })
      1128 | 
    > 1129 |           expect(wrapper.vm.currentAction.params).toEqual([
           |                                                   ^
      1130 |             { name: 'id', type: 'string' },
      1131 |             { name: 'name', type: 'string' },
      1132 |             { name: 'column1', type: 'string' },
      at VueComponent.call (tests/unit/views/AutogenView.spec.js:1129:51)
      at Array.<anonymous> (node_modules/vue/dist/vue.runtime.common.dev.js:1976:12)
      at flushCallbacks (node_modules/vue/dist/vue.runtime.common.dev.js:1902:5)
 PASS  tests/unit/views/compute/MigrateWizard.spec.js
 PASS  tests/unit/components/widgets/Status.spec.js
 PASS  tests/unit/components/view/ActionButton.spec.js
=============================== Coverage summary ===============================
Statements   : 4.64% ( 712/15335 )
Branches     : 5.68% ( 439/7725 )
Functions    : 2.48% ( 125/5049 )
Lines        : 4.64% ( 708/15250 )
================================================================================
Test Suites: 1 failed, 3 passed, 4 total
Tests:       2 failed, 134 passed, 136 total
Snapshots:   0 total
Time:        82.054s
Ran all test suites.

The other bug of course is that on failure of npm run:unit, does not actually fail the first job ^^, something needs fixing at:https://github.com/apache/cloudstack/blob/4.15/tools/travis/install.sh#L41 (for 4.15 branch, don't raise PR for both master and 4.15, raise just for 4.15 branch, we'll fwd merge such PRs to master which will get the same fixes). cc @shwstppr @DaanHoogland

[utchoang]

@rhtyd All test passed.

[yadvr]

In line with #4718 assuming will merge/fwd merge.