diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/registry/code_instruction_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/registry/code_instruction_spec.js | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/registry/code_instruction_spec.js b/spec/frontend/vue_shared/components/registry/code_instruction_spec.js new file mode 100644 index 00000000000..84c738764a3 --- /dev/null +++ b/spec/frontend/vue_shared/components/registry/code_instruction_spec.js @@ -0,0 +1,117 @@ +import { mount } from '@vue/test-utils'; +import Tracking from '~/tracking'; +import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; + +describe('Package code instruction', () => { + let wrapper; + + const defaultProps = { + instruction: 'npm i @my-package', + copyText: 'Copy npm install command', + }; + + function createComponent(props = {}) { + wrapper = mount(CodeInstruction, { + propsData: { + ...defaultProps, + ...props, + }, + }); + } + + const findCopyButton = () => wrapper.find(ClipboardButton); + const findInputElement = () => wrapper.find('[data-testid="instruction-input"]'); + const findMultilineInstruction = () => wrapper.find('[data-testid="multiline-instruction"]'); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('single line', () => { + beforeEach(() => + createComponent({ + label: 'foo_label', + }), + ); + + it('to match the default snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + }); + + describe('multiline', () => { + beforeEach(() => + createComponent({ + instruction: 'this is some\nmultiline text', + copyText: 'Copy the command', + label: 'foo_label', + multiline: true, + }), + ); + + it('to match the snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + }); + + describe('tracking', () => { + let eventSpy; + const trackingAction = 'test_action'; + const trackingLabel = 'foo_label'; + + beforeEach(() => { + eventSpy = jest.spyOn(Tracking, 'event'); + }); + + it('should not track when no trackingAction is provided', () => { + createComponent(); + findCopyButton().trigger('click'); + + expect(eventSpy).toHaveBeenCalledTimes(0); + }); + + describe('when trackingAction is provided for single line', () => { + beforeEach(() => + createComponent({ + trackingAction, + trackingLabel, + }), + ); + + it('should track when copying from the input', () => { + findInputElement().trigger('copy'); + + expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, { + label: trackingLabel, + }); + }); + + it('should track when the copy button is pressed', () => { + findCopyButton().trigger('click'); + + expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, { + label: trackingLabel, + }); + }); + }); + + describe('when trackingAction is provided for multiline', () => { + beforeEach(() => + createComponent({ + trackingAction, + trackingLabel, + multiline: true, + }), + ); + + it('should track when copying from the multiline pre element', () => { + findMultilineInstruction().trigger('copy'); + + expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, { + label: trackingLabel, + }); + }); + }); + }); +}); |