Refactor spec files

Refactor the spec files to reduce `beforeEach`
functions and calls to `createComponent`.

ee/app/assets/javascripts/analytics/repository_analytics/components/group_repository_analytics.vue

@@ -25,7 +25,7 @@ export default {
 
 <template>
   <div>
-    <h4 class="sub-header" data-testid="test-coverage-header">
+    <h4 data-testid="test-coverage-header">
       {{ $options.text.codeCoverageHeader }}
     </h4>
     <download-test-coverage

ee/spec/frontend/analytics/repository_analytics/components/download_test_coverage_spec.js

@@ -28,13 +28,14 @@ describe('Download test coverage component', () => {
     groupFullPath: 'gitlab-org',
   };
 
-  const createComponent = (data = {}) => {
+  const createComponent = () => {
     wrapper = shallowMount(DownloadTestCoverage, {
       localVue,
       data() {
         return {
           hasError: false,
-          ...data,
+          allProjectsSelected: false,
+          selectedProjectIds: [],
         };
       },
       propsData: {
@@ -63,14 +64,14 @@ describe('Download test coverage component', () => {
     });
 
     describe('when there is an error fetching the projects', () => {
-      beforeEach(() => {
-        createComponent({ hasError: true });
-      });
-
       it('displays an alert for the failed query', () => {
+        wrapper.setData({ hasError: true });
+
+        return wrapper.vm.$nextTick().then(() => {
           expect(findAlert().exists()).toBe(true);
         });
       });
+    });
 
     describe('when selecting a project', () => {
       // Due to the fake_date helper, we can always expect today's date to be 2020-07-06
@@ -78,59 +79,50 @@ describe('Download test coverage component', () => {
       const groupAnalyticsCoverageReportsPathWithDates = `${defaultProps.groupAnalyticsCoverageReportsPath}&start_date=2020-06-06&end_date=2020-07-06`;
 
       describe('with all projects selected', () => {
-        beforeEach(() => {
-          createComponent({ allProjectsSelected: true });
-        });
-
         it('renders primary action as a link with no project_ids param', () => {
+          wrapper.setData({ allProjectsSelected: true, selectedProjectIds: [] });
+
+          return wrapper.vm.$nextTick().then(() => {
             expect(findCodeCoverageDownloadButton().attributes('href')).toBe(
               groupAnalyticsCoverageReportsPathWithDates,
             );
           });
         });
-
-      describe('with two or more projects selected without selecting all projects', () => {
-        beforeEach(() => {
-          createComponent({ allProjectsSelected: false, selectedProjectIds: [1, 2] });
       });
 
+      describe('with two or more projects selected without selecting all projects', () => {
         it('renders primary action as a link with two project IDs as parameters', () => {
+          wrapper.setData({ allProjectsSelected: false, selectedProjectIds: [1, 2] });
           const projectIdsQueryParam = `project_ids%5B%5D=1&project_ids%5B%5D=2`;
           const expectedPath = `${groupAnalyticsCoverageReportsPathWithDates}&${projectIdsQueryParam}`;
 
+          return wrapper.vm.$nextTick().then(() => {
             expect(findCodeCoverageDownloadButton().attributes('href')).toBe(expectedPath);
           });
         });
-
-      describe('with one project selected', () => {
-        beforeEach(() => {
-          createComponent({ allProjectsSelected: false, selectedProjectIds: [1] });
       });
 
+      describe('with one project selected', () => {
         it('renders primary action as a link with one project ID as a parameter', () => {
+          wrapper.setData({ allProjectsSelected: false, selectedProjectIds: [1] });
           const projectIdsQueryParam = `project_ids%5B%5D=1`;
           const expectedPath = `${groupAnalyticsCoverageReportsPathWithDates}&${projectIdsQueryParam}`;
 
+          return wrapper.vm.$nextTick().then(() => {
             expect(findCodeCoverageDownloadButton().attributes('href')).toBe(expectedPath);
           });
         });
-
-      describe('with no projects selected', () => {
-        beforeEach(() => {
-          createComponent({ allProjectsSelected: false, selectedProjectIds: [] });
       });
 
+      describe('with no projects selected', () => {
         it('renders a disabled primary action button', () => {
           expect(findCodeCoverageDownloadButton().attributes('disabled')).toBe('true');
         });
       });
 
       describe('when clicking the select all button', () => {
-        beforeEach(() => {
-          createComponent({ allProjectsSelected: false, selectedProjectIds: [] });
-        });
-
         it('selects all projects and removes the disabled attribute from the download button', () => {
+          wrapper.setData({ allProjectsSelected: false, selectedProjectIds: [] });
           clickSelectAllProjectsButton();
 
           return wrapper.vm.$nextTick().then(() => {

ee/spec/frontend/analytics/repository_analytics/components/select_projects_dropdown_spec.js

@@ -53,10 +53,6 @@ describe('Select projects dropdown component', () => {
     });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -128,6 +124,8 @@ describe('Select projects dropdown component', () => {
 
   describe('when there is only one page of projects', () => {
     it('should not render the intersection observer component', () => {
+      createComponent();
+
       expect(findIntersectionObserver().exists()).toBe(false);
     });
   });
@@ -142,47 +140,42 @@ describe('Select projects dropdown component', () => {
     });
 
     describe('when the intersection observer component appears in view', () => {
-      beforeEach(() => {
+      it('makes a query to fetch more projects', () => {
         jest
           .spyOn(wrapper.vm.$apollo.queries.groupProjects, 'fetchMore')
           .mockImplementation(jest.fn().mockResolvedValue());
 
         findIntersectionObserver().vm.$emit('appear');
-        return wrapper.vm.$nextTick();
-      });
 
-      it('makes a query to fetch more projects', () => {
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.vm.$apollo.queries.groupProjects.fetchMore).toHaveBeenCalledTimes(1);
         });
+      });
 
       describe('when the fetchMore query throws an error', () => {
-        beforeEach(() => {
+        it('emits an error event', () => {
           jest.spyOn(wrapper.vm, '$emit');
           jest
             .spyOn(wrapper.vm.$apollo.queries.groupProjects, 'fetchMore')
             .mockImplementation(jest.fn().mockRejectedValue());
 
           findIntersectionObserver().vm.$emit('appear');
-          return wrapper.vm.$nextTick();
-        });
-
-        it('emits an error event', () => {
+          return wrapper.vm.$nextTick().then(() => {
             expect(wrapper.vm.$emit).toHaveBeenCalledWith('projects-query-error');
           });
         });
       });
+    });
 
     describe('when a query is loading a new page of projects', () => {
-      beforeEach(() => {
+      it('should render the loading spinner', () => {
         createComponent({
           data: { projectsPageInfo: { hasNextPage: true } },
           apolloGroupProjects: {
             loading: true,
           },
         });
-      });
 
-      it('should render the loading spinner', () => {
         expect(findLoadingIcon().exists()).toBe(true);
       });
     });