diff options
author | Marcel Amirault <mamirault@gitlab.com> | 2022-07-06 13:36:47 +0300 |
---|---|---|
committer | Evan Read <eread@gitlab.com> | 2022-07-06 13:36:47 +0300 |
commit | 17ba820448e999d683b17950d65541a64f4182ba (patch) | |
tree | 13bfe7c1763be4ec232add36131df86449cac821 /spec | |
parent | ed8428aa294b7c51fc332e60ad3a589f2db15656 (diff) |
Revert "Merge branch 'safari-svgs' into 'main'"
Diffstat (limited to 'spec')
-rw-r--r-- | spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap | 7 | ||||
-rw-r--r-- | spec/frontend/shared/components/gl_icon_spec.js | 81 |
2 files changed, 88 insertions, 0 deletions
diff --git a/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap b/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap new file mode 100644 index 00000000..be478d99 --- /dev/null +++ b/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`GlIcon component when created shows svg class "s8" and path "/path/to/icons.svg#check-circle" 1`] = ` +"<svg class=\\"gl-icon s8\\"> + <use href=\\"#check-circle\\"></use> +</svg>" +`; diff --git a/spec/frontend/shared/components/gl_icon_spec.js b/spec/frontend/shared/components/gl_icon_spec.js new file mode 100644 index 00000000..76239651 --- /dev/null +++ b/spec/frontend/shared/components/gl_icon_spec.js @@ -0,0 +1,81 @@ +/** + * @jest-environment jsdom + */ + +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); + }); + }); +}); |