Automatic merge of gitlab-org/gitlab-ce master

doc/development/testing_guide/frontend_testing.md

@@ -28,8 +28,13 @@ we need to solve before being able to use Jest for all our needs.
 
 - Jest runs in a Node.js environment, not in a browser. Support for running Jest tests in a browser [is planned](https://gitlab.com/gitlab-org/gitlab-ce/issues/58205).
 - Because Jest runs in a Node.js environment, it uses [jsdom](https://github.com/jsdom/jsdom) by default.
+- Jest does not have access to Webpack loaders or aliases.
+  The aliases used by Jest are defined in its [own config](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/jest.config.js).
 - All calls to `setTimeout` and `setInterval` are mocked away. See also [Jest Timer Mocks](https://jestjs.io/docs/en/timer-mocks).
 - `rewire` is not required because Jest supports mocking modules. See also [Manual Mocks](https://jestjs.io/docs/en/manual-mocks).
+- No [context object](https://jasmine.github.io/tutorials/your_first_suite#section-The_%3Ccode%3Ethis%3C/code%3E_keyword) is passed to tests in Jest.
+  This means sharing `this.something` between `beforeEach()` and `it()` for example does not work.
+  Instead you should declare shared variables in the context that they are needed (via `const` / `let`).
 - The following will cause tests to fail in Jest:
   - Unmocked requests.
   - Unhandled Promise rejections.

spec/frontend/helpers/vuex_action_helper.js

@@ -20,7 +20,7 @@ const noop = () => {};
  *   // expected mutations
  *   [
  *    { type: types.MUTATION}
- *    { type: types.MUTATION_1, payload: jasmine.any(Number)}
+ *    { type: types.MUTATION_1, payload: expect.any(Number)}
  *   ],
  *   // expected actions
  *   [
@@ -89,10 +89,7 @@ export default (
     payload,
   );
 
-  return new Promise(resolve => {
-    setImmediate(resolve);
-  })
-    .then(() => result)
+  return (result || new Promise(resolve => setImmediate(resolve)))
     .catch(error => {
       validateResults();
       throw error;

spec/frontend/helpers/vuex_action_helper_spec.js

+import MockAdapter from 'axios-mock-adapter';
+import { TEST_HOST } from 'helpers/test_constants';
+import axios from '~/lib/utils/axios_utils';
+import testAction from './vuex_action_helper';
+
+describe('VueX test helper (testAction)', () => {
+  let originalExpect;
+  let assertion;
+  let mock;
+  const noop = () => {};
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    /**
+     * In order to test the helper properly, we need to overwrite the Jest
+     * `expect` helper.  We test that the testAction helper properly passes the
+     * dispatched actions/committed mutations to the Jest helper.
+     */
+    originalExpect = expect;
+    assertion = null;
+    global.expect = actual => ({
+      toEqual: () => {
+        originalExpect(actual).toEqual(assertion);
+      },
+    });
+  });
+
+  afterEach(() => {
+    mock.restore();
+    global.expect = originalExpect;
+  });
+
+  it('properly passes state and payload to action', () => {
+    const exampleState = { FOO: 12, BAR: 3 };
+    const examplePayload = { BAZ: 73, BIZ: 55 };
+
+    const action = ({ state }, payload) => {
+      originalExpect(state).toEqual(exampleState);
+      originalExpect(payload).toEqual(examplePayload);
+    };
+
+    assertion = { mutations: [], actions: [] };
+
+    testAction(action, examplePayload, exampleState);
+  });
+
+  describe('given a sync action', () => {
+    it('mocks committing mutations', () => {
+      const action = ({ commit }) => {
+        commit('MUTATION');
+      };
+
+      assertion = { mutations: [{ type: 'MUTATION' }], actions: [] };
+
+      testAction(action, null, {}, assertion.mutations, assertion.actions, noop);
+    });
+
+    it('mocks dispatching actions', () => {
+      const action = ({ dispatch }) => {
+        dispatch('ACTION');
+      };
+
+      assertion = { actions: [{ type: 'ACTION' }], mutations: [] };
+
+      testAction(action, null, {}, assertion.mutations, assertion.actions, noop);
+    });
+
+    it('works with done callback once finished', done => {
+      assertion = { mutations: [], actions: [] };
+
+      testAction(noop, null, {}, assertion.mutations, assertion.actions, done);
+    });
+
+    it('returns a promise', done => {
+      assertion = { mutations: [], actions: [] };
+
+      testAction(noop, null, {}, assertion.mutations, assertion.actions)
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('given an async action (returning a promise)', () => {
+    let lastError;
+    const data = { FOO: 'BAR' };
+
+    const asyncAction = ({ commit, dispatch }) => {
+      dispatch('ACTION');
+
+      return axios
+        .get(TEST_HOST)
+        .catch(error => {
+          commit('ERROR');
+          lastError = error;
+          throw error;
+        })
+        .then(() => {
+          commit('SUCCESS');
+          return data;
+        });
+    };
+
+    beforeEach(() => {
+      lastError = null;
+    });
+
+    it('works with done callback once finished', done => {
+      mock.onGet(TEST_HOST).replyOnce(200, 42);
+
+      assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
+
+      testAction(asyncAction, null, {}, assertion.mutations, assertion.actions, done);
+    });
+
+    it('returns original data of successful promise while checking actions/mutations', done => {
+      mock.onGet(TEST_HOST).replyOnce(200, 42);
+
+      assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
+
+      testAction(asyncAction, null, {}, assertion.mutations, assertion.actions)
+        .then(res => {
+          originalExpect(res).toEqual(data);
+          done();
+        })
+        .catch(done.fail);
+    });
+
+    it('returns original error of rejected promise while checking actions/mutations', done => {
+      mock.onGet(TEST_HOST).replyOnce(500, '');
+
+      assertion = { mutations: [{ type: 'ERROR' }], actions: [{ type: 'ACTION' }] };
+
+      testAction(asyncAction, null, {}, assertion.mutations, assertion.actions)
+        .then(done.fail)
+        .catch(error => {
+          originalExpect(error).toBe(lastError);
+          done();
+        });
+    });
+  });
+
+  it('works with async actions not returning promises', done => {
+    const data = { FOO: 'BAR' };
+
+    const asyncAction = ({ commit, dispatch }) => {
+      dispatch('ACTION');
+
+      axios
+        .get(TEST_HOST)
+        .then(() => {
+          commit('SUCCESS');
+          return data;
+        })
+        .catch(error => {
+          commit('ERROR');
+          throw error;
+        });
+    };
+
+    mock.onGet(TEST_HOST).replyOnce(200, 42);
+
+    assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
+
+    testAction(asyncAction, null, {}, assertion.mutations, assertion.actions, done);
+  });
+});