diff options
Diffstat (limited to 'spec/frontend/ide/components/shared/commit_message_field_spec.js')
-rw-r--r-- | spec/frontend/ide/components/shared/commit_message_field_spec.js | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/spec/frontend/ide/components/shared/commit_message_field_spec.js b/spec/frontend/ide/components/shared/commit_message_field_spec.js new file mode 100644 index 00000000000..f4f9b95b233 --- /dev/null +++ b/spec/frontend/ide/components/shared/commit_message_field_spec.js @@ -0,0 +1,149 @@ +import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import CommitMessageField from '~/ide/components/shared/commit_message_field.vue'; + +const DEFAULT_PROPS = { + text: 'foo text', + placeholder: 'foo placeholder', +}; + +describe('CommitMessageField', () => { + let wrapper; + + const createComponent = (props = {}) => { + wrapper = extendedWrapper( + shallowMount(CommitMessageField, { + propsData: { + ...DEFAULT_PROPS, + ...props, + }, + attachTo: document.body, + }), + ); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + const findTextArea = () => wrapper.find('textarea'); + const findHighlights = () => wrapper.findByTestId('highlights'); + const findHighlightsText = () => wrapper.findByTestId('highlights-text'); + const findHighlightsMark = () => wrapper.findByTestId('highlights-mark'); + const findHighlightsTexts = () => wrapper.findAllByTestId('highlights-text'); + const findHighlightsMarks = () => wrapper.findAllByTestId('highlights-mark'); + + const fillText = async (text) => { + wrapper.setProps({ text }); + await nextTick(); + }; + + it('emits input event on input', () => { + const value = 'foo'; + + createComponent(); + findTextArea().setValue(value); + expect(wrapper.emitted('input')[0][0]).toEqual(value); + }); + + describe('focus classes', () => { + beforeEach(async () => { + createComponent(); + findTextArea().trigger('focus'); + await nextTick(); + }); + + it('is added on textarea focus', async () => { + expect(wrapper.attributes('class')).toEqual( + expect.stringContaining('gl-outline-none! gl-focus-ring-border-1-gray-900!'), + ); + }); + + it('is removed on textarea blur', async () => { + findTextArea().trigger('blur'); + await nextTick(); + + expect(wrapper.attributes('class')).toEqual( + expect.not.stringContaining('gl-outline-none! gl-focus-ring-border-1-gray-900!'), + ); + }); + }); + + describe('highlights', () => { + describe('subject line', () => { + it('does not highlight less than 50 characters', async () => { + const text = 'text less than 50 chars'; + + createComponent(); + await fillText(text); + + expect(findHighlightsText().text()).toEqual(text); + expect(findHighlightsMark().text()).toBeFalsy(); + }); + + it('highlights characters over 50 length', async () => { + const text = + 'text less than 50 chars that should not highlighted. text more than 50 should be highlighted'; + + createComponent(); + await fillText(text); + + expect(findHighlightsText().text()).toEqual(text.slice(0, 50)); + expect(findHighlightsMark().text()).toEqual(text.slice(50)); + }); + }); + + describe('body text', () => { + it('does not highlight body text less tan 72 characters', async () => { + const text = 'subject line\nbody content'; + + createComponent(); + await fillText(text); + + expect(findHighlightsTexts()).toHaveLength(2); + expect(findHighlightsMarks().at(1).attributes('style')).toEqual('display: none;'); + }); + + it('highlights body text more than 72 characters', async () => { + const text = + 'subject line\nbody content that will be highlighted when it is more than 72 characters in length'; + + createComponent(); + await fillText(text); + + expect(findHighlightsTexts()).toHaveLength(2); + expect(findHighlightsMarks().at(1).attributes('style')).not.toEqual('display: none;'); + expect(findHighlightsMarks().at(1).element.textContent).toEqual(' in length'); + }); + + it('highlights body text & subject line', async () => { + const text = + 'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length'; + + createComponent(); + await fillText(text); + + expect(findHighlightsTexts()).toHaveLength(2); + expect(findHighlightsMarks()).toHaveLength(2); + expect(findHighlightsMarks().at(0).element.textContent).toEqual('d'); + expect(findHighlightsMarks().at(1).element.textContent).toEqual(' in length'); + }); + }); + }); + + describe('scrolling textarea', () => { + it('updates transform of highlights', async () => { + const yCoord = 50; + + createComponent(); + await fillText('subject line\n\n\n\n\n\n\n\n\n\n\nbody content'); + + wrapper.vm.$el.querySelector('textarea').scrollTo(0, yCoord); + await nextTick(); + + expect(wrapper.vm.scrollTop).toEqual(yCoord); + expect(findHighlights().attributes('style')).toEqual('transform: translate3d(0, -50px, 0);'); + }); + }); +}); |