2020-05-24 23:13:21 +05:30
|
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import MockAdapter from 'axios-mock-adapter';
|
2020-10-24 23:57:45 +05:30
|
|
|
import { GlFilteredSearch } from '@gitlab/ui';
|
|
|
|
import Api from '~/api';
|
2020-05-24 23:13:21 +05:30
|
|
|
import axios from '~/lib/utils/axios_utils';
|
2020-07-28 23:09:34 +05:30
|
|
|
import PipelinesFilteredSearch from '~/pipelines/components/pipelines_list/pipelines_filtered_search.vue';
|
2020-06-23 00:09:42 +05:30
|
|
|
import { users, mockSearch, branches, tags } from '../mock_data';
|
2020-05-24 23:13:21 +05:30
|
|
|
|
|
|
|
describe('Pipelines filtered search', () => {
|
|
|
|
let wrapper;
|
|
|
|
let mock;
|
|
|
|
|
|
|
|
const findFilteredSearch = () => wrapper.find(GlFilteredSearch);
|
|
|
|
const getSearchToken = type =>
|
|
|
|
findFilteredSearch()
|
|
|
|
.props('availableTokens')
|
|
|
|
.find(token => token.type === type);
|
2020-06-23 00:09:42 +05:30
|
|
|
const findBranchToken = () => getSearchToken('ref');
|
|
|
|
const findTagToken = () => getSearchToken('tag');
|
|
|
|
const findUserToken = () => getSearchToken('username');
|
|
|
|
const findStatusToken = () => getSearchToken('status');
|
2020-05-24 23:13:21 +05:30
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
const createComponent = (params = {}) => {
|
2020-05-24 23:13:21 +05:30
|
|
|
wrapper = mount(PipelinesFilteredSearch, {
|
|
|
|
propsData: {
|
|
|
|
projectId: '21',
|
2020-06-23 00:09:42 +05:30
|
|
|
params,
|
2020-05-24 23:13:21 +05:30
|
|
|
},
|
|
|
|
attachToDocument: true,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
mock = new MockAdapter(axios);
|
|
|
|
|
|
|
|
jest.spyOn(Api, 'projectUsers').mockResolvedValue(users);
|
|
|
|
jest.spyOn(Api, 'branches').mockResolvedValue({ data: branches });
|
2020-06-23 00:09:42 +05:30
|
|
|
jest.spyOn(Api, 'tags').mockResolvedValue({ data: tags });
|
2020-05-24 23:13:21 +05:30
|
|
|
|
|
|
|
createComponent();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
mock.restore();
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays UI elements', () => {
|
|
|
|
expect(findFilteredSearch().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays search tokens', () => {
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(findUserToken()).toMatchObject({
|
2020-05-24 23:13:21 +05:30
|
|
|
type: 'username',
|
|
|
|
icon: 'user',
|
|
|
|
title: 'Trigger author',
|
|
|
|
unique: true,
|
|
|
|
projectId: '21',
|
|
|
|
operators: [expect.objectContaining({ value: '=' })],
|
|
|
|
});
|
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(findBranchToken()).toMatchObject({
|
2020-05-24 23:13:21 +05:30
|
|
|
type: 'ref',
|
|
|
|
icon: 'branch',
|
|
|
|
title: 'Branch name',
|
|
|
|
unique: true,
|
|
|
|
projectId: '21',
|
|
|
|
operators: [expect.objectContaining({ value: '=' })],
|
|
|
|
});
|
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(findStatusToken()).toMatchObject({
|
|
|
|
type: 'status',
|
|
|
|
icon: 'status',
|
|
|
|
title: 'Status',
|
|
|
|
unique: true,
|
|
|
|
operators: [expect.objectContaining({ value: '=' })],
|
|
|
|
});
|
2020-05-24 23:13:21 +05:30
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(findTagToken()).toMatchObject({
|
|
|
|
type: 'tag',
|
|
|
|
icon: 'tag',
|
|
|
|
title: 'Tag name',
|
|
|
|
unique: true,
|
|
|
|
operators: [expect.objectContaining({ value: '=' })],
|
|
|
|
});
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('emits filterPipelines on submit with correct filter', () => {
|
|
|
|
findFilteredSearch().vm.$emit('submit', mockSearch);
|
|
|
|
|
|
|
|
expect(wrapper.emitted('filterPipelines')).toBeTruthy();
|
|
|
|
expect(wrapper.emitted('filterPipelines')[0]).toEqual([mockSearch]);
|
|
|
|
});
|
2020-06-23 00:09:42 +05:30
|
|
|
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
});
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|