diff options
Diffstat (limited to 'spec/frontend/design_management/components/toolbar')
-rw-r--r-- | spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap (renamed from spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap) | 24 | ||||
-rw-r--r-- | spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap | 76 | ||||
-rw-r--r-- | spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap | 28 | ||||
-rw-r--r-- | spec/frontend/design_management/components/toolbar/design_navigation_spec.js (renamed from spec/frontend/design_management/components/toolbar/pagination_spec.js) | 6 | ||||
-rw-r--r-- | spec/frontend/design_management/components/toolbar/index_spec.js | 4 | ||||
-rw-r--r-- | spec/frontend/design_management/components/toolbar/pagination_button_spec.js | 61 |
6 files changed, 58 insertions, 141 deletions
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap index 0197b4bff79..a7d6145285c 100644 --- a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap +++ b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap @@ -2,28 +2,34 @@ exports[`Design management pagination component hides components when designs are empty 1`] = `<!---->`; -exports[`Design management pagination component renders pagination buttons 1`] = ` +exports[`Design management pagination component renders navigation buttons 1`] = ` <div class="d-flex align-items-center" > 0 of 2 - <div - class="btn-group ml-3 mr-3" + <gl-button-group-stub + class="ml-3 mr-3" > - <pagination-button-stub + <gl-button-stub + category="primary" class="js-previous-design" - iconname="angle-left" + disabled="true" + icon="angle-left" + size="medium" title="Go to previous design" + variant="default" /> - <pagination-button-stub + <gl-button-stub + category="primary" class="js-next-design" - design="[object Object]" - iconname="angle-right" + icon="angle-right" + size="medium" title="Go to next design" + variant="default" /> - </div> + </gl-button-group-stub> </div> `; 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 e55cff8de3d..b286a74ebb8 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 @@ -2,60 +2,60 @@ exports[`Design management toolbar component renders design and updated data 1`] = ` <header - class="d-flex p-2 bg-white align-items-center js-design-header" + class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-bg-white gl-py-4 gl-pl-4 js-design-header" > - <a - aria-label="Go back to designs" - class="mr-3 text-plain d-flex justify-content-center align-items-center" - > - <icon-stub - name="close" - size="18" - /> - </a> - <div - class="overflow-hidden d-flex align-items-center" + class="gl-display-flex gl-align-items-center" > - <h2 - class="m-0 str-truncated-100 gl-font-base" + <a + aria-label="Go back to designs" + class="gl-mr-5 gl-display-flex gl-align-items-center gl-justify-content-center text-plain" + data-testid="close-design" > - test.jpg - </h2> + <gl-icon-stub + name="close" + size="16" + /> + </a> - <small - class="text-secondary" + <div + class="overflow-hidden d-flex align-items-center" > - Updated 1 hour ago by Test Name - </small> + <h2 + class="m-0 str-truncated-100 gl-font-base" + > + test.jpg + </h2> + + <small + class="text-secondary" + > + Updated 1 hour ago by Test Name + </small> + </div> </div> - <pagination-stub + <design-navigation-stub class="ml-auto flex-shrink-0" id="1" /> - <gl-deprecated-button-stub - class="mr-2" + <gl-button-stub + category="primary" href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d" - size="md" - variant="secondary" - > - <icon-stub - name="download" - size="18" - /> - </gl-deprecated-button-stub> + icon="download" + size="medium" + variant="default" + /> <delete-button-stub + buttoncategory="secondary" buttonclass="" - buttonvariant="danger" + buttonicon="archive" + buttonsize="medium" + buttonvariant="warning" + class="gl-ml-3" hasselecteddesigns="true" - > - <icon-stub - name="remove" - size="18" - /> - </delete-button-stub> + /> </header> `; diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap deleted file mode 100644 index 08662a04f15..00000000000 --- a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Design management pagination button component disables button when no design is passed 1`] = ` -<router-link-stub - aria-label="Test title" - class="btn btn-default disabled" - disabled="true" - to="[object Object]" -> - <icon-stub - name="angle-right" - size="16" - /> -</router-link-stub> -`; - -exports[`Design management pagination button component renders router-link 1`] = ` -<router-link-stub - aria-label="Test title" - class="btn btn-default" - to="[object Object]" -> - <icon-stub - name="angle-right" - size="16" - /> -</router-link-stub> -`; diff --git a/spec/frontend/design_management/components/toolbar/pagination_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js index db5a36dadf6..1c6588a9628 100644 --- a/spec/frontend/design_management/components/toolbar/pagination_spec.js +++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js @@ -1,7 +1,7 @@ /* global Mousetrap */ import 'mousetrap'; import { shallowMount } from '@vue/test-utils'; -import Pagination from '~/design_management/components/toolbar/pagination.vue'; +import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue'; import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; const push = jest.fn(); @@ -18,7 +18,7 @@ describe('Design management pagination component', () => { let wrapper; function createComponent() { - wrapper = shallowMount(Pagination, { + wrapper = shallowMount(DesignNavigation, { propsData: { id: '2', }, @@ -41,7 +41,7 @@ describe('Design management pagination component', () => { expect(wrapper.element).toMatchSnapshot(); }); - it('renders pagination buttons', () => { + it('renders navigation buttons', () => { wrapper.setData({ designs: [{ id: '1' }, { id: '2' }], }); diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js index 2910b2f62ba..2914365b0df 100644 --- a/spec/frontend/design_management/components/toolbar/index_spec.js +++ b/spec/frontend/design_management/components/toolbar/index_spec.js @@ -1,9 +1,9 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; import VueRouter from 'vue-router'; +import { GlButton } from '@gitlab/ui'; import Toolbar from '~/design_management/components/toolbar/index.vue'; import DeleteButton from '~/design_management/components/delete_button.vue'; import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants'; -import { GlDeprecatedButton } from '@gitlab/ui'; const localVue = createLocalVue(); localVue.use(VueRouter); @@ -116,7 +116,7 @@ describe('Design management toolbar component', () => { }); it('renders download button with correct link', () => { - expect(wrapper.find(GlDeprecatedButton).attributes('href')).toBe( + expect(wrapper.find(GlButton).attributes('href')).toBe( '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d', ); }); diff --git a/spec/frontend/design_management/components/toolbar/pagination_button_spec.js b/spec/frontend/design_management/components/toolbar/pagination_button_spec.js deleted file mode 100644 index b7df201795b..00000000000 --- a/spec/frontend/design_management/components/toolbar/pagination_button_spec.js +++ /dev/null @@ -1,61 +0,0 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import VueRouter from 'vue-router'; -import PaginationButton from '~/design_management/components/toolbar/pagination_button.vue'; -import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; - -const localVue = createLocalVue(); -localVue.use(VueRouter); -const router = new VueRouter(); - -describe('Design management pagination button component', () => { - let wrapper; - - function createComponent(design = null) { - wrapper = shallowMount(PaginationButton, { - localVue, - router, - propsData: { - design, - title: 'Test title', - iconName: 'angle-right', - }, - stubs: ['router-link'], - }); - } - - afterEach(() => { - wrapper.destroy(); - }); - - it('disables button when no design is passed', () => { - createComponent(); - - expect(wrapper.element).toMatchSnapshot(); - }); - - it('renders router-link', () => { - createComponent({ id: '2' }); - - expect(wrapper.element).toMatchSnapshot(); - }); - - describe('designLink', () => { - it('returns empty link when design is null', () => { - createComponent(); - - expect(wrapper.vm.designLink).toEqual({}); - }); - - it('returns design link', () => { - createComponent({ id: '2', filename: 'test' }); - - wrapper.vm.$router.replace('/root/test-project/issues/1/designs/test?version=1'); - - expect(wrapper.vm.designLink).toEqual({ - name: DESIGN_ROUTE_NAME, - params: { id: 'test' }, - query: { version: '1' }, - }); - }); - }); -}); |