diff options
author | Sarah German <sgerman@gitlab.com> | 2022-07-07 10:47:33 +0300 |
---|---|---|
committer | David O'Regan <doregan@gitlab.com> | 2022-07-07 10:47:33 +0300 |
commit | c8c0b1a8bbfebc193ea2e26ac79e3ddc3c0f8108 (patch) | |
tree | 88045641c6f51a4b8406041bc799542f146cdb83 /spec/frontend | |
parent | d3ce55082b3df44d81eb577d89b5a66a9573d707 (diff) |
Improve SVG icon handling
Diffstat (limited to 'spec/frontend')
-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, 0 insertions, 88 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 deleted file mode 100644 index be478d99..00000000 --- a/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap +++ /dev/null @@ -1,7 +0,0 @@ -// 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 deleted file mode 100644 index 76239651..00000000 --- a/spec/frontend/shared/components/gl_icon_spec.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * @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); - }); - }); -}); |