1 files changed, 128 insertions, 0 deletions
diff --git a/spec/frontend/search/topbar/components/search_type_indicator_spec.js b/spec/frontend/search/topbar/components/search_type_indicator_spec.js
new file mode 100644
index 00000000000..d69ca6dfb16
--- /dev/null
+++ b/spec/frontend/search/topbar/components/search_type_indicator_spec.js
@@ -0,0 +1,128 @@
+import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
+import Vuex from 'vuex';
+import { GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { MOCK_QUERY } from 'jest/search/mock_data';
+import SearchTypeIndicator from '~/search/topbar/components/search_type_indicator.vue';
+
+Vue.use(Vuex);
+
+describe('SearchTypeIndicator', () => {
+  let wrapper;
+
+  const actionSpies = {
+    applyQuery: jest.fn(),
+    setQuery: jest.fn(),
+    preloadStoredFrequentItems: jest.fn(),
+  };
+
+  const createComponent = (initialState = {}) => {
+    const store = new Vuex.Store({
+      state: {
+        query: MOCK_QUERY,
+        ...initialState,
+      },
+      actions: actionSpies,
+    });
+
+    wrapper = shallowMountExtended(SearchTypeIndicator, {
+      store,
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  const findIndicator = (id) => wrapper.findAllByTestId(id);
+  const findDocsLink = () => wrapper.findComponentByTestId('docs-link');
+  const findSyntaxDocsLink = () => wrapper.findComponentByTestId('syntax-docs-link');
+
+  // searchType and search level params cobination in this test reflects
+  // all possible combinations
+
+  describe.each`
+    searchType    | searchLevel  | repository  | showSearchTypeIndicator
+    ${'advanced'} | ${'project'} | ${'master'} | ${'advanced-enabled'}
+    ${'advanced'} | ${'project'} | ${'v0.1'}   | ${'advanced-disabled'}
+    ${'advanced'} | ${'group'}   | ${'master'} | ${'advanced-enabled'}
+    ${'advanced'} | ${'global'}  | ${'master'} | ${'advanced-enabled'}
+    ${'zoekt'}    | ${'project'} | ${'master'} | ${'zoekt-enabled'}
+    ${'zoekt'}    | ${'project'} | ${'v0.1'}   | ${'zoekt-disabled'}
+    ${'zoekt'}    | ${'group'}   | ${'master'} | ${'zoekt-enabled'}
+  `(
+    'search type indicator for $searchType $searchLevel',
+    ({ searchType, repository, showSearchTypeIndicator, searchLevel }) => {
+      beforeEach(() => {
+        createComponent({
+          query: { repository_ref: repository },
+          searchType,
+          searchLevel,
+          defaultBranchName: 'master',
+        });
+      });
+      it('renders correctly', () => {
+        expect(findIndicator(showSearchTypeIndicator).exists()).toBe(true);
+      });
+    },
+  );
+
+  describe.each`
+    searchType | repository  | showSearchTypeIndicator
+    ${'basic'} | ${'master'} | ${true}
+    ${'basic'} | ${'v0.1'}   | ${true}
+  `(
+    'search type indicator for $searchType and $repository',
+    ({ searchType, repository, showSearchTypeIndicator }) => {
+      beforeEach(() => {
+        createComponent({
+          query: { repository_ref: repository },
+          searchType,
+          defaultBranchName: 'master',
+        });
+      });
+      it.each(['zoekt-enabled', 'zoekt-disabled', 'advanced-enabled', 'advanced-disabled'])(
+        'renders correct indicator %s',
+        () => {
+          expect(findIndicator(searchType).exists()).toBe(showSearchTypeIndicator);
+        },
+      );
+    },
+  );
+
+  describe.each`
+    searchType    | docsLink
+    ${'advanced'} | ${'/help/user/search/advanced_search'}
+    ${'zoekt'}    | ${'/help/user/search/exact_code_search'}
+  `('documentation link for $searchType', ({ searchType, docsLink }) => {
+    beforeEach(() => {
+      createComponent({
+        query: { repository_ref: 'master' },
+        searchType,
+        searchLevel: 'project',
+        defaultBranchName: 'master',
+      });
+    });
+    it('has correct link', () => {
+      expect(findDocsLink().attributes('href')).toBe(docsLink);
+    });
+  });
+
+  describe.each`
+    searchType    | syntaxdocsLink
+    ${'advanced'} | ${'/help/user/search/advanced_search#use-the-advanced-search-syntax'}
+    ${'zoekt'}    | ${'/help/user/search/exact_code_search#syntax'}
+  `('Syntax documentation $searchType', ({ searchType, syntaxdocsLink }) => {
+    beforeEach(() => {
+      createComponent({
+        query: { repository_ref: '000' },
+        searchType,
+        searchLevel: 'project',
+        defaultBranchName: 'master',
+      });
+    });
+    it('has correct link', () => {
+      expect(findSyntaxDocsLink().attributes('href')).toBe(syntaxdocsLink);
+    });
+  });
+});