Skip to content

Vuex test helper improvements

Lukas Eipert requested to merge vuex-test-helper-improvements into master

What does this MR do?

Improve the Vuex action test Handler in several ways:

Proper promise support

It is now possible to properly use promises in the checks (for fetchActions as defined in our docs). Failed promises will be catched and re-thrown.

//action.js
exampleAction({dispatch}){
  return axios.get('/')
           .then((res) => {
             dispatch('baz')
             return parseInt(res.data, 10);
           });
}
// action_spec.js
// test success
mock.onGet('/').replyOnce(200, '42');
testAction(
  exampleAction,
  null,
  state,
  [],
  [{type: 'baz'}],
).then((data) => {
  expect(data).toBe(42);
  done();
}).catch(done.fail);
// test error
mock.onGet('/').replyOnce(500, '');
testAction(
  exampleAction,
  null,
  state,
  [],
  [],
).then(done.fail).catch((res) => {
  expect(res).toBe(jasmine.any(Error));
  done();
});

Closes #44912 (closed)

Proper checking of mutations and actions

Currently the test helper is not very strict:

  1. If the expected mutations/actions do not contain a payload, the actual payload is not checked properly (ref). Example in actual code here. To illustrate the problem:

    // action.js
    exampleAction({dispatch}){
       dispatch('foobar', 42)
    }
    // action_spec.js. This test will be green, even though the payload is not checked
    testAction(
       exampleAction,
       null,
       state,
       [],
       [{ type: 'foobar'}], // missing payload: 42
       done
    )
  2. If actions are not triggered, but expected, it currently won't result in an error:

    // action.js
    exampleAction({}){
       console.log('I do nothing')
    }
    // action_spec.js. This test will be green, even though the expected action is never dispatched
    testAction(
       exampleAction,
       null,
       state,
       [],
       [{ type: 'foobar'}],
       done
    )
  3. If multiple actions are expected to be dispatched, but no mutations are expected to be committed, actions might not be checked. Especially problematic on async implementations. This happens due to calling done to early, instead of waiting for all mutations to be called. Real life example here

    // action.js
    exampleAction({dispatch}){
       dispatch('foobar');
       return axios.get('/')
                .then(() => {dispatch('baz')})
    }
    // action_spec.js. This test will be green, even the second action never fired
    testAction(
       exampleAction,
       null,
       state,
       [],
       [
         { type: 'foobar'},
         { type: 'baz'} // <- this will actually never get checked
       ],
       done
    )
  • 1. can be fixed by checking the actual payload against the expectation if a actual payload is defined.

  • 2. and 3. can be fixed by checking all actual committed mutations and dispatched actions against their expectations.

  • Closes #44919 (closed)

  • Closes #44920 (closed)

Does this MR meet the acceptance criteria?

  • [N/A] Changelog entry added, if necessary
  • Documentation created/updated
  • [N/A] API support added
  • [N/A] Tests added for this feature/bug
  • Conform by the code review guidelines
    • [N/A] Has been reviewed by a UX Designer
    • Has been reviewed by a Frontend maintainer
    • [N/A] Has been reviewed by a Backend maintainer
    • [N/A] Has been reviewed by a Database specialist
  • [N/A] Conform by the merge request performance guides
  • [N/A] Conform by the style guides
  • [N/A] Conform by the database guides
  • [N/A] If you have multiple commits, please combine them into a few logically organized commits by squashing them
  • [N/A] Internationalization required/considered
  • [N/A] End-to-end tests pass (package-and-qa manual pipeline job)

What are the relevant issue numbers?

Edited by Lukas Eipert

Merge request reports