2 files changed, 57 insertions, 20 deletions

diff --git a/spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap b/spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap
index ed085fb66dc..165caea2751 100644
--- a/spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap
+++ b/spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap
@@ -8,12 +8,25 @@ exports[`Settings Block renders the correct markup 1`] = `
     class="settings-header"
   >
     <h4>
-      <div
-        data-testid="title-slot"
-      />
+      <span
+        aria-controls="settings_content_3"
+        aria-expanded="false"
+        class="gl-cursor-pointer"
+        data-testid="section-title-button"
+        id="settings_label_2"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          data-testid="title-slot"
+        />
+      </span>
     </h4>
      
     <gl-button-stub
+      aria-controls="settings_content_3"
+      aria-expanded="false"
+      aria-label="Expand settings section"
       buttontextclasses=""
       category="primary"
       icon=""
@@ -33,7 +46,11 @@ exports[`Settings Block renders the correct markup 1`] = `
   </div>
    
   <div
+    aria-labelledby="settings_label_2"
     class="settings-content"
+    id="settings_content_3"
+    role="region"
+    tabindex="-1"
   >
     <div
       data-testid="default-slot"
diff --git a/spec/frontend/vue_shared/components/settings/settings_block_spec.js b/spec/frontend/vue_shared/components/settings/settings_block_spec.js
index be5a15631eb..528dfd89690 100644
--- a/spec/frontend/vue_shared/components/settings/settings_block_spec.js
+++ b/spec/frontend/vue_shared/components/settings/settings_block_spec.js
@@ -1,12 +1,12 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import component from '~/vue_shared/components/settings/settings_block.vue';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 
 describe('Settings Block', () => {
   let wrapper;
 
   const mountComponent = (propsData) => {
-    wrapper = shallowMount(component, {
+    wrapper = shallowMount(SettingsBlock, {
       propsData,
       slots: {
         title: '<div data-testid="title-slot"></div>',
@@ -18,13 +18,25 @@ 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 findSectionTitleButton = () => wrapper.find('[data-testid="section-title-button"]');
+
+  const expectExpandedState = ({ expanded = true } = {}) => {
+    const settingsExpandButton = findExpandButton();
+
+    expect(wrapper.classes('expanded')).toBe(expanded);
+    expect(settingsExpandButton.text()).toBe(
+      expanded ? SettingsBlock.i18n.collapseText : SettingsBlock.i18n.expandText,
+    );
+    expect(settingsExpandButton.attributes('aria-label')).toBe(
+      expanded ? SettingsBlock.i18n.collapseAriaLabel : SettingsBlock.i18n.expandAriaLabel,
+    );
+  };
 
   it('renders the correct markup', () => {
     mountComponent();
@@ -75,33 +87,41 @@ describe('Settings Block', () => {
     it('is collapsed by default', () => {
       mountComponent();
 
-      expect(wrapper.classes('expanded')).toBe(false);
+      expectExpandedState({ expanded: false });
     });
 
     it('adds expanded class when the expand button is clicked', async () => {
       mountComponent();
 
-      expect(wrapper.classes('expanded')).toBe(false);
-      expect(findExpandButton().text()).toBe('Expand');
-
       await findExpandButton().vm.$emit('click');
 
-      expect(wrapper.classes('expanded')).toBe(true);
-      expect(findExpandButton().text()).toBe('Collapse');
+      expectExpandedState({ expanded: true });
     });
 
-    it('is expanded when `defaultExpanded` is true no matter what', async () => {
-      mountComponent({ defaultExpanded: true });
+    it('adds expanded class when the section title is clicked', async () => {
+      mountComponent();
 
-      expect(wrapper.classes('expanded')).toBe(true);
+      await findSectionTitleButton().trigger('click');
 
-      await findExpandButton().vm.$emit('click');
+      expectExpandedState({ expanded: true });
+    });
 
-      expect(wrapper.classes('expanded')).toBe(true);
+    describe('when `collapsible` is `false`', () => {
+      beforeEach(() => {
+        mountComponent({ collapsible: false });
+      });
 
-      await findExpandButton().vm.$emit('click');
+      it('does not render clickable section title', () => {
+        expect(findSectionTitleButton().exists()).toBe(false);
+      });
+
+      it('contains expanded class', () => {
+        expect(wrapper.classes('expanded')).toBe(true);
+      });
 
-      expect(wrapper.classes('expanded')).toBe(true);
+      it('does not render expand toggle button', () => {
+        expect(findExpandButton().exists()).toBe(false);
+      });
     });
   });
 });