diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-26 18:13:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-26 18:13:11 +0300 |
commit | 74015980b5259072bbf27b432b9b08fda9d27945 (patch) | |
tree | f1bae954429c9a1e0f1f99fd3dccb5be7adfb93e /spec/frontend/vue_shared/components/dom_element_listener_spec.js | |
parent | 5343536f2bb402bc767db2d015e45ac87189d7c3 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared/components/dom_element_listener_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/dom_element_listener_spec.js | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/dom_element_listener_spec.js b/spec/frontend/vue_shared/components/dom_element_listener_spec.js new file mode 100644 index 00000000000..a848c34b7ce --- /dev/null +++ b/spec/frontend/vue_shared/components/dom_element_listener_spec.js @@ -0,0 +1,116 @@ +import { mount } from '@vue/test-utils'; +import { setHTMLFixture } from 'helpers/fixtures'; +import DomElementListener from '~/vue_shared/components/dom_element_listener.vue'; + +const DEFAULT_SLOT_CONTENT = 'Default slot content'; +const SELECTOR = '.js-test-include'; +const HTML = ` +<div> + <button class="js-test-include" data-testid="lorem">Lorem</button> + <button class="js-test-include" data-testid="ipsum">Ipsum</button> + <button data-testid="hello">Hello</a> +</div> +`; + +describe('~/vue_shared/components/dom_element_listener.vue', () => { + let wrapper; + let spies; + + const createComponent = () => { + wrapper = mount(DomElementListener, { + propsData: { + selector: SELECTOR, + }, + listeners: spies, + slots: { + default: DEFAULT_SLOT_CONTENT, + }, + }); + }; + + const findElement = (testId) => document.querySelector(`[data-testid="${testId}"]`); + const spiesCallCount = () => + Object.values(spies) + .map((x) => x.mock.calls.length) + .reduce((a, b) => a + b); + + beforeEach(() => { + setHTMLFixture(HTML); + spies = { + click: jest.fn(), + focus: jest.fn(), + }; + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('default', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders default slot', () => { + expect(wrapper.text()).toBe(DEFAULT_SLOT_CONTENT); + }); + + it('does not initially trigger listeners', () => { + expect(spiesCallCount()).toBe(0); + }); + + describe.each` + event | testId + ${'click'} | ${'lorem'} + ${'focus'} | ${'ipsum'} + `( + 'when matching element triggers event (testId=$testId, event=$event)', + ({ event, testId }) => { + beforeEach(() => { + findElement(testId).dispatchEvent(new Event(event)); + }); + + it('triggers listener', () => { + expect(spiesCallCount()).toBe(1); + expect(spies[event]).toHaveBeenCalledWith(expect.any(Event)); + expect(spies[event]).toHaveBeenCalledWith( + expect.objectContaining({ + target: findElement(testId), + }), + ); + }); + }, + ); + + describe.each` + desc | event | testId + ${'when non-matching element triggers event'} | ${'click'} | ${'hello'} + ${'when matching element triggers unlistened event'} | ${'hover'} | ${'lorem'} + `('$desc', ({ event, testId }) => { + beforeEach(() => { + findElement(testId).dispatchEvent(new Event(event)); + }); + + it('does not trigger listeners', () => { + expect(spiesCallCount()).toBe(0); + }); + }); + }); + + describe('after destroyed', () => { + beforeEach(() => { + createComponent(); + wrapper.destroy(); + }); + + describe('when matching element triggers event', () => { + beforeEach(() => { + findElement('lorem').dispatchEvent(new Event('click')); + }); + + it('does not trigger any listeners', () => { + expect(spiesCallCount()).toBe(0); + }); + }); + }); +}); |