170 lines
4.8 KiB
JavaScript
170 lines
4.8 KiB
JavaScript
import $ from 'jquery';
|
|
import { mountExtended } from 'helpers/vue_test_utils_helper';
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
import SetStatusForm from '~/set_status_modal/set_status_form.vue';
|
|
import EmojiPicker from '~/emoji/components/picker.vue';
|
|
import { timeRanges } from '~/vue_shared/constants';
|
|
import { sprintf } from '~/locale';
|
|
import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
|
|
|
|
describe('SetStatusForm', () => {
|
|
let wrapper;
|
|
|
|
const defaultPropsData = {
|
|
defaultEmoji: 'speech_balloon',
|
|
emoji: 'thumbsup',
|
|
message: 'Foo bar',
|
|
availability: false,
|
|
};
|
|
|
|
const createComponent = async ({ propsData = {} } = {}) => {
|
|
wrapper = mountExtended(SetStatusForm, {
|
|
propsData: {
|
|
...defaultPropsData,
|
|
...propsData,
|
|
},
|
|
});
|
|
|
|
await waitForPromises();
|
|
};
|
|
|
|
const findMessageInput = () =>
|
|
wrapper.findByPlaceholderText(SetStatusForm.i18n.statusMessagePlaceholder);
|
|
const findSelectedEmoji = (emoji) =>
|
|
wrapper.findByTestId('selected-emoji').find(`gl-emoji[data-name="${emoji}"]`);
|
|
|
|
it('sets up emoji autocomplete for the message input', async () => {
|
|
const gfmAutoCompleteSetupSpy = jest.spyOn(GfmAutoComplete.prototype, 'setup');
|
|
|
|
await createComponent();
|
|
|
|
expect(gfmAutoCompleteSetupSpy).toHaveBeenCalledWith($(findMessageInput().element), {
|
|
emojis: true,
|
|
});
|
|
});
|
|
|
|
describe('when emoji is set', () => {
|
|
it('displays emoji', async () => {
|
|
await createComponent();
|
|
|
|
expect(findSelectedEmoji(defaultPropsData.emoji).exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('when emoji is not set and message is changed', () => {
|
|
it('displays default emoji', async () => {
|
|
await createComponent({
|
|
propsData: {
|
|
emoji: '',
|
|
},
|
|
});
|
|
|
|
await findMessageInput().trigger('keyup');
|
|
|
|
expect(findSelectedEmoji(defaultPropsData.defaultEmoji).exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('when message is set', () => {
|
|
it('displays filled in message input', async () => {
|
|
await createComponent();
|
|
|
|
expect(findMessageInput().element.value).toBe(defaultPropsData.message);
|
|
});
|
|
});
|
|
|
|
describe('when clear status after is set', () => {
|
|
it('displays value in dropdown toggle button', async () => {
|
|
const clearStatusAfter = timeRanges[0];
|
|
|
|
await createComponent({
|
|
propsData: {
|
|
clearStatusAfter,
|
|
},
|
|
});
|
|
|
|
expect(wrapper.findByRole('button', { name: clearStatusAfter.label }).exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('when emoji is changed', () => {
|
|
beforeEach(async () => {
|
|
await createComponent();
|
|
|
|
wrapper.findComponent(EmojiPicker).vm.$emit('click', defaultPropsData.emoji);
|
|
});
|
|
|
|
it('emits `emoji-click` event', () => {
|
|
expect(wrapper.emitted('emoji-click')).toEqual([[defaultPropsData.emoji]]);
|
|
});
|
|
});
|
|
|
|
describe('when message is changed', () => {
|
|
it('emits `message-input` event', async () => {
|
|
await createComponent();
|
|
|
|
const newMessage = 'Foo bar baz';
|
|
|
|
await findMessageInput().setValue(newMessage);
|
|
|
|
expect(wrapper.emitted('message-input')).toEqual([[newMessage]]);
|
|
});
|
|
});
|
|
|
|
describe('when availability checkbox is changed', () => {
|
|
it('emits `availability-input` event', async () => {
|
|
await createComponent();
|
|
|
|
await wrapper
|
|
.findByLabelText(
|
|
`${SetStatusForm.i18n.availabilityCheckboxLabel} ${SetStatusForm.i18n.availabilityCheckboxHelpText}`,
|
|
)
|
|
.setChecked();
|
|
|
|
expect(wrapper.emitted('availability-input')).toEqual([[true]]);
|
|
});
|
|
});
|
|
|
|
describe('when `Clear status after` dropdown is changed', () => {
|
|
it('emits `clear-status-after-click`', async () => {
|
|
await createComponent();
|
|
|
|
await wrapper.findByTestId('thirtyMinutes').trigger('click');
|
|
|
|
expect(wrapper.emitted('clear-status-after-click')).toEqual([[timeRanges[0]]]);
|
|
});
|
|
});
|
|
|
|
describe('when clear status button is clicked', () => {
|
|
beforeEach(async () => {
|
|
await createComponent();
|
|
|
|
await wrapper
|
|
.findByRole('button', { name: SetStatusForm.i18n.clearStatusButtonLabel })
|
|
.trigger('click');
|
|
});
|
|
|
|
it('clears emoji and message', () => {
|
|
expect(wrapper.emitted('emoji-click')).toEqual([['']]);
|
|
expect(wrapper.emitted('message-input')).toEqual([['']]);
|
|
expect(wrapper.findByTestId('no-emoji-placeholder').exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('when `currentClearStatusAfter` prop is set', () => {
|
|
it('displays clear status message', async () => {
|
|
const date = '2022-08-25 21:14:48 UTC';
|
|
|
|
await createComponent({
|
|
propsData: {
|
|
currentClearStatusAfter: date,
|
|
},
|
|
});
|
|
|
|
expect(
|
|
wrapper.findByText(sprintf(SetStatusForm.i18n.clearStatusAfterMessage, { date })).exists(),
|
|
).toBe(true);
|
|
});
|
|
});
|
|
});
|