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);
       });