diff options
Diffstat (limited to 'spec/frontend/packages/details/components/package_title_spec.js')
-rw-r--r-- | spec/frontend/packages/details/components/package_title_spec.js | 99 |
1 files changed, 55 insertions, 44 deletions
diff --git a/spec/frontend/packages/details/components/package_title_spec.js b/spec/frontend/packages/details/components/package_title_spec.js index a30dc4b8aba..d0ed78418af 100644 --- a/spec/frontend/packages/details/components/package_title_spec.js +++ b/spec/frontend/packages/details/components/package_title_spec.js @@ -2,6 +2,7 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import PackageTitle from '~/packages/details/components/package_title.vue'; import PackageTags from '~/packages/shared/components/package_tags.vue'; +import TitleArea from '~/vue_shared/components/registry/title_area.vue'; import { conanPackage, mavenFiles, @@ -39,10 +40,14 @@ describe('PackageTitle', () => { wrapper = shallowMount(PackageTitle, { localVue, store, + stubs: { + TitleArea, + }, }); + return wrapper.vm.$nextTick(); } - const packageIcon = () => wrapper.find('[data-testid="package-icon"]'); + const findTitleArea = () => wrapper.find(TitleArea); const packageType = () => wrapper.find('[data-testid="package-type"]'); const packageSize = () => wrapper.find('[data-testid="package-size"]'); const pipelineProject = () => wrapper.find('[data-testid="pipeline-project"]'); @@ -54,72 +59,74 @@ describe('PackageTitle', () => { }); describe('renders', () => { - it('without tags', () => { - createComponent(); + it('without tags', async () => { + await createComponent(); expect(wrapper.element).toMatchSnapshot(); }); - it('with tags', () => { - createComponent({ packageEntity: { ...mavenPackage, tags: mockTags } }); + it('with tags', async () => { + await createComponent({ packageEntity: { ...mavenPackage, tags: mockTags } }); expect(wrapper.element).toMatchSnapshot(); }); }); - describe('package icon', () => { - const fakeSrc = 'a-fake-src'; - - it('shows an icon when provided one from vuex', () => { - createComponent({ icon: fakeSrc }); + describe('package title', () => { + it('is correctly bound', async () => { + await createComponent(); - expect(packageIcon().exists()).toBe(true); + expect(findTitleArea().props('title')).toBe('Test package'); }); + }); - it('has the correct src attribute', () => { - createComponent({ icon: fakeSrc }); + describe('package icon', () => { + const fakeSrc = 'a-fake-src'; + + it('binds an icon when provided one from vuex', async () => { + await createComponent({ icon: fakeSrc }); - expect(packageIcon().props('src')).toBe(fakeSrc); + expect(findTitleArea().props('avatar')).toBe(fakeSrc); }); - it('does not show an icon when not provided one', () => { - createComponent(); + it('do not binds an icon when not provided one', async () => { + await createComponent(); - expect(packageIcon().exists()).toBe(false); + expect(findTitleArea().props('avatar')).toBe(null); }); }); describe.each` - packageEntity | expectedResult + packageEntity | text ${conanPackage} | ${'conan'} ${mavenPackage} | ${'maven'} ${npmPackage} | ${'npm'} ${nugetPackage} | ${'nuget'} - `(`package type`, ({ packageEntity, expectedResult }) => { + `(`package type`, ({ packageEntity, text }) => { beforeEach(() => createComponent({ packageEntity })); - it(`${packageEntity.package_type} should render from Vuex getters ${expectedResult}`, () => { - expect(packageType().text()).toBe(expectedResult); + it(`${packageEntity.package_type} should render from Vuex getters ${text}`, () => { + expect(packageType().props()).toEqual(expect.objectContaining({ text, icon: 'package' })); }); }); describe('calculates the package size', () => { - it('correctly calulates when there is only 1 file', () => { - createComponent({ packageEntity: npmPackage, packageFiles: npmFiles }); + it('correctly calculates when there is only 1 file', async () => { + await createComponent({ packageEntity: npmPackage, packageFiles: npmFiles }); - expect(packageSize().text()).toBe('200 bytes'); + expect(packageSize().props()).toMatchObject({ text: '200 bytes', icon: 'disk' }); }); - it('correctly calulates when there are multiple files', () => { - createComponent(); + it('correctly calulates when there are multiple files', async () => { + await createComponent(); - expect(packageSize().text()).toBe('300 bytes'); + expect(packageSize().props('text')).toBe('300 bytes'); }); }); describe('package tags', () => { - it('displays the package-tags component when the package has tags', () => { - createComponent({ + it('displays the package-tags component when the package has tags', async () => { + await createComponent({ packageEntity: { ...npmPackage, tags: mockTags, @@ -129,40 +136,44 @@ describe('PackageTitle', () => { expect(packageTags().exists()).toBe(true); }); - it('does not display the package-tags component when there are no tags', () => { - createComponent(); + it('does not display the package-tags component when there are no tags', async () => { + await createComponent(); expect(packageTags().exists()).toBe(false); }); }); describe('package ref', () => { - it('does not display the ref if missing', () => { - createComponent(); + it('does not display the ref if missing', async () => { + await createComponent(); expect(packageRef().exists()).toBe(false); }); - it('correctly shows the package ref if there is one', () => { - createComponent({ packageEntity: npmPackage }); - - expect(packageRef().contains('gl-icon-stub')).toBe(true); - expect(packageRef().text()).toBe(npmPackage.pipeline.ref); + it('correctly shows the package ref if there is one', async () => { + await createComponent({ packageEntity: npmPackage }); + expect(packageRef().props()).toMatchObject({ + text: npmPackage.pipeline.ref, + icon: 'branch', + }); }); }); describe('pipeline project', () => { - it('does not display the project if missing', () => { - createComponent(); + it('does not display the project if missing', async () => { + await createComponent(); expect(pipelineProject().exists()).toBe(false); }); - it('correctly shows the pipeline project if there is one', () => { - createComponent({ packageEntity: npmPackage }); + it('correctly shows the pipeline project if there is one', async () => { + await createComponent({ packageEntity: npmPackage }); - expect(pipelineProject().text()).toBe(npmPackage.pipeline.project.name); - expect(pipelineProject().attributes('href')).toBe(npmPackage.pipeline.project.web_url); + expect(pipelineProject().props()).toMatchObject({ + text: npmPackage.pipeline.project.name, + icon: 'review-list', + link: npmPackage.pipeline.project.web_url, + }); }); }); }); |