Migrate issues analytics component spec to jest

ee/spec/javascripts/issues_analytics/components/issues_analytics_spec.js → ee/spec/frontend/issues_analytics/components/issues_analytics_spec.js

+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import Vuex from 'vuex';
+import { TEST_HOST } from 'helpers/test_constants';
 import IssuesAnalytics from 'ee/issues_analytics/components/issues_analytics.vue';
 import EmptyState from 'ee/issues_analytics/components/empty_state.vue';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { createStore } from 'ee/issues_analytics/stores';
 
 const localVue = createLocalVue();
+localVue.use(Vuex);
 
 describe('Issues Analytics component', () => {
-  let vm;
+  let wrapper;
   let store;
   let mountComponent;
+  let axiosMock;
   const mockChartData = { '2017-11': 0, '2017-12': 2 };
 
   beforeEach(() => {
+    axiosMock = new MockAdapter(axios);
     store = createStore();
-    spyOn(store, 'dispatch').and.stub();
+    jest.spyOn(store, 'dispatch').mockImplementation();
 
     mountComponent = data => {
       setFixtures('<div id="mock-filter"></div>');
-      const props = data || {
-        endpoint: gl.TEST_HOST,
+      const propsData = data || {
+        endpoint: TEST_HOST,
         filterBlockEl: document.querySelector('#mock-filter'),
       };
 
-      return shallowMount(localVue.extend(IssuesAnalytics), {
-        propsData: props,
+      return shallowMount(IssuesAnalytics, {
+        localVue,
+        propsData,
         stubs: {
           GlColumnChart: true,
-          EmptyState,
         },
         store,
-        localVue,
-      }).vm;
+      });
     };
 
-    vm = mountComponent();
+    wrapper = mountComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    axiosMock.restore();
   });
 
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findChartContainer = () => wrapper.find('.issues-analytics-chart');
+  const findEmptyState = () => wrapper.find(EmptyState);
+
   it('fetches chart data when mounted', () => {
-    expect(store.dispatch).toHaveBeenCalledWith('issueAnalytics/fetchChartData', gl.TEST_HOST);
+    expect(store.dispatch).toHaveBeenCalledWith('issueAnalytics/fetchChartData', TEST_HOST);
   });
 
-  it('renders loading state when loading', done => {
-    vm.$store.state.issueAnalytics.loading = true;
+  it('renders loading state when loading', () => {
+    wrapper.vm.$store.state.issueAnalytics.loading = true;
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.issues-analytics-loading')).not.toBe(null);
-      expect(vm.$el.querySelector('.issues-analytics-chart')).toBe(null);
-      done();
+    return wrapper.vm.$nextTick(() => {
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findChartContainer().exists()).toBe(false);
     });
   });
 
-  it('renders chart when data is present', done => {
-    vm.$store.state.issueAnalytics.chartData = mockChartData;
+  it('renders chart when data is present', () => {
+    wrapper.vm.$store.state.issueAnalytics.chartData = mockChartData;
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.issues-analytics-chart')).not.toBe(null);
-      done();
+    return wrapper.vm.$nextTick(() => {
+      expect(findChartContainer().exists()).toBe(true);
     });
   });
 
-  it('fetches data when filters are applied', done => {
-    vm.$store.state.issueAnalytics.filters = '?hello=world';
+  it('fetches data when filters are applied', () => {
+    wrapper.vm.$store.state.issueAnalytics.filters = '?hello=world';
 
-    vm.$nextTick(() => {
+    return wrapper.vm.$nextTick(() => {
       expect(store.dispatch).toHaveBeenCalledTimes(2);
-      expect(store.dispatch.calls.argsFor(1)).toEqual([
-        'issueAnalytics/fetchChartData',
-        gl.TEST_HOST,
-      ]);
-      done();
+      expect(store.dispatch.mock.calls[1]).toEqual(['issueAnalytics/fetchChartData', TEST_HOST]);
     });
   });
 
-  it('renders empty state when chart data is empty', done => {
-    vm.$store.state.issueAnalytics.chartData = {};
+  it('renders empty state when chart data is empty', () => {
+    wrapper.vm.$store.state.issueAnalytics.chartData = {};
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.empty-state')).not.toBe(null);
-      expect(vm.showNoDataEmptyState).toBe(true);
-      done();
+    return wrapper.vm.$nextTick(() => {
+      expect(findEmptyState().exists()).toBe(true);
+      expect(wrapper.vm.showNoDataEmptyState).toBe(true);
     });
   });
 
-  it('renders filters empty state when filters are applied and chart data is empty', done => {
-    vm.$store.state.issueAnalytics.chartData = {};
-    vm.$store.state.issueAnalytics.filters = '?hello=world';
+  it('renders filters empty state when filters are applied and chart data is empty', () => {
+    wrapper.vm.$store.state.issueAnalytics.chartData = {};
+    wrapper.vm.$store.state.issueAnalytics.filters = '?hello=world';
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.empty-state')).not.toBe(null);
-      expect(vm.showFiltersEmptyState).toBe(true);
-      done();
+    return wrapper.vm.$nextTick(() => {
+      expect(findEmptyState().exists()).toBe(true);
+      expect(wrapper.vm.showFiltersEmptyState).toBe(true);
     });
   });
 });