1 files changed, 100 insertions, 23 deletions

diff --git a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
index 12c6fab9c41..bdc807fcbfe 100644
--- a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
@@ -3,13 +3,7 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import PipelinesFilteredSearch from '~/pipelines/components/pipelines_filtered_search.vue';
-import {
-  users,
-  mockSearch,
-  pipelineWithStages,
-  branches,
-  mockBranchesAfterMap,
-} from '../mock_data';
+import { users, mockSearch, branches, tags } from '../mock_data';
 import { GlFilteredSearch } from '@gitlab/ui';
 
 describe('Pipelines filtered search', () => {
@@ -21,12 +15,16 @@ describe('Pipelines filtered search', () => {
     findFilteredSearch()
       .props('availableTokens')
       .find(token => token.type === type);
+  const findBranchToken = () => getSearchToken('ref');
+  const findTagToken = () => getSearchToken('tag');
+  const findUserToken = () => getSearchToken('username');
+  const findStatusToken = () => getSearchToken('status');
 
-  const createComponent = () => {
+  const createComponent = (params = {}) => {
     wrapper = mount(PipelinesFilteredSearch, {
       propsData: {
-        pipelines: [pipelineWithStages],
         projectId: '21',
+        params,
       },
       attachToDocument: true,
     });
@@ -37,6 +35,7 @@ describe('Pipelines filtered search', () => {
 
     jest.spyOn(Api, 'projectUsers').mockResolvedValue(users);
     jest.spyOn(Api, 'branches').mockResolvedValue({ data: branches });
+    jest.spyOn(Api, 'tags').mockResolvedValue({ data: tags });
 
     createComponent();
   });
@@ -55,37 +54,39 @@ describe('Pipelines filtered search', () => {
   });
 
   it('displays search tokens', () => {
-    expect(getSearchToken('username')).toMatchObject({
+    expect(findUserToken()).toMatchObject({
       type: 'username',
       icon: 'user',
       title: 'Trigger author',
       unique: true,
-      triggerAuthors: users,
       projectId: '21',
       operators: [expect.objectContaining({ value: '=' })],
     });
 
-    expect(getSearchToken('ref')).toMatchObject({
+    expect(findBranchToken()).toMatchObject({
       type: 'ref',
       icon: 'branch',
       title: 'Branch name',
       unique: true,
-      branches: mockBranchesAfterMap,
       projectId: '21',
       operators: [expect.objectContaining({ value: '=' })],
     });
-  });
-
-  it('fetches and sets project users', () => {
-    expect(Api.projectUsers).toHaveBeenCalled();
-
-    expect(wrapper.vm.projectUsers).toEqual(users);
-  });
 
-  it('fetches and sets branches', () => {
-    expect(Api.branches).toHaveBeenCalled();
+    expect(findStatusToken()).toMatchObject({
+      type: 'status',
+      icon: 'status',
+      title: 'Status',
+      unique: true,
+      operators: [expect.objectContaining({ value: '=' })],
+    });
 
-    expect(wrapper.vm.projectBranches).toEqual(mockBranchesAfterMap);
+    expect(findTagToken()).toMatchObject({
+      type: 'tag',
+      icon: 'tag',
+      title: 'Tag name',
+      unique: true,
+      operators: [expect.objectContaining({ value: '=' })],
+    });
   });
 
   it('emits filterPipelines on submit with correct filter', () => {
@@ -94,4 +95,80 @@ describe('Pipelines filtered search', () => {
     expect(wrapper.emitted('filterPipelines')).toBeTruthy();
     expect(wrapper.emitted('filterPipelines')[0]).toEqual([mockSearch]);
   });
+
+  it('disables tag name token when branch name token is active', () => {
+    findFilteredSearch().vm.$emit('input', [
+      { type: 'ref', value: { data: 'branch-1', operator: '=' } },
+      { type: 'filtered-search-term', value: { data: '' } },
+    ]);
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(findBranchToken().disabled).toBe(false);
+      expect(findTagToken().disabled).toBe(true);
+    });
+  });
+
+  it('disables branch name token when tag name token is active', () => {
+    findFilteredSearch().vm.$emit('input', [
+      { type: 'tag', value: { data: 'tag-1', operator: '=' } },
+      { type: 'filtered-search-term', value: { data: '' } },
+    ]);
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(findBranchToken().disabled).toBe(true);
+      expect(findTagToken().disabled).toBe(false);
+    });
+  });
+
+  it('resets tokens disabled state on clear', () => {
+    findFilteredSearch().vm.$emit('clearInput');
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(findBranchToken().disabled).toBe(false);
+      expect(findTagToken().disabled).toBe(false);
+    });
+  });
+
+  it('resets tokens disabled state when clearing tokens by backspace', () => {
+    findFilteredSearch().vm.$emit('input', [{ type: 'filtered-search-term', value: { data: '' } }]);
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(findBranchToken().disabled).toBe(false);
+      expect(findTagToken().disabled).toBe(false);
+    });
+  });
+
+  describe('Url query params', () => {
+    const params = {
+      username: 'deja.green',
+      ref: 'master',
+    };
+
+    beforeEach(() => {
+      createComponent(params);
+    });
+
+    it('sets default value if url query params', () => {
+      const expectedValueProp = [
+        {
+          type: 'username',
+          value: {
+            data: params.username,
+            operator: '=',
+          },
+        },
+        {
+          type: 'ref',
+          value: {
+            data: params.ref,
+            operator: '=',
+          },
+        },
+        { type: 'filtered-search-term', value: { data: '' } },
+      ];
+
+      expect(findFilteredSearch().props('value')).toEqual(expectedValueProp);
+      expect(findFilteredSearch().props('value')).toHaveLength(expectedValueProp.length);
+    });
+  });
 });