1 files changed, 26 insertions, 20 deletions

diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js
index 1776405ece9..764ad73805f 100644
--- a/spec/frontend/design_management/components/toolbar/index_spec.js
+++ b/spec/frontend/design_management/components/toolbar/index_spec.js
@@ -1,12 +1,18 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import VueRouter from 'vue-router';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import DeleteButton from '~/design_management/components/delete_button.vue';
 import Toolbar from '~/design_management/components/toolbar/index.vue';
 import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
+import { getPermissionsQueryResponse } from '../../mock_data/apollo_mock';
 
 Vue.use(VueRouter);
+Vue.use(VueApollo);
 const router = new VueRouter();
 
 const RouterLinkStub = {
@@ -27,7 +33,12 @@ describe('Design management toolbar component', () => {
     const updatedAt = new Date();
     updatedAt.setHours(updatedAt.getHours() - 1);
 
+    const mockApollo = createMockApollo([
+      [permissionsQuery, jest.fn().mockResolvedValue(getPermissionsQueryResponse(createDesign))],
+    ]);
+
     wrapper = shallowMount(Toolbar, {
+      apolloProvider: mockApollo,
       router,
       propsData: {
         id: '1',
@@ -46,31 +57,20 @@ describe('Design management toolbar component', () => {
         'router-link': RouterLinkStub,
       },
     });
-
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    wrapper.setData({
-      permissions: {
-        createDesign,
-      },
-    });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders design and updated data', async () => {
     createComponent();
 
-    await nextTick();
+    await waitForPromises();
+
     expect(wrapper.element).toMatchSnapshot();
   });
 
   it('links back to designs list', async () => {
     createComponent();
 
-    await nextTick();
+    await waitForPromises();
     const link = wrapper.find('a');
 
     expect(link.props('to')).toEqual({
@@ -84,35 +84,41 @@ describe('Design management toolbar component', () => {
   it('renders delete button on latest designs version with logged in user', async () => {
     createComponent();
 
-    await nextTick();
+    await waitForPromises();
+
     expect(wrapper.findComponent(DeleteButton).exists()).toBe(true);
   });
 
   it('does not render delete button on non-latest version', async () => {
     createComponent(false, true, { isLatestVersion: false });
 
-    await nextTick();
+    await waitForPromises();
+
     expect(wrapper.findComponent(DeleteButton).exists()).toBe(false);
   });
 
   it('does not render delete button when user is not logged in', async () => {
     createComponent(false, false);
 
-    await nextTick();
+    await waitForPromises();
+
     expect(wrapper.findComponent(DeleteButton).exists()).toBe(false);
   });
 
   it('emits `delete` event on deleteButton `delete-selected-designs` event', async () => {
     createComponent();
 
-    await nextTick();
+    await waitForPromises();
+
     wrapper.findComponent(DeleteButton).vm.$emit('delete-selected-designs');
     expect(wrapper.emitted().delete).toHaveLength(1);
   });
 
-  it('renders download button with correct link', () => {
+  it('renders download button with correct link', async () => {
     createComponent();
 
+    await waitForPromises();
+
     expect(wrapper.findComponent(GlButton).attributes('href')).toBe(
       '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
     );