text: import Vuex from 'vuex';
  import TestReports from '~/pipelines/components/test_reports/test_reports.vue';
  import { shallowMount } from '@vue/test-utils';
  import * as actions from '~/pipelines/stores/test_reports/actions';
  import { getJSONFixture } from 'helpers/fixtures';
  
  describe('Test reports app', () => {
    let wrapper;
    let store;
  
    const testReports = getJSONFixture('pipelines/test_report.json');
  
    const loadingSpinner = () => wrapper.find('.js-loading-spinner');
    const testsDetail = () => wrapper.find('.js-tests-detail');
    const noTestsToShow = () => wrapper.find('.js-no-tests-to-show');
  
    const createComponent = (state = {}) => {
      store = new Vuex.Store({
        state: {
          isLoading: false,
          selectedSuite: {},
          testReports,
          ...state,
        },
        actions,
      });
  
      wrapper = shallowMount(TestReports, {
        store,
      });
    };
  
    afterEach(() => {
      wrapper.destroy();
    });
  
    describe('when loading', () => {
      beforeEach(() => createComponent({ isLoading: true }));
  
      it('shows the loading spinner', () => {
        expect(noTestsToShow().exists()).toBe(false);
        expect(testsDetail().exists()).toBe(false);
        expect(loadingSpinner().exists()).toBe(true);
      });
    });
  
    describe('when the api returns no data', () => {
      beforeEach(() => createComponent({ testReports: {} }));
  
      it('displays that there are no tests to show', () => {
        const noTests = noTestsToShow();
  
        expect(noTests.exists()).toBe(true);
        expect(noTests.text()).toBe('There are no tests to show.');
      });
    });
  
    describe('when the api returns data', () => {
      beforeEach(() => createComponent());
  
      it('sets testReports and shows tests', () => {
        expect(wrapper.vm.testReports).toBeTruthy();
        expect(wrapper.vm.showTests).toBeTruthy();
      });
    });
  });
  