Skip to content

G
gitlab-ce
Commit 25a82d36 authored by Tom Quirk's avatar Tom Quirk
Browse files
Options

Update design man. item_spec.js 

Improve readability of tests by
removing snapshots in favor of
explicitly checking various DOM elements.

Additionally, reorganise tests to better match descriptions
parent 737b0d43
Show whitespace changes
Inline Side-by-side
Showing with 52 additions and 668 deletions
spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
View file @ 25a82d36
......@@ -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`] = `
<router-link-stub
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 @ 25a82d36
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import VueRouter from 'vue-router';
import Item from '~/design_management/components/list/item.vue';
......@@ -18,6 +19,10 @@ const DESIGN_VERSION_EVENT = {
describe('Design management list item component', () => {
let wrapper;
const findDesignEvent = () => wrapper.find('.design-event');
const findEventIcon = () => findDesignEvent().find(Icon);
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
function createComponent({
notesCount = 0,
event = DESIGN_VERSION_EVENT.NO_CHANGE,
......@@ -134,35 +139,31 @@ describe('Design management list item component', () => {
});
});
describe('with no notes', () => {
it('renders item with no status icon for none event', () => {
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 });
it('renders loading spinner when isUploading is true', () => {
createComponent({ isUploading: true });
expect(wrapper.element).toMatchSnapshot();
expect(findLoadingIcon().exists()).toBe(true);
});
it('renders item with correct status icon for creation event', () => {
createComponent({ event: DESIGN_VERSION_EVENT.CREATION });
it('renders item with no status icon for none event', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
expect(findDesignEvent().exists()).toBe(false);
});
it('renders loading spinner when isUploading is true', () => {
createComponent({ isUploading: true });
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(wrapper.element).toMatchSnapshot();
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 @ 25a82d36
......@@ -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`] = `
<router-link-stub
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 @ 25a82d36
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import VueRouter from 'vue-router';
import Item from '~/design_management_legacy/components/list/item.vue';
......@@ -18,6 +19,10 @@ const DESIGN_VERSION_EVENT = {
describe('Design management list item component', () => {
let wrapper;
const findDesignEvent = () => wrapper.find('.design-event');
const findEventIcon = () => findDesignEvent().find(Icon);
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
function createComponent({
notesCount = 0,
event = DESIGN_VERSION_EVENT.NO_CHANGE,
......@@ -134,35 +139,31 @@ describe('Design management list item component', () => {
});
});
describe('with no notes', () => {
it('renders item with no status icon for none event', () => {
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 });
it('renders loading spinner when isUploading is true', () => {
createComponent({ isUploading: true });
expect(wrapper.element).toMatchSnapshot();
expect(findLoadingIcon().exists()).toBe(true);
});
it('renders item with correct status icon for creation event', () => {
createComponent({ event: DESIGN_VERSION_EVENT.CREATION });
it('renders item with no status icon for none event', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
expect(findDesignEvent().exists()).toBe(false);
});
it('renders loading spinner when isUploading is true', () => {
createComponent({ isUploading: true });
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(wrapper.element).toMatchSnapshot();
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