1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import { shallowMount, createLocalVue } from '@vue/test-utils';
import GlIcon from '../../../../content/frontend/shared/components/gl_icon.vue';
import { iconSizeOptions } from '../../../../content/frontend/shared/constants';
const ICONS_PATH = '/path/to/icons.svg';
const TEST_SIZE = 8;
const TEST_NAME = 'check-circle';
const localVue = createLocalVue();
jest.mock('@gitlab/svgs/dist/icons.svg', () => '/path/to/icons.svg');
describe('GlIcon component', () => {
let wrapper;
let consoleSpy;
const createComponent = props => {
wrapper = shallowMount(GlIcon, {
propsData: {
size: TEST_SIZE,
name: TEST_NAME,
...props,
},
localVue,
});
};
const validateSize = size => GlIcon.props.size.validator(size);
const validateName = name => GlIcon.props.name.validator(name);
afterEach(() => {
wrapper.destroy();
if (consoleSpy) {
consoleSpy.mockRestore();
}
});
describe('when created', () => {
beforeEach(() => {
createComponent();
});
it(`shows svg class "s${TEST_SIZE}" and path "${ICONS_PATH}#${TEST_NAME}"`, () => {
expect(wrapper.html()).toMatchSnapshot();
});
});
describe('size validator', () => {
const maxSize = Math.max(...iconSizeOptions);
it('fails with size outside options', () => {
expect(validateSize(maxSize + 10)).toBe(false);
});
it('passes with size in options', () => {
expect(validateSize(maxSize)).toBe(true);
});
});
describe('name validator', () => {
it('fails with name that does not exist', () => {
const badName = `${TEST_NAME}-bogus-zebra`;
consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
expect(validateName(badName)).toBe(false);
expect(consoleSpy).toHaveBeenCalledWith(
`Icon '${badName}' is not a known icon of @gitlab/svgs`,
);
});
it('passes with name that exists', () => {
expect(validateName(TEST_NAME)).toBe(true);
});
});
});
|
