diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-15 15:14:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-15 15:14:49 +0300 |
commit | 524e97262236b70abe4399faef040f4298c31d38 (patch) | |
tree | 20ee49eadaa5e5796e5e4b9d35b43c866f4b37f9 /spec/frontend/toggles | |
parent | e7e44c0e4ce493bb103b0fd98f8dd3c90928d291 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/toggles')
-rw-r--r-- | spec/frontend/toggles/index_spec.js | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/spec/frontend/toggles/index_spec.js b/spec/frontend/toggles/index_spec.js new file mode 100644 index 00000000000..575b1b6080c --- /dev/null +++ b/spec/frontend/toggles/index_spec.js @@ -0,0 +1,149 @@ +import { createWrapper } from '@vue/test-utils'; +import { GlToggle } from '@gitlab/ui'; +import { initToggle } from '~/toggles'; + +// Selectors +const TOGGLE_WRAPPER_CLASS = '.gl-toggle-wrapper'; +const TOGGLE_LABEL_CLASS = '.gl-toggle-label'; +const CHECKED_CLASS = '.is-checked'; +const DISABLED_CLASS = '.is-disabled'; +const LOADING_CLASS = '.toggle-loading'; +const HELP_TEXT_SELECTOR = '[data-testid="toggle-help"]'; + +// Toggle settings +const toggleClassName = 'js-custom-toggle-class'; +const toggleLabel = 'Toggle label'; + +describe('toggles/index.js', () => { + let instance; + let toggleWrapper; + + const createRootEl = (dataAttrs) => { + const dataset = { + label: toggleLabel, + ...dataAttrs, + }; + const el = document.createElement('span'); + el.classList.add(toggleClassName); + + Object.entries(dataset).forEach(([key, value]) => { + el.dataset[key] = value; + }); + + document.body.appendChild(el); + + return el; + }; + + const initToggleWithOptions = (options = {}) => { + const el = createRootEl(options); + instance = initToggle(el); + toggleWrapper = document.querySelector(TOGGLE_WRAPPER_CLASS); + }; + + afterEach(() => { + document.body.innerHTML = ''; + instance = null; + toggleWrapper = null; + }); + + describe('initToggle', () => { + describe('default state', () => { + beforeEach(() => { + initToggleWithOptions(); + }); + + it('attaches a GlToggle to the element', async () => { + expect(toggleWrapper).not.toBe(null); + expect(toggleWrapper.querySelector(TOGGLE_LABEL_CLASS).textContent).toBe(toggleLabel); + }); + + it('passes CSS classes down to GlToggle', () => { + expect(toggleWrapper.className).toContain(toggleClassName); + }); + + it('is not checked', () => { + expect(toggleWrapper.querySelector(CHECKED_CLASS)).toBe(null); + }); + + it('is enabled', () => { + expect(toggleWrapper.querySelector(DISABLED_CLASS)).toBe(null); + }); + + it('is not loading', () => { + expect(toggleWrapper.querySelector(LOADING_CLASS)).toBe(null); + }); + + it('emits "change" event when value changes', () => { + const wrapper = createWrapper(instance); + const event = 'change'; + const listener = jest.fn(); + + instance.$on(event, listener); + + expect(listener).toHaveBeenCalledTimes(0); + + wrapper.find(GlToggle).vm.$emit(event, true); + + expect(listener).toHaveBeenCalledTimes(1); + expect(listener).toHaveBeenLastCalledWith(true); + + wrapper.find(GlToggle).vm.$emit(event, false); + + expect(listener).toHaveBeenCalledTimes(2); + expect(listener).toHaveBeenLastCalledWith(false); + }); + }); + + describe('with custom options', () => { + const name = 'toggle-name'; + const help = 'Help text'; + const foo = 'bar'; + + beforeEach(() => { + initToggleWithOptions({ + name, + isChecked: true, + disabled: true, + isLoading: true, + help, + labelPosition: 'hidden', + foo, + }); + toggleWrapper = document.querySelector(TOGGLE_WRAPPER_CLASS); + }); + + it('sets the custom name', () => { + const input = toggleWrapper.querySelector('input[type="hidden"]'); + + expect(input.name).toBe(name); + }); + + it('is checked', () => { + expect(toggleWrapper.querySelector(CHECKED_CLASS)).not.toBe(null); + }); + + it('is disabled', () => { + expect(toggleWrapper.querySelector(DISABLED_CLASS)).not.toBe(null); + }); + + it('is loading', () => { + expect(toggleWrapper.querySelector(LOADING_CLASS)).not.toBe(null); + }); + + it('sets the custom help text', () => { + expect(toggleWrapper.querySelector(HELP_TEXT_SELECTOR).textContent).toBe(help); + }); + + it('hides the label', () => { + expect( + toggleWrapper.querySelector(TOGGLE_LABEL_CLASS).classList.contains('gl-sr-only'), + ).toBe(true); + }); + + it('passes custom dataset to the wrapper', () => { + expect(toggleWrapper.dataset.foo).toBe('bar'); + }); + }); + }); +}); |