diff options
Diffstat (limited to 'spec/frontend/packages')
16 files changed, 312 insertions, 67 deletions
diff --git a/spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap index a1d08f032bc..a3423e3f4d7 100644 --- a/spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap +++ b/spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap @@ -2,11 +2,10 @@ exports[`ConanInstallation renders all the messages 1`] = ` <div> - <h3 - class="gl-font-lg" - > - Installation - </h3> + <installation-title-stub + options="[object Object]" + packagetype="conan" + /> <code-instruction-stub copytext="Copy Conan Command" diff --git a/spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap index 6d22b372d41..a6bb9e868ee 100644 --- a/spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap +++ b/spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap @@ -1,12 +1,38 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`MavenInstallation renders all the messages 1`] = ` +exports[`MavenInstallation gradle renders all the messages 1`] = ` <div> - <h3 - class="gl-font-lg" - > - Installation - </h3> + <installation-title-stub + options="[object Object],[object Object]" + packagetype="maven" + /> + + <code-instruction-stub + class="gl-mb-5" + copytext="Copy Gradle Groovy DSL install command" + instruction="foo/gradle/install" + label="Gradle Groovy DSL install command" + trackingaction="copy_gradle_install_command" + trackinglabel="code_instruction" + /> + + <code-instruction-stub + copytext="Copy add Gradle Groovy DSL repository command" + instruction="foo/gradle/add/source" + label="Add Gradle Groovy DSL repository command" + multiline="true" + trackingaction="copy_gradle_add_to_source_command" + trackinglabel="code_instruction" + /> +</div> +`; + +exports[`MavenInstallation maven renders all the messages 1`] = ` +<div> + <installation-title-stub + options="[object Object],[object Object]" + packagetype="maven" + /> <p> <gl-sprintf-stub @@ -17,7 +43,7 @@ exports[`MavenInstallation renders all the messages 1`] = ` <code-instruction-stub copytext="Copy Maven XML" instruction="foo/xml" - label="Maven XML" + label="" multiline="true" trackingaction="copy_maven_xml" trackinglabel="code_instruction" diff --git a/spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap index b616751f75f..6903d342d6a 100644 --- a/spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap +++ b/spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap @@ -2,11 +2,10 @@ exports[`NpmInstallation renders all the messages 1`] = ` <div> - <h3 - class="gl-font-lg" - > - Installation - </h3> + <installation-title-stub + options="[object Object]" + packagetype="npm" + /> <code-instruction-stub copytext="Copy npm command" diff --git a/spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap index 84cf5e4db49..04532743952 100644 --- a/spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap +++ b/spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap @@ -2,11 +2,10 @@ exports[`NugetInstallation renders all the messages 1`] = ` <div> - <h3 - class="gl-font-lg" - > - Installation - </h3> + <installation-title-stub + options="[object Object]" + packagetype="nuget" + /> <code-instruction-stub copytext="Copy NuGet Command" diff --git a/spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap index 2a588f99c1d..d5bb825d8d1 100644 --- a/spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap +++ b/spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap @@ -2,11 +2,10 @@ exports[`PypiInstallation renders all the messages 1`] = ` <div> - <h3 - class="gl-font-lg" - > - Installation - </h3> + <installation-title-stub + options="[object Object]" + packagetype="pypi" + /> <code-instruction-stub copytext="Copy Pip command" diff --git a/spec/frontend/packages/details/components/composer_installation_spec.js b/spec/frontend/packages/details/components/composer_installation_spec.js index a1d30d0ed22..18d11c7dd57 100644 --- a/spec/frontend/packages/details/components/composer_installation_spec.js +++ b/spec/frontend/packages/details/components/composer_installation_spec.js @@ -4,6 +4,7 @@ import Vuex from 'vuex'; import { registryUrl as composerHelpPath } from 'jest/packages/details/mock_data'; import { composerPackage as packageEntity } from 'jest/packages/mock_data'; import ComposerInstallation from '~/packages/details/components/composer_installation.vue'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import { TrackingActions } from '~/packages/details/constants'; @@ -33,6 +34,7 @@ describe('ComposerInstallation', () => { const findPackageInclude = () => wrapper.find('[data-testid="package-include"]'); const findHelpText = () => wrapper.find('[data-testid="help-text"]'); const findHelpLink = () => wrapper.find(GlLink); + const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); function createComponent() { wrapper = shallowMount(ComposerInstallation, { @@ -48,6 +50,19 @@ describe('ComposerInstallation', () => { wrapper.destroy(); }); + describe('install command switch', () => { + it('has the installation title component', () => { + createStore(); + createComponent(); + + expect(findInstallationTitle().exists()).toBe(true); + expect(findInstallationTitle().props()).toMatchObject({ + packageType: 'composer', + options: [{ value: 'composer', label: 'Show Composer commands' }], + }); + }); + }); + describe('registry include command', () => { beforeEach(() => { createStore(); diff --git a/spec/frontend/packages/details/components/conan_installation_spec.js b/spec/frontend/packages/details/components/conan_installation_spec.js index bf8a92a6350..78a7d265a21 100644 --- a/spec/frontend/packages/details/components/conan_installation_spec.js +++ b/spec/frontend/packages/details/components/conan_installation_spec.js @@ -1,6 +1,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import ConanInstallation from '~/packages/details/components/conan_installation.vue'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue'; import { conanPackage as packageEntity } from '../../mock_data'; import { registryUrl as conanPath } from '../mock_data'; @@ -26,6 +27,7 @@ describe('ConanInstallation', () => { }); const findCodeInstructions = () => wrapper.findAll(CodeInstructions); + const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); function createComponent() { wrapper = shallowMount(ConanInstallation, { @@ -39,13 +41,23 @@ describe('ConanInstallation', () => { }); afterEach(() => { - if (wrapper) wrapper.destroy(); + wrapper.destroy(); }); it('renders all the messages', () => { expect(wrapper.element).toMatchSnapshot(); }); + describe('install command switch', () => { + it('has the installation title component', () => { + expect(findInstallationTitle().exists()).toBe(true); + expect(findInstallationTitle().props()).toMatchObject({ + packageType: 'conan', + options: [{ value: 'conan', label: 'Show Conan commands' }], + }); + }); + }); + describe('installation commands', () => { it('renders the correct command', () => { expect(findCodeInstructions().at(0).props('instruction')).toBe(conanInstallationCommandStr); diff --git a/spec/frontend/packages/details/components/installation_title_spec.js b/spec/frontend/packages/details/components/installation_title_spec.js new file mode 100644 index 00000000000..14e990d3011 --- /dev/null +++ b/spec/frontend/packages/details/components/installation_title_spec.js @@ -0,0 +1,58 @@ +import { shallowMount } from '@vue/test-utils'; + +import InstallationTitle from '~/packages/details/components/installation_title.vue'; +import PersistedDropdownSelection from '~/vue_shared/components/registry/persisted_dropdown_selection.vue'; + +describe('InstallationTitle', () => { + let wrapper; + + const defaultProps = { packageType: 'foo', options: [{ value: 'foo', label: 'bar' }] }; + + const findPersistedDropdownSelection = () => wrapper.findComponent(PersistedDropdownSelection); + const findTitle = () => wrapper.find('h3'); + + function createComponent({ props = {} } = {}) { + wrapper = shallowMount(InstallationTitle, { + propsData: { + ...defaultProps, + ...props, + }, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + it('has a title', () => { + createComponent(); + + expect(findTitle().exists()).toBe(true); + expect(findTitle().text()).toBe('Installation'); + }); + + describe('persisted dropdown selection', () => { + it('exists', () => { + createComponent(); + + expect(findPersistedDropdownSelection().exists()).toBe(true); + }); + + it('has the correct props', () => { + createComponent(); + + expect(findPersistedDropdownSelection().props()).toMatchObject({ + storageKey: 'package_foo_installation_instructions', + options: defaultProps.options, + }); + }); + + it('on change event emits a change event', () => { + createComponent(); + + findPersistedDropdownSelection().vm.$emit('change', 'baz'); + + expect(wrapper.emitted('change')).toEqual([['baz']]); + }); + }); +}); diff --git a/spec/frontend/packages/details/components/maven_installation_spec.js b/spec/frontend/packages/details/components/maven_installation_spec.js index dfeb6002186..d49a7c0b561 100644 --- a/spec/frontend/packages/details/components/maven_installation_spec.js +++ b/spec/frontend/packages/details/components/maven_installation_spec.js @@ -1,7 +1,9 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { nextTick } from 'vue'; import Vuex from 'vuex'; import { registryUrl as mavenPath } from 'jest/packages/details/mock_data'; import { mavenPackage as packageEntity } from 'jest/packages/mock_data'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import MavenInstallation from '~/packages/details/components/maven_installation.vue'; import { TrackingActions } from '~/packages/details/constants'; import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue'; @@ -15,6 +17,8 @@ describe('MavenInstallation', () => { const xmlCodeBlock = 'foo/xml'; const mavenCommandStr = 'foo/command'; const mavenSetupXml = 'foo/setup'; + const gradleGroovyInstallCommandText = 'foo/gradle/install'; + const gradleGroovyAddSourceCommandText = 'foo/gradle/add/source'; const store = new Vuex.Store({ state: { @@ -25,54 +29,120 @@ describe('MavenInstallation', () => { mavenInstallationXml: () => xmlCodeBlock, mavenInstallationCommand: () => mavenCommandStr, mavenSetupXml: () => mavenSetupXml, + gradleGroovyInstalCommand: () => gradleGroovyInstallCommandText, + gradleGroovyAddSourceCommand: () => gradleGroovyAddSourceCommandText, }, }); const findCodeInstructions = () => wrapper.findAll(CodeInstructions); + const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); - function createComponent() { + function createComponent({ data = {} } = {}) { wrapper = shallowMount(MavenInstallation, { localVue, store, + data() { + return data; + }, }); } - beforeEach(() => { - createComponent(); - }); - afterEach(() => { - if (wrapper) wrapper.destroy(); + wrapper.destroy(); }); - it('renders all the messages', () => { - expect(wrapper.element).toMatchSnapshot(); + describe('install command switch', () => { + it('has the installation title component', () => { + createComponent(); + + expect(findInstallationTitle().exists()).toBe(true); + expect(findInstallationTitle().props()).toMatchObject({ + packageType: 'maven', + options: [ + { value: 'maven', label: 'Show Maven commands' }, + { value: 'groovy', label: 'Show Gradle Groovy DSL commands' }, + ], + }); + }); + + it('on change event updates the instructions to show', async () => { + createComponent(); + + expect(findCodeInstructions().at(0).props('instruction')).toBe(xmlCodeBlock); + findInstallationTitle().vm.$emit('change', 'groovy'); + + await nextTick(); + + expect(findCodeInstructions().at(0).props('instruction')).toBe( + gradleGroovyInstallCommandText, + ); + }); }); - describe('installation commands', () => { - it('renders the correct xml block', () => { - expect(findCodeInstructions().at(0).props()).toMatchObject({ - instruction: xmlCodeBlock, - multiline: true, - trackingAction: TrackingActions.COPY_MAVEN_XML, + describe('maven', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders all the messages', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + describe('installation commands', () => { + it('renders the correct xml block', () => { + expect(findCodeInstructions().at(0).props()).toMatchObject({ + instruction: xmlCodeBlock, + multiline: true, + trackingAction: TrackingActions.COPY_MAVEN_XML, + }); + }); + + it('renders the correct maven command', () => { + expect(findCodeInstructions().at(1).props()).toMatchObject({ + instruction: mavenCommandStr, + multiline: false, + trackingAction: TrackingActions.COPY_MAVEN_COMMAND, + }); }); }); - it('renders the correct maven command', () => { - expect(findCodeInstructions().at(1).props()).toMatchObject({ - instruction: mavenCommandStr, - multiline: false, - trackingAction: TrackingActions.COPY_MAVEN_COMMAND, + describe('setup commands', () => { + it('renders the correct xml block', () => { + expect(findCodeInstructions().at(2).props()).toMatchObject({ + instruction: mavenSetupXml, + multiline: true, + trackingAction: TrackingActions.COPY_MAVEN_SETUP, + }); }); }); }); - describe('setup commands', () => { - it('renders the correct xml block', () => { - expect(findCodeInstructions().at(2).props()).toMatchObject({ - instruction: mavenSetupXml, - multiline: true, - trackingAction: TrackingActions.COPY_MAVEN_SETUP, + describe('gradle', () => { + beforeEach(() => { + createComponent({ data: { instructionType: 'gradle' } }); + }); + + it('renders all the messages', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + describe('installation commands', () => { + it('renders the gradle install command', () => { + expect(findCodeInstructions().at(0).props()).toMatchObject({ + instruction: gradleGroovyInstallCommandText, + multiline: false, + trackingAction: TrackingActions.COPY_GRADLE_INSTALL_COMMAND, + }); + }); + }); + + describe('setup commands', () => { + it('renders the correct gradle command', () => { + expect(findCodeInstructions().at(1).props()).toMatchObject({ + instruction: gradleGroovyAddSourceCommandText, + multiline: true, + trackingAction: TrackingActions.COPY_GRADLE_ADD_TO_SOURCE_COMMAND, + }); }); }); }); diff --git a/spec/frontend/packages/details/components/npm_installation_spec.js b/spec/frontend/packages/details/components/npm_installation_spec.js index df820e7e948..09afcd4fd0a 100644 --- a/spec/frontend/packages/details/components/npm_installation_spec.js +++ b/spec/frontend/packages/details/components/npm_installation_spec.js @@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import { registryUrl as nugetPath } from 'jest/packages/details/mock_data'; import { npmPackage as packageEntity } from 'jest/packages/mock_data'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import NpmInstallation from '~/packages/details/components/npm_installation.vue'; import { TrackingActions } from '~/packages/details/constants'; import { npmInstallationCommand, npmSetupCommand } from '~/packages/details/store/getters'; @@ -14,6 +15,7 @@ describe('NpmInstallation', () => { let wrapper; const findCodeInstructions = () => wrapper.findAll(CodeInstructions); + const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); function createComponent() { const store = new Vuex.Store({ @@ -38,13 +40,23 @@ describe('NpmInstallation', () => { }); afterEach(() => { - if (wrapper) wrapper.destroy(); + wrapper.destroy(); }); it('renders all the messages', () => { expect(wrapper.element).toMatchSnapshot(); }); + describe('install command switch', () => { + it('has the installation title component', () => { + expect(findInstallationTitle().exists()).toBe(true); + expect(findInstallationTitle().props()).toMatchObject({ + packageType: 'npm', + options: [{ value: 'npm', label: 'Show NPM commands' }], + }); + }); + }); + describe('installation commands', () => { it('renders the correct npm command', () => { expect(findCodeInstructions().at(0).props()).toMatchObject({ diff --git a/spec/frontend/packages/details/components/nuget_installation_spec.js b/spec/frontend/packages/details/components/nuget_installation_spec.js index 100e369751c..8839a8f1108 100644 --- a/spec/frontend/packages/details/components/nuget_installation_spec.js +++ b/spec/frontend/packages/details/components/nuget_installation_spec.js @@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import { registryUrl as nugetPath } from 'jest/packages/details/mock_data'; import { nugetPackage as packageEntity } from 'jest/packages/mock_data'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import NugetInstallation from '~/packages/details/components/nuget_installation.vue'; import { TrackingActions } from '~/packages/details/constants'; import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue'; @@ -27,6 +28,7 @@ describe('NugetInstallation', () => { }); const findCodeInstructions = () => wrapper.findAll(CodeInstructions); + const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); function createComponent() { wrapper = shallowMount(NugetInstallation, { @@ -40,13 +42,23 @@ describe('NugetInstallation', () => { }); afterEach(() => { - if (wrapper) wrapper.destroy(); + wrapper.destroy(); }); it('renders all the messages', () => { expect(wrapper.element).toMatchSnapshot(); }); + describe('install command switch', () => { + it('has the installation title component', () => { + expect(findInstallationTitle().exists()).toBe(true); + expect(findInstallationTitle().props()).toMatchObject({ + packageType: 'nuget', + options: [{ value: 'nuget', label: 'Show Nuget commands' }], + }); + }); + }); + describe('installation commands', () => { it('renders the correct command', () => { expect(findCodeInstructions().at(0).props()).toMatchObject({ diff --git a/spec/frontend/packages/details/components/pypi_installation_spec.js b/spec/frontend/packages/details/components/pypi_installation_spec.js index a6ccba71554..2cec84282d9 100644 --- a/spec/frontend/packages/details/components/pypi_installation_spec.js +++ b/spec/frontend/packages/details/components/pypi_installation_spec.js @@ -1,6 +1,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import { pypiPackage as packageEntity } from 'jest/packages/mock_data'; +import InstallationTitle from '~/packages/details/components/installation_title.vue'; import PypiInstallation from '~/packages/details/components/pypi_installation.vue'; const localVue = createLocalVue(); @@ -26,6 +27,8 @@ describe('PypiInstallation', () => { const pipCommand = () => wrapper.find('[data-testid="pip-command"]'); const setupInstruction = () => wrapper.find('[data-testid="pypi-setup-content"]'); + const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); + function createComponent() { wrapper = shallowMount(PypiInstallation, { localVue, @@ -39,7 +42,16 @@ describe('PypiInstallation', () => { afterEach(() => { wrapper.destroy(); - wrapper = null; + }); + + describe('install command switch', () => { + it('has the installation title component', () => { + expect(findInstallationTitle().exists()).toBe(true); + expect(findInstallationTitle().props()).toMatchObject({ + packageType: 'pypi', + options: [{ value: 'pypi', label: 'Show PyPi commands' }], + }); + }); }); it('renders all the messages', () => { diff --git a/spec/frontend/packages/details/store/getters_spec.js b/spec/frontend/packages/details/store/getters_spec.js index 07c120f57f7..fa7123c813d 100644 --- a/spec/frontend/packages/details/store/getters_spec.js +++ b/spec/frontend/packages/details/store/getters_spec.js @@ -17,6 +17,8 @@ import { composerRegistryInclude, composerPackageInclude, groupExists, + gradleGroovyInstalCommand, + gradleGroovyAddSourceCommand, } from '~/packages/details/store/getters'; import { conanPackage, @@ -99,7 +101,7 @@ describe('Getters PackageDetails Store', () => { packageEntity | expectedResult ${conanPackage} | ${'Conan'} ${packageWithoutBuildInfo} | ${'Maven'} - ${npmPackage} | ${'NPM'} + ${npmPackage} | ${'npm'} ${nugetPackage} | ${'NuGet'} ${pypiPackage} | ${'PyPI'} `(`package type`, ({ packageEntity, expectedResult }) => { @@ -168,13 +170,13 @@ describe('Getters PackageDetails Store', () => { }); describe('npm string getters', () => { - it('gets the correct npmInstallationCommand for NPM', () => { + it('gets the correct npmInstallationCommand for npm', () => { setupState({ packageEntity: npmPackage }); expect(npmInstallationCommand(state)(NpmManager.NPM)).toBe(npmInstallStr); }); - it('gets the correct npmSetupCommand for NPM', () => { + it('gets the correct npmSetupCommand for npm', () => { setupState({ packageEntity: npmPackage }); expect(npmSetupCommand(state)(NpmManager.NPM)).toBe(npmSetupStr); @@ -235,6 +237,26 @@ describe('Getters PackageDetails Store', () => { }); }); + describe('gradle groovy string getters', () => { + it('gets the correct gradleGroovyInstalCommand', () => { + setupState(); + + expect(gradleGroovyInstalCommand(state)).toMatchInlineSnapshot( + `"implementation 'com.test.app:test-app:1.0-SNAPSHOT'"`, + ); + }); + + it('gets the correct gradleGroovyAddSourceCommand', () => { + setupState(); + + expect(gradleGroovyAddSourceCommand(state)).toMatchInlineSnapshot(` + "gitlab { + url \\"foo/registry\\" + }" + `); + }); + }); + describe('check if group', () => { it('is set', () => { setupState({ groupListUrl: '/groups/composer/-/packages' }); diff --git a/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap index 4a75deebcf9..77095f7c611 100644 --- a/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap +++ b/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap @@ -6,7 +6,7 @@ exports[`packages_list_row renders 1`] = ` data-qa-selector="package_row" > <div - class="gl-display-flex gl-align-items-center gl-py-3" + class="gl-display-flex gl-align-items-center gl-py-3 gl-px-5" > <!----> @@ -102,7 +102,7 @@ exports[`packages_list_row renders 1`] = ` <gl-button-stub aria-label="Remove package" buttontextclasses="" - category="primary" + category="secondary" data-testid="action-delete" icon="remove" size="medium" diff --git a/spec/frontend/packages/shared/components/package_list_row_spec.js b/spec/frontend/packages/shared/components/package_list_row_spec.js index bd122167273..1c0ef7e3539 100644 --- a/spec/frontend/packages/shared/components/package_list_row_spec.js +++ b/spec/frontend/packages/shared/components/package_list_row_spec.js @@ -60,11 +60,9 @@ describe('packages_list_row', () => { }); describe('when is is group', () => { - beforeEach(() => { + it('has a package path component', () => { mountComponent({ isGroup: true }); - }); - it('has a package path component', () => { expect(findPackagePath().exists()).toBe(true); expect(findPackagePath().props()).toMatchObject({ path: 'foo/bar/baz' }); }); @@ -92,10 +90,22 @@ describe('packages_list_row', () => { }); }); - describe('delete event', () => { - beforeEach(() => mountComponent({ packageEntity: packageWithoutTags })); + describe('delete button', () => { + it('exists and has the correct props', () => { + mountComponent({ packageEntity: packageWithoutTags }); + + expect(findDeleteButton().exists()).toBe(true); + expect(findDeleteButton().attributes()).toMatchObject({ + icon: 'remove', + category: 'secondary', + variant: 'danger', + title: 'Remove package', + }); + }); it('emits the packageToDelete event when the delete button is clicked', async () => { + mountComponent({ packageEntity: packageWithoutTags }); + findDeleteButton().vm.$emit('click'); await wrapper.vm.$nextTick(); diff --git a/spec/frontend/packages/shared/utils_spec.js b/spec/frontend/packages/shared/utils_spec.js index 506f37f8895..4a95def1bef 100644 --- a/spec/frontend/packages/shared/utils_spec.js +++ b/spec/frontend/packages/shared/utils_spec.js @@ -35,7 +35,7 @@ describe('Packages shared utils', () => { packageType | expectedResult ${'conan'} | ${'Conan'} ${'maven'} | ${'Maven'} - ${'npm'} | ${'NPM'} + ${'npm'} | ${'npm'} ${'nuget'} | ${'NuGet'} ${'pypi'} | ${'PyPI'} ${'composer'} | ${'Composer'} |