diff options
Diffstat (limited to 'spec/frontend/design_management')
20 files changed, 247 insertions, 153 deletions
diff --git a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap index 62a0f675cff..ed8ed3254ba 100644 --- a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap +++ b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap @@ -1,23 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Design note pin component should match the snapshot of note when repositioning 1`] = ` -<button - aria-label="Comment form position" - class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator" - style="left: 10px; top: 10px; cursor: move;" - type="button" -> - <gl-icon-stub - name="image-comment-dark" - size="24" - /> -</button> -`; - exports[`Design note pin component should match the snapshot of note with index 1`] = ` <button aria-label="Comment '1' position" - class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 js-image-badge badge badge-pill" + class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0! js-image-badge badge badge-pill" style="left: 10px; top: 10px;" type="button" > @@ -30,7 +16,7 @@ exports[`Design note pin component should match the snapshot of note with index exports[`Design note pin component should match the snapshot of note without index 1`] = ` <button aria-label="Comment form position" - class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator" + class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0! btn-transparent comment-indicator gl-p-0" style="left: 10px; top: 10px;" type="button" > diff --git a/spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap index 189962c5b2e..560533891c9 100644 --- a/spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap +++ b/spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap @@ -2,10 +2,10 @@ exports[`Design management design presentation component currentCommentForm is equal to current annotation position when isAnnotating is true 1`] = ` <div - class="h-100 w-100 p-3 overflow-auto position-relative" + class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative" > <div - class="h-100 w-100 d-flex align-items-center position-relative" + class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative" > <design-image-stub image="test.jpg" @@ -25,10 +25,10 @@ exports[`Design management design presentation component currentCommentForm is e exports[`Design management design presentation component currentCommentForm is null when isAnnotating is false 1`] = ` <div - class="h-100 w-100 p-3 overflow-auto position-relative" + class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative" > <div - class="h-100 w-100 d-flex align-items-center position-relative" + class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative" > <design-image-stub image="test.jpg" @@ -47,10 +47,10 @@ exports[`Design management design presentation component currentCommentForm is n exports[`Design management design presentation component currentCommentForm is null when isAnnotating is true but annotation position is falsey 1`] = ` <div - class="h-100 w-100 p-3 overflow-auto position-relative" + class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative" > <div - class="h-100 w-100 d-flex align-items-center position-relative" + class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative" > <design-image-stub image="test.jpg" @@ -69,10 +69,10 @@ exports[`Design management design presentation component currentCommentForm is n exports[`Design management design presentation component renders empty state when no image provided 1`] = ` <div - class="h-100 w-100 p-3 overflow-auto position-relative" + class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative" > <div - class="h-100 w-100 d-flex align-items-center position-relative" + class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative" > <!----> @@ -83,10 +83,10 @@ exports[`Design management design presentation component renders empty state whe exports[`Design management design presentation component renders image and overlay when image provided 1`] = ` <div - class="h-100 w-100 p-3 overflow-auto position-relative" + class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative" > <div - class="h-100 w-100 d-flex align-items-center position-relative" + class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative" > <design-image-stub image="test.jpg" diff --git a/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap index cb4575cbd11..0679b485f77 100644 --- a/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap +++ b/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap @@ -10,7 +10,7 @@ exports[`Design management design scaler component minus and reset buttons are d disabled="disabled" > <span - class="d-flex-center gl-icon s16" + class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16" > – @@ -48,7 +48,7 @@ exports[`Design management design scaler component minus and reset buttons are e class="btn" > <span - class="d-flex-center gl-icon s16" + class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16" > – @@ -85,7 +85,7 @@ exports[`Design management design scaler component plus button is disabled when class="btn" > <span - class="d-flex-center gl-icon s16" + class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16" > – diff --git a/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap index acaa62b11eb..7cffd3cf3e8 100644 --- a/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap +++ b/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap @@ -2,7 +2,7 @@ exports[`Design management large image component renders image 1`] = ` <div - class="m-auto js-design-image" + class="gl-mx-auto gl-my-auto js-design-image" > <!----> @@ -16,7 +16,7 @@ exports[`Design management large image component renders image 1`] = ` exports[`Design management large image component renders loading state 1`] = ` <div - class="m-auto js-design-image" + class="gl-mx-auto gl-my-auto js-design-image" isloading="true" > <!----> @@ -31,7 +31,7 @@ exports[`Design management large image component renders loading state 1`] = ` exports[`Design management large image component renders media broken icon on error 1`] = ` <gl-icon-stub - class="text-secondary-100" + class="gl-text-gray-200" name="media-broken" size="48" /> @@ -39,7 +39,7 @@ exports[`Design management large image component renders media broken icon on er exports[`Design management large image component sets correct classes and styles if imageStyle is set 1`] = ` <div - class="m-auto js-design-image" + class="gl-mx-auto gl-my-auto js-design-image" > <!----> @@ -54,7 +54,7 @@ exports[`Design management large image component sets correct classes and styles exports[`Design management large image component zoom sets image style when zoomed 1`] = ` <div - class="m-auto js-design-image" + class="gl-mx-auto gl-my-auto js-design-image" > <!----> diff --git a/spec/frontend/design_management/components/design_note_pin_spec.js b/spec/frontend/design_management/components/design_note_pin_spec.js index 4e045b58a35..a6219923aca 100644 --- a/spec/frontend/design_management/components/design_note_pin_spec.js +++ b/spec/frontend/design_management/components/design_note_pin_spec.js @@ -29,21 +29,4 @@ describe('Design note pin component', () => { createComponent({ label: 1 }); expect(wrapper.element).toMatchSnapshot(); }); - - it('should match the snapshot of note when repositioning', () => { - createComponent({ repositioning: true }); - expect(wrapper.element).toMatchSnapshot(); - }); - - describe('pinStyle', () => { - it('sets cursor to `move` when repositioning = true', () => { - createComponent({ repositioning: true }); - expect(wrapper.vm.pinStyle.cursor).toBe('move'); - }); - - it('does not set cursor when repositioning = false', () => { - createComponent(); - expect(wrapper.vm.pinStyle.cursor).toBe(undefined); - }); - }); }); diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js index 673a09320e5..4ef067e3f5e 100644 --- a/spec/frontend/design_management/components/design_overlay_spec.js +++ b/spec/frontend/design_management/components/design_overlay_spec.js @@ -202,7 +202,7 @@ describe('Design overlay component', () => { { x: position.x, y: position.y }, { x: 20, y: 20 }, ).then(() => { - expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px; cursor: move;'); + expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px;'); }); }); @@ -300,9 +300,7 @@ describe('Design overlay component', () => { { x: position.x, y: position.y }, { x: 20, y: 20 }, ).then(() => { - expect(findCommentBadge().attributes().style).toBe( - 'left: 20px; top: 20px; cursor: move;', - ); + expect(findCommentBadge().attributes().style).toBe('left: 20px; top: 20px;'); }); }); diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js index 700faa8a70f..60266883fcd 100644 --- a/spec/frontend/design_management/components/design_sidebar_spec.js +++ b/spec/frontend/design_management/components/design_sidebar_spec.js @@ -43,7 +43,7 @@ describe('Design management design sidebar component', () => { const findNewDiscussionDisclaimer = () => wrapper.find('[data-testid="new-discussion-disclaimer"]'); - function createComponent(props = {}, { enableTodoButton } = {}) { + function createComponent(props = {}) { wrapper = shallowMount(DesignSidebar, { propsData: { design, @@ -58,9 +58,6 @@ describe('Design management design sidebar component', () => { }, }, stubs: { GlPopover }, - provide: { - glFeatures: { designManagementTodoButton: enableTodoButton }, - }, }); } @@ -80,6 +77,12 @@ describe('Design management design sidebar component', () => { expect(findParticipants().props('participants')).toHaveLength(1); }); + it('renders To-Do button', () => { + createComponent(); + + expect(wrapper.find(DesignTodoButton).exists()).toBe(true); + }); + describe('when has no discussions', () => { beforeEach(() => { createComponent({ @@ -245,23 +248,4 @@ describe('Design management design sidebar component', () => { expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', { expires: 365 * 10 }); }); }); - - it('does not render To-Do button by default', () => { - createComponent(); - expect(wrapper.find(DesignTodoButton).exists()).toBe(false); - }); - - describe('when `design_management_todo_button` feature flag is enabled', () => { - beforeEach(() => { - createComponent({}, { enableTodoButton: true }); - }); - - it('renders sidebar root element with no top padding', () => { - expect(wrapper.classes()).toContain('gl-pt-0'); - }); - - it('renders To-Do button', () => { - expect(wrapper.find(DesignTodoButton).exists()).toBe(true); - }); - }); }); diff --git a/spec/frontend/design_management/components/design_todo_button_spec.js b/spec/frontend/design_management/components/design_todo_button_spec.js index 451c23f0fea..9ebc6ca26a2 100644 --- a/spec/frontend/design_management/components/design_todo_button_spec.js +++ b/spec/frontend/design_management/components/design_todo_button_spec.js @@ -111,7 +111,7 @@ describe('Design management design todo button', () => { }); it('renders correct button text', () => { - expect(wrapper.text()).toBe('Add a To-Do'); + expect(wrapper.text()).toBe('Add a To Do'); }); describe('when clicked', () => { diff --git a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap index 822df1f6472..de276bd300b 100644 --- a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap +++ b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap @@ -24,6 +24,7 @@ exports[`Design management list item component with notes renders item with mult <img alt="test" class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img" + data-qa-filename="test" data-qa-selector="design_image" src="" /> @@ -94,6 +95,7 @@ exports[`Design management list item component with notes renders item with sing <img alt="test" class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img" + data-qa-filename="test" data-qa-selector="design_image" src="" /> 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 a7d6145285c..5eb86d4f9cb 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 @@ -4,15 +4,16 @@ exports[`Design management pagination component hides components when designs ar exports[`Design management pagination component renders navigation buttons 1`] = ` <div - class="d-flex align-items-center" + class="gl-display-flex gl-align-items-center" > 0 of 2 <gl-button-group-stub - class="ml-3 mr-3" + class="gl-mx-5" > <gl-button-stub + buttontextclasses="" category="primary" class="js-previous-design" disabled="true" @@ -23,6 +24,7 @@ exports[`Design management pagination component renders navigation buttons 1`] = /> <gl-button-stub + buttontextclasses="" category="primary" class="js-next-design" icon="angle-right" 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 b286a74ebb8..723ac0491a7 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 @@ -19,16 +19,16 @@ exports[`Design management toolbar component renders design and updated data 1`] </a> <div - class="overflow-hidden d-flex align-items-center" + class="gl-overflow-hidden gl-display-flex gl-align-items-center" > <h2 - class="m-0 str-truncated-100 gl-font-base" + class="gl-m-0 str-truncated-100 gl-font-base" > test.jpg </h2> <small - class="text-secondary" + class="gl-text-gray-500" > Updated 1 hour ago by Test Name </small> @@ -36,11 +36,12 @@ exports[`Design management toolbar component renders design and updated data 1`] </div> <design-navigation-stub - class="ml-auto flex-shrink-0" + class="gl-ml-auto gl-flex-shrink-0" id="1" /> <gl-button-stub + buttontextclasses="" category="primary" href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d" icon="download" diff --git a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js index 1c6588a9628..1d9b9c002f9 100644 --- a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js +++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js @@ -43,7 +43,7 @@ describe('Design management pagination component', () => { it('renders navigation buttons', () => { wrapper.setData({ - designs: [{ id: '1' }, { id: '2' }], + designCollection: { designs: [{ id: '1' }, { id: '2' }] }, }); return wrapper.vm.$nextTick().then(() => { @@ -54,7 +54,7 @@ describe('Design management pagination component', () => { describe('keyboard buttons navigation', () => { beforeEach(() => { wrapper.setData({ - designs: [{ filename: '1' }, { filename: '2' }, { filename: '3' }], + designCollection: { designs: [{ filename: '1' }, { filename: '2' }, { filename: '3' }] }, }); }); diff --git a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap index 3d7939df28e..eaa7460ae15 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap +++ b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap @@ -5,6 +5,7 @@ exports[`Design management upload button component renders inverted upload desig isinverted="true" > <gl-button-stub + buttontextclasses="" category="primary" icon="" size="small" @@ -30,6 +31,7 @@ exports[`Design management upload button component renders inverted upload desig exports[`Design management upload button component renders loading icon 1`] = ` <div> <gl-button-stub + buttontextclasses="" category="primary" disabled="true" icon="" @@ -62,6 +64,7 @@ exports[`Design management upload button component renders loading icon 1`] = ` exports[`Design management upload button component renders upload design button 1`] = ` <div> <gl-button-stub + buttontextclasses="" category="primary" icon="" size="small" diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap index 9284099b40d..1ca5360fa59 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap +++ b/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap @@ -2,10 +2,10 @@ exports[`Design management dropzone component when dragging renders correct template when drag event contains files 1`] = ` <div - class="w-100 position-relative" + class="gl-w-full gl-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" + class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" > <div class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" @@ -39,11 +39,11 @@ exports[`Design management dropzone component when dragging renders correct temp name="design-dropzone-fade" > <div - class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" + class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" style="" > <div - class="mw-50 text-center" + class="mw-50 gl-text-center" style="display: none;" > <h3 @@ -58,7 +58,7 @@ exports[`Design management dropzone component when dragging renders correct temp </div> <div - class="mw-50 text-center" + class="mw-50 gl-text-center" style="" > <h3 @@ -78,10 +78,10 @@ exports[`Design management dropzone component when dragging renders correct temp exports[`Design management dropzone component when dragging renders correct template when drag event contains files and text 1`] = ` <div - class="w-100 position-relative" + class="gl-w-full gl-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" + class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" > <div class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" @@ -115,11 +115,11 @@ exports[`Design management dropzone component when dragging renders correct temp name="design-dropzone-fade" > <div - class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" + class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" style="" > <div - class="mw-50 text-center" + class="mw-50 gl-text-center" style="display: none;" > <h3 @@ -134,7 +134,7 @@ exports[`Design management dropzone component when dragging renders correct temp </div> <div - class="mw-50 text-center" + class="mw-50 gl-text-center" style="" > <h3 @@ -154,10 +154,10 @@ exports[`Design management dropzone component when dragging renders correct temp exports[`Design management dropzone component when dragging renders correct template when drag event contains text 1`] = ` <div - class="w-100 position-relative" + class="gl-w-full gl-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" + class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" > <div class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" @@ -191,11 +191,11 @@ exports[`Design management dropzone component when dragging renders correct temp name="design-dropzone-fade" > <div - class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" + class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" style="" > <div - class="mw-50 text-center" + class="mw-50 gl-text-center" > <h3 class="" @@ -209,7 +209,7 @@ exports[`Design management dropzone component when dragging renders correct temp </div> <div - class="mw-50 text-center" + class="mw-50 gl-text-center" style="display: none;" > <h3 @@ -229,10 +229,10 @@ exports[`Design management dropzone component when dragging renders correct temp exports[`Design management dropzone component when dragging renders correct template when drag event is empty 1`] = ` <div - class="w-100 position-relative" + class="gl-w-full gl-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" + class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" > <div class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" @@ -266,11 +266,11 @@ exports[`Design management dropzone component when dragging renders correct temp name="design-dropzone-fade" > <div - class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" + class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" style="" > <div - class="mw-50 text-center" + class="mw-50 gl-text-center" > <h3 class="" @@ -284,7 +284,7 @@ exports[`Design management dropzone component when dragging renders correct temp </div> <div - class="mw-50 text-center" + class="mw-50 gl-text-center" style="display: none;" > <h3 @@ -304,10 +304,10 @@ exports[`Design management dropzone component when dragging renders correct temp exports[`Design management dropzone component when dragging renders correct template when dragging stops 1`] = ` <div - class="w-100 position-relative" + class="gl-w-full gl-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" + class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" > <div class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" @@ -341,11 +341,11 @@ exports[`Design management dropzone component when dragging renders correct temp name="design-dropzone-fade" > <div - class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" + class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" style="display: none;" > <div - class="mw-50 text-center" + class="mw-50 gl-text-center" > <h3 class="" @@ -359,7 +359,7 @@ exports[`Design management dropzone component when dragging renders correct temp </div> <div - class="mw-50 text-center" + class="mw-50 gl-text-center" style="display: none;" > <h3 @@ -379,10 +379,10 @@ exports[`Design management dropzone component when dragging renders correct temp exports[`Design management dropzone component when no slot provided renders default dropzone card 1`] = ` <div - class="w-100 position-relative" + class="gl-w-full gl-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" + class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" > <div class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" @@ -416,11 +416,11 @@ exports[`Design management dropzone component when no slot provided renders defa name="design-dropzone-fade" > <div - class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" + class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" style="display: none;" > <div - class="mw-50 text-center" + class="mw-50 gl-text-center" > <h3 class="" @@ -434,7 +434,7 @@ exports[`Design management dropzone component when no slot provided renders defa </div> <div - class="mw-50 text-center" + class="mw-50 gl-text-center" style="display: none;" > <h3 @@ -454,7 +454,7 @@ exports[`Design management dropzone component when no slot provided renders defa exports[`Design management dropzone component when slot provided renders dropzone with slot content 1`] = ` <div - class="w-100 position-relative" + class="gl-w-full gl-relative" > <div> dropzone slot @@ -464,11 +464,11 @@ exports[`Design management dropzone component when slot provided renders dropzon name="design-dropzone-fade" > <div - class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" + class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" style="display: none;" > <div - class="mw-50 text-center" + class="mw-50 gl-text-center" > <h3 class="" @@ -482,7 +482,7 @@ exports[`Design management dropzone component when slot provided renders dropzon </div> <div - class="mw-50 text-center" + class="mw-50 gl-text-center" style="display: none;" > <h3 diff --git a/spec/frontend/design_management/mock_data/apollo_mock.js b/spec/frontend/design_management/mock_data/apollo_mock.js index 1c7806c292f..5e41210221b 100644 --- a/spec/frontend/design_management/mock_data/apollo_mock.js +++ b/spec/frontend/design_management/mock_data/apollo_mock.js @@ -4,6 +4,7 @@ export const designListQueryResponse = { id: '1', issue: { designCollection: { + copyState: 'READY', designs: { nodes: [ { @@ -50,6 +51,34 @@ export const designListQueryResponse = { }, }; +export const designUploadMutationCreatedResponse = { + data: { + designManagementUpload: { + designs: [ + { + id: '1', + event: 'CREATION', + filename: 'fox_1.jpg', + }, + ], + }, + }, +}; + +export const designUploadMutationUpdatedResponse = { + data: { + designManagementUpload: { + designs: [ + { + id: '1', + event: 'MODIFICATION', + filename: 'fox_1.jpg', + }, + ], + }, + }, +}; + export const permissionsQueryResponse = { data: { project: { 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 b80b7fdb43e..2d29b79e31c 100644 --- a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap @@ -8,7 +8,7 @@ exports[`Design management index page designs does not render toolbar when there <!----> <div - class="mt-4" + class="gl-mt-6" > <ol class="list-unstyled row" @@ -19,6 +19,7 @@ exports[`Design management index page designs does not render toolbar when there > <design-dropzone-stub class="design-list-item design-list-item-new" + data-qa-selector="design_dropzone_content" hasdesigns="true" /> </li> @@ -91,7 +92,7 @@ exports[`Design management index page designs renders designs list and header wi data-testid="designs-root" > <header - class="row-content-block border-top-0 p-2 d-flex" + class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex" > <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full" @@ -110,6 +111,7 @@ exports[`Design management index page designs renders designs list and header wi class="qa-selector-toolbar gl-display-flex gl-align-items-center" > <gl-button-stub + buttontextclasses="" category="primary" class="gl-mr-4 js-select-all" icon="" @@ -126,6 +128,7 @@ exports[`Design management index page designs renders designs list and header wi buttonclass="gl-mr-3" buttonsize="small" buttonvariant="warning" + data-qa-selector="archive_button" > Archive selected @@ -139,7 +142,7 @@ exports[`Design management index page designs renders designs list and header wi </header> <div - class="mt-4" + class="gl-mt-6" > <ol class="list-unstyled row" @@ -150,6 +153,7 @@ exports[`Design management index page designs renders designs list and header wi > <design-dropzone-stub class="design-list-item design-list-item-new" + data-qa-selector="design_dropzone_content" hasdesigns="true" /> </li> @@ -171,6 +175,8 @@ exports[`Design management index page designs renders designs list and header wi <input class="design-checkbox" + data-qa-design="design-1-name" + data-qa-selector="design_checkbox" type="checkbox" /> </li> @@ -192,6 +198,8 @@ exports[`Design management index page designs renders designs list and header wi <input class="design-checkbox" + data-qa-design="design-2-name" + data-qa-selector="design_checkbox" type="checkbox" /> </li> @@ -213,6 +221,8 @@ exports[`Design management index page designs renders designs list and header wi <input class="design-checkbox" + data-qa-design="design-3-name" + data-qa-selector="design_checkbox" type="checkbox" /> </li> @@ -233,7 +243,7 @@ exports[`Design management index page designs renders error 1`] = ` <!----> <div - class="mt-4" + class="gl-mt-6" > <gl-alert-stub dismisslabel="Dismiss" @@ -264,7 +274,7 @@ exports[`Design management index page designs renders loading icon 1`] = ` <!----> <div - class="mt-4" + class="gl-mt-6" > <gl-loading-icon-stub color="orange" @@ -287,7 +297,7 @@ exports[`Design management index page when has no designs renders design dropzon <!----> <div - class="mt-4" + class="gl-mt-6" > <ol class="list-unstyled row" @@ -298,6 +308,7 @@ exports[`Design management index page when has no designs renders design dropzon > <design-dropzone-stub class="" + data-qa-selector="design_dropzone_content" /> </li> </ol> 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 c849e4d4ed6..3d6c2561ff6 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 @@ -2,10 +2,10 @@ exports[`Design management design index page renders design index 1`] = ` <div - class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row" + 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" > <div - class="d-flex overflow-hidden flex-grow-1 flex-column position-relative" + class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative" > <design-destroyer-stub filenames="test.jpg" @@ -23,16 +23,26 @@ exports[`Design management design index page renders design index 1`] = ` /> <div - class="design-scaler-wrapper position-absolute mb-4 d-flex-center" + class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center" > <design-scaler-stub /> </div> </div> <div - class="image-notes" + class="image-notes gl-pt-0" > - <!----> + <div + class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" + > + <span> + To Do + </span> + + <design-todo-button-stub + design="[object Object]" + /> + </div> <h2 class="gl-font-weight-bold gl-mt-0" @@ -67,6 +77,7 @@ exports[`Design management design index page renders design index 1`] = ` /> <gl-button-stub + buttontextclasses="" category="primary" class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4" data-testid="resolved-comments" @@ -121,10 +132,10 @@ exports[`Design management design index page renders design index 1`] = ` exports[`Design management design index page sets loading state 1`] = ` <div - class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row" + 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="align-self-center" + class="gl-align-self-center" color="orange" label="Loading" size="xl" @@ -134,10 +145,10 @@ exports[`Design management design index page sets loading state 1`] = ` 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 w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row" + 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" > <div - class="d-flex overflow-hidden flex-grow-1 flex-column position-relative" + class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative" > <design-destroyer-stub filenames="test.jpg" @@ -146,7 +157,7 @@ exports[`Design management design index page with error GlAlert is rendered in c /> <div - class="p-3" + class="gl-p-5" > <gl-alert-stub dismissible="true" @@ -172,16 +183,26 @@ exports[`Design management design index page with error GlAlert is rendered in c /> <div - class="design-scaler-wrapper position-absolute mb-4 d-flex-center" + class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center" > <design-scaler-stub /> </div> </div> <div - class="image-notes" + class="image-notes gl-pt-0" > - <!----> + <div + class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" + > + <span> + To Do + </span> + + <design-todo-button-stub + design="[object Object]" + /> + </div> <h2 class="gl-font-weight-bold gl-mt-0" diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index 661717d29a3..27a91b11448 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -4,6 +4,7 @@ import VueDraggable from 'vuedraggable'; import VueRouter from 'vue-router'; import { GlEmptyState } from '@gitlab/ui'; import createMockApollo from 'jest/helpers/mock_apollo_helper'; +import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import Index from '~/design_management/pages/index.vue'; import uploadDesignQuery from '~/design_management/graphql/mutations/upload_design.mutation.graphql'; import DesignDestroyer from '~/design_management/components/design_destroyer.vue'; @@ -21,6 +22,8 @@ import * as utils from '~/design_management/utils/design_management_utils'; import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants'; import { designListQueryResponse, + designUploadMutationCreatedResponse, + designUploadMutationUpdatedResponse, permissionsQueryResponse, moveDesignMutationResponse, reorderedDesigns, @@ -29,6 +32,7 @@ import { import getDesignListQuery from '~/design_management/graphql/queries/get_design_list.query.graphql'; import permissionsQuery from '~/design_management/graphql/queries/design_permissions.query.graphql'; import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql'; +import { DESIGN_TRACKING_PAGE_NAME } from '~/design_management/utils/tracking'; jest.mock('~/flash.js'); const mockPageEl = { @@ -92,6 +96,8 @@ describe('Design management index page', () => { const findDesignCheckboxes = () => wrapper.findAll('.design-checkbox'); const findSelectAllButton = () => wrapper.find('.js-select-all'); const findToolbar = () => wrapper.find('.qa-selector-toolbar'); + const findDesignCollectionIsCopying = () => + wrapper.find('[data-testid="design-collection-is-copying"'); const findDeleteButton = () => wrapper.find(DeleteButton); const findDropzone = () => wrapper.findAll(DesignDropzone).at(0); const dropzoneClasses = () => findDropzone().classes(); @@ -99,6 +105,7 @@ describe('Design management index page', () => { const findFirstDropzoneWithDesign = () => wrapper.findAll(DesignDropzone).at(1); const findDesignsWrapper = () => wrapper.find('[data-testid="designs-root"]'); const findDesigns = () => wrapper.findAll(Design); + const draggableAttributes = () => wrapper.find(VueDraggable).vm.$attrs; async function moveDesigns(localWrapper) { await jest.runOnlyPendingTimers(); @@ -115,8 +122,8 @@ describe('Design management index page', () => { function createComponent({ loading = false, - designs = [], allVersions = [], + designCollection = { designs: mockDesigns, copyState: 'READY' }, createDesign = true, stubs = {}, mockMutate = jest.fn().mockResolvedValue(), @@ -124,7 +131,7 @@ describe('Design management index page', () => { mutate = mockMutate; const $apollo = { queries: { - designs: { + designCollection: { loading, }, permissions: { @@ -137,8 +144,8 @@ describe('Design management index page', () => { wrapper = shallowMount(Index, { data() { return { - designs, allVersions, + designCollection, permissions: { createDesign, }, @@ -200,13 +207,13 @@ describe('Design management index page', () => { }); it('renders a toolbar with buttons when there are designs', () => { - createComponent({ designs: mockDesigns, allVersions: [mockVersion] }); + createComponent({ allVersions: [mockVersion] }); expect(findToolbar().exists()).toBe(true); }); it('renders designs list and header with upload button', () => { - createComponent({ designs: mockDesigns, allVersions: [mockVersion] }); + createComponent({ allVersions: [mockVersion] }); expect(wrapper.element).toMatchSnapshot(); }); @@ -236,7 +243,7 @@ describe('Design management index page', () => { describe('when has no designs', () => { beforeEach(() => { - createComponent(); + createComponent({ designCollection: { designs: [], copyState: 'READY' } }); }); it('renders design dropzone', () => @@ -259,6 +266,21 @@ describe('Design management index page', () => { })); }); + describe('handling design collection copy state', () => { + it.each` + copyState | isRendered | description + ${'IN_PROGRESS'} | ${true} | ${'renders'} + ${'READY'} | ${false} | ${'does not render'} + ${'ERROR'} | ${false} | ${'does not render'} + `( + '$description the copying message if design collection copyState is $copyState', + ({ copyState, isRendered }) => { + createComponent({ designCollection: { designs: [], copyState } }); + expect(findDesignCollectionIsCopying().exists()).toBe(isRendered); + }, + ); + }); + describe('uploading designs', () => { it('calls mutation on upload', () => { createComponent({ stubs: { GlEmptyState } }); @@ -282,6 +304,10 @@ describe('Design management index page', () => { { __typename: 'Design', id: expect.anything(), + currentUserTodos: { + __typename: 'TodoConnection', + nodes: [], + }, image: '', imageV432x230: '', filename: 'test', @@ -348,7 +374,7 @@ describe('Design management index page', () => { createComponent({ stubs: { GlEmptyState } }); wrapper.setData({ filesToBeSaved: [{ name: 'test' }] }); - wrapper.vm.onUploadDesignDone(); + wrapper.vm.onUploadDesignDone(designUploadMutationCreatedResponse); return wrapper.vm.$nextTick().then(() => { expect(wrapper.vm.filesToBeSaved).toEqual([]); expect(wrapper.vm.isSaving).toBeFalsy(); @@ -460,6 +486,34 @@ describe('Design management index page', () => { expect(createFlash).toHaveBeenCalledWith(message); }); }); + + describe('tracking', () => { + let trackingSpy; + + beforeEach(() => { + trackingSpy = mockTracking('_category_', undefined, jest.spyOn); + + createComponent({ stubs: { GlEmptyState } }); + }); + + afterEach(() => { + unmockTracking(); + }); + + it('tracks design creation', () => { + wrapper.vm.onUploadDesignDone(designUploadMutationCreatedResponse); + + expect(trackingSpy).toHaveBeenCalledTimes(1); + expect(trackingSpy).toHaveBeenCalledWith(DESIGN_TRACKING_PAGE_NAME, 'create_design'); + }); + + it('tracks design modification', () => { + wrapper.vm.onUploadDesignDone(designUploadMutationUpdatedResponse); + + expect(trackingSpy).toHaveBeenCalledTimes(1); + expect(trackingSpy).toHaveBeenCalledWith(DESIGN_TRACKING_PAGE_NAME, 'update_design'); + }); + }); }); describe('on latest version when has designs', () => { @@ -531,13 +585,16 @@ describe('Design management index page', () => { }); it('on latest version when has no designs toolbar buttons are invisible', () => { - createComponent({ designs: [], allVersions: [mockVersion] }); + createComponent({ + designCollection: { designs: [], copyState: 'READY' }, + allVersions: [mockVersion], + }); expect(findToolbar().isVisible()).toBe(false); }); describe('on non-latest version', () => { beforeEach(() => { - createComponent({ designs: mockDesigns, allVersions: [mockVersion] }); + createComponent({ allVersions: [mockVersion] }); }); it('does not render design checkboxes', async () => { @@ -626,9 +683,8 @@ describe('Design management index page', () => { describe('when navigating', () => { it('ensures fullscreen layout is not applied', () => { - createComponent(true); + createComponent({ loading: true }); - wrapper.vm.$router.push('/'); expect(mockPageEl.classList.remove).toHaveBeenCalledTimes(1); expect(mockPageEl.classList.remove).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST); }); @@ -637,7 +693,7 @@ describe('Design management index page', () => { router.replace({ path: '/designs', }); - createComponent(true); + createComponent({ loading: true }); return wrapper.vm.$nextTick().then(() => { expect(scrollIntoViewMock).toHaveBeenCalled(); @@ -676,6 +732,20 @@ describe('Design management index page', () => { ).toBe('2'); }); + it('prevents reordering when reorderDesigns mutation is in progress', async () => { + createComponentWithApollo({}); + + await moveDesigns(wrapper); + + expect(draggableAttributes().disabled).toBe(true); + + await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises) + await wrapper.vm.$nextTick(); // kick off the DOM update + await wrapper.vm.$nextTick(); // kick off the DOM update for finally block + + expect(draggableAttributes().disabled).toBe(false); + }); + it('displays flash if mutation had a recoverable error', async () => { createComponentWithApollo({ moveHandler: jest.fn().mockResolvedValue(moveDesignMutationResponseWithErrors), diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js index d4cb9f75a77..fac4f7d368d 100644 --- a/spec/frontend/design_management/router_spec.js +++ b/spec/frontend/design_management/router_spec.js @@ -25,7 +25,7 @@ function factory(routeArg) { mocks: { $apollo: { queries: { - designs: { loading: true }, + designCollection: { loading: true }, design: { loading: true }, permissions: { loading: true }, }, diff --git a/spec/frontend/design_management/utils/design_management_utils_spec.js b/spec/frontend/design_management/utils/design_management_utils_spec.js index 7e857d08d25..232cfa2f4ca 100644 --- a/spec/frontend/design_management/utils/design_management_utils_spec.js +++ b/spec/frontend/design_management/utils/design_management_utils_spec.js @@ -93,6 +93,10 @@ describe('optimistic responses', () => { fullPath: '', notesCount: 0, event: 'NONE', + currentUserTodos: { + __typename: 'TodoConnection', + nodes: [], + }, diffRefs: { __typename: 'DiffRefs', baseSha: '', startSha: '', headSha: '' }, discussions: { __typename: 'DesignDiscussion', nodes: [] }, versions: { |