diff options
Diffstat (limited to 'spec/frontend/design_management/components/upload')
6 files changed, 219 insertions, 184 deletions
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 27c0ba589e6..3d7939df28e 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 @@ -4,16 +4,18 @@ exports[`Design management upload button component renders inverted upload desig <div isinverted="true" > - <gl-deprecated-button-stub - size="md" + <gl-button-stub + category="primary" + icon="" + size="small" title="Adding a design with the same filename replaces the file in a new version." - variant="success" + variant="default" > Upload designs <!----> - </gl-deprecated-button-stub> + </gl-button-stub> <input accept="image/*" @@ -27,11 +29,13 @@ exports[`Design management upload button component renders inverted upload desig exports[`Design management upload button component renders loading icon 1`] = ` <div> - <gl-deprecated-button-stub + <gl-button-stub + category="primary" disabled="true" - size="md" + icon="" + size="small" title="Adding a design with the same filename replaces the file in a new version." - variant="success" + variant="default" > Upload designs @@ -43,7 +47,7 @@ exports[`Design management upload button component renders loading icon 1`] = ` label="Loading" size="sm" /> - </gl-deprecated-button-stub> + </gl-button-stub> <input accept="image/*" @@ -57,16 +61,18 @@ exports[`Design management upload button component renders loading icon 1`] = ` exports[`Design management upload button component renders upload design button 1`] = ` <div> - <gl-deprecated-button-stub - size="md" + <gl-button-stub + category="primary" + icon="" + size="small" title="Adding a design with the same filename replaces the file in a new version." - variant="success" + variant="default" > Upload designs <!----> - </gl-deprecated-button-stub> + </gl-button-stub> <input accept="image/*" 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 0737b9729a2..9284099b40d 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 @@ -5,20 +5,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -43,7 +46,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -56,7 +61,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -74,20 +81,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -112,7 +122,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -125,7 +137,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -143,20 +157,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -180,7 +197,9 @@ exports[`Design management dropzone component when dragging renders correct temp <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -193,7 +212,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -211,20 +232,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -248,7 +272,9 @@ exports[`Design management dropzone component when dragging renders correct temp <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -261,7 +287,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -279,20 +307,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -316,7 +347,9 @@ exports[`Design management dropzone component when dragging renders correct temp <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -329,7 +362,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -347,20 +382,23 @@ exports[`Design management dropzone component when no slot provided renders defa class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -384,7 +422,9 @@ exports[`Design management dropzone component when no slot provided renders defa <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -397,7 +437,9 @@ exports[`Design management dropzone component when no slot provided renders defa class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -428,7 +470,9 @@ exports[`Design management dropzone component when slot provided renders dropzon <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -441,7 +485,9 @@ exports[`Design management dropzone component when slot provided renders dropzon class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap index 00f1a40dfb2..d6fd09eb698 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap +++ b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap @@ -1,111 +1,77 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Design management design version dropdown component renders design version dropdown button 1`] = ` -<gl-dropdown-stub - class="design-version-dropdown" +<gl-new-dropdown-stub + category="tertiary" + headertext="" issueiid="" projectpath="" - text="Showing Latest Version" - variant="link" + size="small" + text="Showing latest version" + variant="default" > - <gl-dropdown-item-stub> - <router-link-stub - class="d-flex js-version-link" - to="[object Object]" - > - <div - class="flex-grow-1 ml-2" - > - <div> - <strong> - Version 2 - - <span> - (latest) - </span> - </strong> - </div> - </div> - - <i - class="fa fa-check pull-right" - /> - </router-link-stub> - </gl-dropdown-item-stub> - <gl-dropdown-item-stub> - <router-link-stub - class="d-flex js-version-link" - to="[object Object]" - > - <div - class="flex-grow-1 ml-2" - > - <div> - <strong> - Version 1 - - <!----> - </strong> - </div> - </div> - - <!----> - </router-link-stub> - </gl-dropdown-item-stub> -</gl-dropdown-stub> + <gl-new-dropdown-item-stub + avatarurl="" + iconcolor="" + iconname="" + iconrightname="" + ischecked="true" + ischeckitem="true" + secondarytext="" + > + Version + 2 + (latest) + </gl-new-dropdown-item-stub> + <gl-new-dropdown-item-stub + avatarurl="" + iconcolor="" + iconname="" + iconrightname="" + ischeckitem="true" + secondarytext="" + > + Version + 1 + + </gl-new-dropdown-item-stub> +</gl-new-dropdown-stub> `; exports[`Design management design version dropdown component renders design version list 1`] = ` -<gl-dropdown-stub - class="design-version-dropdown" +<gl-new-dropdown-stub + category="tertiary" + headertext="" issueiid="" projectpath="" - text="Showing Latest Version" - variant="link" + size="small" + text="Showing latest version" + variant="default" > - <gl-dropdown-item-stub> - <router-link-stub - class="d-flex js-version-link" - to="[object Object]" - > - <div - class="flex-grow-1 ml-2" - > - <div> - <strong> - Version 2 - - <span> - (latest) - </span> - </strong> - </div> - </div> - - <i - class="fa fa-check pull-right" - /> - </router-link-stub> - </gl-dropdown-item-stub> - <gl-dropdown-item-stub> - <router-link-stub - class="d-flex js-version-link" - to="[object Object]" - > - <div - class="flex-grow-1 ml-2" - > - <div> - <strong> - Version 1 - - <!----> - </strong> - </div> - </div> - - <!----> - </router-link-stub> - </gl-dropdown-item-stub> -</gl-dropdown-stub> + <gl-new-dropdown-item-stub + avatarurl="" + iconcolor="" + iconname="" + iconrightname="" + ischecked="true" + ischeckitem="true" + secondarytext="" + > + Version + 2 + (latest) + </gl-new-dropdown-item-stub> + <gl-new-dropdown-item-stub + avatarurl="" + iconcolor="" + iconname="" + iconrightname="" + ischeckitem="true" + secondarytext="" + > + Version + 1 + + </gl-new-dropdown-item-stub> +</gl-new-dropdown-stub> `; diff --git a/spec/frontend/design_management/components/upload/design_dropzone_spec.js b/spec/frontend/design_management/components/upload/design_dropzone_spec.js index 9b86b5b2878..bf97399368f 100644 --- a/spec/frontend/design_management/components/upload/design_dropzone_spec.js +++ b/spec/frontend/design_management/components/upload/design_dropzone_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; +import { GlIcon } from '@gitlab/ui'; import DesignDropzone from '~/design_management/components/upload/design_dropzone.vue'; -import createFlash from '~/flash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; jest.mock('~/flash'); @@ -12,10 +13,16 @@ describe('Design management dropzone component', () => { }; const findDropzoneCard = () => wrapper.find('.design-dropzone-card'); + const findDropzoneArea = () => wrapper.find('[data-testid="dropzone-area"]'); + const findIcon = () => wrapper.find(GlIcon); - function createComponent({ slots = {}, data = {} } = {}) { + function createComponent({ slots = {}, data = {}, props = {} } = {}) { wrapper = shallowMount(DesignDropzone, { slots, + propsData: { + hasDesigns: true, + ...props, + }, data() { return data; }, @@ -129,4 +136,18 @@ describe('Design management dropzone component', () => { }); }); }); + + it('applies correct classes when there are no designs or no design saving loader', () => { + createComponent({ props: { hasDesigns: false } }); + expect(findDropzoneArea().classes()).not.toContain('gl-flex-direction-column'); + expect(findIcon().classes()).toEqual(['gl-mr-3', 'gl-text-gray-500']); + expect(findIcon().props('size')).toBe(16); + }); + + it('applies correct classes when there are designs or design saving loader', () => { + createComponent({ props: { hasDesigns: true } }); + expect(findDropzoneArea().classes()).toContain('gl-flex-direction-column'); + expect(findIcon().classes()).toEqual(['gl-mb-2']); + expect(findIcon().props('size')).toBe(24); + }); }); diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js index 7521b9fad2a..f4206cdaeb3 100644 --- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js +++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js @@ -1,6 +1,6 @@ import { shallowMount } from '@vue/test-utils'; +import { GlNewDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui'; import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue'; -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import mockAllVersions from './mock_data/all_versions'; const LATEST_VERSION_ID = 3; @@ -30,7 +30,7 @@ describe('Design management design version dropdown component', () => { mocks: { $route, }, - stubs: ['router-link'], + stubs: { GlSprintf }, }); wrapper.setData({ @@ -42,7 +42,7 @@ describe('Design management design version dropdown component', () => { wrapper.destroy(); }); - const findVersionLink = index => wrapper.findAll('.js-version-link').at(index); + const findVersionLink = index => wrapper.findAll(GlNewDropdownItem).at(index); it('renders design version dropdown button', () => { createComponent(); @@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => { createComponent(); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version'); + expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version'); }); }); @@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => { createComponent({ maxVersions: 1 }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version'); + expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version'); }); }); @@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => { createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing Version #1`); + expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing version #1`); }); }); @@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => { createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version'); + expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version'); }); }); @@ -107,7 +107,7 @@ describe('Design management design version dropdown component', () => { createComponent(); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length); + expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(wrapper.vm.allVersions.length); }); }); }); diff --git a/spec/frontend/design_management/components/upload/mock_data/all_versions.js b/spec/frontend/design_management/components/upload/mock_data/all_versions.js index e76bbd261bd..237e1654f9b 100644 --- a/spec/frontend/design_management/components/upload/mock_data/all_versions.js +++ b/spec/frontend/design_management/components/upload/mock_data/all_versions.js @@ -1,14 +1,10 @@ export default [ { - node: { - id: 'gid://gitlab/DesignManagement::Version/3', - sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55', - }, + id: 'gid://gitlab/DesignManagement::Version/3', + sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55', }, { - node: { - id: 'gid://gitlab/DesignManagement::Version/2', - sha: '5b063fef0cd7213b312db65b30e24f057df21b20', - }, + id: 'gid://gitlab/DesignManagement::Version/2', + sha: '5b063fef0cd7213b312db65b30e24f057df21b20', }, ]; |