1 files changed, 21 insertions, 47 deletions

diff --git a/spec/frontend/sidebar/components/incidents/escalation_status_spec.js b/spec/frontend/sidebar/components/incidents/escalation_status_spec.js
index e356f02a36b..5ef56e30eb0 100644
--- a/spec/frontend/sidebar/components/incidents/escalation_status_spec.js
+++ b/spec/frontend/sidebar/components/incidents/escalation_status_spec.js
@@ -1,7 +1,5 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { nextTick } from 'vue';
-import waitForPromises from 'helpers/wait_for_promises';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
 import EscalationStatus from '~/sidebar/components/incidents/escalation_status.vue';
 import { STATUS_LABELS, STATUS_TRIGGERED, STATUS_ACKNOWLEDGED } from '~/sidebar/constants';
 
@@ -9,7 +7,7 @@ describe('EscalationStatus', () => {
   let wrapper;
 
   function createComponent(props) {
-    wrapper = mountExtended(EscalationStatus, {
+    wrapper = mount(EscalationStatus, {
       propsData: {
         value: STATUS_TRIGGERED,
         ...props,
@@ -17,67 +15,43 @@ describe('EscalationStatus', () => {
     });
   }
 
-  const findDropdownComponent = () => wrapper.findComponent(GlDropdown);
-  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findDropdownMenu = () => findDropdownComponent().find('.dropdown-menu');
-  const toggleDropdown = async () => {
-    await findDropdownComponent().findComponent('button').trigger('click');
-    await waitForPromises();
-  };
+  const findDropdownComponent = () => wrapper.findComponent(GlCollapsibleListbox);
+  const findDropdownItem = (at) => wrapper.findAllComponents(GlListboxItem).at(at);
 
   describe('status', () => {
     it('shows the current status', () => {
       createComponent({ value: STATUS_ACKNOWLEDGED });
 
-      expect(findDropdownComponent().props('text')).toBe(STATUS_LABELS[STATUS_ACKNOWLEDGED]);
+      expect(findDropdownComponent().props('toggleText')).toBe(STATUS_LABELS[STATUS_ACKNOWLEDGED]);
     });
 
     it('shows the None option when status is null', () => {
       createComponent({ value: null });
 
-      expect(findDropdownComponent().props('text')).toBe('None');
+      expect(findDropdownComponent().props('toggleText')).toBe('None');
     });
-  });
+    it('renders headerText when it is provided', () => {
+      const headerText = 'some text';
+      createComponent({ headerText });
 
-  describe('events', () => {
-    it('selects an item', async () => {
-      createComponent();
+      expect(findDropdownComponent().text()).toContain(headerText);
+    });
 
-      await findDropdownItems().at(1).vm.$emit('click');
+    it('renders subtext when it is provided', () => {
+      const subText = 'some subtext';
+      const statusSubtexts = { [STATUS_ACKNOWLEDGED]: subText };
+      createComponent({ statusSubtexts });
 
-      expect(wrapper.emitted().input[0][0]).toBe(STATUS_ACKNOWLEDGED);
+      expect(findDropdownItem(1).text()).toContain(subText);
     });
   });
 
-  describe('close behavior', () => {
-    it('allows the dropdown to be closed by default', async () => {
+  describe('events', () => {
+    it('selects an item', () => {
       createComponent();
-      // Open dropdown
-      await toggleDropdown();
-      jest.runOnlyPendingTimers();
-      await nextTick();
-
-      expect(findDropdownMenu().classes('show')).toBe(true);
+      findDropdownComponent().vm.$emit('select', STATUS_ACKNOWLEDGED);
 
-      // Attempt to close dropdown
-      await toggleDropdown();
-
-      expect(findDropdownMenu().classes('show')).toBe(false);
-    });
-
-    it('preventDropdownClose prevents the dropdown from closing', async () => {
-      createComponent({ preventDropdownClose: true });
-      // Open dropdown
-      await toggleDropdown();
-      jest.runOnlyPendingTimers();
-      await nextTick();
-
-      expect(findDropdownMenu().classes('show')).toBe(true);
-
-      // Attempt to close dropdown
-      await toggleDropdown();
-
-      expect(findDropdownMenu().classes('show')).toBe(true);
+      expect(wrapper.emitted().input[0][0]).toBe(STATUS_ACKNOWLEDGED);
     });
   });
 });