diff options
Diffstat (limited to 'spec/frontend/design_management/components/list/item_spec.js')
-rw-r--r-- | spec/frontend/design_management/components/list/item_spec.js | 35 |
1 files changed, 16 insertions, 19 deletions
diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js index ed105b112be..e00dda2015e 100644 --- a/spec/frontend/design_management/components/list/item_spec.js +++ b/spec/frontend/design_management/components/list/item_spec.js @@ -1,11 +1,11 @@ import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui'; -import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; 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(); -localVue.use(VueRouter); +Vue.use(VueRouter); const router = new VueRouter(); // Referenced from: gitlab_schema.graphql:DesignVersionEvent @@ -34,7 +34,6 @@ describe('Design management list item component', () => { } = {}) { wrapper = extendedWrapper( shallowMount(Item, { - localVue, router, propsData: { id: imgId, @@ -72,13 +71,13 @@ describe('Design management list item component', () => { let image; let glIntersectionObserver; - beforeEach(() => { + beforeEach(async () => { createComponent(); image = wrapper.find('img'); glIntersectionObserver = wrapper.find(GlIntersectionObserver); glIntersectionObserver.vm.$emit('appear'); - return wrapper.vm.$nextTick(); + await nextTick(); }); it('renders a tooltip', () => { @@ -92,9 +91,9 @@ describe('Design management list item component', () => { }); describe('after image is loaded', () => { - beforeEach(() => { + beforeEach(async () => { image.trigger('load'); - return wrapper.vm.$nextTick(); + await nextTick(); }); it('renders an image', () => { @@ -102,29 +101,27 @@ describe('Design management list item component', () => { expect(image.isVisible()).toBe(true); }); - it('renders media broken icon when image onerror triggered', () => { + it('renders media broken icon when image onerror triggered', async () => { image.trigger('error'); - return wrapper.vm.$nextTick().then(() => { - expect(image.isVisible()).toBe(false); - expect(wrapper.find(GlIcon).element).toMatchSnapshot(); - }); + await nextTick(); + expect(image.isVisible()).toBe(false); + expect(wrapper.find(GlIcon).element).toMatchSnapshot(); }); describe('when imageV432x230 and image provided', () => { - it('renders imageV432x230 image', () => { + it('renders imageV432x230 image', async () => { const mockSrc = 'mock-imageV432x230-url'; wrapper.setProps({ imageV432x230: mockSrc }); - return wrapper.vm.$nextTick().then(() => { - expect(image.attributes('src')).toBe(mockSrc); - }); + await nextTick(); + expect(image.attributes('src')).toBe(mockSrc); }); }); describe('when image disappears from view and then reappears', () => { - beforeEach(() => { + beforeEach(async () => { glIntersectionObserver.vm.$emit('appear'); - return wrapper.vm.$nextTick(); + await nextTick(); }); it('renders an image', () => { |