1 files changed, 30 insertions, 13 deletions

diff --git a/spec/frontend/reports/components/summary_row_spec.js b/spec/frontend/reports/components/summary_row_spec.js
index cb0cc025e80..85c68ed069b 100644
--- a/spec/frontend/reports/components/summary_row_spec.js
+++ b/spec/frontend/reports/components/summary_row_spec.js
@@ -1,10 +1,8 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import component from '~/reports/components/summary_row.vue';
+import { mount } from '@vue/test-utils';
+import SummaryRow from '~/reports/components/summary_row.vue';
 
 describe('Summary row', () => {
-  const Component = Vue.extend(component);
-  let vm;
+  let wrapper;
 
   const props = {
     summary: 'SAST detected 1 new vulnerability and 1 fixed vulnerability',
@@ -15,23 +13,42 @@ describe('Summary row', () => {
     statusIcon: 'warning',
   };
 
-  beforeEach(() => {
-    vm = mountComponent(Component, props);
-  });
+  const createComponent = ({ propsData = {}, slots = {} } = {}) => {
+    wrapper = mount(SummaryRow, {
+      propsData: {
+        ...props,
+        ...propsData,
+      },
+      slots,
+    });
+  };
+
+  const findSummary = () => wrapper.find('.report-block-list-issue-description-text');
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   it('renders provided summary', () => {
-    expect(
-      vm.$el.querySelector('.report-block-list-issue-description-text').textContent.trim(),
-    ).toEqual(props.summary);
+    createComponent();
+    expect(findSummary().text()).toEqual(props.summary);
   });
 
   it('renders provided icon', () => {
-    expect(vm.$el.querySelector('.report-block-list-icon span').classList).toContain(
+    createComponent();
+    expect(wrapper.find('.report-block-list-icon span').classes()).toContain(
       'js-ci-status-icon-warning',
     );
   });
+
+  describe('summary slot', () => {
+    it('replaces the summary prop', () => {
+      const summarySlotContent = 'Summary slot content';
+      createComponent({ slots: { summary: summarySlotContent } });
+
+      expect(wrapper.text()).not.toContain(props.summary);
+      expect(findSummary().text()).toEqual(summarySlotContent);
+    });
+  });
 });