Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2021-01-07 12:10:22 +0300
committerGitLab Bot <gitlab-bot@gitlab.com>2021-01-07 12:10:22 +0300
commitd51d5adf94ad965af8433ce6f74a81cfef5669e1 (patch)
tree171c2e9a4de27337783677a60e5dd9e24fef5bf2 /spec/frontend/search_settings
parent2475461aa28c110fbfd24aed73354865ffdb6a48 (diff)
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/search_settings')
-rw-r--r--spec/frontend/search_settings/components/search_settings_spec.js106
-rw-r--r--spec/frontend/search_settings/index_spec.js36
2 files changed, 142 insertions, 0 deletions
diff --git a/spec/frontend/search_settings/components/search_settings_spec.js b/spec/frontend/search_settings/components/search_settings_spec.js
new file mode 100644
index 00000000000..b80f9b15abf
--- /dev/null
+++ b/spec/frontend/search_settings/components/search_settings_spec.js
@@ -0,0 +1,106 @@
+import { GlSearchBoxByType } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import SearchSettings from '~/search_settings/components/search_settings.vue';
+import { HIGHLIGHT_CLASS, HIDE_CLASS } from '~/search_settings/constants';
+
+describe('search_settings/components/search_settings.vue', () => {
+ const ROOT_ID = 'content-body';
+ const SECTION_SELECTOR = 'section.settings';
+ const SEARCH_TERM = 'Delete project';
+ const GENERAL_SETTINGS_ID = 'js-general-settings';
+ const ADVANCED_SETTINGS_ID = 'js-advanced-settings';
+ let wrapper;
+
+ const buildWrapper = () => {
+ wrapper = shallowMount(SearchSettings, {
+ propsData: {
+ searchRoot: document.querySelector(`#${ROOT_ID}`),
+ sectionSelector: SECTION_SELECTOR,
+ },
+ });
+ };
+
+ const sections = () => Array.from(document.querySelectorAll(SECTION_SELECTOR));
+ const sectionsCount = () => sections().length;
+ const visibleSectionsCount = () =>
+ document.querySelectorAll(`${SECTION_SELECTOR}:not(.${HIDE_CLASS})`).length;
+ const highlightedElementsCount = () => document.querySelectorAll(`.${HIGHLIGHT_CLASS}`).length;
+ const findSearchBox = () => wrapper.find(GlSearchBoxByType);
+ const search = (term) => {
+ findSearchBox().vm.$emit('input', term);
+ };
+ const clearSearch = () => search('');
+
+ beforeEach(() => {
+ setFixtures(`
+ <div>
+ <div class="js-search-app"></div>
+ <div id="${ROOT_ID}">
+ <section id="${GENERAL_SETTINGS_ID}" class="settings">
+ <span>General</span>
+ </section>
+ <section id="${ADVANCED_SETTINGS_ID}" class="settings">
+ <span>${SEARCH_TERM}</span>
+ </section>
+ </div>
+ </div>
+ `);
+ 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('<div id="content-body"></div>');
+
+ app = initSearch({ 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));
+ });
+});