Skip to content

G
gitlab-ce
Commit 4a1e26ac authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Kushal Pandya
Browse files
Options

Move list item to vue_shared 

- source
- tests
parent 4871220a
Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 204 deletions
app/assets/javascripts/packages/shared/components/package_list_row.vue
View file @ 4a1e26ac
...@@ -4,6 +4,7 @@ import PackageTags from './package_tags.vue'; ...@@ -4,6 +4,7 @@ import PackageTags from './package_tags.vue';
import PublishMethod from './publish_method.vue'; import PublishMethod from './publish_method.vue';
import { getPackageTypeLabel } from '../utils'; import { getPackageTypeLabel } from '../utils';
import timeagoMixin from '~/vue_shared/mixins/timeago'; import timeagoMixin from '~/vue_shared/mixins/timeago';
import ListItem from '~/vue_shared/components/registry/list_item.vue';
export default { export default {
name: 'PackageListRow', name: 'PackageListRow',
...@@ -14,6 +15,7 @@ export default { ...@@ -14,6 +15,7 @@ export default {
GlSprintf, GlSprintf,
PackageTags, PackageTags,
PublishMethod, PublishMethod,
ListItem,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
...@@ -59,14 +61,10 @@ export default { ...@@ -59,14 +61,10 @@ export default {
</script> </script>
<template> <template>
<div class="gl-responsive-table-row" data-qa-selector="packages-row"> <list-item data-qa-selector="packages-row">
<div class="table-section section-50 d-flex flex-md-column justify-content-between flex-wrap"> <template #left-primary>
<div class="d-flex align-items-center mr-2"> <div class="gl-display-flex gl-align-items-center gl-mr-3">
<gl-link <gl-link :href="packageLink" class="gl-text-body" data-qa-selector="package_link">
:href="packageLink"
data-qa-selector="package_link"
class="text-dark font-weight-bold mb-md-1"
>
{{ packageEntity.name }} {{ packageEntity.name }}
</gl-link> </gl-link>
...@@ -78,52 +76,51 @@ export default { ...@@ -78,52 +76,51 @@ export default {
:tag-display-limit="1" :tag-display-limit="1"
/> />
</div> </div>
</template>
<div class="d-flex text-secondary text-truncate mt-md-2"> <template #left-secondary>
<div class="gl-display-flex">
<span>{{ packageEntity.version }}</span> <span>{{ packageEntity.version }}</span>
<div v-if="hasPipeline" class="d-none d-md-inline-block ml-1"> <div v-if="hasPipeline" class="gl-display-none gl-display-sm-flex gl-ml-2">
<gl-sprintf :message="s__('PackageRegistry|published by %{author}')"> <gl-sprintf :message="s__('PackageRegistry|published by %{author}')">
<template #author>{{ packageEntity.pipeline.user.name }}</template> <template #author>{{ packageEntity.pipeline.user.name }}</template>
</gl-sprintf> </gl-sprintf>
</div> </div>
<div v-if="hasProjectLink" class="d-flex align-items-center"> <div v-if="hasProjectLink" class="gl-display-flex gl-align-items-center">
<gl-icon name="review-list" class="text-secondary ml-2 mr-1" /> <gl-icon name="review-list" class="gl-ml-3 gl-mr-2" />
<gl-link <gl-link
class="gl-text-body"
data-testid="packages-row-project" data-testid="packages-row-project"
:href="`/${packageEntity.project_path}`" :href="`/${packageEntity.project_path}`"
class="text-secondary"
>{{ packageEntity.projectPathName }}</gl-link
> >
{{ packageEntity.projectPathName }}
</gl-link>
</div> </div>
<div v-if="showPackageType" class="d-flex align-items-center" data-testid="package-type"> <div v-if="showPackageType" class="d-flex align-items-center" data-testid="package-type">
<gl-icon name="package" class="text-secondary ml-2 mr-1" /> <gl-icon name="package" class="gl-ml-3 gl-mr-2" />
<span>{{ packageType }}</span> <span>{{ packageType }}</span>
</div> </div>
</div> </div>
</div> </template>
<div <template #right-primary>
class="table-section d-flex flex-md-column justify-content-between align-items-md-end"
:class="disableDelete ? 'section-50' : 'section-40'"
>
<publish-method :package-entity="packageEntity" :is-group="isGroup" /> <publish-method :package-entity="packageEntity" :is-group="isGroup" />
</template>
<div class="text-secondary order-0 order-md-1 mt-md-2"> <template #right-secondary>
<gl-sprintf :message="__('Created %{timestamp}')"> <gl-sprintf :message="__('Created %{timestamp}')">
<template #timestamp> <template #timestamp>
<span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)"> <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
{{ timeFormatted(packageEntity.created_at) }} {{ timeFormatted(packageEntity.created_at) }}
</span> </span>
</template> </template>
</gl-sprintf> </gl-sprintf>
</div> </template>
</div>
<div v-if="!disableDelete" class="table-section section-10 d-flex justify-content-end"> <template v-if="!disableDelete" #right-action>
<gl-button <gl-button
data-testid="action-delete" data-testid="action-delete"
icon="remove" icon="remove"
...@@ -134,6 +131,6 @@ export default { ...@@ -134,6 +131,6 @@ export default {
:disabled="!packageEntity._links.delete_api_path" :disabled="!packageEntity._links.delete_api_path"
@click="$emit('packageToDelete', packageEntity)" @click="$emit('packageToDelete', packageEntity)"
/> />
</div> </template>
</div> </list-item>
</template> </template>
app/assets/javascripts/packages/shared/components/publish_method.vue
View file @ 4a1e26ac
...@@ -36,10 +36,10 @@ export default { ...@@ -36,10 +36,10 @@ export default {
</script> </script>
<template> <template>
<div class="d-flex align-items-center text-secondary order-1 order-md-0 mb-md-1"> <div class="d-flex align-items-center order-1 order-md-0 mb-md-1">
<template v-if="hasPipeline"> <template v-if="hasPipeline">
<gl-icon name="git-merge" class="mr-1" /> <gl-icon name="git-merge" class="mr-1" />
<strong ref="pipeline-ref" class="mr-1 text-dark">{{ packageEntity.pipeline.ref }}</strong> <span ref="pipeline-ref" class="mr-1">{{ packageEntity.pipeline.ref }}</span>
<gl-icon name="commit" class="mr-1" /> <gl-icon name="commit" class="mr-1" />
<gl-link ref="pipeline-sha" :href="linkToCommit" class="mr-1">{{ packageShaShort }}</gl-link> <gl-link ref="pipeline-sha" :href="linkToCommit" class="mr-1">{{ packageShaShort }}</gl-link>
...@@ -47,15 +47,13 @@ export default { ...@@ -47,15 +47,13 @@ export default {
<clipboard-button <clipboard-button
:text="packageEntity.pipeline.sha" :text="packageEntity.pipeline.sha"
:title="__('Copy commit SHA')" :title="__('Copy commit SHA')"
css-class="border-0 text-secondary py-0 px-1" css-class="border-0 py-0 px-1"
/> />
</template> </template>
<template v-else> <template v-else>
<gl-icon name="upload" class="mr-1" /> <gl-icon name="upload" class="mr-1" />
<strong ref="manual-ref" class="text-dark">{{ <span ref="manual-ref">{{ s__('PackageRegistry|Manually Published') }}</span>
s__('PackageRegistry|Manually Published')
}}</strong>
</template> </template>
</div> </div>
</template> </template>
app/assets/javascripts/registry/explorer/components/delete_button.vue
View file @ 4a1e26ac
...@@ -47,7 +47,6 @@ export default { ...@@ -47,7 +47,6 @@ export default {
:disabled="disabled" :disabled="disabled"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
category="secondary"
variant="danger" variant="danger"
icon="remove" icon="remove"
@click="$emit('delete')" @click="$emit('delete')"
......
app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue
View file @ 4a1e26ac
...@@ -67,7 +67,6 @@ export default { ...@@ -67,7 +67,6 @@ export default {
:key="tag.path" :key="tag.path"
:tag="tag" :tag="tag"
:first="index === 0" :first="index === 0"
:last="index === tags.length - 1"
:selected="selectedItems[tag.name]" :selected="selectedItems[tag.name]"
:is-desktop="isDesktop" :is-desktop="isDesktop"
@select="updateSelectedItems(tag.name)" @select="updateSelectedItems(tag.name)"
......
app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
View file @ 4a1e26ac
...@@ -5,8 +5,8 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; ...@@ -5,8 +5,8 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import { numberToHumanSize } from '~/lib/utils/number_utils'; import { numberToHumanSize } from '~/lib/utils/number_utils';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { formatDate } from '~/lib/utils/datetime_utility'; import { formatDate } from '~/lib/utils/datetime_utility';
import ListItem from '~/vue_shared/components/registry/list_item.vue';
import DeleteButton from '../delete_button.vue'; import DeleteButton from '../delete_button.vue';
import ListItem from '../list_item.vue';
import DetailsRow from '~/registry/shared/components/details_row.vue'; import DetailsRow from '~/registry/shared/components/details_row.vue';
import { import {
REMOVE_TAG_BUTTON_TITLE, REMOVE_TAG_BUTTON_TITLE,
......
app/assets/javascripts/registry/explorer/components/list_page/image_list.vue
View file @ 4a1e26ac
...@@ -38,7 +38,6 @@ export default { ...@@ -38,7 +38,6 @@ export default {
:key="index" :key="index"
:item="listItem" :item="listItem"
:first="index === 0" :first="index === 0"
:last="index === images.length - 1"
@delete="$emit('delete', $event)" @delete="$emit('delete', $event)"
/> />
......
app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
View file @ 4a1e26ac
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { GlTooltipDirective, GlIcon, GlSprintf } from '@gitlab/ui'; import { GlTooltipDirective, GlIcon, GlSprintf } from '@gitlab/ui';
import { n__ } from '~/locale'; import { n__ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import ListItem from '../list_item.vue'; import ListItem from '~/vue_shared/components/registry/list_item.vue';
import DeleteButton from '../delete_button.vue'; import DeleteButton from '../delete_button.vue';
import { import {
......
app/assets/javascripts/registry/explorer/components/list_item.vue → app/assets/javascripts/vue_shared/components/registry/list_item.vue
View file @ 4a1e26ac
...@@ -10,11 +10,6 @@ export default { ...@@ -10,11 +10,6 @@ export default {
default: false, default: false,
required: false, required: false,
}, },
last: {
type: Boolean,
default: false,
required: false,
},
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false, default: false,
...@@ -35,12 +30,10 @@ export default { ...@@ -35,12 +30,10 @@ export default {
computed: { computed: {
optionalClasses() { optionalClasses() {
return { return {
'gl-border-t-1': !this.first, 'gl-border-t-transparent': !this.first && !this.selected,
'gl-border-t-2': this.first, 'gl-border-t-gray-100': this.first && !this.selected,
'gl-border-b-1': !this.last,
'gl-border-b-2': this.last,
'disabled-content': this.disabled, 'disabled-content': this.disabled,
'gl-border-gray-100': !this.selected, 'gl-border-b-gray-100': !this.selected,
'gl-bg-blue-50 gl-border-blue-200': this.selected, 'gl-bg-blue-50 gl-border-blue-200': this.selected,
}; };
}, },
...@@ -58,21 +51,26 @@ export default { ...@@ -58,21 +51,26 @@ export default {
<template> <template>
<div <div
class="gl-display-flex gl-flex-direction-column gl-border-b-solid gl-border-t-solid" class="gl-display-flex gl-flex-direction-column gl-border-b-solid gl-border-t-solid gl-border-t-1 gl-border-b-1"
:class="optionalClasses" :class="optionalClasses"
> >
<div class="gl-display-flex gl-align-items-center gl-py-4 gl-px-2"> <div class="gl-display-flex gl-align-items-center gl-py-5">
<div <div
v-if="$slots['left-action']" v-if="$slots['left-action']"
class="gl-w-7 gl-display-none gl-display-sm-flex gl-justify-content-start gl-pl-2" class="gl-w-7 gl-display-none gl-display-sm-flex gl-justify-content-start gl-pl-2"
> >
<slot name="left-action"></slot> <slot name="left-action"></slot>
</div> </div>
<div class="gl-display-flex gl-flex-direction-column gl-flex-fill-1"> <div
class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
>
<div <div
class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-text-body gl-font-weight-bold" class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3"
> >
<div class="gl-display-flex gl-align-items-center"> <div
v-if="$slots['left-primary']"
class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6"
>
<slot name="left-primary"></slot> <slot name="left-primary"></slot>
<gl-button <gl-button
v-if="detailsSlots.length > 0" v-if="detailsSlots.length > 0"
...@@ -83,24 +81,27 @@ export default { ...@@ -83,24 +81,27 @@ export default {
@click="toggleDetails" @click="toggleDetails"
/> />
</div> </div>
<div> <div v-if="$slots['left-secondary']" class="gl-text-gray-500 gl-mt-1 gl-min-h-6">
<slot name="right-primary"></slot> <slot name="left-secondary"></slot>
</div> </div>
</div> </div>
<div <div
class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-font-sm gl-text-gray-300" class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500"
> >
<div> <div
<slot name="left-secondary"></slot> v-if="$slots['right-primary']"
class="gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6"
>
<slot name="right-primary"></slot>
</div> </div>
<div> <div v-if="$slots['right-secondary']" class="gl-mt-1 gl-min-h-6">
<slot name="right-secondary"></slot> <slot name="right-secondary"></slot>
</div> </div>
</div> </div>
</div> </div>
<div <div
v-if="$slots['right-action']" v-if="$slots['right-action']"
class="gl-w-9 gl-display-none gl-display-sm-flex gl-justify-content-end gl-pr-2" class="gl-w-9 gl-display-none gl-display-sm-flex gl-justify-content-end gl-pr-1"
> >
<slot name="right-action"></slot> <slot name="right-action"></slot>
</div> </div>
......
app/assets/stylesheets/utilities.scss
View file @ 4a1e26ac
...@@ -120,6 +120,43 @@ ...@@ -120,6 +120,43 @@
} }
} }
.gl-shadow-x0-y0-b3-s1-blue-500 { .gl-shadow-x0-y0-b3-s1-blue-500 {
box-shadow: inset 0 0 3px $gl-border-size-1 $blue-500; box-shadow: inset 0 0 3px $gl-border-size-1 $blue-500;
} }
// remove when https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1692 is merged
.gl-border-t-transparent {
border-top-color: transparent;
}
.gl-align-items-flex-end {
align-items: flex-end;
}
.gl-sm-align-items-flex-end {
@media (min-width: $breakpoint-sm) {
align-items: flex-end;
}
}
.gl-sm-text-body {
@media (min-width: $breakpoint-sm) {
color: $body-color;
}
}
.gl-sm-font-weight-bold {
@media (min-width: $breakpoint-sm) {
font-weight: $gl-font-weight-bold;
}
}
.gl-align-items-stretch {
align-items: stretch;
}
.gl-min-h-6 {
min-height: $gl-spacing-scale-6;
}
spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
View file @ 4a1e26ac
...@@ -2,99 +2,139 @@ ...@@ -2,99 +2,139 @@
exports[`packages_list_row renders 1`] = ` exports[`packages_list_row renders 1`] = `
<div <div
class="gl-responsive-table-row" class="gl-display-flex gl-flex-direction-column gl-border-b-solid gl-border-t-solid gl-border-t-1 gl-border-b-1 gl-border-t-transparent gl-border-b-gray-100"
data-qa-selector="packages-row" data-qa-selector="packages-row"
> >
<div <div
class="table-section section-50 d-flex flex-md-column justify-content-between flex-wrap" class="gl-display-flex gl-align-items-center gl-py-5"
> >
<div <!---->
class="d-flex align-items-center mr-2"
>
<gl-link-stub
class="text-dark font-weight-bold mb-md-1"
data-qa-selector="package_link"
href="foo"
>
Test package
</gl-link-stub>
<!---->
</div>
<div <div
class="d-flex text-secondary text-truncate mt-md-2" class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
> >
<span>
1.0.0
</span>
<!---->
<div <div
class="d-flex align-items-center" class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3"
> >
<gl-icon-stub <div
class="text-secondary ml-2 mr-1" class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6"
name="review-list" >
size="16" <div
/> class="gl-display-flex gl-align-items-center gl-mr-3"
>
<gl-link-stub
class="gl-text-body"
data-qa-selector="package_link"
href="foo"
>
Test package
</gl-link-stub>
<!---->
</div>
<!---->
</div>
<gl-link-stub <div
class="text-secondary" class="gl-text-gray-500 gl-mt-1 gl-min-h-6"
data-testid="packages-row-project"
href="/foo/bar/baz"
> >
<div
class="gl-display-flex"
>
<span>
1.0.0
</span>
<!---->
<div
class="gl-display-flex gl-align-items-center"
>
<gl-icon-stub
class="gl-ml-3 gl-mr-2"
name="review-list"
size="16"
/>
<gl-link-stub
class="gl-text-body"
data-testid="packages-row-project"
href="/foo/bar/baz"
>
</gl-link-stub>
</gl-link-stub>
</div>
<div
class="d-flex align-items-center"
data-testid="package-type"
>
<gl-icon-stub
class="gl-ml-3 gl-mr-2"
name="package"
size="16"
/>
<span>
Maven
</span>
</div>
</div>
</div>
</div> </div>
<div <div
class="d-flex align-items-center" class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500"
data-testid="package-type"
> >
<gl-icon-stub <div
class="text-secondary ml-2 mr-1" class="gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6"
name="package" >
size="16" <publish-method-stub
/> packageentity="[object Object]"
/>
</div>
<span> <div
Maven class="gl-mt-1 gl-min-h-6"
</span> >
<gl-sprintf-stub
message="Created %{timestamp}"
/>
</div>
</div> </div>
</div> </div>
</div>
<div
class="table-section d-flex flex-md-column justify-content-between align-items-md-end section-40"
>
<publish-method-stub
packageentity="[object Object]"
/>
<div <div
class="text-secondary order-0 order-md-1 mt-md-2" class="gl-w-9 gl-display-none gl-display-sm-flex gl-justify-content-end gl-pr-1"
> >
<gl-sprintf-stub <gl-button-stub
message="Created %{timestamp}" aria-label="Remove package"
category="primary"
data-testid="action-delete"
icon="remove"
size="medium"
title="Remove package"
variant="danger"
/> />
</div> </div>
</div> </div>
<div <div
class="table-section section-10 d-flex justify-content-end" class="gl-display-flex"
> >
<gl-button-stub <div
aria-label="Remove package" class="gl-w-7"
category="primary" />
data-testid="action-delete"
icon="remove" <!---->
size="medium"
title="Remove package" <div
variant="danger" class="gl-w-9"
/> />
</div> </div>
</div> </div>
......
spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap
View file @ 4a1e26ac
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
exports[`publish_method renders 1`] = ` exports[`publish_method renders 1`] = `
<div <div
class="d-flex align-items-center text-secondary order-1 order-md-0 mb-md-1" class="d-flex align-items-center order-1 order-md-0 mb-md-1"
> >
<gl-icon-stub <gl-icon-stub
class="mr-1" class="mr-1"
...@@ -10,11 +10,11 @@ exports[`publish_method renders 1`] = ` ...@@ -10,11 +10,11 @@ exports[`publish_method renders 1`] = `
size="16" size="16"
/> />
<strong <span
class="mr-1 text-dark" class="mr-1"
> >
branch-name branch-name
</strong> </span>
<gl-icon-stub <gl-icon-stub
class="mr-1" class="mr-1"
...@@ -30,7 +30,7 @@ exports[`publish_method renders 1`] = ` ...@@ -30,7 +30,7 @@ exports[`publish_method renders 1`] = `
</gl-link-stub> </gl-link-stub>
<clipboard-button-stub <clipboard-button-stub
cssclass="border-0 text-secondary py-0 px-1" cssclass="border-0 py-0 px-1"
text="sha-baz" text="sha-baz"
title="Copy commit SHA" title="Copy commit SHA"
tooltipplacement="top" tooltipplacement="top"
......
spec/frontend/packages/shared/components/package_list_row_spec.js
View file @ 4a1e26ac
import { mount, shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import PackagesListRow from '~/packages/shared/components/package_list_row.vue'; import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
import PackageTags from '~/packages/shared/components/package_tags.vue'; import PackageTags from '~/packages/shared/components/package_tags.vue';
import ListItem from '~/vue_shared/components/registry/list_item.vue';
import { packageList } from '../../mock_data'; import { packageList } from '../../mock_data';
describe('packages_list_row', () => { describe('packages_list_row', () => {
...@@ -17,14 +18,12 @@ describe('packages_list_row', () => { ...@@ -17,14 +18,12 @@ describe('packages_list_row', () => {
const mountComponent = ({ const mountComponent = ({
isGroup = false, isGroup = false,
packageEntity = packageWithoutTags, packageEntity = packageWithoutTags,
shallow = true,
showPackageType = true, showPackageType = true,
disableDelete = false, disableDelete = false,
} = {}) => { } = {}) => {
const mountFunc = shallow ? shallowMount : mount; wrapper = shallowMount(PackagesListRow, {
wrapper = mountFunc(PackagesListRow, {
store, store,
stubs: { ListItem },
propsData: { propsData: {
packageLink: 'foo', packageLink: 'foo',
packageEntity, packageEntity,
...@@ -92,15 +91,14 @@ describe('packages_list_row', () => { ...@@ -92,15 +91,14 @@ describe('packages_list_row', () => {
}); });
describe('delete event', () => { describe('delete event', () => {
beforeEach(() => mountComponent({ packageEntity: packageWithoutTags, shallow: false })); beforeEach(() => mountComponent({ packageEntity: packageWithoutTags }));
it('emits the packageToDelete event when the delete button is clicked', () => { it('emits the packageToDelete event when the delete button is clicked', async () => {
findDeleteButton().trigger('click'); findDeleteButton().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => { await wrapper.vm.$nextTick();
expect(wrapper.emitted('packageToDelete')).toBeTruthy(); expect(wrapper.emitted('packageToDelete')).toBeTruthy();
expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]); expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]);
});
}); });
}); });
}); });
spec/frontend/registry/explorer/components/delete_button_spec.js
View file @ 4a1e26ac
...@@ -54,7 +54,6 @@ describe('delete_button', () => { ...@@ -54,7 +54,6 @@ describe('delete_button', () => {
mountComponent({ disabled: true }); mountComponent({ disabled: true });
expect(findButton().attributes()).toMatchObject({ expect(findButton().attributes()).toMatchObject({
'aria-label': 'Foo title', 'aria-label': 'Foo title',
category: 'secondary',
icon: 'remove', icon: 'remove',
title: 'Foo title', title: 'Foo title',
variant: 'danger', variant: 'danger',
......
spec/frontend/registry/explorer/components/details_page/tags_list_spec.js
View file @ 4a1e26ac
...@@ -115,7 +115,6 @@ describe('Tags List', () => { ...@@ -115,7 +115,6 @@ describe('Tags List', () => {
// The list has only two tags and for some reasons .at(-1) does not work // The list has only two tags and for some reasons .at(-1) does not work
expect(rows.at(1).attributes()).toMatchObject({ expect(rows.at(1).attributes()).toMatchObject({
last: 'true',
isdesktop: 'true', isdesktop: 'true',
}); });
}); });
......
spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
View file @ 4a1e26ac
...@@ -3,7 +3,7 @@ import { GlIcon, GlSprintf } from '@gitlab/ui'; ...@@ -3,7 +3,7 @@ import { GlIcon, GlSprintf } from '@gitlab/ui';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Component from '~/registry/explorer/components/list_page/image_list_row.vue'; import Component from '~/registry/explorer/components/list_page/image_list_row.vue';
import ListItem from '~/registry/explorer/components/list_item.vue'; import ListItem from '~/vue_shared/components/registry/list_item.vue';
import DeleteButton from '~/registry/explorer/components/delete_button.vue'; import DeleteButton from '~/registry/explorer/components/delete_button.vue';
import { import {
ROW_SCHEDULED_FOR_DELETION, ROW_SCHEDULED_FOR_DELETION,
......
spec/frontend/registry/explorer/stubs.js
View file @ 4a1e26ac
import RealDeleteModal from '~/registry/explorer/components/details_page/delete_modal.vue'; import RealDeleteModal from '~/registry/explorer/components/details_page/delete_modal.vue';
import RealListItem from '~/registry/explorer/components/list_item.vue'; import RealListItem from '~/vue_shared/components/registry/list_item.vue';
export const GlModal = { export const GlModal = {
template: '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-ok"></slot></div>', template: '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-ok"></slot></div>',
......
spec/frontend/registry/explorer/components/list_item_spec.js → spec/frontend/vue_shared/components/registry/list_item_spec.js
View file @ 4a1e26ac
import { GlButton } from '@gitlab/ui'; import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import component from '~/registry/explorer/components/list_item.vue'; import component from '~/vue_shared/components/registry/list_item.vue';
describe('list item', () => { describe('list item', () => {
let wrapper; let wrapper;
...@@ -34,7 +34,7 @@ describe('list item', () => { ...@@ -34,7 +34,7 @@ describe('list item', () => {
wrapper = null; wrapper = null;
}); });
it.each` describe.each`
slotName | finderFunction slotName | finderFunction
${'left-primary'} | ${findLeftPrimarySlot} ${'left-primary'} | ${findLeftPrimarySlot}
${'left-secondary'} | ${findLeftSecondarySlot} ${'left-secondary'} | ${findLeftSecondarySlot}
...@@ -42,10 +42,18 @@ describe('list item', () => { ...@@ -42,10 +42,18 @@ describe('list item', () => {
${'right-secondary'} | ${findRightSecondarySlot} ${'right-secondary'} | ${findRightSecondarySlot}
${'left-action'} | ${findLeftActionSlot} ${'left-action'} | ${findLeftActionSlot}
${'right-action'} | ${findRightActionSlot} ${'right-action'} | ${findRightActionSlot}
`('has a $slotName slot', ({ finderFunction }) => { `('$slotName slot', ({ finderFunction, slotName }) => {
mountComponent(); it('exist when the slot is filled', () => {
mountComponent();
expect(finderFunction().exists()).toBe(true);
});
expect(finderFunction().exists()).toBe(true); it('does not exist when the slot is empty', () => {
mountComponent({}, { [slotName]: '' });
expect(finderFunction().exists()).toBe(false);
});
}); });
describe.each` describe.each`
...@@ -106,51 +114,22 @@ describe('list item', () => { ...@@ -106,51 +114,22 @@ describe('list item', () => {
}); });
}); });
describe('first prop', () => { describe('borders and selection', () => {
it('when is true displays a double top border', () => { it.each`
mountComponent({ first: true }); first | selected | shouldHave | shouldNotHave
${true} | ${true} | ${['gl-bg-blue-50', 'gl-border-blue-200']} | ${['gl-border-t-transparent', 'gl-border-t-gray-100']}
expect(wrapper.classes('gl-border-t-2')).toBe(true); ${false} | ${true} | ${['gl-bg-blue-50', 'gl-border-blue-200']} | ${['gl-border-t-transparent', 'gl-border-t-gray-100']}
}); ${true} | ${false} | ${['gl-border-b-gray-100']} | ${['gl-bg-blue-50', 'gl-border-blue-200']}
${false} | ${false} | ${['gl-border-b-gray-100']} | ${['gl-bg-blue-50', 'gl-border-blue-200']}
it('when is false display a single top border', () => { `(
mountComponent({ first: false }); 'when first is $first and selected is $selected',
({ first, selected, shouldHave, shouldNotHave }) => {
expect(wrapper.classes('gl-border-t-1')).toBe(true); mountComponent({ first, selected });
});
}); expect(wrapper.classes()).toEqual(expect.arrayContaining(shouldHave));
describe('last prop', () => { expect(wrapper.classes()).toEqual(expect.not.arrayContaining(shouldNotHave));
it('when is true displays a double bottom border', () => { },
mountComponent({ last: true }); );
expect(wrapper.classes('gl-border-b-2')).toBe(true);
});
it('when is false display a single bottom border', () => {
mountComponent({ last: false });
expect(wrapper.classes('gl-border-b-1')).toBe(true);
});
});
describe('selected prop', () => {
it('when true applies the selected border and background', () => {
mountComponent({ selected: true });
expect(wrapper.classes()).toEqual(
expect.arrayContaining(['gl-bg-blue-50', 'gl-border-blue-200']),
);
expect(wrapper.classes()).toEqual(expect.not.arrayContaining(['gl-border-gray-100']));
});
it('when false applies the default border', () => {
mountComponent({ selected: false });
expect(wrapper.classes()).toEqual(
expect.not.arrayContaining(['gl-bg-blue-50', 'gl-border-blue-200']),
);
expect(wrapper.classes()).toEqual(expect.arrayContaining(['gl-border-gray-100']));
});
}); });
}); });
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7