Add latest changes from gitlab-org/gitlab@master

2 files changed, 40 insertions, 95 deletions

diff --git a/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap b/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap
deleted file mode 100644
index 48a4feca1e5..00000000000
--- a/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Repository file preview component renders file HTML 1`] = `
-<article
-  class="file-holder limited-width-container readme-holder"
->
-  <div
-    class="js-file-title file-title-flex-parent"
-  >
-    <div
-      class="file-header-content"
-    >
-      <gl-icon-stub
-        name="doc-text"
-        size="16"
-      />
-       
-      <gl-link-stub
-        href="http://test.com"
-      >
-        <strong>
-          README.md
-        </strong>
-      </gl-link-stub>
-    </div>
-  </div>
-   
-  <div
-    class="blob-viewer"
-    data-qa-selector="blob_viewer_content"
-    itemprop="about"
-  >
-    <div>
-      <div
-        class="blob"
-      >
-        test
-      </div>
-    </div>
-  </div>
-</article>
-`;
diff --git a/spec/frontend/repository/components/preview/index_spec.js b/spec/frontend/repository/components/preview/index_spec.js
index d4c746b67d6..416cc7d360a 100644
--- a/spec/frontend/repository/components/preview/index_spec.js
+++ b/spec/frontend/repository/components/preview/index_spec.js
@@ -1,77 +1,64 @@
 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();
+  beforeEach(() => {
+    mockReadmeData = jest.fn();
+    wrapper = createComponent();
+    mockReadmeData.mockResolvedValue(MOCK_README_DATA);
   });
 
-  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();
+  afterEach(() => {
+    wrapper.destroy();
   });
 
   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);
   });
 });