Skip to content

G
gitlab-ce
Commit a475c31f authored by Illya Klymov's avatar Illya Klymov
Browse files
Options

Merge branch 'refactor-item-spec-design-man' into 'master' 

Clean up design management `item_spec.js`

See merge request gitlab-org/gitlab!38472
parents 3c3e4ee5 aadf0181
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 670 deletions
app/assets/javascripts/design_management/components/list/item.vue
View file @ a475c31f
...@@ -130,7 +130,7 @@ export default { ...@@ -130,7 +130,7 @@ export default {
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new" class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
> >
<div class="card-body p-0 d-flex-center overflow-hidden position-relative"> <div class="card-body p-0 d-flex-center overflow-hidden position-relative">
<div v-if="icon.name" class="design-event position-absolute"> <div v-if="icon.name" data-testid="designEvent" class="design-event position-absolute">
<span :title="icon.tooltip" :aria-label="icon.tooltip"> <span :title="icon.tooltip" :aria-label="icon.tooltip">
<icon :name="icon.name" :size="18" :class="icon.classes" /> <icon :name="icon.name" :size="18" :class="icon.classes" />
</span> </span>
......
app/assets/javascripts/design_management_legacy/components/list/item.vue
View file @ a475c31f
...@@ -130,7 +130,7 @@ export default { ...@@ -130,7 +130,7 @@ export default {
class="card cursor-pointer text-plain js-design-list-item design-list-item" class="card cursor-pointer text-plain js-design-list-item design-list-item"
> >
<div class="card-body p-0 d-flex-center overflow-hidden position-relative"> <div class="card-body p-0 d-flex-center overflow-hidden position-relative">
<div v-if="icon.name" class="design-event position-absolute"> <div v-if="icon.name" data-testid="designEvent" class="design-event position-absolute">
<span :title="icon.tooltip" :aria-label="icon.tooltip"> <span :title="icon.tooltip" :aria-label="icon.tooltip">
<icon :name="icon.name" :size="18" :class="icon.classes" /> <icon :name="icon.name" :size="18" :class="icon.classes" />
</span> </span>
......
spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
View file @ a475c31f
...@@ -8,315 +8,6 @@ exports[`Design management list item component when item appears in view after i ...@@ -8,315 +8,6 @@ exports[`Design management list item component when item appears in view after i
/> />
`; `;
exports[`Design management list item component with no notes renders item with correct status icon for creation event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<div
class="design-event position-absolute"
>
<span
aria-label="Added in this version"
title="Added in this version"
>
<icon-stub
class="text-success-500"
name="file-addition-solid"
size="18"
/>
</span>
</div>
<gl-intersection-observer-stub>
<!---->
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with no notes renders item with correct status icon for deletion event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<div
class="design-event position-absolute"
>
<span
aria-label="Deleted in this version"
title="Deleted in this version"
>
<icon-stub
class="text-danger-500"
name="file-deletion-solid"
size="18"
/>
</span>
</div>
<gl-intersection-observer-stub>
<!---->
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with no notes renders item with correct status icon for modification event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<div
class="design-event position-absolute"
>
<span
aria-label="Modified in this version"
title="Modified in this version"
>
<icon-stub
class="text-primary-500"
name="file-modified-solid"
size="18"
/>
</span>
</div>
<gl-intersection-observer-stub>
<!---->
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with no notes renders item with no status icon for none event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<!---->
<gl-intersection-observer-stub>
<!---->
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with no notes renders loading spinner when isUploading is true 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<!---->
<gl-intersection-observer-stub>
<gl-loading-icon-stub
color="orange"
label="Loading"
size="md"
/>
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
style="display: none;"
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with notes renders item with multiple comments 1`] = ` exports[`Design management list item component with notes renders item with multiple comments 1`] = `
<router-link-stub <router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new" class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
......
spec/frontend/design_management/components/list/item_spec.js
View file @ a475c31f
import { createLocalVue, shallowMount } from '@vue/test-utils'; import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui'; import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import Item from '~/design_management/components/list/item.vue'; import Item from '~/design_management/components/list/item.vue';
...@@ -18,6 +19,10 @@ const DESIGN_VERSION_EVENT = { ...@@ -18,6 +19,10 @@ const DESIGN_VERSION_EVENT = {
describe('Design management list item component', () => { describe('Design management list item component', () => {
let wrapper; let wrapper;
const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]');
const findEventIcon = () => findDesignEvent().find(Icon);
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
function createComponent({ function createComponent({
notesCount = 0, notesCount = 0,
event = DESIGN_VERSION_EVENT.NO_CHANGE, event = DESIGN_VERSION_EVENT.NO_CHANGE,
...@@ -134,35 +139,31 @@ describe('Design management list item component', () => { ...@@ -134,35 +139,31 @@ describe('Design management list item component', () => {
}); });
}); });
describe('with no notes', () => { it('renders loading spinner when isUploading is true', () => {
it('renders item with no status icon for none event', () => { createComponent({ isUploading: true });
createComponent();
expect(wrapper.element).toMatchSnapshot();
});
it('renders item with correct status icon for modification event', () => {
createComponent({ event: DESIGN_VERSION_EVENT.MODIFICATION });
expect(wrapper.element).toMatchSnapshot();
});
it('renders item with correct status icon for deletion event', () => {
createComponent({ event: DESIGN_VERSION_EVENT.DELETION });
expect(wrapper.element).toMatchSnapshot(); expect(findLoadingIcon().exists()).toBe(true);
}); });
it('renders item with correct status icon for creation event', () => { it('renders item with no status icon for none event', () => {
createComponent({ event: DESIGN_VERSION_EVENT.CREATION }); createComponent();
expect(wrapper.element).toMatchSnapshot(); expect(findDesignEvent().exists()).toBe(false);
}); });
it('renders loading spinner when isUploading is true', () => {
createComponent({ isUploading: true });
expect(wrapper.element).toMatchSnapshot(); describe('with associated event', () => {
it.each`
event | icon | className
${DESIGN_VERSION_EVENT.MODIFICATION} | ${'file-modified-solid'} | ${'text-primary-500'}
${DESIGN_VERSION_EVENT.DELETION} | ${'file-deletion-solid'} | ${'text-danger-500'}
${DESIGN_VERSION_EVENT.CREATION} | ${'file-addition-solid'} | ${'text-success-500'}
`('renders item with correct status icon for $event event', ({ event, icon, className }) => {
createComponent({ event });
const eventIcon = findEventIcon();
expect(eventIcon.exists()).toBe(true);
expect(eventIcon.props('name')).toBe(icon);
expect(eventIcon.classes()).toContain(className);
}); });
}); });
}); });
spec/frontend/design_management_legacy/components/list/__snapshots__/item_spec.js.snap
View file @ a475c31f
...@@ -8,315 +8,6 @@ exports[`Design management list item component when item appears in view after i ...@@ -8,315 +8,6 @@ exports[`Design management list item component when item appears in view after i
/> />
`; `;
exports[`Design management list item component with no notes renders item with correct status icon for creation event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<div
class="design-event position-absolute"
>
<span
aria-label="Added in this version"
title="Added in this version"
>
<icon-stub
class="text-success-500"
name="file-addition-solid"
size="18"
/>
</span>
</div>
<gl-intersection-observer-stub>
<!---->
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with no notes renders item with correct status icon for deletion event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<div
class="design-event position-absolute"
>
<span
aria-label="Deleted in this version"
title="Deleted in this version"
>
<icon-stub
class="text-danger-500"
name="file-deletion-solid"
size="18"
/>
</span>
</div>
<gl-intersection-observer-stub>
<!---->
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with no notes renders item with correct status icon for modification event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<div
class="design-event position-absolute"
>
<span
aria-label="Modified in this version"
title="Modified in this version"
>
<icon-stub
class="text-primary-500"
name="file-modified-solid"
size="18"
/>
</span>
</div>
<gl-intersection-observer-stub>
<!---->
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with no notes renders item with no status icon for none event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<!---->
<gl-intersection-observer-stub>
<!---->
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with no notes renders loading spinner when isUploading is true 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
class="card-body p-0 d-flex-center overflow-hidden position-relative"
>
<!---->
<gl-intersection-observer-stub>
<gl-loading-icon-stub
color="orange"
label="Loading"
size="md"
/>
<img
alt="test"
class="block mx-auto mw-100 mh-100 design-img"
data-qa-selector="design_image"
src=""
style="display: none;"
/>
</gl-intersection-observer-stub>
</div>
<div
class="card-footer d-flex w-100"
>
<div
class="d-flex flex-column str-truncated-100"
>
<span
class="bold str-truncated-100"
data-qa-selector="design_file_name"
>
test
</span>
<span
class="str-truncated-100"
>
Updated
<timeago-stub
cssclass=""
time="01-01-2019"
tooltipplacement="bottom"
/>
</span>
</div>
<!---->
</div>
</router-link-stub>
`;
exports[`Design management list item component with notes renders item with multiple comments 1`] = ` exports[`Design management list item component with notes renders item with multiple comments 1`] = `
<router-link-stub <router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item" class="card cursor-pointer text-plain js-design-list-item design-list-item"
......
spec/frontend/design_management_legacy/components/list/item_spec.js
View file @ a475c31f
import { createLocalVue, shallowMount } from '@vue/test-utils'; import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui'; import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import Item from '~/design_management_legacy/components/list/item.vue'; import Item from '~/design_management_legacy/components/list/item.vue';
...@@ -18,6 +19,10 @@ const DESIGN_VERSION_EVENT = { ...@@ -18,6 +19,10 @@ const DESIGN_VERSION_EVENT = {
describe('Design management list item component', () => { describe('Design management list item component', () => {
let wrapper; let wrapper;
const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]');
const findEventIcon = () => findDesignEvent().find(Icon);
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
function createComponent({ function createComponent({
notesCount = 0, notesCount = 0,
event = DESIGN_VERSION_EVENT.NO_CHANGE, event = DESIGN_VERSION_EVENT.NO_CHANGE,
...@@ -134,35 +139,31 @@ describe('Design management list item component', () => { ...@@ -134,35 +139,31 @@ describe('Design management list item component', () => {
}); });
}); });
describe('with no notes', () => { it('renders loading spinner when isUploading is true', () => {
it('renders item with no status icon for none event', () => { createComponent({ isUploading: true });
createComponent();
expect(wrapper.element).toMatchSnapshot();
});
it('renders item with correct status icon for modification event', () => {
createComponent({ event: DESIGN_VERSION_EVENT.MODIFICATION });
expect(wrapper.element).toMatchSnapshot();
});
it('renders item with correct status icon for deletion event', () => {
createComponent({ event: DESIGN_VERSION_EVENT.DELETION });
expect(wrapper.element).toMatchSnapshot(); expect(findLoadingIcon().exists()).toBe(true);
}); });
it('renders item with correct status icon for creation event', () => { it('renders item with no status icon for none event', () => {
createComponent({ event: DESIGN_VERSION_EVENT.CREATION }); createComponent();
expect(wrapper.element).toMatchSnapshot(); expect(findDesignEvent().exists()).toBe(false);
}); });
it('renders loading spinner when isUploading is true', () => {
createComponent({ isUploading: true });
expect(wrapper.element).toMatchSnapshot(); describe('with associated event', () => {
it.each`
event | icon | className
${DESIGN_VERSION_EVENT.MODIFICATION} | ${'file-modified-solid'} | ${'text-primary-500'}
${DESIGN_VERSION_EVENT.DELETION} | ${'file-deletion-solid'} | ${'text-danger-500'}
${DESIGN_VERSION_EVENT.CREATION} | ${'file-addition-solid'} | ${'text-success-500'}
`('renders item with correct status icon for $event event', ({ event, icon, className }) => {
createComponent({ event });
const eventIcon = findEventIcon();
expect(eventIcon.exists()).toBe(true);
expect(eventIcon.props('name')).toBe(icon);
expect(eventIcon.classes()).toContain(className);
}); });
}); });
}); });
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