diff options
Diffstat (limited to 'spec/frontend/search_settings')
-rw-r--r-- | spec/frontend/search_settings/components/search_settings_spec.js | 46 |
1 files changed, 42 insertions, 4 deletions
diff --git a/spec/frontend/search_settings/components/search_settings_spec.js b/spec/frontend/search_settings/components/search_settings_spec.js index d0a2018c7f0..3f856968db6 100644 --- a/spec/frontend/search_settings/components/search_settings_spec.js +++ b/spec/frontend/search_settings/components/search_settings_spec.js @@ -1,4 +1,4 @@ -import { GlSearchBoxByType } from '@gitlab/ui'; +import { GlEmptyState, GlSearchBoxByType } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import { setHTMLFixture } from 'helpers/fixtures'; import SearchSettings from '~/search_settings/components/search_settings.vue'; @@ -14,7 +14,7 @@ describe('search_settings/components/search_settings.vue', () => { const EXTRA_SETTINGS_ID = 'js-extra-settings'; const TEXT_CONTAIN_SEARCH_TERM = `This text contain ${SEARCH_TERM}.`; const TEXT_WITH_SIBLING_ELEMENTS = `${SEARCH_TERM} <a data-testid="sibling" href="#">Learn more</a>.`; - + const HIDE_WHEN_EMPTY_CLASS = 'js-hide-when-nothing-matches-search'; let wrapper; const buildWrapper = () => { @@ -22,6 +22,7 @@ describe('search_settings/components/search_settings.vue', () => { propsData: { searchRoot: document.querySelector(`#${ROOT_ID}`), sectionSelector: SECTION_SELECTOR, + hideWhenEmptySelector: `.${HIDE_WHEN_EMPTY_CLASS}`, isExpandedFn: isExpanded, }, // Add real listeners so we can simplify and strengthen some tests. @@ -45,7 +46,9 @@ describe('search_settings/components/search_settings.vue', () => { }; const findMatchSiblingElement = () => document.querySelector(`[data-testid="sibling"]`); - const findSearchBox = () => wrapper.find(GlSearchBoxByType); + const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType); + const findEmptyState = () => wrapper.findComponent(GlEmptyState); + const findHideWhenEmpty = () => document.querySelector(`.${HIDE_WHEN_EMPTY_CLASS}`); const search = (term) => { findSearchBox().vm.$emit('input', term); }; @@ -67,6 +70,9 @@ describe('search_settings/components/search_settings.vue', () => { <span>${TEXT_CONTAIN_SEARCH_TERM}</span> <span>${TEXT_WITH_SIBLING_ELEMENTS}</span> </section> + <div class="row ${HIDE_WHEN_EMPTY_CLASS}"> + <button type="submit">Save</button> + </div> </div> </div> `); @@ -93,13 +99,41 @@ describe('search_settings/components/search_settings.vue', () => { expect(wrapper.emitted('expand')).toEqual([[section]]); }); + describe('when nothing matches the search term', () => { + beforeEach(() => { + search('xxxxxxxxxxx'); + }); + + it('shows an empty state', () => { + expect(findEmptyState().exists()).toBe(true); + }); + + it('hides the form buttons', () => { + expect(findHideWhenEmpty()).toHaveClass(HIDE_CLASS); + }); + }); + + describe('when something matches the search term', () => { + beforeEach(() => { + search(SEARCH_TERM); + }); + + it('shows no empty state', () => { + expect(findEmptyState().exists()).toBe(false); + }); + + it('shows the form buttons', () => { + expect(findHideWhenEmpty()).not.toHaveClass(HIDE_CLASS); + }); + }); + it('highlight elements that match the search term', () => { search(SEARCH_TERM); expect(highlightedElementsCount()).toBe(3); }); - it('highlight only search term and not the whole line', () => { + it('highlights only search term and not the whole line', () => { search(SEARCH_TERM); expect(highlightedTextNodes()).toBe(true); @@ -142,6 +176,10 @@ describe('search_settings/components/search_settings.vue', () => { expect(visibleSectionsCount()).toBe(sectionsCount()); }); + it('hides the empty state', () => { + expect(findEmptyState().exists()).toBe(false); + }); + it('removes the highlight from all elements', () => { expect(highlightedElementsCount()).toBe(0); }); |