+ `);
+ buildWrapper();
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ it('expands first section and collapses the rest', () => {
+ clearSearch();
+
+ const [firstSection, ...otherSections] = sections();
+
+ expect(wrapper.emitted()).toEqual({
+ expand: [[firstSection]],
+ collapse: otherSections.map((x) => [x]),
+ });
+ });
+
+ it('hides sections that do not match the search term', () => {
+ const hiddenSection = document.querySelector(`#${GENERAL_SETTINGS_ID}`);
+ search(SEARCH_TERM);
+
+ expect(visibleSectionsCount()).toBe(1);
+ expect(hiddenSection.classList).toContain(HIDE_CLASS);
+ });
+
+ it('expands section that matches the search term', () => {
+ const section = document.querySelector(`#${ADVANCED_SETTINGS_ID}`);
+
+ search(SEARCH_TERM);
+
+ // Last called because expand is always called once to reset the page state
+ expect(wrapper.emitted().expand[1][0]).toBe(section);
+ });
+
+ it('highlight elements that match the search term', () => {
+ search(SEARCH_TERM);
+
+ expect(highlightedElementsCount()).toBe(1);
+ });
+
+ describe('when search term is cleared', () => {
+ beforeEach(() => {
+ search(SEARCH_TERM);
+ });
+
+ it('displays all sections', () => {
+ expect(visibleSectionsCount()).toBe(1);
+ clearSearch();
+ expect(visibleSectionsCount()).toBe(sectionsCount());
+ });
+
+ it('removes the highlight from all elements', () => {
+ expect(highlightedElementsCount()).toBe(1);
+ clearSearch();
+ expect(highlightedElementsCount()).toBe(0);
+ });
+ });
+});
diff --git a/spec/frontend/search_settings/index_spec.js b/spec/frontend/search_settings/index_spec.js
new file mode 100644
index 00000000000..122ee1251bb
--- /dev/null
+++ b/spec/frontend/search_settings/index_spec.js
@@ -0,0 +1,36 @@
+import $ from 'jquery';
+import { setHTMLFixture } from 'helpers/fixtures';
+import initSearch from '~/search_settings';
+import { expandSection, closeSection } from '~/settings_panels';
+
+jest.mock('~/settings_panels');
+
+describe('search_settings/index', () => {
+ let app;
+
+ beforeEach(() => {
+ const el = document.createElement('div');
+
+ setHTMLFixture('