Merge branch 'refactoring-search-settings-entry-point' into 'master'

Refactoring: Move search settings mount function to the search_settings directory

See merge request gitlab-org/gitlab!52834

app/assets/javascripts/pages/projects/edit/index.js

@@ -10,7 +10,7 @@ import initProjectPermissionsSettings from '../shared/permissions';
 import initProjectDeleteButton from '~/projects/project_delete_button';
 import UserCallout from '~/user_callout';
 import initServiceDesk from '~/projects/settings_service_desk';
-import mountSearchSettings from './mount_search_settings';
+import initSearchSettings from '~/search_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   initFilePickers();
@@ -32,5 +32,5 @@ document.addEventListener('DOMContentLoaded', () => {
     ),
   );
 
-  mountSearchSettings();
+  initSearchSettings();
 });

app/assets/javascripts/pages/projects/edit/mount_search_settings.js

-const mountSearchSettings = async () => {
-  const el = document.querySelector('.js-search-settings-app');
-
-  if (el) {
-    const { default: initSearch } = await import(
-      /* webpackChunkName: 'search_settings' */ '~/search_settings'
-    );
-    initSearch({ el });
-  }
-};
-
-export default mountSearchSettings;

app/assets/javascripts/search_settings/index.js

-import Vue from 'vue';
-import $ from 'jquery';
-import { expandSection, closeSection } from '~/settings_panels';
-import SearchSettings from '~/search_settings/components/search_settings.vue';
+const initSearch = async () => {
+  const el = document.querySelector('.js-search-settings-app');
 
-const initSearch = ({ el }) =>
-  new Vue({
-    el,
-    render: (h) =>
-      h(SearchSettings, {
-        ref: 'searchSettings',
-        props: {
-          searchRoot: document.querySelector('#content-body'),
-          sectionSelector: 'section.settings',
-        },
-        on: {
-          collapse: (section) => closeSection($(section)),
-          expand: (section) => expandSection($(section)),
-        },
-      }),
-  });
+  if (el) {
+    const { default: mount } = await import(/* webpackChunkName: 'search_settings' */ './mount');
+    mount({ el });
+  }
+};
 
 export default initSearch;

app/assets/javascripts/search_settings/mount.js

+import Vue from 'vue';
+import $ from 'jquery';
+import { expandSection, closeSection } from '~/settings_panels';
+import SearchSettings from '~/search_settings/components/search_settings.vue';
+
+const mountSearch = ({ el }) =>
+  new Vue({
+    el,
+    render: (h) =>
+      h(SearchSettings, {
+        ref: 'searchSettings',
+        props: {
+          searchRoot: document.querySelector('#content-body'),
+          sectionSelector: 'section.settings',
+        },
+        on: {
+          collapse: (section) => closeSection($(section)),
+          expand: (section) => expandSection($(section)),
+        },
+      }),
+  });
+
+export default mountSearch;

spec/frontend/pages/projects/edit/mount_search_settings_spec.js

-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import initSearch from '~/search_settings';
-import mountSearchSettings from '~/pages/projects/edit/mount_search_settings';
-
-jest.mock('~/search_settings');
-
-describe('pages/projects/edit/mount_search_settings', () => {
-  afterEach(() => {
-    resetHTMLFixture();
-  });
-
-  it('initializes search settings when js-search-settings-app is available', async () => {
-    setHTMLFixture('<div class="js-search-settings-app"></div>');
-
-    await mountSearchSettings();
-
-    expect(initSearch).toHaveBeenCalled();
-  });
-
-  it('does not initialize search settings when js-search-settings-app is unavailable', async () => {
-    await mountSearchSettings();
-
-    expect(initSearch).not.toHaveBeenCalled();
-  });
-});

spec/frontend/search_settings/index_spec.js

-import $ from 'jquery';
-import { setHTMLFixture } from 'helpers/fixtures';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import initSearch from '~/search_settings';
-import { expandSection, closeSection } from '~/settings_panels';
+import mount from '~/search_settings/mount';
 
-jest.mock('~/settings_panels');
-
-describe('search_settings/index', () => {
-  let app;
-
-  beforeEach(() => {
-    const el = document.createElement('div');
-
-    setHTMLFixture('<div id="content-body"></div>');
-
-    app = initSearch({ el });
-  });
+jest.mock('~/search_settings/mount');
 
+describe('~/search_settings', () => {
   afterEach(() => {
-    app.$destroy();
+    resetHTMLFixture();
   });
 
-  it('calls settings_panel.onExpand when expand event is emitted', () => {
-    const section = { name: 'section' };
-    app.$refs.searchSettings.$emit('expand', section);
+  it('initializes search settings when js-search-settings-app is available', async () => {
+    setHTMLFixture('<div class="js-search-settings-app"></div>');
+
+    await initSearch();
 
-    expect(expandSection).toHaveBeenCalledWith($(section));
+    expect(mount).toHaveBeenCalled();
   });
 
-  it('calls settings_panel.closeSection when collapse event is emitted', () => {
-    const section = { name: 'section' };
-    app.$refs.searchSettings.$emit('collapse', section);
+  it('does not initialize search settings when js-search-settings-app is unavailable', async () => {
+    await initSearch();
 
-    expect(closeSection).toHaveBeenCalledWith($(section));
+    expect(mount).not.toHaveBeenCalled();
   });
 });

spec/frontend/search_settings/mount_spec.js

+import $ from 'jquery';
+import { setHTMLFixture } from 'helpers/fixtures';
+import mount from '~/search_settings/mount';
+import { expandSection, closeSection } from '~/settings_panels';
+
+jest.mock('~/settings_panels');
+
+describe('search_settings/mount', () => {
+  let app;
+
+  beforeEach(() => {
+    const el = document.createElement('div');
+
+    setHTMLFixture('<div id="content-body"></div>');
+
+    app = mount({ el });
+  });
+
+  afterEach(() => {
+    app.$destroy();
+  });
+
+  it('calls settings_panel.onExpand when expand event is emitted', () => {
+    const section = { name: 'section' };
+    app.$refs.searchSettings.$emit('expand', section);
+
+    expect(expandSection).toHaveBeenCalledWith($(section));
+  });
+
+  it('calls settings_panel.closeSection when collapse event is emitted', () => {
+    const section = { name: 'section' };
+    app.$refs.searchSettings.$emit('collapse', section);
+
+    expect(closeSection).toHaveBeenCalledWith($(section));
+  });
+});