1 files changed, 37 insertions, 17 deletions

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);
+      });
     });
   });
 });