diff options
Diffstat (limited to 'spec/frontend/design_management')
9 files changed, 45 insertions, 31 deletions
diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js index d79dde84d46..30eddcee86a 100644 --- a/spec/frontend/design_management/components/design_presentation_spec.js +++ b/spec/frontend/design_management/components/design_presentation_spec.js @@ -36,6 +36,7 @@ describe('Design management design presentation component', () => { discussions, isAnnotating, resolvedDiscussionsExpanded, + isLoading: false, }, stubs, }); diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js index e8426216c1c..40968d9204a 100644 --- a/spec/frontend/design_management/components/design_sidebar_spec.js +++ b/spec/frontend/design_management/components/design_sidebar_spec.js @@ -52,6 +52,7 @@ describe('Design management design sidebar component', () => { design, resolvedDiscussionsExpanded: false, markdownPreviewPath: '', + isLoading: false, ...props, }, mocks: { diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap index 3cb48d7632f..b5a69b28a88 100644 --- a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap +++ b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap @@ -18,7 +18,7 @@ exports[`Design management pagination component renders navigation buttons 1`] = category="primary" class="js-previous-design" disabled="true" - icon="angle-left" + icon="chevron-lg-left" size="medium" title="Go to previous design" variant="default" @@ -29,7 +29,7 @@ exports[`Design management pagination component renders navigation buttons 1`] = buttontextclasses="" category="primary" class="js-next-design" - icon="angle-right" + icon="chevron-lg-right" size="medium" title="Go to next design" variant="default" diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap index 6dfd57906d8..3c4aa0f4d3c 100644 --- a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap @@ -56,7 +56,7 @@ exports[`Design management toolbar component renders design and updated data 1`] buttonclass="" buttonicon="archive" buttonsize="medium" - buttonvariant="warning" + buttonvariant="default" class="gl-ml-3" hasselecteddesigns="true" title="Archive design" diff --git a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap index 243cc9d891d..be736184e60 100644 --- a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap @@ -45,7 +45,7 @@ exports[`Design management index page designs renders loading icon 1`] = ` <gl-loading-icon-stub color="dark" label="Loading" - size="md" + size="lg" /> </div> diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap index 8f12dc8fb06..0f2857821ea 100644 --- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap @@ -99,7 +99,7 @@ exports[`Design management design index page renders design index 1`] = ` variant="link" > Resolved Comments (1) - + </gl-button-stub> <gl-popover-stub @@ -112,8 +112,8 @@ exports[`Design management design index page renders design index 1`] = ` > <p> - Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below - + Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below + </p> <a @@ -144,19 +144,6 @@ exports[`Design management design index page renders design index 1`] = ` </div> `; -exports[`Design management design index page sets loading state 1`] = ` -<div - class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row" -> - <gl-loading-icon-stub - class="gl-align-self-center" - color="dark" - label="Loading" - size="xl" - /> -</div> -`; - exports[`Design management design index page with error GlAlert is rendered in correct position with correct content 1`] = ` <div class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row" @@ -185,8 +172,8 @@ exports[`Design management design index page with error GlAlert is rendered in c variant="danger" > - woops - + woops + </gl-alert-stub> </div> diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index 55d0fabe402..17a299c5de1 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -91,7 +91,12 @@ describe('Design management design index page', () => { function createComponent( { loading = false } = {}, - { data = {}, intialRouteOptions = {}, provide = {} } = {}, + { + data = {}, + intialRouteOptions = {}, + provide = {}, + stubs = { ApolloMutation, DesignSidebar, DesignReplyForm }, + } = {}, ) { const $apollo = { queries: { @@ -109,11 +114,7 @@ describe('Design management design index page', () => { wrapper = shallowMount(DesignIndex, { propsData: { id: '1' }, mocks: { $apollo }, - stubs: { - ApolloMutation, - DesignSidebar, - DesignReplyForm, - }, + stubs, provide: { issueIid: '1', projectPath: 'project-path', @@ -139,7 +140,7 @@ describe('Design management design index page', () => { describe('when navigating to component', () => { it('applies fullscreen layout class', () => { jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement); - createComponent({ loading: true }); + createComponent({}, { stubs: {} }); expect(mockPageLayoutElement.classList.add).toHaveBeenCalledTimes(1); expect(mockPageLayoutElement.classList.add).toHaveBeenCalledWith( @@ -151,7 +152,7 @@ describe('Design management design index page', () => { describe('when navigating within the component', () => { it('`scale` prop of DesignPresentation component is 1', async () => { jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement); - createComponent({ loading: false }, { data: { design, scale: 2 } }); + createComponent({}, { data: { design, scale: 2 } }); await nextTick(); expect(findDesignPresentation().props('scale')).toBe(2); @@ -180,7 +181,8 @@ describe('Design management design index page', () => { it('sets loading state', () => { createComponent({ loading: true }); - expect(wrapper.element).toMatchSnapshot(); + expect(wrapper.find(DesignPresentation).props('isLoading')).toBe(true); + expect(wrapper.find(DesignSidebar).props('isLoading')).toBe(true); }); it('renders design index', () => { @@ -197,6 +199,7 @@ describe('Design management design index page', () => { design, markdownPreviewPath: '/project-path/preview_markdown?target_type=Issue', resolvedDiscussionsExpanded: false, + isLoading: false, }); }); diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index 87531e8b645..087655d10f7 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -4,6 +4,7 @@ import Vue, { nextTick } from 'vue'; import VueApollo, { ApolloMutation } from 'vue-apollo'; import VueRouter from 'vue-router'; +import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils'; import VueDraggable from 'vuedraggable'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -762,6 +763,25 @@ describe('Design management index page', () => { expect(findDesigns().at(0).props('id')).toBe('2'); }); + it.each` + breakpoint | reorderDisabled + ${'xs'} | ${true} + ${'sm'} | ${false} + ${'md'} | ${false} + ${'lg'} | ${false} + ${'xl'} | ${false} + `( + 'sets draggable disabled value to $reorderDisabled when breakpoint is $breakpoint', + async ({ breakpoint, reorderDisabled }) => { + jest.spyOn(breakpointInstance, 'getBreakpointSize').mockReturnValue(breakpoint); + + createComponentWithApollo({}); + await waitForPromises(); + + expect(draggableAttributes().disabled).toBe(reorderDisabled); + }, + ); + it('prevents reordering when reorderDesigns mutation is in progress', async () => { createComponentWithApollo({}); await moveDesigns(wrapper); diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js index 03ab79712a4..b9c62334223 100644 --- a/spec/frontend/design_management/router_spec.js +++ b/spec/frontend/design_management/router_spec.js @@ -20,6 +20,8 @@ function factory(routeArg) { return mount(App, { router, + provide: { issueIid: '1' }, + stubs: { Toolbar: true }, mocks: { $apollo: { queries: { |