Skip to content

G
gitlab-ce
Commit 7019b646 authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Replaces vue-resource with axios for registry code

parent a89a73c1
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 134 deletions
app/assets/javascripts/registry/components/app.vue
View file @ 7019b646
<script>
import { mapGetters, mapActions } from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui';
import Flash from '../../flash';
import createFlash from '../../flash';
import store from '../stores';
import collapsibleContainer from './collapsible_container.vue';
import { errorMessages, errorMessagesTypes } from '../constants';
......@@ -26,7 +26,7 @@ export default {
this.setMainEndpoint(this.endpoint);
},
mounted() {
this.fetchRepos().catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
this.fetchRepos().catch(() => createFlash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
},
methods: {
...mapActions(['setMainEndpoint', 'fetchRepos']),
......
app/assets/javascripts/registry/components/collapsible_container.vue
View file @ 7019b646
<script>
import { mapActions } from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui';
import Flash from '../../flash';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
import createFlash from '../../flash';
import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
import tooltip from '../../vue_shared/directives/tooltip';
import tableRegistry from './table_registry.vue';
import TableRegistry from './table_registry.vue';
import { errorMessages, errorMessagesTypes } from '../constants';
import { __ } from '../../locale';
export default {
name: 'CollapsibeContainerRegisty',
components: {
clipboardButton,
tableRegistry,
ClipboardButton,
TableRegistry,
GlLoadingIcon,
},
directives: {
......@@ -31,7 +31,6 @@ export default {
},
methods: {
...mapActions(['fetchRepos', 'fetchList', 'deleteRepo']),
toggleRepo() {
this.isOpen = !this.isOpen;
......@@ -41,18 +40,16 @@ export default {
);
}
},
handleDeleteRepository() {
this.deleteRepo(this.repo)
.then(() => {
Flash(__('This container registry has been scheduled for deletion.'), 'notice');
createFlash(__('This container registry has been scheduled for deletion.'), 'notice');
this.fetchRepos();
})
.catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
},
showError(message) {
Flash(errorMessages[message]);
createFlash(errorMessages[message]);
},
},
};
......
app/assets/javascripts/registry/stores/actions.js
View file @ 7019b646
import Vue from 'vue';
import VueResource from 'vue-resource';
import axios from '~/lib/utils/axios_utils';
import * as types from './mutation_types';
Vue.use(VueResource);
export const fetchRepos = ({ commit, state }) => {
commit(types.TOGGLE_MAIN_LOADING);
return Vue.http
return axios
.get(state.endpoint)
.then(res => res.json())
.then(response => {
.then(({ data }) => {
commit(types.TOGGLE_MAIN_LOADING);
commit(types.SET_REPOS_LIST, response);
commit(types.SET_REPOS_LIST, data);
});
};
export const fetchList = ({ commit }, { repo, page }) => {
commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
return Vue.http.get(repo.tagsPath, { params: { page } }).then(response => {
const { headers } = response;
return axios.get(repo.tagsPath, { params: { page } }).then(response => {
const { headers, data } = response;
return response.json().then(resp => {
commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
commit(types.SET_REGISTRY_LIST, { repo, resp, headers });
});
commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
commit(types.SET_REGISTRY_LIST, { repo, resp: data, headers });
});
};
// eslint-disable-next-line no-unused-vars
export const deleteRepo = ({ commit }, repo) => Vue.http.delete(repo.destroyPath);
export const deleteRepo = ({ commit }, repo) => axios.delete(repo.destroyPath);
// eslint-disable-next-line no-unused-vars
export const deleteRegistry = ({ commit }, image) => Vue.http.delete(image.destroyPath);
export const deleteRegistry = ({ commit }, image) => axios.delete(image.destroyPath);
export const setMainEndpoint = ({ commit }, data) => commit(types.SET_MAIN_ENDPOINT, data);
export const toggleLoading = ({ commit }) => commit(types.TOGGLE_MAIN_LOADING);
......
app/assets/javascripts/registry/stores/index.js
View file @ 7019b646
......@@ -3,36 +3,12 @@ import Vuex from 'vuex';
import * as actions from './actions';
import * as getters from './getters';
import mutations from './mutations';
import createState from './state';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isLoading: false,
endpoint: '', // initial endpoint to fetch the repos list
/**
* Each object in `repos` has the following strucure:
* {
* name: String,
* isLoading: Boolean,
* tagsPath: String // endpoint to request the list
* destroyPath: String // endpoit to delete the repo
* list: Array // List of the registry images
* }
*
* Each registry image inside `list` has the following structure:
* {
* tag: String,
* revision: String
* shortRevision: String
* size: Number
* layers: Number
* createdAt: String
* destroyPath: String // endpoit to delete each image
* }
*/
repos: [],
},
state: createState(),
actions,
getters,
mutations,
......
app/assets/javascripts/registry/stores/state.js 0 → 100644
View file @ 7019b646
export default () => ({
isLoading: false,
endpoint: '', // initial endpoint to fetch the repos list
/**
* Each object in `repos` has the following strucure:
* {
* name: String,
* isLoading: Boolean,
* tagsPath: String // endpoint to request the list
* destroyPath: String // endpoit to delete the repo
* list: Array // List of the registry images
* }
*
* Each registry image inside `list` has the following structure:
* {
* tag: String,
* revision: String
* shortRevision: String
* size: Number
* layers: Number
* createdAt: String
* destroyPath: String // endpoit to delete each image
* }
*/
repos: [],
});
spec/javascripts/registry/components/app_spec.js
View file @ 7019b646
import _ from 'underscore';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import Vue from 'vue';
import registry from '~/registry/components/app.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { TEST_HOST } from 'spec/test_constants';
import { reposServerResponse } from '../mock_data';
describe('Registry List', () => {
const Component = Vue.extend(registry);
let vm;
let Component;
let mock;
beforeEach(() => {
Component = Vue.extend(registry);
mock = new MockAdapter(axios);
});
afterEach(() => {
mock.restore();
vm.$destroy();
});
describe('with data', () => {
const interceptor = (request, next) => {
next(
request.respondWith(JSON.stringify(reposServerResponse), {
status: 200,
}),
);
};
beforeEach(() => {
Vue.http.interceptors.push(interceptor);
vm = mountComponent(Component, { endpoint: 'foo' });
});
mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, reposServerResponse);
afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
vm = mountComponent(Component, { endpoint: `${TEST_HOST}/foo` });
});
it('should render a list of repos', done => {
......@@ -76,21 +69,10 @@ describe('Registry List', () => {
});
describe('without data', () => {
const interceptor = (request, next) => {
next(
request.respondWith(JSON.stringify([]), {
status: 200,
}),
);
};
beforeEach(() => {
Vue.http.interceptors.push(interceptor);
vm = mountComponent(Component, { endpoint: 'foo' });
});
mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, []);
afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
vm = mountComponent(Component, { endpoint: `${TEST_HOST}/foo` });
});
it('should render empty message', done => {
......@@ -109,21 +91,10 @@ describe('Registry List', () => {
});
describe('while loading data', () => {
const interceptor = (request, next) => {
next(
request.respondWith(JSON.stringify(reposServerResponse), {
status: 200,
}),
);
};
beforeEach(() => {
Vue.http.interceptors.push(interceptor);
vm = mountComponent(Component, { endpoint: 'foo' });
});
mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, []);
afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
vm = mountComponent(Component, { endpoint: `${TEST_HOST}/foo` });
});
it('should render a loading spinner', done => {
......
spec/javascripts/registry/components/collapsible_container_spec.js
View file @ 7019b646
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import Vue from 'vue';
import collapsibleComponent from '~/registry/components/collapsible_container.vue';
import store from '~/registry/stores';
import { repoPropsData } from '../mock_data';
import { repoPropsData, registryServerResponse } from '../mock_data';
describe('collapsible registry container', () => {
let vm;
let Component;
let mock;
const Component = Vue.extend(collapsibleComponent);
beforeEach(() => {
Component = Vue.extend(collapsibleComponent);
mock = new MockAdapter(axios);
mock
.onGet(repoPropsData.tagsPath)
.replyOnce(200, registryServerResponse, {});
vm = new Component({
store,
propsData: {
......@@ -18,6 +26,7 @@ describe('collapsible registry container', () => {
});
afterEach(() => {
mock.restore();
vm.$destroy();
});
......@@ -29,10 +38,17 @@ describe('collapsible registry container', () => {
);
});
it('should be open when user clicks on closed repo', done => {
fit('should be open when user clicks on closed repo', done => {
console.log(vm.repo, vm.$el)
vm.$el.querySelector('.js-toggle-repo').click();
Vue.nextTick(() => {
expect(vm.$el.querySelector('.container-image-tags')).toBeDefined();
console.log('nextTick', vm.repo, vm.$el)
expect(vm.$el.querySelector('.container-image-tags')).not.toBeNull();
expect(vm.$el.querySelector('.container-image-head i').className).toEqual(
'fa fa-chevron-up',
);
......@@ -58,7 +74,7 @@ describe('collapsible registry container', () => {
describe('delete repo', () => {
it('should be possible to delete a repo', () => {
expect(vm.$el.querySelector('.js-remove-repo')).toBeDefined();
expect(vm.$el.querySelector('.js-remove-repo')).not.toBeNull();
});
});
});
spec/javascripts/registry/stores/actions_spec.js
View file @ 7019b646
import Vue from 'vue';
import VueResource from 'vue-resource';
import _ from 'underscore';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import * as actions from '~/registry/stores/actions';
import * as types from '~/registry/stores/mutation_types';
import state from '~/registry/stores/state';
import { TEST_HOST } from 'spec/test_constants';
import testAction from '../../helpers/vuex_action_helper';
import {
defaultState,
reposServerResponse,
registryServerResponse,
parsedReposServerResponse,
} from '../mock_data';
Vue.use(VueResource);
describe('Actions Registry Store', () => {
let interceptor;
let mockedState;
let mock;
beforeEach(() => {
mockedState = defaultState;
mockedState = state();
mockedState.endpoint = `${TEST_HOST}/endpoint.json`;
mock = new MockAdapter(axios);
});
describe('server requests', () => {
afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
});
afterEach(() => {
mock.restore();
});
describe('server requests', () => {
describe('fetchRepos', () => {
beforeEach(() => {
interceptor = (request, next) => {
next(
request.respondWith(JSON.stringify(reposServerResponse), {
status: 200,
}),
);
};
Vue.http.interceptors.push(interceptor);
mock
.onGet(`${TEST_HOST}/endpoint.json`)
.replyOnce(200, reposServerResponse, {})
});
it('should set receveived repos', done => {
......@@ -56,23 +50,17 @@ describe('Actions Registry Store', () => {
});
describe('fetchList', () => {
let repo;
beforeEach(() => {
interceptor = (request, next) => {
next(
request.respondWith(JSON.stringify(registryServerResponse), {
status: 200,
}),
);
};
mockedState.repos = parsedReposServerResponse;
[, repo ] = mockedState.repos;
Vue.http.interceptors.push(interceptor);
mock
.onGet(repo.tagsPath)
.replyOnce(200, registryServerResponse, {})
});
it('should set received list', done => {
mockedState.repos = parsedReposServerResponse;
const repo = mockedState.repos[1];
testAction(
actions.fetchList,
{ repo },
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7