diff options
author | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
commit | 6438df3a1e0fb944485cebf07976160184697d72 (patch) | |
tree | 00b09bfd170e77ae9391b1a2f5a93ef6839f2597 /spec/frontend/search_settings/components | |
parent | 42bcd54d971da7ef2854b896a7b34f4ef8601067 (diff) | |
download | gitlab-ce-6438df3a1e0fb944485cebf07976160184697d72.tar.gz |
Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42
Diffstat (limited to 'spec/frontend/search_settings/components')
-rw-r--r-- | spec/frontend/search_settings/components/search_settings_spec.js | 106 |
1 files changed, 106 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); + }); + }); +}); |