Merge branch '334655-vue-shared-settings-block' into 'master'

Vue shared comonents settings block h4 expand

See merge request gitlab-org/gitlab!68707

app/assets/javascripts/vue_shared/components/settings/settings_block.vue

@@ -29,14 +29,29 @@ export default {
       return this.expanded ? __('Collapse') : __('Expand');
     },
   },
+  methods: {
+    toggleSectionExpanded() {
+      this.sectionExpanded = !this.sectionExpanded;
+    },
+  },
 };
 </script>
 
 <template>
   <section class="settings" :class="{ 'no-animate': !slideAnimated, expanded }">
     <div class="settings-header">
-      <h4><slot name="title"></slot></h4>
-      <gl-button @click="sectionExpanded = !sectionExpanded">
+      <h4>
+        <span
+          role="button"
+          tabindex="0"
+          class="gl-cursor-pointer"
+          data-testid="section-title"
+          @click="toggleSectionExpanded"
+        >
+          <slot name="title"></slot>
+        </span>
+      </h4>
+      <gl-button @click="toggleSectionExpanded">
         {{ toggleText }}
       </gl-button>
       <p>

spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap

@@ -8,9 +8,16 @@ exports[`Settings Block renders the correct markup 1`] = `
     class="settings-header"
   >
     <h4>
-      <div
-        data-testid="title-slot"
-      />
+      <span
+        class="gl-cursor-pointer"
+        data-testid="section-title"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          data-testid="title-slot"
+        />
+      </span>
     </h4>
      
     <gl-button-stub

spec/frontend/vue_shared/components/settings/settings_block_spec.js

@@ -18,13 +18,13 @@ describe('Settings Block', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]');
   const findTitleSlot = () => wrapper.find('[data-testid="title-slot"]');
   const findDescriptionSlot = () => wrapper.find('[data-testid="description-slot"]');
-  const findExpandButton = () => wrapper.find(GlButton);
+  const findExpandButton = () => wrapper.findComponent(GlButton);
+  const findSectionTitle = () => wrapper.find('[data-testid="section-title"]');
 
   it('renders the correct markup', () => {
     mountComponent();
@@ -90,6 +90,18 @@ describe('Settings Block', () => {
       expect(findExpandButton().text()).toBe('Collapse');
     });
 
+    it('adds expanded class when the section title is clicked', async () => {
+      mountComponent();
+
+      expect(wrapper.classes('expanded')).toBe(false);
+      expect(findExpandButton().text()).toBe('Expand');
+
+      await findSectionTitle().trigger('click');
+
+      expect(wrapper.classes('expanded')).toBe(true);
+      expect(findExpandButton().text()).toBe('Collapse');
+    });
+
     it('is expanded when `defaultExpanded` is true no matter what', async () => {
       mountComponent({ defaultExpanded: true });