gitlab-org--gitlab-foss/spec/frontend/jobs/store/actions_spec.js

import MockAdapter from 'axios-mock-adapter';
import { TEST_HOST } from 'helpers/test_constants';
import testAction from 'helpers/vuex_action_helper';
import {
  setJobEndpoint,
  setJobLogOptions,
  clearEtagPoll,
  stopPolling,
  requestJob,
  fetchJob,
  receiveJobSuccess,
  receiveJobError,
  scrollTop,
  scrollBottom,
  requestJobLog,
  fetchJobLog,
  startPollingJobLog,
  stopPollingJobLog,
  receiveJobLogSuccess,
  receiveJobLogError,
  toggleCollapsibleLine,
  requestJobsForStage,
  fetchJobsForStage,
  receiveJobsForStageSuccess,
  receiveJobsForStageError,
  hideSidebar,
  showSidebar,
  toggleSidebar,
} from '~/jobs/store/actions';
import * as types from '~/jobs/store/mutation_types';
import state from '~/jobs/store/state';
import axios from '~/lib/utils/axios_utils';

describe('Job State actions', () => {
  let mockedState;

  beforeEach(() => {
    mockedState = state();
  });

  describe('setJobEndpoint', () => {
    it('should commit SET_JOB_ENDPOINT mutation', (done) => {
      testAction(
        setJobEndpoint,
        'job/872324.json',
        mockedState,
        [{ type: types.SET_JOB_ENDPOINT, payload: 'job/872324.json' }],
        [],
        done,
      );
    });
  });

  describe('setJobLogOptions', () => {
    it('should commit SET_JOB_LOG_OPTIONS mutation', (done) => {
      testAction(
        setJobLogOptions,
        { pagePath: 'job/872324/trace.json' },
        mockedState,
        [{ type: types.SET_JOB_LOG_OPTIONS, payload: { pagePath: 'job/872324/trace.json' } }],
        [],
        done,
      );
    });
  });

  describe('hideSidebar', () => {
    it('should commit HIDE_SIDEBAR mutation', (done) => {
      testAction(hideSidebar, null, mockedState, [{ type: types.HIDE_SIDEBAR }], [], done);
    });
  });

  describe('showSidebar', () => {
    it('should commit HIDE_SIDEBAR mutation', (done) => {
      testAction(showSidebar, null, mockedState, [{ type: types.SHOW_SIDEBAR }], [], done);
    });
  });

  describe('toggleSidebar', () => {
    describe('when isSidebarOpen is true', () => {
      it('should dispatch hideSidebar', (done) => {
        testAction(toggleSidebar, null, mockedState, [], [{ type: 'hideSidebar' }], done);
      });
    });

    describe('when isSidebarOpen is false', () => {
      it('should dispatch showSidebar', (done) => {
        mockedState.isSidebarOpen = false;

        testAction(toggleSidebar, null, mockedState, [], [{ type: 'showSidebar' }], done);
      });
    });
  });

  describe('requestJob', () => {
    it('should commit REQUEST_JOB mutation', (done) => {
      testAction(requestJob, null, mockedState, [{ type: types.REQUEST_JOB }], [], done);
    });
  });

  describe('fetchJob', () => {
    let mock;

    beforeEach(() => {
      mockedState.jobEndpoint = `${TEST_HOST}/endpoint.json`;
      mock = new MockAdapter(axios);
    });

    afterEach(() => {
      mock.restore();
      stopPolling();
      clearEtagPoll();
    });

    describe('success', () => {
      it('dispatches requestJob and receiveJobSuccess ', (done) => {
        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, { id: 121212, name: 'karma' });

        testAction(
          fetchJob,
          null,
          mockedState,
          [],
          [
            {
              type: 'requestJob',
            },
            {
              payload: { id: 121212, name: 'karma' },
              type: 'receiveJobSuccess',
            },
          ],
          done,
        );
      });
    });

    describe('error', () => {
      beforeEach(() => {
        mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500);
      });

      it('dispatches requestJob and receiveJobError ', (done) => {
        testAction(
          fetchJob,
          null,
          mockedState,
          [],
          [
            {
              type: 'requestJob',
            },
            {
              type: 'receiveJobError',
            },
          ],
          done,
        );
      });
    });
  });

  describe('receiveJobSuccess', () => {
    it('should commit RECEIVE_JOB_SUCCESS mutation', (done) => {
      testAction(
        receiveJobSuccess,
        { id: 121232132 },
        mockedState,
        [{ type: types.RECEIVE_JOB_SUCCESS, payload: { id: 121232132 } }],
        [],
        done,
      );
    });
  });

  describe('receiveJobError', () => {
    it('should commit RECEIVE_JOB_ERROR mutation', (done) => {
      testAction(receiveJobError, null, mockedState, [{ type: types.RECEIVE_JOB_ERROR }], [], done);
    });
  });

  describe('scrollTop', () => {
    it('should dispatch toggleScrollButtons action', (done) => {
      testAction(scrollTop, null, mockedState, [], [{ type: 'toggleScrollButtons' }], done);
    });
  });

  describe('scrollBottom', () => {
    it('should dispatch toggleScrollButtons action', (done) => {
      testAction(scrollBottom, null, mockedState, [], [{ type: 'toggleScrollButtons' }], done);
    });
  });

  describe('requestJobLog', () => {
    it('should commit REQUEST_JOB_LOG mutation', (done) => {
      testAction(requestJobLog, null, mockedState, [{ type: types.REQUEST_JOB_LOG }], [], done);
    });
  });

  describe('fetchJobLog', () => {
    let mock;

    beforeEach(() => {
      mockedState.jobLogEndpoint = `${TEST_HOST}/endpoint`;
      mock = new MockAdapter(axios);
    });

    afterEach(() => {
      mock.restore();
      stopPolling();
      clearEtagPoll();
    });

    describe('success', () => {
      it('dispatches requestJobLog, receiveJobLogSuccess and stopPollingJobLog when job is complete', (done) => {
        mock.onGet(`${TEST_HOST}/endpoint/trace.json`).replyOnce(200, {
          html: 'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- :',
          complete: true,
        });

        testAction(
          fetchJobLog,
          null,
          mockedState,
          [],
          [
            {
              type: 'toggleScrollisInBottom',
              payload: true,
            },
            {
              payload: {
                html: 'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- :',
                complete: true,
              },
              type: 'receiveJobLogSuccess',
            },
            {
              type: 'stopPollingJobLog',
            },
          ],
          done,
        );
      });

      describe('when job is incomplete', () => {
        let jobLogPayload;

        beforeEach(() => {
          jobLogPayload = {
            html: 'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- :',
            complete: false,
          };

          mock.onGet(`${TEST_HOST}/endpoint/trace.json`).replyOnce(200, jobLogPayload);
        });

        it('dispatches startPollingJobLog', (done) => {
          testAction(
            fetchJobLog,
            null,
            mockedState,
            [],
            [
              { type: 'toggleScrollisInBottom', payload: true },
              { type: 'receiveJobLogSuccess', payload: jobLogPayload },
              { type: 'startPollingJobLog' },
            ],
            done,
          );
        });

        it('does not dispatch startPollingJobLog when timeout is non-empty', (done) => {
          mockedState.jobLogTimeout = 1;

          testAction(
            fetchJobLog,
            null,
            mockedState,
            [],
            [
              { type: 'toggleScrollisInBottom', payload: true },
              { type: 'receiveJobLogSuccess', payload: jobLogPayload },
            ],
            done,
          );
        });
      });
    });

    describe('error', () => {
      beforeEach(() => {
        mock.onGet(`${TEST_HOST}/endpoint/trace.json`).reply(500);
      });

      it('dispatches requestJobLog and receiveJobLogError ', (done) => {
        testAction(
          fetchJobLog,
          null,
          mockedState,
          [],
          [
            {
              type: 'receiveJobLogError',
            },
          ],
          done,
        );
      });
    });
  });

  describe('startPollingJobLog', () => {
    let dispatch;
    let commit;

    beforeEach(() => {
      dispatch = jest.fn();
      commit = jest.fn();

      startPollingJobLog({ dispatch, commit });
    });

    afterEach(() => {
      jest.clearAllTimers();
    });

    it('should save the timeout id but not call fetchJobLog', () => {
      expect(commit).toHaveBeenCalledWith(types.SET_JOB_LOG_TIMEOUT, expect.any(Number));
      expect(commit.mock.calls[0][1]).toBeGreaterThan(0);

      expect(dispatch).not.toHaveBeenCalledWith('fetchJobLog');
    });

    describe('after timeout has passed', () => {
      beforeEach(() => {
        jest.advanceTimersByTime(4000);
      });

      it('should clear the timeout id and fetchJobLog', () => {
        expect(commit).toHaveBeenCalledWith(types.SET_JOB_LOG_TIMEOUT, 0);
        expect(dispatch).toHaveBeenCalledWith('fetchJobLog');
      });
    });
  });

  describe('stopPollingJobLog', () => {
    let origTimeout;

    beforeEach(() => {
      // Can't use spyOn(window, 'clearTimeout') because this caused unrelated specs to timeout
      // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/23838#note_280277727
      origTimeout = window.clearTimeout;
      window.clearTimeout = jest.fn();
    });

    afterEach(() => {
      window.clearTimeout = origTimeout;
    });

    it('should commit STOP_POLLING_JOB_LOG mutation ', (done) => {
      const jobLogTimeout = 7;

      testAction(
        stopPollingJobLog,
        null,
        { ...mockedState, jobLogTimeout },
        [{ type: types.SET_JOB_LOG_TIMEOUT, payload: 0 }, { type: types.STOP_POLLING_JOB_LOG }],
        [],
      )
        .then(() => {
          expect(window.clearTimeout).toHaveBeenCalledWith(jobLogTimeout);
        })
        .then(done)
        .catch(done.fail);
    });
  });

  describe('receiveJobLogSuccess', () => {
    it('should commit RECEIVE_JOB_LOG_SUCCESS mutation ', (done) => {
      testAction(
        receiveJobLogSuccess,
        'hello world',
        mockedState,
        [{ type: types.RECEIVE_JOB_LOG_SUCCESS, payload: 'hello world' }],
        [],
        done,
      );
    });
  });

  describe('receiveJobLogError', () => {
    it('should commit stop polling job log', (done) => {
      testAction(receiveJobLogError, null, mockedState, [], [{ type: 'stopPollingJobLog' }], done);
    });
  });

  describe('toggleCollapsibleLine', () => {
    it('should commit TOGGLE_COLLAPSIBLE_LINE mutation ', (done) => {
      testAction(
        toggleCollapsibleLine,
        { isClosed: true },
        mockedState,
        [{ type: types.TOGGLE_COLLAPSIBLE_LINE, payload: { isClosed: true } }],
        [],
        done,
      );
    });
  });

  describe('requestJobsForStage', () => {
    it('should commit REQUEST_JOBS_FOR_STAGE mutation ', (done) => {
      testAction(
        requestJobsForStage,
        { name: 'deploy' },
        mockedState,
        [{ type: types.REQUEST_JOBS_FOR_STAGE, payload: { name: 'deploy' } }],
        [],
        done,
      );
    });
  });

  describe('fetchJobsForStage', () => {
    let mock;

    beforeEach(() => {
      mock = new MockAdapter(axios);
    });

    afterEach(() => {
      mock.restore();
    });

    describe('success', () => {
      it('dispatches requestJobsForStage and receiveJobsForStageSuccess ', (done) => {
        mock
          .onGet(`${TEST_HOST}/jobs.json`)
          .replyOnce(200, { latest_statuses: [{ id: 121212, name: 'build' }], retried: [] });

        testAction(
          fetchJobsForStage,
          { dropdown_path: `${TEST_HOST}/jobs.json` },
          mockedState,
          [],
          [
            {
              type: 'requestJobsForStage',
              payload: { dropdown_path: `${TEST_HOST}/jobs.json` },
            },
            {
              payload: [{ id: 121212, name: 'build' }],
              type: 'receiveJobsForStageSuccess',
            },
          ],
          done,
        );
      });
    });

    describe('error', () => {
      beforeEach(() => {
        mock.onGet(`${TEST_HOST}/jobs.json`).reply(500);
      });

      it('dispatches requestJobsForStage and receiveJobsForStageError', (done) => {
        testAction(
          fetchJobsForStage,
          { dropdown_path: `${TEST_HOST}/jobs.json` },
          mockedState,
          [],
          [
            {
              type: 'requestJobsForStage',
              payload: { dropdown_path: `${TEST_HOST}/jobs.json` },
            },
            {
              type: 'receiveJobsForStageError',
            },
          ],
          done,
        );
      });
    });
  });

  describe('receiveJobsForStageSuccess', () => {
    it('should commit RECEIVE_JOBS_FOR_STAGE_SUCCESS mutation ', (done) => {
      testAction(
        receiveJobsForStageSuccess,
        [{ id: 121212, name: 'karma' }],
        mockedState,
        [{ type: types.RECEIVE_JOBS_FOR_STAGE_SUCCESS, payload: [{ id: 121212, name: 'karma' }] }],
        [],
        done,
      );
    });
  });

  describe('receiveJobsForStageError', () => {
    it('should commit RECEIVE_JOBS_FOR_STAGE_ERROR mutation ', (done) => {
      testAction(
        receiveJobsForStageError,
        null,
        mockedState,
        [{ type: types.RECEIVE_JOBS_FOR_STAGE_ERROR }],
        [],
        done,
      );
    });
  });
});