Merge branch 'expand-button-fix' into 'master'

Migrates the expand button in reports to gitlab UI

See merge request gitlab-org/gitlab!57021

app/assets/javascripts/reports/components/report_section.vue

 <script>
+import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
@@ -8,9 +9,10 @@ import IssuesList from './issues_list.vue';
 export default {
   name: 'ReportSection',
   components: {
+    GlButton,
     IssuesList,
-    StatusIcon,
     Popover,
+    StatusIcon,
   },
   props: {
     alwaysOpen: {
@@ -186,16 +188,15 @@ export default {
 
         <slot name="action-buttons" :is-collapsible="isCollapsible"></slot>
 
-        <button
+        <gl-button
           v-if="isCollapsible"
-          type="button"
+          class="js-collapse-btn"
           data-testid="report-section-expand-button"
-          class="js-collapse-btn btn float-right btn-sm align-self-center"
           data-qa-selector="expand_report_button"
           @click="toggleCollapsed"
         >
           {{ collapseText }}
-        </button>
+        </gl-button>
       </div>
     </div>
 

changelogs/unreleased/expand-button-fix.yml

+---
+title: Migrates the expand button in MR reports to GitLab UI
+merge_request: 57021
+author:
+type: other

spec/frontend/reports/components/report_section_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import reportSection from '~/reports/components/report_section.vue';
 
 describe('Report section', () => {
   let vm;
   let wrapper;
   const ReportSection = Vue.extend(reportSection);
+  const findCollapseButton = () => wrapper.findByTestId('report-section-expand-button');
 
   const resolvedIssues = [
     {
@@ -30,12 +32,14 @@ describe('Report section', () => {
   };
 
   const createComponent = (props) => {
-    wrapper = shallowMount(reportSection, {
-      propsData: {
-        ...defaultProps,
-        ...props,
-      },
-    });
+    wrapper = extendedWrapper(
+      mount(reportSection, {
+        propsData: {
+          ...defaultProps,
+          ...props,
+        },
+      }),
+    );
     return wrapper;
   };
 
@@ -182,7 +186,7 @@ describe('Report section', () => {
 
       expect(wrapper.emitted().toggleEvent).toBeUndefined();
 
-      wrapper.vm.$el.querySelector('button').click();
+      findCollapseButton().trigger('click');
       return wrapper.vm
         .$nextTick()
         .then(() => {
@@ -197,7 +201,7 @@ describe('Report section', () => {
 
       expect(wrapper.emitted().toggleEvent).toBeUndefined();
 
-      wrapper.vm.$el.querySelector('button').click();
+      findCollapseButton().trigger('click');
       return wrapper.vm
         .$nextTick()
         .then(() => {