1 files changed, 38 insertions, 55 deletions
diff --git a/spec/frontend/repository/components/preview/index_spec.js b/spec/frontend/repository/components/preview/index_spec.js
index d4c746b67d6..8a88c5b9c61 100644
--- a/spec/frontend/repository/components/preview/index_spec.js
+++ b/spec/frontend/repository/components/preview/index_spec.js
@@ -1,77 +1,60 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { handleLocationHash } from '~/lib/utils/common_utils';
+import waitForPromises from 'helpers/wait_for_promises';
 import Preview from '~/repository/components/preview/index.vue';
 
+const PROPS_DATA = {
+  blob: {
+    webPath: 'http://test.com',
+    name: 'README.md',
+  },
+};
+
+const MOCK_README_DATA = {
+  __typename: 'ReadmeFile',
+  html: '<div class="blob">test</div>',
+};
+
 jest.mock('~/lib/utils/common_utils');
 
-let vm;
-let $apollo;
+Vue.use(VueApollo);
+
+let wrapper;
+let mockApollo;
+let mockReadmeData;
 
-function factory(blob, loading) {
-  $apollo = {
-    queries: {
-      readme: {
-        query: jest.fn().mockReturnValue(Promise.resolve({})),
-        loading,
-      },
-    },
-  };
+const mockResolvers = {
+  Query: {
+    readme: () => mockReadmeData(),
+  },
+};
 
-  vm = shallowMount(Preview, {
-    propsData: {
-      blob,
-    },
-    mocks: {
-      $apollo,
-    },
+function createComponent() {
+  mockApollo = createMockApollo([], mockResolvers);
+
+  return shallowMount(Preview, {
+    propsData: PROPS_DATA,
+    apolloProvider: mockApollo,
   });
 }
 
 describe('Repository file preview component', () => {
-  afterEach(() => {
-    vm.destroy();
-  });
-
-  it('renders file HTML', async () => {
-    factory({
-      webPath: 'http://test.com',
-      name: 'README.md',
-    });
-
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    vm.setData({ readme: { html: '<div class="blob">test</div>' } });
-
-    await nextTick();
-    expect(vm.element).toMatchSnapshot();
+  beforeEach(() => {
+    mockReadmeData = jest.fn();
+    wrapper = createComponent();
+    mockReadmeData.mockResolvedValue(MOCK_README_DATA);
   });
 
   it('handles hash after render', async () => {
-    factory({
-      webPath: 'http://test.com',
-      name: 'README.md',
-    });
-
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    vm.setData({ readme: { html: '<div class="blob">test</div>' } });
-
-    await nextTick();
+    await waitForPromises();
     expect(handleLocationHash).toHaveBeenCalled();
   });
 
   it('renders loading icon', async () => {
-    factory(
-      {
-        webPath: 'http://test.com',
-        name: 'README.md',
-      },
-      true,
-    );
-
-    await nextTick();
-    expect(vm.findComponent(GlLoadingIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 });