diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-20 02:18:09 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-20 02:18:09 +0300 |
commit | 6ed4ec3e0b1340f96b7c043ef51d1b33bbe85fde (patch) | |
tree | dc4d20fe6064752c0bd323187252c77e0a89144b /spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js | |
parent | 9868dae7fc0655bd7ce4a6887d4e6d487690eeed (diff) |
Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42
Diffstat (limited to 'spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js')
-rw-r--r-- | spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js b/spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js new file mode 100644 index 00000000000..eaee0e77311 --- /dev/null +++ b/spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js @@ -0,0 +1,156 @@ +import { nextTick } from 'vue'; +import { cloneDeep } from 'lodash'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import { resetHTMLFixture } from 'helpers/fixtures'; +import { useFakeDate } from 'helpers/fake_date'; +import UserProfileSetStatusWrapper from '~/set_status_modal/user_profile_set_status_wrapper.vue'; +import SetStatusForm from '~/set_status_modal/set_status_form.vue'; +import { TIME_RANGES_WITH_NEVER, NEVER_TIME_RANGE } from '~/set_status_modal/constants'; + +describe('UserProfileSetStatusWrapper', () => { + let wrapper; + + const defaultProvide = { + fields: { + emoji: { name: 'user[status][emoji]', id: 'user_status_emoji', value: '8ball' }, + message: { name: 'user[status][message]', id: 'user_status_message', value: 'foo bar' }, + availability: { + name: 'user[status][availability]', + id: 'user_status_availability', + value: 'busy', + }, + clearStatusAfter: { + name: 'user[status][clear_status_after]', + id: 'user_status_clear_status_after', + value: '2022-09-03 03:06:26 UTC', + }, + }, + }; + + const createComponent = ({ provide = {} } = {}) => { + wrapper = mountExtended(UserProfileSetStatusWrapper, { + provide: { + ...defaultProvide, + ...provide, + }, + }); + }; + + const findInput = (name) => wrapper.find(`[name="${name}"]`); + const findSetStatusForm = () => wrapper.findComponent(SetStatusForm); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders `SetStatusForm` component and passes expected props', () => { + createComponent(); + + expect(cloneDeep(findSetStatusForm().props())).toMatchObject({ + defaultEmoji: 'speech_balloon', + emoji: defaultProvide.fields.emoji.value, + message: defaultProvide.fields.message.value, + availability: true, + clearStatusAfter: NEVER_TIME_RANGE, + currentClearStatusAfter: defaultProvide.fields.clearStatusAfter.value, + }); + }); + + it.each` + input + ${'emoji'} + ${'message'} + ${'availability'} + `('renders hidden $input input with value set', ({ input }) => { + createComponent(); + + expect(findInput(defaultProvide.fields[input].name).attributes('value')).toBe( + defaultProvide.fields[input].value, + ); + }); + + describe('when clear status after dropdown is set to `Never`', () => { + it('renders hidden clear status after input with value unset', () => { + createComponent(); + + expect( + findInput(defaultProvide.fields.clearStatusAfter.name).attributes('value'), + ).toBeUndefined(); + }); + }); + + describe('when clear status after dropdown has a value selected', () => { + it('renders hidden clear status after input with value set', async () => { + createComponent(); + + findSetStatusForm().vm.$emit('clear-status-after-click', TIME_RANGES_WITH_NEVER[1]); + + await nextTick(); + + expect(findInput(defaultProvide.fields.clearStatusAfter.name).attributes('value')).toBe( + TIME_RANGES_WITH_NEVER[1].shortcut, + ); + }); + }); + + describe('when emoji is changed', () => { + it('updates hidden emoji input value', async () => { + createComponent(); + + const newEmoji = 'basketball'; + + findSetStatusForm().vm.$emit('emoji-click', newEmoji); + + await nextTick(); + + expect(findInput(defaultProvide.fields.emoji.name).attributes('value')).toBe(newEmoji); + }); + }); + + describe('when message is changed', () => { + it('updates hidden message input value', async () => { + createComponent(); + + const newMessage = 'foo bar baz'; + + findSetStatusForm().vm.$emit('message-input', newMessage); + + await nextTick(); + + expect(findInput(defaultProvide.fields.message.name).attributes('value')).toBe(newMessage); + }); + }); + + describe('when form is successfully submitted', () => { + // 2022-09-02 00:00:00 UTC + useFakeDate(2022, 8, 2); + + const form = document.createElement('form'); + form.classList.add('js-edit-user'); + + beforeEach(async () => { + document.body.appendChild(form); + createComponent(); + + const oneDay = TIME_RANGES_WITH_NEVER[4]; + + findSetStatusForm().vm.$emit('clear-status-after-click', oneDay); + + await nextTick(); + + form.dispatchEvent(new Event('ajax:success')); + }); + + afterEach(() => { + resetHTMLFixture(); + }); + + it('updates clear status after dropdown to `Never`', () => { + expect(findSetStatusForm().props('clearStatusAfter')).toBe(NEVER_TIME_RANGE); + }); + + it('updates `currentClearStatusAfter` prop', () => { + expect(findSetStatusForm().props('currentClearStatusAfter')).toBe('2022-09-03 00:00:00 UTC'); + }); + }); +}); |