diff options
Diffstat (limited to 'spec/frontend/ide')
3 files changed, 152 insertions, 3 deletions
diff --git a/spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap b/spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap index 194a619c4aa..47e3a56e83d 100644 --- a/spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap +++ b/spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap @@ -8,7 +8,7 @@ exports[`IDE pipelines list when loaded renders empty state when no latestPipeli <empty-state-stub cansetci="true" - class="mb-auto mt-auto" + class="gl-p-5" emptystatesvgpath="http://test.host" /> </div> 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);'); + }); + }); +}); diff --git a/spec/frontend/ide/stores/mutations_spec.js b/spec/frontend/ide/stores/mutations_spec.js index 23fe23bdef9..4602a0837e0 100644 --- a/spec/frontend/ide/stores/mutations_spec.js +++ b/spec/frontend/ide/stores/mutations_spec.js @@ -86,12 +86,12 @@ describe('Multi-file store mutations', () => { mutations.SET_EMPTY_STATE_SVGS(localState, { emptyStateSvgPath: 'emptyState', noChangesStateSvgPath: 'noChanges', - committedStateSvgPath: 'commited', + committedStateSvgPath: 'committed', }); expect(localState.emptyStateSvgPath).toBe('emptyState'); expect(localState.noChangesStateSvgPath).toBe('noChanges'); - expect(localState.committedStateSvgPath).toBe('commited'); + expect(localState.committedStateSvgPath).toBe('committed'); }); }); |