1 files changed, 38 insertions, 11 deletions

diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js
index f06d968a4c5..e352f9708e4 100644
--- a/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js
+++ b/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js
@@ -1,6 +1,6 @@
 import VueApollo from 'vue-apollo';
 import Vue, { nextTick } from 'vue';
-import { GlDatepicker, GlListbox } from '@gitlab/ui';
+import { GlDatepicker, GlCollapsibleListbox } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import TimelineEventsForm from '~/issues/show/components/incidents/timeline_events_form.vue';
@@ -62,7 +62,7 @@ describe('Timeline events form', () => {
   const findDatePicker = () => wrapper.findComponent(GlDatepicker);
   const findHourInput = () => wrapper.findByTestId('input-hours');
   const findMinuteInput = () => wrapper.findByTestId('input-minutes');
-  const findTagDropdown = () => wrapper.findComponent(GlListbox);
+  const findTagsListbox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findTextarea = () => wrapper.findByTestId('input-note');
   const findTextareaValue = () => findTextarea().element.value;
   const findCountNumeric = (count) => wrapper.findByText(count);
@@ -75,7 +75,7 @@ describe('Timeline events form', () => {
     findMinuteInput().setValue(45);
   };
   const selectTags = async (tags) => {
-    findTagDropdown().vm.$emit(
+    findTagsListbox().vm.$emit(
       'select',
       tags.map((x) => x.value),
     );
@@ -125,31 +125,31 @@ describe('Timeline events form', () => {
       );
     });
 
-    describe('event tag dropdown', () => {
+    describe('event tags listbox', () => {
       it('should render option list from provided array', () => {
-        expect(findTagDropdown().props('items')).toEqual(mockTags);
+        expect(findTagsListbox().props('items')).toEqual(mockTags);
       });
 
       it('should allow to choose multiple tags', async () => {
         await selectTags(mockTags);
 
-        expect(findTagDropdown().props('selected')).toEqual(mockTags.map((x) => x.value));
+        expect(findTagsListbox().props('selected')).toEqual(mockTags.map((x) => x.value));
       });
 
       it('should show default option, when none is chosen', () => {
-        expect(findTagDropdown().props('toggleText')).toBe(timelineFormI18n.selectTags);
+        expect(findTagsListbox().props('toggleText')).toBe(timelineFormI18n.selectTags);
       });
 
       it('should show the tag, when one is selected', async () => {
         await selectOneTag();
 
-        expect(findTagDropdown().props('toggleText')).toBe(timelineEventTagsI18n.startTime);
+        expect(findTagsListbox().props('toggleText')).toBe(timelineEventTagsI18n.startTime);
       });
 
       it('should show the number of selected tags, when more than one is selected', async () => {
         await selectTags(mockTags);
 
-        expect(findTagDropdown().props('toggleText')).toBe('2 tags');
+        expect(findTagsListbox().props('toggleText')).toBe(`${mockTags.length} tags`);
       });
 
       it('should be cleared when clear is triggered', async () => {
@@ -159,8 +159,8 @@ describe('Timeline events form', () => {
         wrapper.vm.clear();
         await nextTick();
 
-        expect(findTagDropdown().props('toggleText')).toBe(timelineFormI18n.selectTags);
-        expect(findTagDropdown().props('selected')).toEqual([]);
+        expect(findTagsListbox().props('toggleText')).toBe(timelineFormI18n.selectTags);
+        expect(findTagsListbox().props('selected')).toEqual([]);
       });
 
       it('should populate incident note with tags if a note was empty', async () => {
@@ -190,6 +190,33 @@ describe('Timeline events form', () => {
         expect(findTextareaValue()).toBe('hello');
       });
     });
+
+    describe('form button behaviour', () => {
+      it('should enable the save buttons when event does not include tags', async () => {
+        await findTextarea().setValue('hello');
+
+        expect(findTagsListbox().props('toggleText')).toBe(timelineFormI18n.selectTags);
+        expect(findSubmitButton().props('disabled')).toBe(false);
+        expect(findSubmitAndAddButton().props('disabled')).toBe(false);
+      });
+
+      it('should clear the form', async () => {
+        setDatetime();
+        await nextTick();
+
+        expect(findDatePicker().props('value')).toBe(mockInputDate);
+        expect(findHourInput().element.value).toBe('5');
+        expect(findMinuteInput().element.value).toBe('45');
+
+        wrapper.vm.clear();
+        await nextTick();
+
+        expect(findDatePicker().props('value')).toStrictEqual(new Date(fakeDate));
+        expect(findHourInput().element.value).toBe('0');
+        expect(findMinuteInput().element.value).toBe('0');
+        expect(findTagsListbox().props('toggleText')).toBe(timelineFormI18n.selectTags);
+      });
+    });
   });
 
   describe('form button behaviour', () => {