1 files changed, 67 insertions, 26 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);
-    });
-  });
 });