Migrate Releases app to VTU

spec/frontend/releases/components/app_index_spec.js

 import { range as rge } from 'lodash';
-import Vue from 'vue';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import waitForPromises from 'helpers/wait_for_promises';
-import app from '~/releases/components/app_index.vue';
+import ReleasesApp from '~/releases/components/app_index.vue';
 import createStore from '~/releases/stores';
 import listModule from '~/releases/stores/modules/list';
 import api from '~/api';
-import { resetStore } from '../stores/modules/list/helpers';
 import {
   pageInfoHeadersWithoutPagination,
   pageInfoHeadersWithPagination,
@@ -14,30 +13,37 @@ import {
   releases,
 } from '../mock_data';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 describe('Releases App ', () => {
-  const Component = Vue.extend(app);
-  let store;
-  let vm;
-  let releasesPagination;
+  let wrapper;
+
+  const releasesPagination = rge(21).map(index => ({
+    ...convertObjectPropsToCamelCase(release, { deep: true }),
+    tagName: `${index}.00`,
+  }));
 
-  const props = {
+  const defaultProps = {
     projectId: 'gitlab-ce',
     documentationPath: 'help/releases',
     illustrationPath: 'illustration/path',
   };
 
-  beforeEach(() => {
-    store = createStore({ modules: { list: listModule } });
-    releasesPagination = rge(21).map(index => ({
-      ...convertObjectPropsToCamelCase(release, { deep: true }),
-      tagName: `${index}.00`,
-    }));
+  const createComponent = (propsData = defaultProps) => {
+    const store = createStore({ modules: { list: listModule } });
+
+    wrapper = shallowMount(ReleasesApp, {
+      store,
+      localVue,
+      propsData,
     });
+  };
 
   afterEach(() => {
-    resetStore(store);
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('while loading', () => {
@@ -47,16 +53,15 @@ describe('Releases App ', () => {
         // Need to defer the return value here to the next stack,
         // otherwise the loading state disappears before our test even starts.
         .mockImplementation(() => waitForPromises().then(() => ({ data: [], headers: {} })));
-      vm = mountComponentWithStore(Component, { props, store });
+
+      createComponent();
     });
 
     it('renders loading icon', () => {
-      expect(vm.$el.querySelector('.js-loading')).not.toBeNull();
-      expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
-      expect(vm.$el.querySelector('.js-success-state')).toBeNull();
-      expect(vm.$el.querySelector('.gl-pagination')).toBeNull();
-
-      return waitForPromises();
+      expect(wrapper.contains('.js-loading')).toBe(true);
+      expect(wrapper.contains('.js-empty-state')).toBe(false);
+      expect(wrapper.contains('.js-success-state')).toBe(false);
+      expect(wrapper.contains(TablePagination)).toBe(false);
     });
   });
 
@@ -65,14 +70,15 @@ describe('Releases App ', () => {
       jest
         .spyOn(api, 'releases')
         .mockResolvedValue({ data: releases, headers: pageInfoHeadersWithoutPagination });
-      vm = mountComponentWithStore(Component, { props, store });
+
+      createComponent();
     });
 
     it('renders success state', () => {
-      expect(vm.$el.querySelector('.js-loading')).toBeNull();
-      expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
-      expect(vm.$el.querySelector('.js-success-state')).not.toBeNull();
-      expect(vm.$el.querySelector('.gl-pagination')).toBeNull();
+      expect(wrapper.contains('.js-loading')).toBe(false);
+      expect(wrapper.contains('.js-empty-state')).toBe(false);
+      expect(wrapper.contains('.js-success-state')).toBe(true);
+      expect(wrapper.contains(TablePagination)).toBe(true);
     });
   });
 
@@ -81,69 +87,60 @@ describe('Releases App ', () => {
       jest
         .spyOn(api, 'releases')
         .mockResolvedValue({ data: releasesPagination, headers: pageInfoHeadersWithPagination });
-      vm = mountComponentWithStore(Component, { props, store });
+
+      createComponent();
     });
 
     it('renders success state', () => {
-      expect(vm.$el.querySelector('.js-loading')).toBeNull();
-      expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
-      expect(vm.$el.querySelector('.js-success-state')).not.toBeNull();
-      expect(vm.$el.querySelector('.gl-pagination')).not.toBeNull();
+      expect(wrapper.contains('.js-loading')).toBe(false);
+      expect(wrapper.contains('.js-empty-state')).toBe(false);
+      expect(wrapper.contains('.js-success-state')).toBe(true);
+      expect(wrapper.contains(TablePagination)).toBe(true);
     });
   });
 
   describe('with empty request', () => {
     beforeEach(() => {
       jest.spyOn(api, 'releases').mockResolvedValue({ data: [], headers: {} });
-      vm = mountComponentWithStore(Component, { props, store });
+
+      createComponent();
     });
 
     it('renders empty state', () => {
-      expect(vm.$el.querySelector('.js-loading')).toBeNull();
-      expect(vm.$el.querySelector('.js-empty-state')).not.toBeNull();
-      expect(vm.$el.querySelector('.js-success-state')).toBeNull();
-      expect(vm.$el.querySelector('.gl-pagination')).toBeNull();
+      expect(wrapper.contains('.js-loading')).toBe(false);
+      expect(wrapper.contains('.js-empty-state')).toBe(true);
+      expect(wrapper.contains('.js-success-state')).toBe(false);
     });
   });
 
   describe('"New release" button', () => {
-    const findNewReleaseButton = () => vm.$el.querySelector('.js-new-release-btn');
+    const findNewReleaseButton = () => wrapper.find('.js-new-release-btn');
 
     beforeEach(() => {
       jest.spyOn(api, 'releases').mockResolvedValue({ data: [], headers: {} });
     });
 
-    const factory = additionalProps => {
-      vm = mountComponentWithStore(Component, {
-        props: {
-          ...props,
-          ...additionalProps,
-        },
-        store,
-      });
-    };
-
     describe('when the user is allowed to create a new Release', () => {
       const newReleasePath = 'path/to/new/release';
 
       beforeEach(() => {
-        factory({ newReleasePath });
+        createComponent({ ...defaultProps, newReleasePath });
       });
 
       it('renders the "New release" button', () => {
-        expect(findNewReleaseButton()).not.toBeNull();
+        expect(findNewReleaseButton().exists()).toBe(true);
       });
 
       it('renders the "New release" button with the correct href', () => {
-        expect(findNewReleaseButton().getAttribute('href')).toBe(newReleasePath);
+        expect(findNewReleaseButton().attributes('href')).toBe(newReleasePath);
       });
     });
 
     describe('when the user is not allowed to create a new Release', () => {
-      beforeEach(() => factory());
+      beforeEach(() => createComponent());
 
       it('does not render the "New release" button', () => {
-        expect(findNewReleaseButton()).toBeNull();
+        expect(findNewReleaseButton().exists()).toBe(false);
       });
     });
   });