Fix settings panel not expanding when fragment hash linked

See https://gitlab.com/gitlab-org/gitlab-ce/issues/43198

3 files changed, 35 insertions, 1 deletions

diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
index d34a21b37e1..d0e4f533d8a 100644
--- a/app/assets/javascripts/settings_panels.js
+++ b/app/assets/javascripts/settings_panels.js
@@ -42,7 +42,7 @@ export default function initSettingsPanels() {
 
   if (location.hash) {
     const $target = $(location.hash);
-    if ($target.length && $target.hasClass('.settings')) {
+    if ($target.length && $target.hasClass('settings')) {
       expandSection($target);
     }
   }
diff --git a/changelogs/unreleased/43198-fix-settings-panel-expanding-when-fragment-hash-linked.yml b/changelogs/unreleased/43198-fix-settings-panel-expanding-when-fragment-hash-linked.yml
new file mode 100644
index 00000000000..49ba48a0fef
--- /dev/null
+++ b/changelogs/unreleased/43198-fix-settings-panel-expanding-when-fragment-hash-linked.yml
@@ -0,0 +1,5 @@
+---
+title: Fix settings panels not expanding when fragment hash linked
+merge_request: 17074
+author:
+type: fixed
diff --git a/spec/javascripts/settings_panels_spec.js b/spec/javascripts/settings_panels_spec.js
new file mode 100644
index 00000000000..d433f8c3e07
--- /dev/null
+++ b/spec/javascripts/settings_panels_spec.js
@@ -0,0 +1,29 @@
+import initSettingsPanels from '~/settings_panels';
+
+describe('Settings Panels', () => {
+  preloadFixtures('projects/ci_cd_settings.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('projects/ci_cd_settings.html.raw');
+  });
+
+  describe('initSettingsPane', () => {
+    afterEach(() => {
+      location.hash = '';
+    });
+
+    it('should expand linked hash fragment panel', () => {
+      location.hash = '#js-general-pipeline-settings';
+
+      const pipelineSettingsPanel = document.querySelector('#js-general-pipeline-settings');
+      // Our test environment automatically expands everything so we need to clear that out first
+      pipelineSettingsPanel.classList.remove('expanded');
+
+      expect(pipelineSettingsPanel.classList.contains('expanded')).toBe(false);
+
+      initSettingsPanels();
+
+      expect(pipelineSettingsPanel.classList.contains('expanded')).toBe(true);
+    });
+  });
+});