Merge branch 'vs-refactor-pipelines-list-spec' into 'master'

Refactor pipelines list spec for Vuex upgrade

See merge request gitlab-org/gitlab!40707

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

@@ -22,11 +22,11 @@ describe('IDE pipelines list', () => {
   const defaultState = {
     links: { ciHelpPagePath: TEST_HOST },
     pipelinesEmptyStateSvgPath: TEST_HOST,
-    pipelines: {
+  };
+  const defaultPipelinesState = {
     stages: [],
     failedStages: [],
     isLoadingJobs: false,
-    },
   };
 
   const fetchLatestPipelineMock = jest.fn();
@@ -34,23 +34,20 @@ describe('IDE pipelines list', () => {
   const failedStagesGetterMock = jest.fn().mockReturnValue([]);
   const fakeProjectPath = 'alpha/beta';
 
-  const createComponent = (state = {}) => {
-    const { pipelines: pipelinesState, ...restOfState } = state;
-    const { defaultPipelines, ...defaultRestOfState } = defaultState;
-
-    const fakeStore = new Vuex.Store({
+  const createStore = (rootState, pipelinesState) => {
+    return new Vuex.Store({
       getters: {
         currentProject: () => ({ web_url: 'some/url ', path_with_namespace: fakeProjectPath }),
       },
       state: {
-        ...defaultRestOfState,
-        ...restOfState,
+        ...defaultState,
+        ...rootState,
       },
       modules: {
         pipelines: {
           namespaced: true,
           state: {
-            ...defaultPipelines,
+            ...defaultPipelinesState,
             ...pipelinesState,
           },
           actions: {
@@ -69,10 +66,12 @@ describe('IDE pipelines list', () => {
         },
       },
     });
+  };
 
+  const createComponent = (state = {}, pipelinesState = {}) => {
     wrapper = shallowMount(List, {
       localVue,
-      store: fakeStore,
+      store: createStore(state, pipelinesState),
     });
   };
 
@@ -94,31 +93,33 @@ describe('IDE pipelines list', () => {
 
   describe('when loading', () => {
     let defaultPipelinesLoadingState;
+
     beforeAll(() => {
       defaultPipelinesLoadingState = {
-        ...defaultState.pipelines,
         isLoadingPipeline: true,
       };
     });
 
     it('does not render when pipeline has loaded before', () => {
-      createComponent({
-        pipelines: {
+      createComponent(
+        {},
+        {
           ...defaultPipelinesLoadingState,
           hasLoadedPipeline: true,
         },
-      });
+      );
 
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
     });
 
     it('renders loading state', () => {
-      createComponent({
-        pipelines: {
+      createComponent(
+        {},
+        {
           ...defaultPipelinesLoadingState,
           hasLoadedPipeline: false,
         },
-      });
+      );
 
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
@@ -126,21 +127,22 @@ describe('IDE pipelines list', () => {
 
   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 } });
+      createComponent({}, { ...defaultPipelinesLoadedState, latestPipeline: null });
       expect(wrapper.element).toMatchSnapshot();
     });
 
     describe('with latest pipeline loaded', () => {
       let withLatestPipelineState;
+
       beforeAll(() => {
         withLatestPipelineState = {
           ...defaultPipelinesLoadedState,
@@ -149,12 +151,12 @@ describe('IDE pipelines list', () => {
       });
 
       it('renders ci icon', () => {
-        createComponent({ pipelines: withLatestPipelineState });
+        createComponent({}, withLatestPipelineState);
         expect(wrapper.find(CiIcon).exists()).toBe(true);
       });
 
       it('renders pipeline data', () => {
-        createComponent({ pipelines: withLatestPipelineState });
+        createComponent({}, withLatestPipelineState);
 
         expect(wrapper.text()).toContain('#1');
       });
@@ -162,7 +164,7 @@ describe('IDE pipelines list', () => {
       it('renders list of jobs', () => {
         const stages = [];
         const isLoadingJobs = true;
-        createComponent({ pipelines: { ...withLatestPipelineState, stages, isLoadingJobs } });
+        createComponent({}, { ...withLatestPipelineState, stages, isLoadingJobs });
 
         const jobProps = wrapper
           .findAll(Tab)
@@ -177,7 +179,7 @@ describe('IDE pipelines list', () => {
         const failedStages = [];
         failedStagesGetterMock.mockReset().mockReturnValue(failedStages);
         const isLoadingJobs = true;
-        createComponent({ pipelines: { ...withLatestPipelineState, isLoadingJobs } });
+        createComponent({}, { ...withLatestPipelineState, isLoadingJobs });
 
         const jobProps = wrapper
           .findAll(Tab)
@@ -191,12 +193,13 @@ describe('IDE pipelines list', () => {
       describe('with YAML error', () => {
         it('renders YAML error', () => {
           const yamlError = 'test yaml error';
-          createComponent({
-            pipelines: {
+          createComponent(
+            {},
+            {
               ...defaultPipelinesLoadedState,
               latestPipeline: { ...pipelines[0], yamlError },
             },
-          });
+          );
 
           expect(wrapper.text()).toContain('Found errors in your .gitlab-ci.yml:');
           expect(wrapper.text()).toContain(yamlError);