Add latest changes from gitlab-org/gitlab@master

3 files changed, 118 insertions, 1 deletions

diff --git a/spec/frontend/search/highlight_blob_search_result_spec.js b/spec/frontend/search/highlight_blob_search_result_spec.js
index 112e6f5124f..c1b0c7d794b 100644
--- a/spec/frontend/search/highlight_blob_search_result_spec.js
+++ b/spec/frontend/search/highlight_blob_search_result_spec.js
@@ -1,6 +1,7 @@
 import setHighlightClass from '~/search/highlight_blob_search_result';
 
 const fixture = 'search/blob_search_result.html';
+const searchKeyword = 'Send'; // spec/frontend/fixtures/search.rb#79
 
 describe('search/highlight_blob_search_result', () => {
   preloadFixtures(fixture);
@@ -8,7 +9,7 @@ describe('search/highlight_blob_search_result', () => {
   beforeEach(() => loadFixtures(fixture));
 
   it('highlights lines with search term occurrence', () => {
-    setHighlightClass();
+    setHighlightClass(searchKeyword);
 
     expect(document.querySelectorAll('.blob-result .hll').length).toBe(4);
   });
diff --git a/spec/frontend/search/index_spec.js b/spec/frontend/search/index_spec.js
index 023cd341345..1992a7f4437 100644
--- a/spec/frontend/search/index_spec.js
+++ b/spec/frontend/search/index_spec.js
@@ -1,9 +1,11 @@
+import setHighlightClass from 'ee_else_ce/search/highlight_blob_search_result';
 import { initSearchApp } from '~/search';
 import createStore from '~/search/store';
 
 jest.mock('~/search/store');
 jest.mock('~/search/topbar');
 jest.mock('~/search/sidebar');
+jest.mock('ee_else_ce/search/highlight_blob_search_result');
 
 describe('initSearchApp', () => {
   let defaultLocation;
@@ -42,6 +44,7 @@ describe('initSearchApp', () => {
 
     it(`decodes ${search} to ${decodedSearch}`, () => {
       expect(createStore).toHaveBeenCalledWith({ query: { search: decodedSearch } });
+      expect(setHighlightClass).toHaveBeenCalledWith(decodedSearch);
     });
   });
 });
diff --git a/spec/frontend/search/topbar/components/app_spec.js b/spec/frontend/search/topbar/components/app_spec.js
new file mode 100644
index 00000000000..faf3629b444
--- /dev/null
+++ b/spec/frontend/search/topbar/components/app_spec.js
@@ -0,0 +1,113 @@
+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlForm, GlSearchBoxByType, GlButton } from '@gitlab/ui';
+import { MOCK_QUERY } from 'jest/search/mock_data';
+import GlobalSearchTopbar from '~/search/topbar/components/app.vue';
+import GroupFilter from '~/search/topbar/components/group_filter.vue';
+import ProjectFilter from '~/search/topbar/components/project_filter.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('GlobalSearchTopbar', () => {
+  let wrapper;
+
+  const actionSpies = {
+    applyQuery: jest.fn(),
+    setQuery: jest.fn(),
+  };
+
+  const createComponent = (initialState) => {
+    const store = new Vuex.Store({
+      state: {
+        query: MOCK_QUERY,
+        ...initialState,
+      },
+      actions: actionSpies,
+    });
+
+    wrapper = shallowMount(GlobalSearchTopbar, {
+      localVue,
+      store,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findTopbarForm = () => wrapper.find(GlForm);
+  const findGlSearchBox = () => wrapper.find(GlSearchBoxByType);
+  const findGroupFilter = () => wrapper.find(GroupFilter);
+  const findProjectFilter = () => wrapper.find(ProjectFilter);
+  const findSearchButton = () => wrapper.find(GlButton);
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders Topbar Form always', () => {
+      expect(findTopbarForm().exists()).toBe(true);
+    });
+
+    describe('Search box', () => {
+      it('renders always', () => {
+        expect(findGlSearchBox().exists()).toBe(true);
+      });
+
+      describe('onSearch', () => {
+        const testSearch = 'test search';
+
+        beforeEach(() => {
+          findGlSearchBox().vm.$emit('input', testSearch);
+        });
+
+        it('calls setQuery when input event is fired from GlSearchBoxByType', () => {
+          expect(actionSpies.setQuery).toHaveBeenCalledWith(expect.any(Object), {
+            key: 'search',
+            value: testSearch,
+          });
+        });
+      });
+    });
+
+    describe.each`
+      snippets                            | showFilters
+      ${null}                             | ${true}
+      ${{ query: { snippets: '' } }}      | ${true}
+      ${{ query: { snippets: false } }}   | ${true}
+      ${{ query: { snippets: true } }}    | ${false}
+      ${{ query: { snippets: 'false' } }} | ${true}
+      ${{ query: { snippets: 'true' } }}  | ${false}
+    `('topbar filters', ({ snippets, showFilters }) => {
+      beforeEach(() => {
+        createComponent(snippets);
+      });
+
+      it(`does${showFilters ? '' : ' not'} render when snippets is ${JSON.stringify(
+        snippets,
+      )}`, () => {
+        expect(findGroupFilter().exists()).toBe(showFilters);
+        expect(findProjectFilter().exists()).toBe(showFilters);
+      });
+    });
+
+    it('renders SearchButton always', () => {
+      expect(findSearchButton().exists()).toBe(true);
+    });
+  });
+
+  describe('actions', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('clicking SearchButton calls applyQuery', () => {
+      findTopbarForm().vm.$emit('submit', { preventDefault: () => {} });
+
+      expect(actionSpies.applyQuery).toHaveBeenCalled();
+    });
+  });
+});