diff options
Diffstat (limited to 'spec/frontend/design_management/components/list')
-rw-r--r-- | spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap | 10 | ||||
-rw-r--r-- | spec/frontend/design_management/components/list/item_spec.js | 52 |
2 files changed, 39 insertions, 23 deletions
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 36a2ffd19c3..8fe3e92360a 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 @@ -26,9 +26,10 @@ 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" + class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img" data-qa-filename="test" data-qa-selector="design_image" + data-testid="design-img-1" src="" /> </gl-intersection-observer-stub> @@ -43,6 +44,8 @@ exports[`Design management list item component with notes renders item with mult <span class="gl-font-weight-bold str-truncated-100" data-qa-selector="design_file_name" + data-testid="design-img-filename-1" + title="test" > test </span> @@ -100,9 +103,10 @@ 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" + class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img" data-qa-filename="test" data-qa-selector="design_image" + data-testid="design-img-1" src="" /> </gl-intersection-observer-stub> @@ -117,6 +121,8 @@ exports[`Design management list item component with notes renders item with sing <span class="gl-font-weight-bold str-truncated-100" data-qa-selector="design_file_name" + data-testid="design-img-filename-1" + title="test" > test </span> diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js index 55c6ecbc26b..caf0f8bb5bc 100644 --- a/spec/frontend/design_management/components/list/item_spec.js +++ b/spec/frontend/design_management/components/list/item_spec.js @@ -1,6 +1,7 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; import VueRouter from 'vue-router'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import Item from '~/design_management/components/list/item.vue'; const localVue = createLocalVue(); @@ -17,8 +18,11 @@ const DESIGN_VERSION_EVENT = { describe('Design management list item component', () => { let wrapper; + const imgId = 1; + const imgFilename = 'test'; - const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]'); + const findDesignEvent = () => wrapper.findByTestId('design-event'); + const findImgFilename = (id = imgId) => wrapper.findByTestId(`design-img-filename-${id}`); const findEventIcon = () => findDesignEvent().find(GlIcon); const findLoadingIcon = () => wrapper.find(GlLoadingIcon); @@ -28,25 +32,27 @@ describe('Design management list item component', () => { isUploading = false, imageLoading = false, } = {}) { - wrapper = shallowMount(Item, { - localVue, - router, - propsData: { - id: 1, - filename: 'test', - image: 'http://via.placeholder.com/300', - isUploading, - event, - notesCount, - updatedAt: '01-01-2019', - }, - data() { - return { - imageLoading, - }; - }, - stubs: ['router-link'], - }); + wrapper = extendedWrapper( + shallowMount(Item, { + localVue, + router, + propsData: { + id: imgId, + filename: imgFilename, + image: 'http://via.placeholder.com/300', + isUploading, + event, + notesCount, + updatedAt: '01-01-2019', + }, + data() { + return { + imageLoading, + }; + }, + stubs: ['router-link'], + }), + ); } afterEach(() => { @@ -75,6 +81,10 @@ describe('Design management list item component', () => { return wrapper.vm.$nextTick(); }); + it('renders a tooltip', () => { + expect(findImgFilename().attributes('title')).toEqual(imgFilename); + }); + describe('before image is loaded', () => { it('renders loading spinner', () => { expect(wrapper.find(GlLoadingIcon)).toExist(); |