Commit 349c01ca authored by Martin Wortschack's avatar Martin Wortschack

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
parents 646145d4 4af1d1c8
...@@ -10,7 +10,7 @@ import initProjectPermissionsSettings from '../shared/permissions'; ...@@ -10,7 +10,7 @@ import initProjectPermissionsSettings from '../shared/permissions';
import initProjectDeleteButton from '~/projects/project_delete_button'; import initProjectDeleteButton from '~/projects/project_delete_button';
import UserCallout from '~/user_callout'; import UserCallout from '~/user_callout';
import initServiceDesk from '~/projects/settings_service_desk'; import initServiceDesk from '~/projects/settings_service_desk';
import mountSearchSettings from './mount_search_settings'; import initSearchSettings from '~/search_settings';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initFilePickers(); initFilePickers();
...@@ -32,5 +32,5 @@ document.addEventListener('DOMContentLoaded', () => { ...@@ -32,5 +32,5 @@ document.addEventListener('DOMContentLoaded', () => {
), ),
); );
mountSearchSettings(); initSearchSettings();
}); });
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;
import Vue from 'vue'; const initSearch = async () => {
import $ from 'jquery'; const el = document.querySelector('.js-search-settings-app');
import { expandSection, closeSection } from '~/settings_panels';
import SearchSettings from '~/search_settings/components/search_settings.vue';
const initSearch = ({ el }) => if (el) {
new Vue({ const { default: mount } = await import(/* webpackChunkName: 'search_settings' */ './mount');
el, mount({ 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 initSearch; export default initSearch;
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;
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();
});
});
import $ from 'jquery'; import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
import { setHTMLFixture } from 'helpers/fixtures';
import initSearch from '~/search_settings'; import initSearch from '~/search_settings';
import { expandSection, closeSection } from '~/settings_panels'; import mount from '~/search_settings/mount';
jest.mock('~/settings_panels'); jest.mock('~/search_settings/mount');
describe('search_settings/index', () => {
let app;
beforeEach(() => {
const el = document.createElement('div');
setHTMLFixture('<div id="content-body"></div>');
app = initSearch({ el });
});
describe('~/search_settings', () => {
afterEach(() => { afterEach(() => {
app.$destroy(); resetHTMLFixture();
}); });
it('calls settings_panel.onExpand when expand event is emitted', () => { it('initializes search settings when js-search-settings-app is available', async () => {
const section = { name: 'section' }; setHTMLFixture('<div class="js-search-settings-app"></div>');
app.$refs.searchSettings.$emit('expand', section);
await initSearch();
expect(expandSection).toHaveBeenCalledWith($(section)); expect(mount).toHaveBeenCalled();
}); });
it('calls settings_panel.closeSection when collapse event is emitted', () => { it('does not initialize search settings when js-search-settings-app is unavailable', async () => {
const section = { name: 'section' }; await initSearch();
app.$refs.searchSettings.$emit('collapse', section);
expect(closeSection).toHaveBeenCalledWith($(section)); expect(mount).not.toHaveBeenCalled();
}); });
}); });
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));
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment