diff options
Diffstat (limited to 'spec/frontend/design_management/components/toolbar/index_spec.js')
-rw-r--r-- | spec/frontend/design_management/components/toolbar/index_spec.js | 46 |
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', ); |