78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import { GlBadge } from '@gitlab/ui';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import { nextTick } from 'vue';
|
|
import RunnerTag from '~/runner/components/runner_tag.vue';
|
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
|
|
|
|
const mockTag = 'tag1';
|
|
|
|
describe('RunnerTag', () => {
|
|
let wrapper;
|
|
|
|
const findBadge = () => wrapper.findComponent(GlBadge);
|
|
const getTooltipValue = () => getBinding(findBadge().element, 'gl-tooltip').value;
|
|
|
|
const setDimensions = ({ scrollWidth, offsetWidth }) => {
|
|
jest.spyOn(findBadge().element, 'scrollWidth', 'get').mockReturnValue(scrollWidth);
|
|
jest.spyOn(findBadge().element, 'offsetWidth', 'get').mockReturnValue(offsetWidth);
|
|
|
|
// Mock trigger resize
|
|
getBinding(findBadge().element, 'gl-resize-observer').value();
|
|
};
|
|
|
|
const createComponent = ({ props = {} } = {}) => {
|
|
wrapper = shallowMount(RunnerTag, {
|
|
propsData: {
|
|
tag: mockTag,
|
|
...props,
|
|
},
|
|
directives: {
|
|
GlTooltip: createMockDirective(),
|
|
GlResizeObserver: createMockDirective(),
|
|
},
|
|
});
|
|
};
|
|
|
|
beforeEach(() => {
|
|
createComponent();
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
it('Displays tag text', () => {
|
|
expect(wrapper.text()).toBe(mockTag);
|
|
});
|
|
|
|
it('Displays tags with correct style', () => {
|
|
expect(findBadge().props()).toMatchObject({
|
|
size: 'sm',
|
|
variant: 'neutral',
|
|
});
|
|
});
|
|
|
|
it('Displays tags with md size', () => {
|
|
createComponent({
|
|
props: { size: 'md' },
|
|
});
|
|
|
|
expect(findBadge().props('size')).toBe('md');
|
|
});
|
|
|
|
it.each`
|
|
case | scrollWidth | offsetWidth | expectedTooltip
|
|
${'overflowing'} | ${110} | ${100} | ${mockTag}
|
|
${'not overflowing'} | ${90} | ${100} | ${''}
|
|
${'almost overflowing'} | ${100} | ${100} | ${''}
|
|
`(
|
|
'Sets "$expectedTooltip" as tooltip when $case',
|
|
async ({ scrollWidth, offsetWidth, expectedTooltip }) => {
|
|
setDimensions({ scrollWidth, offsetWidth });
|
|
await nextTick();
|
|
|
|
expect(getTooltipValue()).toBe(expectedTooltip);
|
|
},
|
|
);
|
|
});
|