Merge branch '368613-fix-collapsed-button-label' into 'master'

Move method into computed properties

See merge request !95787

app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue

@@ -85,6 +85,9 @@ export default {
     };
   },
   computed: {
+    collapseButtonLabel() {
+      return sprintf(this.isCollapsed ? __('Show details') : __('Hide details'));
+    },
     statusIcon() {
       return this.error ? EXTENSION_ICONS.failed : this.statusIconName;
     },
@@ -106,9 +109,6 @@ export default {
     this.isLoading = false;
   },
   methods: {
-    collapseButtonLabel() {
-      return sprintf(this.isCollapsed ? __('Show details') : __('Hide details'));
-    },
     toggleCollapsed() {
       this.isCollapsed = !this.isCollapsed;
     },

spec/frontend/vue_merge_request_widget/components/widget/widget_spec.js

@@ -155,6 +155,21 @@ describe('MR Widget', () => {
   });
 
   describe('handle collapse toggle', () => {
+    it('displays the toggle button correctly', () => {
+      createComponent({
+        propsData: {
+          isCollapsible: true,
+          fetchCollapsedData: () => Promise.resolve(),
+        },
+        slots: {
+          content: '<b>More complex content</b>',
+        },
+      });
+
+      expect(findToggleButton().attributes('title')).toBe('Show details');
+      expect(findToggleButton().attributes('aria-label')).toBe('Show details');
+    });
+
     it('does not display the content slot until toggle is clicked', async () => {
       createComponent({
         propsData: {