Add latest changes from gitlab-org/gitlab@master

4 files changed, 135 insertions, 106 deletions

diff --git a/spec/frontend/set_status_modal/set_status_form_spec.js b/spec/frontend/set_status_modal/set_status_form_spec.js
index 486e06d2906..df740d4a431 100644
--- a/spec/frontend/set_status_modal/set_status_form_spec.js
+++ b/spec/frontend/set_status_modal/set_status_form_spec.js
@@ -1,12 +1,15 @@
 import $ from 'jquery';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { useFakeDate } from 'helpers/fake_date';
 import SetStatusForm from '~/set_status_modal/set_status_form.vue';
+import { NEVER_TIME_RANGE } from '~/set_status_modal/constants';
 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';
 
+const [thirtyMinutes, , , oneDay] = timeRanges;
+
 describe('SetStatusForm', () => {
   let wrapper;
 
@@ -73,17 +76,71 @@ describe('SetStatusForm', () => {
     });
   });
 
-  describe('when clear status after is set', () => {
-    it('displays value in dropdown toggle button', async () => {
-      const clearStatusAfter = timeRanges[0];
+  describe('clear status after dropdown toggle button text', () => {
+    useFakeDate(2022, 11, 5);
 
-      await createComponent({
-        propsData: {
-          clearStatusAfter,
-        },
+    describe('when clear status after has previously been set', () => {
+      describe('when date is today', () => {
+        it('displays time that status will clear', async () => {
+          await createComponent({
+            propsData: {
+              currentClearStatusAfter: '2022-12-05 11:00:00 UTC',
+            },
+          });
+
+          expect(wrapper.findByRole('button', { name: '11:00am' }).exists()).toBe(true);
+        });
       });
 
-      expect(wrapper.findByRole('button', { name: clearStatusAfter.label }).exists()).toBe(true);
+      describe('when date is not today', () => {
+        it('displays date and time that status will clear', async () => {
+          await createComponent({
+            propsData: {
+              currentClearStatusAfter: '2022-12-06 11:00:00 UTC',
+            },
+          });
+
+          expect(wrapper.findByRole('button', { name: 'Dec 6, 2022 11:00am' }).exists()).toBe(true);
+        });
+      });
+
+      describe('when a new option is choose from the dropdown', () => {
+        describe('when chosen option is today', () => {
+          it('displays chosen option as time', async () => {
+            await createComponent({
+              propsData: {
+                clearStatusAfter: thirtyMinutes,
+                currentClearStatusAfter: '2022-12-05 11:00:00 UTC',
+              },
+            });
+
+            expect(wrapper.findByRole('button', { name: '12:30am' }).exists()).toBe(true);
+          });
+        });
+
+        describe('when chosen option is not today', () => {
+          it('displays chosen option as date and time', async () => {
+            await createComponent({
+              propsData: {
+                clearStatusAfter: oneDay,
+                currentClearStatusAfter: '2022-12-06 11:00:00 UTC',
+              },
+            });
+
+            expect(wrapper.findByRole('button', { name: 'Dec 6, 2022 12:00am' }).exists()).toBe(
+              true,
+            );
+          });
+        });
+      });
+    });
+
+    describe('when clear status after has not been set', () => {
+      it('displays `Never`', async () => {
+        await createComponent();
+
+        expect(wrapper.findByRole('button', { name: NEVER_TIME_RANGE.label }).exists()).toBe(true);
+      });
     });
   });
 
@@ -131,7 +188,7 @@ describe('SetStatusForm', () => {
 
       await wrapper.findByTestId('thirtyMinutes').trigger('click');
 
-      expect(wrapper.emitted('clear-status-after-click')).toEqual([[timeRanges[0]]]);
+      expect(wrapper.emitted('clear-status-after-click')).toEqual([[thirtyMinutes]]);
     });
   });
 
@@ -150,20 +207,4 @@ describe('SetStatusForm', () => {
       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);
-    });
-  });
 });
diff --git a/spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js b/spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js
index 53d2a9e0978..85cd8d51272 100644
--- a/spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js
+++ b/spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js
@@ -1,6 +1,7 @@
 import { GlModal, GlFormCheckbox } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { useFakeDate } from 'helpers/fake_date';
 import { initEmojiMock, clearEmojiMock } from 'helpers/emoji';
 import * as UserApi from '~/api/user_api';
 import EmojiPicker from '~/emoji/components/picker.vue';
@@ -56,7 +57,6 @@ describe('SetStatusModalWrapper', () => {
     wrapper.findByPlaceholderText(SetStatusForm.i18n.statusMessagePlaceholder);
   const findClearStatusButton = () => wrapper.find('.js-clear-user-status-button');
   const findAvailabilityCheckbox = () => wrapper.findComponent(GlFormCheckbox);
-  const findClearStatusAtMessage = () => wrapper.find('[data-testid="clear-status-at-message"]');
   const getEmojiPicker = () => wrapper.findComponent(EmojiPickerStub);
 
   const initModal = async ({ mockOnUpdateSuccess = true, mockOnUpdateFailure = true } = {}) => {
@@ -103,10 +103,6 @@ describe('SetStatusModalWrapper', () => {
       expect(wrapper.find('[data-testid="clear-status-at-dropdown"]').exists()).toBe(true);
     });
 
-    it('does not display the clear status at message', () => {
-      expect(findClearStatusAtMessage().exists()).toBe(false);
-    });
-
     it('renders emoji picker dropdown with custom positioning', () => {
       expect(getEmojiPicker().props()).toMatchObject({
         right: false,
@@ -138,17 +134,16 @@ describe('SetStatusModalWrapper', () => {
   });
 
   describe('with currentClearStatusAfter set', () => {
+    useFakeDate(2022, 11, 5);
+
     beforeEach(async () => {
       await initEmojiMock();
-      wrapper = createComponent({ currentClearStatusAfter: '2021-01-01 00:00:00 UTC' });
+      wrapper = createComponent({ currentClearStatusAfter: '2022-12-06 11:00:00 UTC' });
       return initModal();
     });
 
-    it('displays the clear status at message', () => {
-      const clearStatusAtMessage = findClearStatusAtMessage();
-
-      expect(clearStatusAtMessage.exists()).toBe(true);
-      expect(clearStatusAtMessage.text()).toBe('Your status resets on 2021-01-01 00:00:00 UTC.');
+    it('displays date and time that status will expire in dropdown toggle button', () => {
+      expect(wrapper.findByRole('button', { name: 'Dec 6, 2022 11:00am' }).exists()).toBe(true);
     });
   });
 
@@ -170,33 +165,33 @@ describe('SetStatusModalWrapper', () => {
       });
 
       it('clicking "setStatus" submits the user status', async () => {
-        findModal().vm.$emit('primary');
-        await nextTick();
-
         // set the availability status
         findAvailabilityCheckbox().vm.$emit('input', true);
 
         // set the currentClearStatusAfter to 30 minutes
-        wrapper.find('[data-testid="thirtyMinutes"]').trigger('click');
+        await wrapper.find('[data-testid="thirtyMinutes"]').trigger('click');
 
         findModal().vm.$emit('primary');
         await nextTick();
 
-        const commonParams = {
+        expect(UserApi.updateUserStatus).toHaveBeenCalledWith({
+          availability: AVAILABILITY_STATUS.BUSY,
+          clearStatusAfter: '30_minutes',
           emoji: defaultEmoji,
           message: defaultMessage,
-        };
-
-        expect(UserApi.updateUserStatus).toHaveBeenCalledTimes(2);
-        expect(UserApi.updateUserStatus).toHaveBeenNthCalledWith(1, {
-          availability: AVAILABILITY_STATUS.NOT_SET,
-          clearStatusAfter: null,
-          ...commonParams,
         });
-        expect(UserApi.updateUserStatus).toHaveBeenNthCalledWith(2, {
-          availability: AVAILABILITY_STATUS.BUSY,
-          clearStatusAfter: '30_minutes',
-          ...commonParams,
+      });
+
+      describe('when `Clear status after` field has not been set', () => {
+        it('does not include `clearStatusAfter` in API request', async () => {
+          findModal().vm.$emit('primary');
+          await nextTick();
+
+          expect(UserApi.updateUserStatus).toHaveBeenCalledWith({
+            availability: AVAILABILITY_STATUS.NOT_SET,
+            emoji: defaultEmoji,
+            message: defaultMessage,
+          });
         });
       });
 
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
index eaee0e77311..a4a2a86dc73 100644
--- 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
@@ -1,8 +1,6 @@
 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';
@@ -51,7 +49,7 @@ describe('UserProfileSetStatusWrapper', () => {
       emoji: defaultProvide.fields.emoji.value,
       message: defaultProvide.fields.message.value,
       availability: true,
-      clearStatusAfter: NEVER_TIME_RANGE,
+      clearStatusAfter: null,
       currentClearStatusAfter: defaultProvide.fields.clearStatusAfter.value,
     });
   });
@@ -69,27 +67,41 @@ describe('UserProfileSetStatusWrapper', () => {
     );
   });
 
-  describe('when clear status after dropdown is set to `Never`', () => {
-    it('renders hidden clear status after input with value unset', () => {
-      createComponent();
+  describe('when clear status after has previously been set', () => {
+    describe('when clear status after dropdown is not set', () => {
+      it('does not render hidden clear status after input', () => {
+        createComponent();
 
-      expect(
-        findInput(defaultProvide.fields.clearStatusAfter.name).attributes('value'),
-      ).toBeUndefined();
+        expect(findInput(defaultProvide.fields.clearStatusAfter.name).exists()).toBe(false);
+      });
     });
-  });
 
-  describe('when clear status after dropdown has a value selected', () => {
-    it('renders hidden clear status after input with value set', async () => {
-      createComponent();
+    describe('when clear status after dropdown is set to `Never`', () => {
+      it('renders hidden clear status after input with value unset', async () => {
+        createComponent();
 
-      findSetStatusForm().vm.$emit('clear-status-after-click', TIME_RANGES_WITH_NEVER[1]);
+        findSetStatusForm().vm.$emit('clear-status-after-click', NEVER_TIME_RANGE);
 
-      await nextTick();
+        await nextTick();
 
-      expect(findInput(defaultProvide.fields.clearStatusAfter.name).attributes('value')).toBe(
-        TIME_RANGES_WITH_NEVER[1].shortcut,
-      );
+        expect(
+          findInput(defaultProvide.fields.clearStatusAfter.name).attributes('value'),
+        ).toBeUndefined();
+      });
+    });
+
+    describe('when clear status after dropdown is set to a time range', () => {
+      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,
+        );
+      });
     });
   });
 
@@ -120,37 +132,4 @@ describe('UserProfileSetStatusWrapper', () => {
       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');
-    });
-  });
 });
diff --git a/spec/frontend/set_status_modal/utils_spec.js b/spec/frontend/set_status_modal/utils_spec.js
index 1e918b75a98..a1c899be900 100644
--- a/spec/frontend/set_status_modal/utils_spec.js
+++ b/spec/frontend/set_status_modal/utils_spec.js
@@ -1,5 +1,8 @@
-import { isUserBusy } from '~/set_status_modal/utils';
-import { AVAILABILITY_STATUS } from '~/set_status_modal/constants';
+import { isUserBusy, computedClearStatusAfterValue } from '~/set_status_modal/utils';
+import { AVAILABILITY_STATUS, NEVER_TIME_RANGE } from '~/set_status_modal/constants';
+import { timeRanges } from '~/vue_shared/constants';
+
+const [thirtyMinutes] = timeRanges;
 
 describe('Set status modal utils', () => {
   describe('isUserBusy', () => {
@@ -13,4 +16,15 @@ describe('Set status modal utils', () => {
       expect(isUserBusy(value)).toBe(result);
     });
   });
+
+  describe('computedClearStatusAfterValue', () => {
+    it.each`
+      value               | expected
+      ${null}             | ${null}
+      ${NEVER_TIME_RANGE} | ${null}
+      ${thirtyMinutes}    | ${thirtyMinutes.shortcut}
+    `('with $value returns $expected', ({ value, expected }) => {
+      expect(computedClearStatusAfterValue(value)).toBe(expected);
+    });
+  });
 });