1 files changed, 10 insertions, 4 deletions
diff --git a/spec/frontend/vue_mr_widget/components/mr_collapsible_extension_spec.js b/spec/frontend/vue_mr_widget/components/mr_collapsible_extension_spec.js
index 94d4cccab5f..1aeb080aa04 100644
--- a/spec/frontend/vue_mr_widget/components/mr_collapsible_extension_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_collapsible_extension_spec.js
@@ -1,4 +1,4 @@
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MrCollapsibleSection from '~/vue_merge_request_widget/components/mr_collapsible_extension.vue';
 
@@ -15,12 +15,14 @@ describe('Merge Request Collapsible Extension', () => {
       },
       slots: {
         default: '<div class="js-slot">Foo</div>',
+        header: '<span data-testid="collapsed-header">hello there</span>',
       },
     });
   };
 
-  const findTitle = () => wrapper.find('.js-title');
+  const findTitle = () => wrapper.find('[data-testid="mr-collapsible-title"]');
   const findErrorMessage = () => wrapper.find('.js-error-state');
+  const findIcon = () => wrapper.find(GlIcon);
 
   afterEach(() => {
     wrapper.destroy();
@@ -35,8 +37,12 @@ describe('Merge Request Collapsible Extension', () => {
       expect(findTitle().text()).toBe(data.title);
     });
 
+    it('renders the header slot', () => {
+      expect(wrapper.find('[data-testid="collapsed-header"]').text()).toBe('hello there');
+    });
+
     it('renders angle-right icon', () => {
-      expect(wrapper.vm.arrowIconName).toBe('angle-right');
+      expect(findIcon().props('name')).toBe('angle-right');
     });
 
     describe('onClick', () => {
@@ -54,7 +60,7 @@ describe('Merge Request Collapsible Extension', () => {
       });
 
       it('renders angle-down icon', () => {
-        expect(wrapper.vm.arrowIconName).toBe('angle-down');
+        expect(findIcon().props('name')).toBe('angle-down');
       });
     });
   });