11 files changed, 266 insertions, 132 deletions

diff --git a/spec/frontend/pipelines/components/pipeline_tabs_spec.js b/spec/frontend/pipelines/components/pipeline_tabs_spec.js
new file mode 100644
index 00000000000..e18c3edbad9
--- /dev/null
+++ b/spec/frontend/pipelines/components/pipeline_tabs_spec.js
@@ -0,0 +1,61 @@
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import PipelineTabs from '~/pipelines/components/pipeline_tabs.vue';
+import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue';
+import Dag from '~/pipelines/components/dag/dag.vue';
+import JobsApp from '~/pipelines/components/jobs/jobs_app.vue';
+import TestReports from '~/pipelines/components/test_reports/test_reports.vue';
+
+describe('The Pipeline Tabs', () => {
+  let wrapper;
+
+  const findDagTab = () => wrapper.findByTestId('dag-tab');
+  const findFailedJobsTab = () => wrapper.findByTestId('failed-jobs-tab');
+  const findJobsTab = () => wrapper.findByTestId('jobs-tab');
+  const findPipelineTab = () => wrapper.findByTestId('pipeline-tab');
+  const findTestsTab = () => wrapper.findByTestId('tests-tab');
+
+  const findDagApp = () => wrapper.findComponent(Dag);
+  const findFailedJobsApp = () => wrapper.findComponent(JobsApp);
+  const findJobsApp = () => wrapper.findComponent(JobsApp);
+  const findPipelineApp = () => wrapper.findComponent(PipelineGraphWrapper);
+  const findTestsApp = () => wrapper.findComponent(TestReports);
+
+  const createComponent = (propsData = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(PipelineTabs, {
+        propsData,
+        stubs: {
+          Dag: { template: '<div id="dag"/>' },
+          JobsApp: { template: '<div class="jobs" />' },
+          PipelineGraph: { template: '<div id="graph" />' },
+          TestReports: { template: '<div id="tests" />' },
+        },
+      }),
+    );
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  // The failed jobs MUST be removed from here and tested individually once
+  // the logic for the tab is implemented.
+  describe('Tabs', () => {
+    it.each`
+      tabName          | tabComponent         | appComponent
+      ${'Pipeline'}    | ${findPipelineTab}   | ${findPipelineApp}
+      ${'Dag'}         | ${findDagTab}        | ${findDagApp}
+      ${'Jobs'}        | ${findJobsTab}       | ${findJobsApp}
+      ${'Failed Jobs'} | ${findFailedJobsTab} | ${findFailedJobsApp}
+      ${'Tests'}       | ${findTestsTab}      | ${findTestsApp}
+    `('shows $tabName tab and its associated component', ({ appComponent, tabComponent }) => {
+      expect(tabComponent().exists()).toBe(true);
+      expect(appComponent().exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
index 0822b293f75..6c743f92116 100644
--- a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
@@ -173,7 +173,7 @@ describe('Pipelines filtered search', () => {
         { type: 'filtered-search-term', value: { data: '' } },
       ];
 
-      expect(findFilteredSearch().props('value')).toEqual(expectedValueProp);
+      expect(findFilteredSearch().props('value')).toMatchObject(expectedValueProp);
       expect(findFilteredSearch().props('value')).toHaveLength(expectedValueProp.length);
     });
   });
diff --git a/spec/frontend/pipelines/empty_state/ci_templates_spec.js b/spec/frontend/pipelines/empty_state/ci_templates_spec.js
new file mode 100644
index 00000000000..606fdc9cac1
--- /dev/null
+++ b/spec/frontend/pipelines/empty_state/ci_templates_spec.js
@@ -0,0 +1,85 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import CiTemplates from '~/pipelines/components/pipelines_list/empty_state/ci_templates.vue';
+
+const pipelineEditorPath = '/-/ci/editor';
+const suggestedCiTemplates = [
+  { name: 'Android', logo: '/assets/illustrations/logos/android.svg' },
+  { name: 'Bash', logo: '/assets/illustrations/logos/bash.svg' },
+  { name: 'C++', logo: '/assets/illustrations/logos/c_plus_plus.svg' },
+];
+
+describe('CI Templates', () => {
+  let wrapper;
+  let trackingSpy;
+
+  const createWrapper = () => {
+    return shallowMountExtended(CiTemplates, {
+      provide: {
+        pipelineEditorPath,
+        suggestedCiTemplates,
+      },
+    });
+  };
+
+  const findTemplateDescription = () => wrapper.findByTestId('template-description');
+  const findTemplateLink = () => wrapper.findByTestId('template-link');
+  const findTemplateName = () => wrapper.findByTestId('template-name');
+  const findTemplateLogo = () => wrapper.findByTestId('template-logo');
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('renders template list', () => {
+    it('renders all suggested templates', () => {
+      const content = wrapper.text();
+
+      expect(content).toContain('Android', 'Bash', 'C++');
+    });
+
+    it('has the correct template name', () => {
+      expect(findTemplateName().text()).toBe('Android');
+    });
+
+    it('links to the correct template', () => {
+      expect(findTemplateLink().attributes('href')).toBe(
+        pipelineEditorPath.concat('?template=Android'),
+      );
+    });
+
+    it('has the description of the template', () => {
+      expect(findTemplateDescription().text()).toBe(
+        'CI/CD template to test and deploy your Android project.',
+      );
+    });
+
+    it('has the right logo of the template', () => {
+      expect(findTemplateLogo().attributes('src')).toBe('/assets/illustrations/logos/android.svg');
+    });
+  });
+
+  describe('tracking', () => {
+    beforeEach(() => {
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('sends an event when template is clicked', () => {
+      findTemplateLink().vm.$emit('click');
+
+      expect(trackingSpy).toHaveBeenCalledTimes(1);
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'template_clicked', {
+        label: 'Android',
+      });
+    });
+  });
+});
diff --git a/spec/frontend/pipelines/pipelines_ci_templates_spec.js b/spec/frontend/pipelines/empty_state/pipelines_ci_templates_spec.js
index 7064f7448ec..14860f20317 100644
--- a/spec/frontend/pipelines/pipelines_ci_templates_spec.js
+++ b/spec/frontend/pipelines/empty_state/pipelines_ci_templates_spec.js
@@ -1,12 +1,12 @@
 import '~/commons';
 import { GlButton, GlSprintf } from '@gitlab/ui';
-import { sprintf } from '~/locale';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { mockTracking } from 'helpers/tracking_helper';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { stubExperiments } from 'helpers/experimentation_helper';
 import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
 import ExperimentTracking from '~/experimentation/experiment_tracking';
-import PipelinesCiTemplate from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
+import PipelinesCiTemplates from '~/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates.vue';
+import CiTemplates from '~/pipelines/components/pipelines_list/empty_state/ci_templates.vue';
 import {
   RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME,
   RUNNERS_SETTINGS_LINK_CLICKED_EVENT,
@@ -16,11 +16,6 @@ import {
 } from '~/pipeline_editor/constants';
 
 const pipelineEditorPath = '/-/ci/editor';
-const suggestedCiTemplates = [
-  { name: 'Android', logo: '/assets/illustrations/logos/android.svg' },
-  { name: 'Bash', logo: '/assets/illustrations/logos/bash.svg' },
-  { name: 'C++', logo: '/assets/illustrations/logos/c_plus_plus.svg' },
-];
 
 jest.mock('~/experimentation/experiment_tracking');
 
@@ -29,21 +24,17 @@ describe('Pipelines CI Templates', () => {
   let trackingSpy;
 
   const createWrapper = (propsData = {}, stubs = {}) => {
-    return shallowMountExtended(PipelinesCiTemplate, {
+    return shallowMountExtended(PipelinesCiTemplates, {
       provide: {
         pipelineEditorPath,
-        suggestedCiTemplates,
       },
       propsData,
       stubs,
     });
   };
 
-  const findTestTemplateLinks = () => wrapper.findAll('[data-testid="test-template-link"]');
-  const findTemplateDescriptions = () => wrapper.findAll('[data-testid="template-description"]');
-  const findTemplateLinks = () => wrapper.findAll('[data-testid="template-link"]');
-  const findTemplateNames = () => wrapper.findAll('[data-testid="template-name"]');
-  const findTemplateLogos = () => wrapper.findAll('[data-testid="template-logo"]');
+  const findTestTemplateLink = () => wrapper.findByTestId('test-template-link');
+  const findCiTemplates = () => wrapper.findComponent(CiTemplates);
   const findSettingsLink = () => wrapper.findByTestId('settings-link');
   const findDocumentationLink = () => wrapper.findByTestId('documentation-link');
   const findSettingsButton = () => wrapper.findByTestId('settings-button');
@@ -59,63 +50,24 @@ describe('Pipelines CI Templates', () => {
     });
 
     it('links to the getting started template', () => {
-      expect(findTestTemplateLinks().at(0).attributes('href')).toBe(
+      expect(findTestTemplateLink().attributes('href')).toBe(
         pipelineEditorPath.concat('?template=Getting-Started'),
       );
     });
   });
 
-  describe('renders template list', () => {
-    beforeEach(() => {
-      wrapper = createWrapper();
-    });
-
-    it('renders all suggested templates', () => {
-      const content = wrapper.text();
-
-      expect(content).toContain('Android', 'Bash', 'C++');
-    });
-
-    it('has the correct template name', () => {
-      expect(findTemplateNames().at(0).text()).toBe('Android');
-    });
-
-    it('links to the correct template', () => {
-      expect(findTemplateLinks().at(0).attributes('href')).toBe(
-        pipelineEditorPath.concat('?template=Android'),
-      );
-    });
-
-    it('has the description of the template', () => {
-      expect(findTemplateDescriptions().at(0).text()).toBe(
-        sprintf(I18N.templates.description, { name: 'Android' }),
-      );
-    });
-
-    it('has the right logo of the template', () => {
-      expect(findTemplateLogos().at(0).attributes('src')).toBe(
-        '/assets/illustrations/logos/android.svg',
-      );
-    });
-  });
-
   describe('tracking', () => {
     beforeEach(() => {
       wrapper = createWrapper();
       trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
     });
 
-    it('sends an event when template is clicked', () => {
-      findTemplateLinks().at(0).vm.$emit('click');
-
-      expect(trackingSpy).toHaveBeenCalledTimes(1);
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'template_clicked', {
-        label: 'Android',
-      });
+    afterEach(() => {
+      unmockTracking();
     });
 
     it('sends an event when Getting-Started template is clicked', () => {
-      findTestTemplateLinks().at(0).vm.$emit('click');
+      findTestTemplateLink().vm.$emit('click');
 
       expect(trackingSpy).toHaveBeenCalledTimes(1);
       expect(trackingSpy).toHaveBeenCalledWith(undefined, 'template_clicked', {
@@ -198,8 +150,8 @@ describe('Pipelines CI Templates', () => {
       });
 
       it(`renders the templates: ${templatesRendered}`, () => {
-        expect(findTestTemplateLinks().exists()).toBe(templatesRendered);
-        expect(findTemplateLinks().exists()).toBe(templatesRendered);
+        expect(findTestTemplateLink().exists()).toBe(templatesRendered);
+        expect(findCiTemplates().exists()).toBe(templatesRendered);
       });
     },
   );
diff --git a/spec/frontend/pipelines/empty_state_spec.js b/spec/frontend/pipelines/empty_state_spec.js
index 31b74a06efd..46dad4a035c 100644
--- a/spec/frontend/pipelines/empty_state_spec.js
+++ b/spec/frontend/pipelines/empty_state_spec.js
@@ -1,7 +1,7 @@
 import '~/commons';
 import { mount } from '@vue/test-utils';
 import EmptyState from '~/pipelines/components/pipelines_list/empty_state.vue';
-import PipelinesCiTemplates from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
+import PipelinesCiTemplates from '~/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates.vue';
 
 describe('Pipelines Empty State', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/graph/action_component_spec.js b/spec/frontend/pipelines/graph/action_component_spec.js
index fab6e6887b7..6e5aa572ec0 100644
--- a/spec/frontend/pipelines/graph/action_component_spec.js
+++ b/spec/frontend/pipelines/graph/action_component_spec.js
@@ -48,17 +48,14 @@ describe('pipeline graph action component', () => {
   });
 
   describe('on click', () => {
-    it('emits `pipelineActionRequestComplete` after a successful request', (done) => {
+    it('emits `pipelineActionRequestComplete` after a successful request', async () => {
       jest.spyOn(wrapper.vm, '$emit');
 
       findButton().trigger('click');
 
-      waitForPromises()
-        .then(() => {
-          expect(wrapper.vm.$emit).toHaveBeenCalledWith('pipelineActionRequestComplete');
-          done();
-        })
-        .catch(done.fail);
+      await waitForPromises();
+
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('pipelineActionRequestComplete');
     });
 
     it('renders a loading icon while waiting for request', async () => {
diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 8bc6c086b9d..cb7073fb5f5 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -30,6 +30,7 @@ import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
 import * as parsingUtils from '~/pipelines/components/parsing_utils';
 import getPipelineHeaderData from '~/pipelines/graphql/queries/get_pipeline_header_data.query.graphql';
 import * as sentryUtils from '~/pipelines/utils';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { mockRunningPipelineHeaderData } from '../mock_data';
 import { mapCallouts, mockCalloutsResponse, mockPipelineResponse } from './mock_data';
 
@@ -55,6 +56,7 @@ describe('Pipeline graph wrapper', () => {
     wrapper.find(StageColumnComponent).findAll('[data-testid="stage-column-group"]');
   const getViewSelector = () => wrapper.find(GraphViewSelector);
   const getViewSelectorTrip = () => getViewSelector().findComponent(GlAlert);
+  const getLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
 
   const createComponent = ({
     apolloProvider,
@@ -376,6 +378,10 @@ describe('Pipeline graph wrapper', () => {
         localStorage.clear();
       });
 
+      it('sets the asString prop on the LocalStorageSync component', () => {
+        expect(getLocalStorageSync().props('asString')).toBe(true);
+      });
+
       it('reads the view type from localStorage when available', () => {
         const viewSelectorNeedsSegment = wrapper
           .find(GlButtonGroup)
diff --git a/spec/frontend/pipelines/pipeline_triggerer_spec.js b/spec/frontend/pipelines/pipeline_triggerer_spec.js
index 701b1691c7b..58bfb68e85c 100644
--- a/spec/frontend/pipelines/pipeline_triggerer_spec.js
+++ b/spec/frontend/pipelines/pipeline_triggerer_spec.js
@@ -1,17 +1,11 @@
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import pipelineTriggerer from '~/pipelines/components/pipelines_list/pipeline_triggerer.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 describe('Pipelines Triggerer', () => {
   let wrapper;
 
-  const expectComponentWithProps = (Component, props = {}) => {
-    const componentWrapper = wrapper.find(Component);
-    expect(componentWrapper.isVisible()).toBe(true);
-    expect(componentWrapper.props()).toEqual(expect.objectContaining(props));
-  };
-
   const mockData = {
     pipeline: {
       user: {
@@ -22,40 +16,65 @@ describe('Pipelines Triggerer', () => {
     },
   };
 
-  const createComponent = () => {
-    wrapper = shallowMount(pipelineTriggerer, {
-      propsData: mockData,
+  const createComponent = (props) => {
+    wrapper = shallowMountExtended(pipelineTriggerer, {
+      propsData: {
+        ...props,
+      },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('should render pipeline triggerer table cell', () => {
-    expect(wrapper.find('[data-testid="pipeline-triggerer"]').exists()).toBe(true);
-  });
+  const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
+  const findAvatar = () => wrapper.findComponent(GlAvatar);
+  const findTriggerer = () => wrapper.findByText('API');
+
+  describe('when user was a triggerer', () => {
+    beforeEach(() => {
+      createComponent(mockData);
+    });
+
+    it('should render pipeline triggerer table cell', () => {
+      expect(wrapper.find('[data-testid="pipeline-triggerer"]').exists()).toBe(true);
+    });
+
+    it('should render only user avatar', () => {
+      expect(findAvatarLink().exists()).toBe(true);
+      expect(findTriggerer().exists()).toBe(false);
+    });
+
+    it('should set correct props on avatar link component', () => {
+      expect(findAvatarLink().attributes()).toMatchObject({
+        title: mockData.pipeline.user.name,
+        href: mockData.pipeline.user.path,
+      });
+    });
 
-  it('should pass triggerer information when triggerer is provided', () => {
-    expectComponentWithProps(UserAvatarLink, {
-      linkHref: mockData.pipeline.user.path,
-      tooltipText: mockData.pipeline.user.name,
-      imgSrc: mockData.pipeline.user.avatar_url,
+    it('should add tooltip to avatar link', () => {
+      const tooltip = getBinding(findAvatarLink().element, 'gl-tooltip');
+
+      expect(tooltip).toBeDefined();
+    });
+
+    it('should set correct props on avatar component', () => {
+      expect(findAvatar().attributes().src).toBe(mockData.pipeline.user.avatar_url);
     });
   });
 
-  it('should render "API" when no triggerer is provided', async () => {
-    wrapper.setProps({
-      pipeline: {
-        user: null,
-      },
+  describe('when API was a triggerer', () => {
+    beforeEach(() => {
+      createComponent({ pipeline: {} });
     });
 
-    await nextTick();
-    expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
+    it('should render label only', () => {
+      expect(findAvatarLink().exists()).toBe(false);
+      expect(findTriggerer().exists()).toBe(true);
+    });
   });
 });
diff --git a/spec/frontend/pipelines/pipeline_url_spec.js b/spec/frontend/pipelines/pipeline_url_spec.js
index 2a0aeed917c..c6104a13216 100644
--- a/spec/frontend/pipelines/pipeline_url_spec.js
+++ b/spec/frontend/pipelines/pipeline_url_spec.js
@@ -1,5 +1,6 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PipelineUrlComponent from '~/pipelines/components/pipelines_list/pipeline_url.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { mockPipeline, mockPipelineBranch, mockPipelineTag } from './mock_data';
 
 const projectPath = 'test/test';
@@ -57,6 +58,30 @@ describe('Pipeline Url Component', () => {
     expect(findCommitShortSha().exists()).toBe(true);
   });
 
+  describe('commit user avatar', () => {
+    it('renders when commit author exists', () => {
+      const pipelineBranch = mockPipelineBranch();
+      const { avatar_url, name, path } = pipelineBranch.pipeline.commit.author;
+      createComponent(pipelineBranch);
+
+      const component = wrapper.findComponent(UserAvatarLink);
+      expect(component.exists()).toBe(true);
+      expect(component.props()).toMatchObject({
+        imgSize: 16,
+        imgSrc: avatar_url,
+        imgAlt: name,
+        linkHref: path,
+        tooltipText: name,
+      });
+    });
+
+    it('does not render when commit author does not exist', () => {
+      createComponent();
+
+      expect(wrapper.findComponent(UserAvatarLink).exists()).toBe(false);
+    });
+  });
+
   it('should render commit icon tooltip', () => {
     createComponent({}, true);
 
diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js
index 20ed12cd1f5..d2b30c93746 100644
--- a/spec/frontend/pipelines/pipelines_spec.js
+++ b/spec/frontend/pipelines/pipelines_spec.js
@@ -14,7 +14,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import NavigationControls from '~/pipelines/components/pipelines_list/nav_controls.vue';
 import PipelinesComponent from '~/pipelines/components/pipelines_list/pipelines.vue';
-import PipelinesCiTemplates from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
+import PipelinesCiTemplates from '~/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates.vue';
 import PipelinesTableComponent from '~/pipelines/components/pipelines_list/pipelines_table.vue';
 import { RAW_TEXT_WARNING } from '~/pipelines/constants';
 import Store from '~/pipelines/stores/pipelines_store';
diff --git a/spec/frontend/pipelines/test_reports/stores/actions_spec.js b/spec/frontend/pipelines/test_reports/stores/actions_spec.js
index 84a9f4776b9..d5acb115bc1 100644
--- a/spec/frontend/pipelines/test_reports/stores/actions_spec.js
+++ b/spec/frontend/pipelines/test_reports/stores/actions_spec.js
@@ -38,29 +38,25 @@ describe('Actions TestReports Store', () => {
       mock.onGet(summaryEndpoint).replyOnce(200, summary, {});
     });
 
-    it('sets testReports and shows tests', (done) => {
-      testAction(
+    it('sets testReports and shows tests', () => {
+      return testAction(
         actions.fetchSummary,
         null,
         state,
         [{ type: types.SET_SUMMARY, payload: summary }],
         [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
-        done,
       );
     });
 
-    it('should create flash on API error', (done) => {
-      testAction(
+    it('should create flash on API error', async () => {
+      await testAction(
         actions.fetchSummary,
         null,
         { summaryEndpoint: null },
         [],
         [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
-        () => {
-          expect(createFlash).toHaveBeenCalled();
-          done();
-        },
       );
+      expect(createFlash).toHaveBeenCalled();
     });
   });
 
@@ -73,87 +69,80 @@ describe('Actions TestReports Store', () => {
         .replyOnce(200, testReports.test_suites[0], {});
     });
 
-    it('sets test suite and shows tests', (done) => {
+    it('sets test suite and shows tests', () => {
       const suite = testReports.test_suites[0];
       const index = 0;
 
-      testAction(
+      return testAction(
         actions.fetchTestSuite,
         index,
         { ...state, testReports },
         [{ type: types.SET_SUITE, payload: { suite, index } }],
         [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
-        done,
       );
     });
 
-    it('should create flash on API error', (done) => {
+    it('should create flash on API error', async () => {
       const index = 0;
 
-      testAction(
+      await testAction(
         actions.fetchTestSuite,
         index,
         { ...state, testReports, suiteEndpoint: null },
         [],
         [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
-        () => {
-          expect(createFlash).toHaveBeenCalled();
-          done();
-        },
       );
+      expect(createFlash).toHaveBeenCalled();
     });
 
     describe('when we already have the suite data', () => {
-      it('should not fetch suite', (done) => {
+      it('should not fetch suite', () => {
         const index = 0;
         testReports.test_suites[0].hasFullSuite = true;
 
-        testAction(actions.fetchTestSuite, index, { ...state, testReports }, [], [], done);
+        return testAction(actions.fetchTestSuite, index, { ...state, testReports }, [], []);
       });
     });
   });
 
   describe('set selected suite index', () => {
-    it('sets selectedSuiteIndex', (done) => {
+    it('sets selectedSuiteIndex', () => {
       const selectedSuiteIndex = 0;
 
-      testAction(
+      return testAction(
         actions.setSelectedSuiteIndex,
         selectedSuiteIndex,
         { ...state, hasFullReport: true },
         [{ type: types.SET_SELECTED_SUITE_INDEX, payload: selectedSuiteIndex }],
         [],
-        done,
       );
     });
   });
 
   describe('remove selected suite index', () => {
-    it('sets selectedSuiteIndex to null', (done) => {
-      testAction(
+    it('sets selectedSuiteIndex to null', () => {
+      return testAction(
         actions.removeSelectedSuiteIndex,
         {},
         state,
         [{ type: types.SET_SELECTED_SUITE_INDEX, payload: null }],
         [],
-        done,
       );
     });
   });
 
   describe('toggles loading', () => {
-    it('sets isLoading to true', (done) => {
-      testAction(actions.toggleLoading, {}, state, [{ type: types.TOGGLE_LOADING }], [], done);
+    it('sets isLoading to true', () => {
+      return testAction(actions.toggleLoading, {}, state, [{ type: types.TOGGLE_LOADING }], []);
     });
 
-    it('toggles isLoading to false', (done) => {
-      testAction(
+    it('toggles isLoading to false', () => {
+      return testAction(
         actions.toggleLoading,
         {},
         { ...state, isLoading: true },
         [{ type: types.TOGGLE_LOADING }],
         [],
-        done,
       );
     });
   });