150 lines
4.7 KiB
JavaScript
150 lines
4.7 KiB
JavaScript
|
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);');
|
||
|
});
|
||
|
});
|
||
|
});
|