Commit 17759644 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '340590-refactor-additional-metadata-component-in-package-details' into 'master'

Split metadata component in package details

See merge request gitlab-org/gitlab!70409
parents 97f8e00f eedde475
<script> <script>
import { GlLink, GlSprintf } from '@gitlab/ui'; import Composer from '~/packages_and_registries/package_registry/components/details/metadata/composer.vue';
import { s__ } from '~/locale'; import Conan from '~/packages_and_registries/package_registry/components/details/metadata/conan.vue';
import Maven from '~/packages_and_registries/package_registry/components/details/metadata/maven.vue';
import Nuget from '~/packages_and_registries/package_registry/components/details/metadata/nuget.vue';
import Pypi from '~/packages_and_registries/package_registry/components/details/metadata/pypi.vue';
import { import {
PACKAGE_TYPE_NUGET, PACKAGE_TYPE_COMPOSER,
PACKAGE_TYPE_CONAN, PACKAGE_TYPE_CONAN,
PACKAGE_TYPE_MAVEN, PACKAGE_TYPE_MAVEN,
PACKAGE_TYPE_COMPOSER, PACKAGE_TYPE_NUGET,
PACKAGE_TYPE_PYPI, PACKAGE_TYPE_PYPI,
} from '~/packages_and_registries/package_registry/constants'; } from '~/packages_and_registries/package_registry/constants';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
export default { export default {
i18n: {
sourceText: s__('PackageRegistry|Source project located at %{link}'),
licenseText: s__('PackageRegistry|License information located at %{link}'),
recipeText: s__('PackageRegistry|Recipe: %{recipe}'),
appGroup: s__('PackageRegistry|App group: %{group}'),
appName: s__('PackageRegistry|App name: %{name}'),
targetShaCopyButton: s__('PackageRegistry|Copy target SHA'),
targetSha: s__('PackageRegistry|Target SHA: %{sha}'),
composerJson: s__(
'PackageRegistry|Composer.json with license: %{license} and version: %{version}',
),
requiredPython: s__('PackageRegistry|Required Python: %{pythonVersion}'),
},
components: { components: {
DetailsRow, Composer,
GlLink, Conan,
GlSprintf, Maven,
ClipboardButton, Nuget,
Pypi,
}, },
props: { props: {
packageEntity: { packageEntity: {
...@@ -38,31 +27,17 @@ export default { ...@@ -38,31 +27,17 @@ export default {
}, },
}, },
computed: { computed: {
showMetadata() { metadataComponent() {
return ( return {
[ [PACKAGE_TYPE_COMPOSER]: Composer,
PACKAGE_TYPE_NUGET, [PACKAGE_TYPE_CONAN]: Conan,
PACKAGE_TYPE_CONAN, [PACKAGE_TYPE_MAVEN]: Maven,
PACKAGE_TYPE_MAVEN, [PACKAGE_TYPE_NUGET]: Nuget,
PACKAGE_TYPE_COMPOSER, [PACKAGE_TYPE_PYPI]: Pypi,
PACKAGE_TYPE_PYPI, }[this.packageEntity.packageType];
].includes(this.packageEntity.packageType) && this.packageEntity.metadata
);
}, },
showNugetMetadata() { showMetadata() {
return this.packageEntity.packageType === PACKAGE_TYPE_NUGET; return this.metadataComponent && this.packageEntity.metadata;
},
showConanMetadata() {
return this.packageEntity.packageType === PACKAGE_TYPE_CONAN;
},
showMavenMetadata() {
return this.packageEntity.packageType === PACKAGE_TYPE_MAVEN;
},
showComposerMetadata() {
return this.packageEntity.packageType === PACKAGE_TYPE_COMPOSER;
},
showPypiMetadata() {
return this.packageEntity.packageType === PACKAGE_TYPE_PYPI;
}, },
}, },
}; };
...@@ -71,95 +46,12 @@ export default { ...@@ -71,95 +46,12 @@ export default {
<template> <template>
<div v-if="showMetadata"> <div v-if="showMetadata">
<h3 class="gl-font-lg" data-testid="title">{{ __('Additional Metadata') }}</h3> <h3 class="gl-font-lg" data-testid="title">{{ __('Additional Metadata') }}</h3>
<div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" data-testid="main"> <div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" data-testid="main">
<template v-if="showNugetMetadata"> <component
<details-row icon="project" padding="gl-p-4" dashed data-testid="nuget-source"> :is="metadataComponent"
<gl-sprintf :message="$options.i18n.sourceText"> :package-entity="packageEntity"
<template #link> data-testid="component-is"
<gl-link :href="packageEntity.metadata.projectUrl" target="_blank">{{
packageEntity.metadata.projectUrl
}}</gl-link>
</template>
</gl-sprintf>
</details-row>
<details-row icon="license" padding="gl-p-4" data-testid="nuget-license">
<gl-sprintf :message="$options.i18n.licenseText">
<template #link>
<gl-link :href="packageEntity.metadata.licenseUrl" target="_blank">{{
packageEntity.metadata.licenseUrl
}}</gl-link>
</template>
</gl-sprintf>
</details-row>
</template>
<details-row
v-else-if="showConanMetadata"
icon="information-o"
padding="gl-p-4"
data-testid="conan-recipe"
>
<gl-sprintf :message="$options.i18n.recipeText">
<template #recipe>{{ packageEntity.metadata.recipe }}</template>
</gl-sprintf>
</details-row>
<template v-else-if="showMavenMetadata">
<details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app">
<gl-sprintf :message="$options.i18n.appName">
<template #name>
<strong>{{ packageEntity.metadata.appName }}</strong>
</template>
</gl-sprintf>
</details-row>
<details-row icon="information-o" padding="gl-p-4" data-testid="maven-group">
<gl-sprintf :message="$options.i18n.appGroup">
<template #group>
<strong>{{ packageEntity.metadata.appGroup }}</strong>
</template>
</gl-sprintf>
</details-row>
</template>
<template v-else-if="showComposerMetadata">
<details-row icon="information-o" padding="gl-p-4" dashed data-testid="composer-target-sha">
<gl-sprintf :message="$options.i18n.targetSha">
<template #sha>
<strong>{{ packageEntity.metadata.targetSha }}</strong>
<clipboard-button
:title="$options.i18n.targetShaCopyButton"
:text="packageEntity.metadata.targetSha"
category="tertiary"
css-class="gl-p-0!"
/> />
</template>
</gl-sprintf>
</details-row>
<details-row icon="information-o" padding="gl-p-4" data-testid="composer-json">
<gl-sprintf :message="$options.i18n.composerJson">
<template #license>
<strong>{{ packageEntity.metadata.composerJson.license }}</strong>
</template>
<template #version>
<strong>{{ packageEntity.metadata.composerJson.version }}</strong>
</template>
</gl-sprintf>
</details-row>
</template>
<details-row
v-else-if="showPypiMetadata"
icon="information-o"
padding="gl-p-4"
data-testid="pypi-required-python"
>
<gl-sprintf :message="$options.i18n.requiredPython">
<template #pythonVersion>
<strong>{{ packageEntity.metadata.requiredPython }}</strong>
</template>
</gl-sprintf>
</details-row>
</div> </div>
</div> </div>
</template> </template>
<script>
import { GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
export default {
i18n: {
targetShaCopyButton: s__('PackageRegistry|Copy target SHA'),
targetSha: s__('PackageRegistry|Target SHA: %{sha}'),
composerJson: s__(
'PackageRegistry|Composer.json with license: %{license} and version: %{version}',
),
},
components: {
DetailsRow,
GlSprintf,
ClipboardButton,
},
props: {
packageEntity: {
type: Object,
required: true,
},
},
};
</script>
<template>
<div>
<details-row icon="information-o" padding="gl-p-4" dashed data-testid="composer-target-sha">
<gl-sprintf :message="$options.i18n.targetSha">
<template #sha>
<strong>{{ packageEntity.metadata.targetSha }}</strong>
<clipboard-button
:title="$options.i18n.targetShaCopyButton"
:text="packageEntity.metadata.targetSha"
category="tertiary"
css-class="gl-p-0!"
/>
</template>
</gl-sprintf>
</details-row>
<details-row icon="information-o" padding="gl-p-4" data-testid="composer-json">
<gl-sprintf :message="$options.i18n.composerJson">
<template #license>
<strong>{{ packageEntity.metadata.composerJson.license }}</strong>
</template>
<template #version>
<strong>{{ packageEntity.metadata.composerJson.version }}</strong>
</template>
</gl-sprintf>
</details-row>
</div>
</template>
<script>
import { GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
export default {
i18n: {
recipeText: s__('PackageRegistry|Recipe: %{recipe}'),
},
components: {
DetailsRow,
GlSprintf,
},
props: {
packageEntity: {
type: Object,
required: true,
},
},
};
</script>
<template>
<div>
<details-row icon="information-o" padding="gl-p-4" data-testid="conan-recipe">
<gl-sprintf :message="$options.i18n.recipeText">
<template #recipe>{{ packageEntity.metadata.recipe }}</template>
</gl-sprintf>
</details-row>
</div>
</template>
<script>
import { GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
export default {
i18n: {
appGroup: s__('PackageRegistry|App group: %{group}'),
appName: s__('PackageRegistry|App name: %{name}'),
},
components: {
DetailsRow,
GlSprintf,
},
props: {
packageEntity: {
type: Object,
required: true,
},
},
};
</script>
<template>
<div>
<details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app">
<gl-sprintf :message="$options.i18n.appName">
<template #name>
<strong>{{ packageEntity.metadata.appName }}</strong>
</template>
</gl-sprintf>
</details-row>
<details-row icon="information-o" padding="gl-p-4" data-testid="maven-group">
<gl-sprintf :message="$options.i18n.appGroup">
<template #group>
<strong>{{ packageEntity.metadata.appGroup }}</strong>
</template>
</gl-sprintf>
</details-row>
</div>
</template>
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
export default {
i18n: {
sourceText: s__('PackageRegistry|Source project located at %{link}'),
licenseText: s__('PackageRegistry|License information located at %{link}'),
},
components: {
DetailsRow,
GlLink,
GlSprintf,
},
props: {
packageEntity: {
type: Object,
required: true,
},
},
};
</script>
<template>
<div>
<details-row icon="project" padding="gl-p-4" dashed data-testid="nuget-source">
<gl-sprintf :message="$options.i18n.sourceText">
<template #link>
<gl-link :href="packageEntity.metadata.projectUrl" target="_blank">{{
packageEntity.metadata.projectUrl
}}</gl-link>
</template>
</gl-sprintf>
</details-row>
<details-row icon="license" padding="gl-p-4" data-testid="nuget-license">
<gl-sprintf :message="$options.i18n.licenseText">
<template #link>
<gl-link :href="packageEntity.metadata.licenseUrl" target="_blank">{{
packageEntity.metadata.licenseUrl
}}</gl-link>
</template>
</gl-sprintf>
</details-row>
</div>
</template>
<script>
import { GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
export default {
i18n: {
requiredPython: s__('PackageRegistry|Required Python: %{pythonVersion}'),
},
components: {
DetailsRow,
GlSprintf,
},
props: {
packageEntity: {
type: Object,
required: true,
},
},
};
</script>
<template>
<div>
<details-row icon="information-o" padding="gl-p-4" data-testid="pypi-required-python">
<gl-sprintf :message="$options.i18n.requiredPython">
<template #pythonVersion>
<strong>{{ packageEntity.metadata.requiredPython }}</strong>
</template>
</gl-sprintf>
</details-row>
</div>
</template>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { import {
conanMetadata, conanMetadata,
...@@ -17,8 +16,6 @@ import { ...@@ -17,8 +16,6 @@ import {
PACKAGE_TYPE_COMPOSER, PACKAGE_TYPE_COMPOSER,
PACKAGE_TYPE_PYPI, PACKAGE_TYPE_PYPI,
} from '~/packages_and_registries/package_registry/constants'; } from '~/packages_and_registries/package_registry/constants';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
const mavenPackage = { packageType: PACKAGE_TYPE_MAVEN, metadata: mavenMetadata() }; const mavenPackage = { packageType: PACKAGE_TYPE_MAVEN, metadata: mavenMetadata() };
const conanPackage = { packageType: PACKAGE_TYPE_CONAN, metadata: conanMetadata() }; const conanPackage = { packageType: PACKAGE_TYPE_CONAN, metadata: conanMetadata() };
...@@ -39,8 +36,7 @@ describe('Package Additional Metadata', () => { ...@@ -39,8 +36,7 @@ describe('Package Additional Metadata', () => {
wrapper = shallowMountExtended(component, { wrapper = shallowMountExtended(component, {
propsData: { ...defaultProps, ...props }, propsData: { ...defaultProps, ...props },
stubs: { stubs: {
DetailsRow, component: { template: '<div data-testid="component-is"></div>' },
GlSprintf,
}, },
}); });
}; };
...@@ -52,16 +48,7 @@ describe('Package Additional Metadata', () => { ...@@ -52,16 +48,7 @@ describe('Package Additional Metadata', () => {
const findTitle = () => wrapper.findByTestId('title'); const findTitle = () => wrapper.findByTestId('title');
const findMainArea = () => wrapper.findByTestId('main'); const findMainArea = () => wrapper.findByTestId('main');
const findNugetSource = () => wrapper.findByTestId('nuget-source'); const findComponentIs = () => wrapper.findByTestId('component-is');
const findNugetLicense = () => wrapper.findByTestId('nuget-license');
const findConanRecipe = () => wrapper.findByTestId('conan-recipe');
const findMavenApp = () => wrapper.findByTestId('maven-app');
const findMavenGroup = () => wrapper.findByTestId('maven-group');
const findElementLink = (container) => container.findComponent(GlLink);
const findComposerTargetSha = () => wrapper.findByTestId('composer-target-sha');
const findComposerTargetShaCopyButton = () => wrapper.findComponent(ClipboardButton);
const findComposerJson = () => wrapper.findByTestId('composer-json');
const findPypiRequiredPython = () => wrapper.findByTestId('pypi-required-python');
it('has the correct title', () => { it('has the correct title', () => {
mountComponent(); mountComponent();
...@@ -87,98 +74,11 @@ describe('Package Additional Metadata', () => { ...@@ -87,98 +74,11 @@ describe('Package Additional Metadata', () => {
expect(findTitle().exists()).toBe(visible); expect(findTitle().exists()).toBe(visible);
expect(findMainArea().exists()).toBe(visible); expect(findMainArea().exists()).toBe(visible);
expect(findComponentIs().exists()).toBe(visible);
if (visible) {
expect(findComponentIs().props('packageEntity')).toEqual(packageEntity);
}
}, },
); );
describe('nuget metadata', () => {
beforeEach(() => {
mountComponent({ packageEntity: nugetPackage });
});
it.each`
name | finderFunction | text | link | icon
${'source'} | ${findNugetSource} | ${'Source project located at projectUrl'} | ${'projectUrl'} | ${'project'}
${'license'} | ${findNugetLicense} | ${'License information located at licenseUrl'} | ${'licenseUrl'} | ${'license'}
`('$name element', ({ finderFunction, text, link, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
expect(findElementLink(element).attributes('href')).toBe(nugetPackage.metadata[link]);
});
});
describe('conan metadata', () => {
beforeEach(() => {
mountComponent({ packageEntity: conanPackage });
});
it.each`
name | finderFunction | text | icon
${'recipe'} | ${findConanRecipe} | ${'Recipe: package-8/1.0.0@gitlab-org+gitlab-test/stable'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
});
describe('maven metadata', () => {
beforeEach(() => {
mountComponent();
});
it.each`
name | finderFunction | text | icon
${'app'} | ${findMavenApp} | ${'App name: appName'} | ${'information-o'}
${'group'} | ${findMavenGroup} | ${'App group: appGroup'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
});
describe('composer metadata', () => {
beforeEach(() => {
mountComponent({ packageEntity: composerPackage });
});
it.each`
name | finderFunction | text | icon
${'target-sha'} | ${findComposerTargetSha} | ${'Target SHA: b83d6e391c22777fca1ed3012fce84f633d7fed0'} | ${'information-o'}
${'composer-json'} | ${findComposerJson} | ${'Composer.json with license: MIT and version: 1.0.0'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
it('target-sha has a copy button', () => {
expect(findComposerTargetShaCopyButton().exists()).toBe(true);
expect(findComposerTargetShaCopyButton().props()).toMatchObject({
text: 'b83d6e391c22777fca1ed3012fce84f633d7fed0',
title: 'Copy target SHA',
});
});
});
describe('pypi metadata', () => {
beforeEach(() => {
mountComponent({ packageEntity: pypiPackage });
});
it.each`
name | finderFunction | text | icon
${'pypi-required-python'} | ${findPypiRequiredPython} | ${'Required Python: 1.0.0'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
});
}); });
import { GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import {
packageData,
composerMetadata,
} from 'jest/packages_and_registries/package_registry/mock_data';
import component from '~/packages_and_registries/package_registry/components/details/metadata/composer.vue';
import { PACKAGE_TYPE_COMPOSER } from '~/packages_and_registries/package_registry/constants';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
const composerPackage = { packageType: PACKAGE_TYPE_COMPOSER, metadata: composerMetadata() };
describe('Composer Metadata', () => {
let wrapper;
const mountComponent = () => {
wrapper = shallowMountExtended(component, {
propsData: { packageEntity: packageData(composerPackage) },
stubs: {
DetailsRow,
GlSprintf,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findComposerTargetSha = () => wrapper.findByTestId('composer-target-sha');
const findComposerTargetShaCopyButton = () => wrapper.findComponent(ClipboardButton);
const findComposerJson = () => wrapper.findByTestId('composer-json');
beforeEach(() => {
mountComponent();
});
it.each`
name | finderFunction | text | icon
${'target-sha'} | ${findComposerTargetSha} | ${'Target SHA: b83d6e391c22777fca1ed3012fce84f633d7fed0'} | ${'information-o'}
${'composer-json'} | ${findComposerJson} | ${'Composer.json with license: MIT and version: 1.0.0'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
it('target-sha has a copy button', () => {
expect(findComposerTargetShaCopyButton().exists()).toBe(true);
expect(findComposerTargetShaCopyButton().props()).toMatchObject({
text: 'b83d6e391c22777fca1ed3012fce84f633d7fed0',
title: 'Copy target SHA',
});
});
});
import { GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import {
conanMetadata,
packageData,
} from 'jest/packages_and_registries/package_registry/mock_data';
import component from '~/packages_and_registries/package_registry/components/details/metadata/conan.vue';
import { PACKAGE_TYPE_CONAN } from '~/packages_and_registries/package_registry/constants';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
const conanPackage = { packageType: PACKAGE_TYPE_CONAN, metadata: conanMetadata() };
describe('Conan Metadata', () => {
let wrapper;
const mountComponent = () => {
wrapper = shallowMountExtended(component, {
propsData: {
packageEntity: packageData(conanPackage),
},
stubs: {
DetailsRow,
GlSprintf,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findConanRecipe = () => wrapper.findByTestId('conan-recipe');
beforeEach(() => {
mountComponent();
});
it.each`
name | finderFunction | text | icon
${'recipe'} | ${findConanRecipe} | ${'Recipe: package-8/1.0.0@gitlab-org+gitlab-test/stable'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
});
import { GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import {
mavenMetadata,
packageData,
} from 'jest/packages_and_registries/package_registry/mock_data';
import component from '~/packages_and_registries/package_registry/components/details/metadata/maven.vue';
import { PACKAGE_TYPE_MAVEN } from '~/packages_and_registries/package_registry/constants';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
const mavenPackage = { packageType: PACKAGE_TYPE_MAVEN, metadata: mavenMetadata() };
describe('Maven Metadata', () => {
let wrapper;
const mountComponent = () => {
wrapper = shallowMountExtended(component, {
propsData: {
packageEntity: {
...packageData(mavenPackage),
},
},
stubs: {
DetailsRow,
GlSprintf,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findMavenApp = () => wrapper.findByTestId('maven-app');
const findMavenGroup = () => wrapper.findByTestId('maven-group');
beforeEach(() => {
mountComponent();
});
it.each`
name | finderFunction | text | icon
${'app'} | ${findMavenApp} | ${'App name: appName'} | ${'information-o'}
${'group'} | ${findMavenGroup} | ${'App group: appGroup'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
});
import { GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import {
nugetMetadata,
packageData,
} from 'jest/packages_and_registries/package_registry/mock_data';
import component from '~/packages_and_registries/package_registry/components/details/metadata/nuget.vue';
import { PACKAGE_TYPE_NUGET } from '~/packages_and_registries/package_registry/constants';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
const nugetPackage = { packageType: PACKAGE_TYPE_NUGET, metadata: nugetMetadata() };
describe('Nuget Metadata', () => {
let wrapper;
const mountComponent = () => {
wrapper = shallowMountExtended(component, {
propsData: {
packageEntity: {
...packageData(nugetPackage),
},
},
stubs: {
DetailsRow,
GlSprintf,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findNugetSource = () => wrapper.findByTestId('nuget-source');
const findNugetLicense = () => wrapper.findByTestId('nuget-license');
const findElementLink = (container) => container.findComponent(GlLink);
beforeEach(() => {
mountComponent({ packageEntity: nugetPackage });
});
it.each`
name | finderFunction | text | link | icon
${'source'} | ${findNugetSource} | ${'Source project located at projectUrl'} | ${'projectUrl'} | ${'project'}
${'license'} | ${findNugetLicense} | ${'License information located at licenseUrl'} | ${'licenseUrl'} | ${'license'}
`('$name element', ({ finderFunction, text, link, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
expect(findElementLink(element).attributes('href')).toBe(nugetPackage.metadata[link]);
});
});
import { GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { packageData, pypiMetadata } from 'jest/packages_and_registries/package_registry/mock_data';
import component from '~/packages_and_registries/package_registry/components/details/metadata/pypi.vue';
import { PACKAGE_TYPE_PYPI } from '~/packages_and_registries/package_registry/constants';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
const pypiPackage = { packageType: PACKAGE_TYPE_PYPI, metadata: pypiMetadata() };
describe('Package Additional Metadata', () => {
let wrapper;
const mountComponent = () => {
wrapper = shallowMountExtended(component, {
propsData: {
packageEntity: {
...packageData(pypiPackage),
},
},
stubs: {
DetailsRow,
GlSprintf,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findPypiRequiredPython = () => wrapper.findByTestId('pypi-required-python');
beforeEach(() => {
mountComponent();
});
it.each`
name | finderFunction | text | icon
${'pypi-required-python'} | ${findPypiRequiredPython} | ${'Required Python: 1.0.0'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment