diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-04 18:08:46 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-04 18:08:46 +0300 |
commit | adf76f8f1d6da3ecbd8aa5d2da68dc8456283e8f (patch) | |
tree | 8f422d83a2690d0fdb3fd0ee55cf225e40fd976a /spec/frontend/vue_shared/components/registry | |
parent | 6724a6ee6b0898470e20f294f1328cc01891756a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared/components/registry')
3 files changed, 180 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/registry/__snapshots__/history_item_spec.js.snap b/spec/frontend/vue_shared/components/registry/__snapshots__/history_item_spec.js.snap new file mode 100644 index 00000000000..2abae33bc19 --- /dev/null +++ b/spec/frontend/vue_shared/components/registry/__snapshots__/history_item_spec.js.snap @@ -0,0 +1,42 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`History Item renders the correct markup 1`] = ` +<li + class="timeline-entry system-note note-wrapper gl-mb-6!" +> + <div + class="timeline-entry-inner" + > + <div + class="timeline-icon" + > + <gl-icon-stub + name="pencil" + size="16" + /> + </div> + + <div + class="timeline-content" + > + <div + class="note-header" + > + <span> + <div + data-testid="default-slot" + /> + </span> + </div> + + <div + class="note-body" + > + <div + data-testid="body-slot" + /> + </div> + </div> + </div> +</li> +`; diff --git a/spec/frontend/vue_shared/components/registry/details_row_spec.js b/spec/frontend/vue_shared/components/registry/details_row_spec.js new file mode 100644 index 00000000000..16a55b84787 --- /dev/null +++ b/spec/frontend/vue_shared/components/registry/details_row_spec.js @@ -0,0 +1,71 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlIcon } from '@gitlab/ui'; +import component from '~/vue_shared/components/registry/details_row.vue'; + +describe('DetailsRow', () => { + let wrapper; + + const findIcon = () => wrapper.find(GlIcon); + const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]'); + + const mountComponent = props => { + wrapper = shallowMount(component, { + propsData: { + icon: 'clock', + ...props, + }, + slots: { + default: '<div data-testid="default-slot"></div>', + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('has a default slot', () => { + mountComponent(); + expect(findDefaultSlot().exists()).toBe(true); + }); + + describe('icon prop', () => { + it('contains an icon', () => { + mountComponent(); + expect(findIcon().exists()).toBe(true); + }); + + it('icon has the correct props', () => { + mountComponent(); + expect(findIcon().props()).toMatchObject({ + name: 'clock', + }); + }); + }); + + describe('padding prop', () => { + it('padding has a default', () => { + mountComponent(); + expect(wrapper.classes('gl-py-2')).toBe(true); + }); + + it('is reflected in the template', () => { + mountComponent({ padding: 'gl-py-4' }); + expect(wrapper.classes('gl-py-4')).toBe(true); + }); + }); + + describe('dashed prop', () => { + const borderClasses = ['gl-border-b-solid', 'gl-border-gray-100', 'gl-border-b-1']; + it('by default component has no border', () => { + mountComponent(); + expect(wrapper.classes).not.toEqual(expect.arrayContaining(borderClasses)); + }); + + it('has a border when dashed is true', () => { + mountComponent({ dashed: true }); + expect(wrapper.classes()).toEqual(expect.arrayContaining(borderClasses)); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/registry/history_item_spec.js b/spec/frontend/vue_shared/components/registry/history_item_spec.js new file mode 100644 index 00000000000..d51ddda2e3e --- /dev/null +++ b/spec/frontend/vue_shared/components/registry/history_item_spec.js @@ -0,0 +1,67 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlIcon } from '@gitlab/ui'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; +import component from '~/vue_shared/components/registry/history_item.vue'; + +describe('History Item', () => { + let wrapper; + const defaultProps = { + icon: 'pencil', + }; + + const mountComponent = () => { + wrapper = shallowMount(component, { + propsData: { ...defaultProps }, + stubs: { + TimelineEntryItem, + }, + slots: { + default: '<div data-testid="default-slot"></div>', + body: '<div data-testid="body-slot"></div>', + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findTimelineEntry = () => wrapper.find(TimelineEntryItem); + const findGlIcon = () => wrapper.find(GlIcon); + const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]'); + const findBodySlot = () => wrapper.find('[data-testid="body-slot"]'); + + it('renders the correct markup', () => { + mountComponent(); + + expect(wrapper.element).toMatchSnapshot(); + }); + + it('has a default slot', () => { + mountComponent(); + + expect(findDefaultSlot().exists()).toBe(true); + }); + + it('has a body slot', () => { + mountComponent(); + + expect(findBodySlot().exists()).toBe(true); + }); + + it('has a timeline entry', () => { + mountComponent(); + + expect(findTimelineEntry().exists()).toBe(true); + }); + + it('has an icon', () => { + mountComponent(); + + const icon = findGlIcon(); + + expect(icon.exists()).toBe(true); + expect(icon.attributes('name')).toBe(defaultProps.icon); + }); +}); |