Commit 52e79b25 authored by pburdette's avatar pburdette

Move api calls to tokens

Move api calls out of filtered
search and into tokens. This
is needed to display url params
values when the component is mounted.
parent 8570e64d
......@@ -3,9 +3,6 @@ import { GlFilteredSearch } from '@gitlab/ui';
import { __, s__ } from '~/locale';
import PipelineTriggerAuthorToken from './tokens/pipeline_trigger_author_token.vue';
import PipelineBranchNameToken from './tokens/pipeline_branch_name_token.vue';
import Api from '~/api';
import createFlash from '~/flash';
import { FETCH_AUTHOR_ERROR_MESSAGE, FETCH_BRANCH_ERROR_MESSAGE } from '../constants';
export default {
components: {
......@@ -25,12 +22,6 @@ export default {
required: true,
},
},
data() {
return {
projectUsers: null,
projectBranches: null,
};
},
computed: {
tokens() {
return [
......@@ -41,7 +32,6 @@ export default {
unique: true,
token: PipelineTriggerAuthorToken,
operators: [{ value: '=', description: __('is'), default: 'true' }],
triggerAuthors: this.projectUsers,
projectId: this.projectId,
},
{
......@@ -51,7 +41,6 @@ export default {
unique: true,
token: PipelineBranchNameToken,
operators: [{ value: '=', description: __('is'), default: 'true' }],
branches: this.projectBranches,
projectId: this.projectId,
},
];
......@@ -83,25 +72,6 @@ export default {
return valueArray;
},
},
created() {
Api.projectUsers(this.projectId)
.then(users => {
this.projectUsers = users;
})
.catch(err => {
createFlash(FETCH_AUTHOR_ERROR_MESSAGE);
throw err;
});
Api.branches(this.projectId)
.then(({ data }) => {
this.projectBranches = data.map(branch => branch.name);
})
.catch(err => {
createFlash(FETCH_BRANCH_ERROR_MESSAGE);
throw err;
});
},
methods: {
onSubmit(filters) {
this.$emit('filterPipelines', filters);
......
......@@ -23,15 +23,18 @@ export default {
},
data() {
return {
branches: this.config.branches,
branches: null,
loading: true,
};
},
created() {
this.fetchBranches();
},
methods: {
fetchBranchBySearchTerm(searchTerm) {
Api.branches(this.config.projectId, searchTerm)
.then(res => {
this.branches = res.data.map(branch => branch.name);
fetchBranches(searchterm) {
Api.branches(this.config.projectId, searchterm)
.then(({ data }) => {
this.branches = data.map(branch => branch.name);
this.loading = false;
})
.catch(err => {
......@@ -41,7 +44,7 @@ export default {
});
},
searchBranches: debounce(function debounceSearch({ data }) {
this.fetchBranchBySearchTerm(data);
this.fetchBranches(data);
}, FILTER_PIPELINES_SEARCH_DELAY),
},
};
......@@ -55,7 +58,7 @@ export default {
@input="searchBranches"
>
<template #suggestions>
<gl-loading-icon v-if="loading && !value" />
<gl-loading-icon v-if="loading" />
<template v-else>
<gl-filtered-search-suggestion
v-for="(branch, index) in branches"
......
......@@ -36,7 +36,7 @@ export default {
},
data() {
return {
users: this.config.triggerAuthors,
users: [],
loading: true,
};
},
......@@ -45,16 +45,19 @@ export default {
return this.value.data.toLowerCase();
},
activeUser() {
return this.config.triggerAuthors.find(user => {
return this.users.find(user => {
return user.username.toLowerCase() === this.currentValue;
});
},
},
created() {
this.fetchProjectUsers();
},
methods: {
fetchAuthorBySearchTerm(searchTerm) {
fetchProjectUsers(searchTerm) {
Api.projectUsers(this.config.projectId, searchTerm)
.then(res => {
this.users = res;
.then(users => {
this.users = users;
this.loading = false;
})
.catch(err => {
......@@ -64,7 +67,7 @@ export default {
});
},
searchAuthors: debounce(function debounceSearch({ data }) {
this.fetchAuthorBySearchTerm(data);
this.fetchProjectUsers(data);
}, FILTER_PIPELINES_SEARCH_DELAY),
},
};
......@@ -72,7 +75,6 @@ export default {
<template>
<gl-filtered-search-token
v-if="config.triggerAuthors"
:config="config"
v-bind="{ ...$props, ...$attrs }"
v-on="$listeners"
......@@ -94,7 +96,7 @@ export default {
}}</gl-filtered-search-suggestion>
<gl-dropdown-divider />
<gl-loading-icon v-if="loading && !value" />
<gl-loading-icon v-if="loading" />
<template v-else>
<gl-filtered-search-suggestion
v-for="user in users"
......
......@@ -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, pipelineWithStages, branches } from '../mock_data';
import { GlFilteredSearch } from '@gitlab/ui';
describe('Pipelines filtered search', () => {
......@@ -22,11 +16,12 @@ describe('Pipelines filtered search', () => {
.props('availableTokens')
.find(token => token.type === type);
const createComponent = () => {
const createComponent = (params = {}) => {
wrapper = mount(PipelinesFilteredSearch, {
propsData: {
pipelines: [pipelineWithStages],
projectId: '21',
params,
},
attachToDocument: true,
});
......@@ -60,7 +55,6 @@ describe('Pipelines filtered search', () => {
icon: 'user',
title: 'Trigger author',
unique: true,
triggerAuthors: users,
projectId: '21',
operators: [expect.objectContaining({ value: '=' })],
});
......@@ -70,28 +64,51 @@ describe('Pipelines filtered search', () => {
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(wrapper.vm.projectBranches).toEqual(mockBranchesAfterMap);
});
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]);
});
describe('Url query params', () => {
const params = {
page: '1',
ref: 'master',
scope: 'all',
username: 'deja.green',
};
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);
});
});
});
......@@ -56,6 +56,7 @@ describe('Pipelines', () => {
propsData: {
store: new Store(),
projectId: '21',
params: {},
...props,
},
methods: {
......
import Api from '~/api';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import PipelineBranchNameToken from '~/pipelines/components/tokens/pipeline_branch_name_token.vue';
import { branches } from '../mock_data';
import { branches, mockBranchesAfterMap } from '../mock_data';
describe('Pipeline Branch Name Token', () => {
let wrapper;
let mock;
const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
......@@ -46,10 +50,15 @@ describe('Pipeline Branch Name Token', () => {
};
beforeEach(() => {
mock = new MockAdapter(axios);
jest.spyOn(Api, 'branches').mockResolvedValue({ data: branches });
createComponent();
});
afterEach(() => {
mock.restore();
wrapper.destroy();
wrapper = null;
});
......@@ -58,6 +67,12 @@ describe('Pipeline Branch Name Token', () => {
expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
});
it('fetches and sets project branches', () => {
expect(Api.branches).toHaveBeenCalled();
expect(wrapper.vm.branches).toEqual(mockBranchesAfterMap);
});
describe('displays loading icon correctly', () => {
it('shows loading icon', () => {
createComponent({ stubs }, { loading: true });
......
import Api from '~/api';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import PipelineTriggerAuthorToken from '~/pipelines/components/tokens/pipeline_trigger_author_token.vue';
......@@ -5,6 +8,7 @@ import { users } from '../mock_data';
describe('Pipeline Trigger Author Token', () => {
let wrapper;
let mock;
const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
......@@ -45,10 +49,15 @@ describe('Pipeline Trigger Author Token', () => {
};
beforeEach(() => {
mock = new MockAdapter(axios);
jest.spyOn(Api, 'projectUsers').mockResolvedValue(users);
createComponent();
});
afterEach(() => {
mock.restore();
wrapper.destroy();
wrapper = null;
});
......@@ -57,6 +66,12 @@ describe('Pipeline Trigger Author Token', () => {
expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
});
it('fetches and sets project users', () => {
expect(Api.projectUsers).toHaveBeenCalled();
expect(wrapper.vm.users).toEqual(users);
});
describe('displays loading icon correctly', () => {
it('shows loading icon', () => {
createComponent({ stubs }, { loading: true });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment