diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/registry')
4 files changed, 55 insertions, 18 deletions
diff --git a/spec/frontend/vue_shared/components/registry/details_row_spec.js b/spec/frontend/vue_shared/components/registry/details_row_spec.js index 16a55b84787..09dacfae363 100644 --- a/spec/frontend/vue_shared/components/registry/details_row_spec.js +++ b/spec/frontend/vue_shared/components/registry/details_row_spec.js @@ -8,7 +8,7 @@ describe('DetailsRow', () => { const findIcon = () => wrapper.find(GlIcon); const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]'); - const mountComponent = props => { + const mountComponent = (props) => { wrapper = shallowMount(component, { propsData: { icon: 'clock', diff --git a/spec/frontend/vue_shared/components/registry/list_item_spec.js b/spec/frontend/vue_shared/components/registry/list_item_spec.js index 2a48bf4f2d6..33c9c808dc3 100644 --- a/spec/frontend/vue_shared/components/registry/list_item_spec.js +++ b/spec/frontend/vue_shared/components/registry/list_item_spec.js @@ -11,7 +11,7 @@ describe('list item', () => { const findRightPrimarySlot = () => wrapper.find('[data-testid="right-primary"]'); const findRightSecondarySlot = () => wrapper.find('[data-testid="right-secondary"]'); const findRightActionSlot = () => wrapper.find('[data-testid="right-action"]'); - const findDetailsSlot = name => wrapper.find(`[data-testid="${name}"]`); + const findDetailsSlot = (name) => wrapper.find(`[data-testid="${name}"]`); const findToggleDetailsButton = () => wrapper.find(GlButton); const mountComponent = (propsData, slots) => { @@ -74,14 +74,14 @@ describe('list item', () => { findToggleDetailsButton().vm.$emit('click'); await wrapper.vm.$nextTick(); - slotNames.forEach(name => { + slotNames.forEach((name) => { expect(findDetailsSlot(name).exists()).toBe(true); }); }); it('are not visible when details are not shown', () => { mountComponent({}, slotMocks); - slotNames.forEach(name => { + slotNames.forEach((name) => { expect(findDetailsSlot(name).exists()).toBe(false); }); }); diff --git a/spec/frontend/vue_shared/components/registry/metadata_item_spec.js b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js index ff968ff1831..3d3cfbe13e3 100644 --- a/spec/frontend/vue_shared/components/registry/metadata_item_spec.js +++ b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js @@ -1,5 +1,6 @@ import { shallowMount } from '@vue/test-utils'; import { GlIcon, GlLink } from '@gitlab/ui'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import component from '~/vue_shared/components/registry/metadata_item.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; @@ -12,6 +13,9 @@ describe('Metadata Item', () => { const mountComponent = (propsData = defaultProps) => { wrapper = shallowMount(component, { propsData, + directives: { + GlTooltip: createMockDirective(), + }, }); }; @@ -24,8 +28,9 @@ describe('Metadata Item', () => { const findLink = (w = wrapper) => w.find(GlLink); const findText = () => wrapper.find('[data-testid="metadata-item-text"]'); const findTooltipOnTruncate = (w = wrapper) => w.find(TooltipOnTruncate); + const findTextTooltip = () => wrapper.find('[data-testid="text-tooltip-container"]'); - describe.each(['xs', 's', 'm', 'l', 'xl'])('size class', size => { + describe.each(['xs', 's', 'm', 'l', 'xl'])('size class', (size) => { const className = `mw-${size}`; it(`${size} is assigned correctly to text`, () => { @@ -55,6 +60,22 @@ describe('Metadata Item', () => { expect(tooltip.exists()).toBe(true); expect(tooltip.attributes('title')).toBe(defaultProps.text); }); + + describe('with tooltip prop set to something', () => { + const textTooltip = 'foo'; + it('hides tooltip_on_truncate', () => { + mountComponent({ ...defaultProps, textTooltip }); + + expect(findTooltipOnTruncate(findText()).exists()).toBe(false); + }); + + it('set the tooltip on the text', () => { + mountComponent({ ...defaultProps, textTooltip }); + + const tooltip = getBinding(findTextTooltip().element, 'gl-tooltip'); + expect(tooltip.value.title).toBe(textTooltip); + }); + }); }); describe('link', () => { diff --git a/spec/frontend/vue_shared/components/registry/title_area_spec.js b/spec/frontend/vue_shared/components/registry/title_area_spec.js index b743a663f06..fb0009ebb8d 100644 --- a/spec/frontend/vue_shared/components/registry/title_area_spec.js +++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js @@ -1,4 +1,4 @@ -import { GlAvatar, GlSprintf, GlLink } from '@gitlab/ui'; +import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import component from '~/vue_shared/components/registry/title_area.vue'; @@ -9,12 +9,13 @@ describe('title area', () => { const findSubHeaderSlot = () => wrapper.find('[data-testid="sub-header"]'); const findRightActionsSlot = () => wrapper.find('[data-testid="right-actions"]'); - const findMetadataSlot = name => wrapper.find(`[data-testid="${name}"]`); + const findMetadataSlot = (name) => wrapper.find(`[data-testid="${name}"]`); const findTitle = () => wrapper.find('[data-testid="title"]'); const findAvatar = () => wrapper.find(GlAvatar); const findInfoMessages = () => wrapper.findAll('[data-testid="info-message"]'); const findDynamicSlot = () => wrapper.find(`[data-testid="${DYNAMIC_SLOT}`); const findSlotOrderElements = () => wrapper.findAll('[slot-test]'); + const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => { wrapper = shallowMount(component, { @@ -96,10 +97,33 @@ describe('title area', () => { mountComponent({ slots: slotMocks }); await wrapper.vm.$nextTick(); - slotNames.forEach(name => { + slotNames.forEach((name) => { expect(findMetadataSlot(name).exists()).toBe(true); }); }); + + it('is/are hidden when metadata-loading is true', async () => { + mountComponent({ slots: slotMocks, propsData: { title: 'foo', metadataLoading: true } }); + + await wrapper.vm.$nextTick(); + slotNames.forEach((name) => { + expect(findMetadataSlot(name).exists()).toBe(false); + }); + }); + }); + + describe('metadata skeleton loader', () => { + it('is hidden when metadata loading is false', () => { + mountComponent(); + + expect(findSkeletonLoader().exists()).toBe(false); + }); + + it('is shown when metadata loading is true', () => { + mountComponent({ propsData: { metadataLoading: true } }); + + expect(findSkeletonLoader().exists()).toBe(true); + }); }); describe('dynamic slots', () => { @@ -142,16 +166,8 @@ describe('title area', () => { await wrapper.vm.$nextTick(); - expect( - findSlotOrderElements() - .at(0) - .attributes('data-testid'), - ).toBe(DYNAMIC_SLOT); - expect( - findSlotOrderElements() - .at(1) - .attributes('data-testid'), - ).toBe('metadata-foo'); + expect(findSlotOrderElements().at(0).attributes('data-testid')).toBe(DYNAMIC_SLOT); + expect(findSlotOrderElements().at(1).attributes('data-testid')).toBe('metadata-foo'); }); }); |