Merge branch 'refactor-pipelines-list-spec-to-jest' into 'master'

Refactor pipelines/list_spec.js to Jest

Closes #31629

See merge request gitlab-org/gitlab!16912

spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IDE pipelines list when loaded renders empty state when no latestPipeline 1`] = `
+<div
+  class="ide-pipeline"
+>
+  <!---->
+   
+  <emptystate-stub
+    cansetci="true"
+    emptystatesvgpath="http://test.host"
+    helppagepath="http://test.host"
+  />
+</div>
+`;

spec/frontend/ide/components/pipelines/list_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import List from '~/ide/components/pipelines/list.vue';
+import JobsList from '~/ide/components/jobs/list.vue';
+import Tab from '~/vue_shared/components/tabs/tab.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { TEST_HOST } from 'helpers/test_constants';
+import { pipelines } from '../../../../javascripts/ide/mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('IDE pipelines list', () => {
+  let wrapper;
+
+  const defaultState = {
+    links: { ciHelpPagePath: TEST_HOST },
+    pipelinesEmptyStateSvgPath: TEST_HOST,
+    pipelines: {
+      stages: [],
+      failedStages: [],
+      isLoadingJobs: false,
+    },
+  };
+
+  const fetchLatestPipelineMock = jest.fn();
+  const failedStagesGetterMock = jest.fn().mockReturnValue([]);
+
+  const createComponent = (state = {}) => {
+    const { pipelines: pipelinesState, ...restOfState } = state;
+    const { defaultPipelines, ...defaultRestOfState } = defaultState;
+
+    const fakeStore = new Vuex.Store({
+      getters: { currentProject: () => ({ web_url: 'some/url ' }) },
+      state: {
+        ...defaultRestOfState,
+        ...restOfState,
+      },
+      modules: {
+        pipelines: {
+          namespaced: true,
+          state: {
+            ...defaultPipelines,
+            ...pipelinesState,
+          },
+          actions: {
+            fetchLatestPipeline: fetchLatestPipelineMock,
+          },
+          getters: {
+            jobsCount: () => 1,
+            failedJobsCount: () => 1,
+            failedStages: failedStagesGetterMock,
+            pipelineFailed: () => false,
+          },
+          methods: {
+            fetchLatestPipeline: jest.fn(),
+          },
+        },
+      },
+    });
+
+    wrapper = shallowMount(List, {
+      localVue,
+      store: fakeStore,
+      sync: false,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('fetches latest pipeline', () => {
+    createComponent();
+
+    expect(fetchLatestPipelineMock).toHaveBeenCalled();
+  });
+
+  describe('when loading', () => {
+    let defaultPipelinesLoadingState;
+    beforeAll(() => {
+      defaultPipelinesLoadingState = {
+        ...defaultState.pipelines,
+        isLoadingPipeline: true,
+      };
+    });
+
+    it('does not render when pipeline has loaded before', () => {
+      createComponent({
+        pipelines: {
+          ...defaultPipelinesLoadingState,
+          hasLoadedPipeline: true,
+        },
+      });
+
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    });
+
+    it('renders loading state', () => {
+      createComponent({
+        pipelines: {
+          ...defaultPipelinesLoadingState,
+          hasLoadedPipeline: false,
+        },
+      });
+
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    });
+  });
+
+  describe('when loaded', () => {
+    let defaultPipelinesLoadedState;
+    beforeAll(() => {
+      defaultPipelinesLoadedState = {
+        ...defaultState.pipelines,
+        isLoadingPipeline: false,
+        hasLoadedPipeline: true,
+      };
+    });
+
+    it('renders empty state when no latestPipeline', () => {
+      createComponent({ pipelines: { ...defaultPipelinesLoadedState, latestPipeline: null } });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    describe('with latest pipeline loaded', () => {
+      let withLatestPipelineState;
+      beforeAll(() => {
+        withLatestPipelineState = {
+          ...defaultPipelinesLoadedState,
+          latestPipeline: pipelines[0],
+        };
+      });
+
+      it('renders ci icon', () => {
+        createComponent({ pipelines: withLatestPipelineState });
+        expect(wrapper.find(CiIcon).exists()).toBe(true);
+      });
+
+      it('renders pipeline data', () => {
+        createComponent({ pipelines: withLatestPipelineState });
+
+        expect(wrapper.text()).toContain('#1');
+      });
+
+      it('renders list of jobs', () => {
+        const stages = [];
+        const isLoadingJobs = true;
+        createComponent({ pipelines: { ...withLatestPipelineState, stages, isLoadingJobs } });
+
+        const jobProps = wrapper
+          .findAll(Tab)
+          .at(0)
+          .find(JobsList)
+          .props();
+        expect(jobProps.stages).toBe(stages);
+        expect(jobProps.loading).toBe(isLoadingJobs);
+      });
+
+      it('renders list of failed jobs', () => {
+        const failedStages = [];
+        failedStagesGetterMock.mockReset().mockReturnValue(failedStages);
+        const isLoadingJobs = true;
+        createComponent({ pipelines: { ...withLatestPipelineState, isLoadingJobs } });
+
+        const jobProps = wrapper
+          .findAll(Tab)
+          .at(1)
+          .find(JobsList)
+          .props();
+        expect(jobProps.stages).toBe(failedStages);
+        expect(jobProps.loading).toBe(isLoadingJobs);
+      });
+
+      describe('with YAML error', () => {
+        it('renders YAML error', () => {
+          const yamlError = 'test yaml error';
+          createComponent({
+            pipelines: {
+              ...defaultPipelinesLoadedState,
+              latestPipeline: { ...pipelines[0], yamlError },
+            },
+          });
+
+          expect(wrapper.text()).toContain('Found errors in your .gitlab-ci.yml:');
+          expect(wrapper.text()).toContain(yamlError);
+        });
+      });
+    });
+  });
+});

spec/javascripts/ide/components/pipelines/list_spec.js

-import Vue from 'vue';
-import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
-import { createStore } from '~/ide/stores';
-import List from '~/ide/components/pipelines/list.vue';
-import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
-import { pipelines, projectData, stages, jobs } from '../../mock_data';
-
-describe('IDE pipelines list', () => {
-  const Component = Vue.extend(List);
-  let vm;
-  let mock;
-
-  const findLoadingState = () => vm.$el.querySelector('.loading-container');
-
-  beforeEach(done => {
-    const store = createStore();
-
-    mock = new MockAdapter(axios);
-
-    store.state.currentProjectId = 'abc/def';
-    store.state.currentBranchId = 'master';
-    store.state.projects['abc/def'] = {
-      ...projectData,
-      path_with_namespace: 'abc/def',
-      branches: {
-        master: { commit: { id: '123' } },
-      },
-    };
-    store.state.links = { ciHelpPagePath: gl.TEST_HOST };
-    store.state.pipelinesEmptyStateSvgPath = gl.TEST_HOST;
-    store.state.pipelines.stages = stages.map((mappedState, i) => ({
-      ...mappedState,
-      id: i,
-      dropdownPath: mappedState.dropdown_path,
-      jobs: [...jobs],
-      isLoading: false,
-      isCollapsed: false,
-    }));
-
-    mock
-      .onGet('/abc/def/commit/123/pipelines')
-      .replyOnce(200, { pipelines: [...pipelines] }, { 'poll-interval': '-1' });
-
-    vm = createComponentWithStore(Component, store).$mount();
-
-    setTimeout(done);
-  });
-
-  afterEach(done => {
-    vm.$destroy();
-    mock.restore();
-
-    vm.$store
-      .dispatch('pipelines/stopPipelinePolling')
-      .then(() => vm.$store.dispatch('pipelines/clearEtagPoll'))
-      .then(done)
-      .catch(done.fail);
-  });
-
-  it('renders pipeline data', () => {
-    expect(vm.$el.textContent).toContain('#1');
-  });
-
-  it('renders CI icon', () => {
-    expect(vm.$el.querySelector('.ci-status-icon-failed')).not.toBe(null);
-  });
-
-  it('renders list of jobs', () => {
-    expect(vm.$el.querySelectorAll('.tab-pane:first-child .ide-job-item').length).toBe(
-      jobs.length * stages.length,
-    );
-  });
-
-  it('renders list of failed jobs on failed jobs tab', done => {
-    vm.$el.querySelectorAll('.tab-links a')[1].click();
-
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelectorAll('.tab-pane.active .ide-job-item').length).toBe(2);
-
-      done();
-    });
-  });
-
-  describe('YAML error', () => {
-    it('renders YAML error', done => {
-      vm.$store.state.pipelines.latestPipeline.yamlError = 'test yaml error';
-
-      vm.$nextTick(() => {
-        expect(vm.$el.textContent).toContain('Found errors in your .gitlab-ci.yml:');
-        expect(vm.$el.textContent).toContain('test yaml error');
-
-        done();
-      });
-    });
-  });
-
-  describe('empty state', () => {
-    it('renders pipelines empty state', done => {
-      vm.$store.state.pipelines.latestPipeline = null;
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.empty-state')).not.toBe(null);
-
-        done();
-      });
-    });
-  });
-
-  describe('loading state', () => {
-    beforeEach(() => {
-      vm.$store.state.pipelines.isLoadingPipeline = true;
-    });
-
-    it('does not render when pipeline has loaded before', done => {
-      vm.$store.state.pipelines.hasLoadedPipeline = true;
-
-      vm.$nextTick()
-        .then(() => {
-          expect(findLoadingState()).toBe(null);
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-
-    it('renders loading state when there is no latest pipeline', done => {
-      vm.$store.state.pipelines.hasLoadedPipeline = false;
-
-      vm.$nextTick()
-        .then(() => {
-          expect(findLoadingState()).not.toBe(null);
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-});

spec/javascripts/ide/mock_data.js

+import { TEST_HOST } from '../test_constants';
+
 export const projectData = {
   id: 1,
   name: 'abcproject',
@@ -50,7 +52,7 @@ export const pipelines = [
 
 export const stages = [
   {
-    dropdown_path: `${gl.TEST_HOST}/testing`,
+    dropdown_path: `${TEST_HOST}/testing`,
     name: 'build',
     status: {
       icon: 'status_failed',
@@ -163,7 +165,7 @@ export const mergeRequests = [
     iid: 1,
     title: 'Test merge request',
     project_id: 1,
-    web_url: `${gl.TEST_HOST}/namespace/project-path/merge_requests/1`,
+    web_url: `${TEST_HOST}/namespace/project-path/merge_requests/1`,
   },
 ];