From 7019b646c5a4a588b4018bdb8b8afdfd81a2ae60 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 4 Dec 2018 13:20:43 +0000 Subject: Replaces vue-resource with axios for registry code --- spec/javascripts/registry/components/app_spec.js | 55 +++++----------------- .../components/collapsible_container_spec.js | 28 ++++++++--- spec/javascripts/registry/stores/actions_spec.js | 54 +++++++++------------ 3 files changed, 56 insertions(+), 81 deletions(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js index 92ff960277a..103a59e7094 100644 --- a/spec/javascripts/registry/components/app_spec.js +++ b/spec/javascripts/registry/components/app_spec.js @@ -1,37 +1,30 @@ -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 => { diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js index 256a242f784..069139bc564 100644 --- a/spec/javascripts/registry/components/collapsible_container_spec.js +++ b/spec/javascripts/registry/components/collapsible_container_spec.js @@ -1,14 +1,22 @@ +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(); }); }); }); diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js index bc4c444655a..30114f5dca5 100644 --- a/spec/javascripts/registry/stores/actions_spec.js +++ b/spec/javascripts/registry/stores/actions_spec.js @@ -1,42 +1,36 @@ -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 }, -- cgit v1.2.3 From f8bfc2cf7c2f6489e2f70a554a10785859f22765 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 5 Dec 2018 09:27:29 +0000 Subject: Reduces technical debt Updates icons to use gitlab-svg Updates buttons to use gitlab-ui Updates broken tests --- spec/javascripts/registry/components/app_spec.js | 6 ++-- .../components/collapsible_container_spec.js | 41 +++++++++------------- spec/javascripts/registry/stores/actions_spec.js | 10 ++---- 3 files changed, 23 insertions(+), 34 deletions(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js index 103a59e7094..67118ac03a5 100644 --- a/spec/javascripts/registry/components/app_spec.js +++ b/spec/javascripts/registry/components/app_spec.js @@ -57,9 +57,9 @@ describe('Registry List', () => { Vue.nextTick(() => { vm.$el.querySelector('.js-toggle-repo').click(); Vue.nextTick(() => { - expect(vm.$el.querySelector('.js-toggle-repo i').className).toEqual( - 'fa fa-chevron-up', - ); + expect( + vm.$el.querySelector('.js-toggle-repo use').getAttribute('xlink:href'), + ).toContain('angle-up'); done(); }); }); diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js index 069139bc564..a3f7ff76dc7 100644 --- a/spec/javascripts/registry/components/collapsible_container_spec.js +++ b/spec/javascripts/registry/components/collapsible_container_spec.js @@ -3,7 +3,9 @@ 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, registryServerResponse } from '../mock_data'; +import * as types from '~/registry/stores/mutation_types'; + +import { repoPropsData, registryServerResponse, reposServerResponse } from '../mock_data'; describe('collapsible registry container', () => { let vm; @@ -13,9 +15,9 @@ describe('collapsible registry container', () => { beforeEach(() => { mock = new MockAdapter(axios); - mock - .onGet(repoPropsData.tagsPath) - .replyOnce(200, registryServerResponse, {}); + mock.onGet(repoPropsData.tagsPath).replyOnce(200, registryServerResponse, {}); + + store.commit(types.SET_REPOS_LIST, reposServerResponse); vm = new Component({ store, @@ -33,25 +35,16 @@ describe('collapsible registry container', () => { describe('toggle', () => { it('should be closed by default', () => { expect(vm.$el.querySelector('.container-image-tags')).toBe(null); - expect(vm.$el.querySelector('.container-image-head i').className).toEqual( - 'fa fa-chevron-right', - ); + expect(vm.iconName).toEqual('angle-right'); }); - fit('should be open when user clicks on closed repo', done => { - - console.log(vm.repo, vm.$el) - + it('should be open when user clicks on closed repo', done => { vm.$el.querySelector('.js-toggle-repo').click(); - + Vue.nextTick(() => { - - 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', - ); + expect(vm.iconName).toEqual('angle-up'); + done(); }); }); @@ -61,12 +54,12 @@ describe('collapsible registry container', () => { Vue.nextTick(() => { vm.$el.querySelector('.js-toggle-repo').click(); - Vue.nextTick(() => { - expect(vm.$el.querySelector('.container-image-tags')).toBe(null); - expect(vm.$el.querySelector('.container-image-head i').className).toEqual( - 'fa fa-chevron-right', - ); - done(); + setTimeout(() => { + Vue.nextTick(() => { + expect(vm.$el.querySelector('.container-image-tags')).toBe(null); + expect(vm.iconName).toEqual('angle-right'); + done(); + }); }); }); }); diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js index 30114f5dca5..c9aa82dba90 100644 --- a/spec/javascripts/registry/stores/actions_spec.js +++ b/spec/javascripts/registry/stores/actions_spec.js @@ -28,9 +28,7 @@ describe('Actions Registry Store', () => { describe('server requests', () => { describe('fetchRepos', () => { beforeEach(() => { - mock - .onGet(`${TEST_HOST}/endpoint.json`) - .replyOnce(200, reposServerResponse, {}) + mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, reposServerResponse, {}); }); it('should set receveived repos', done => { @@ -53,11 +51,9 @@ describe('Actions Registry Store', () => { let repo; beforeEach(() => { mockedState.repos = parsedReposServerResponse; - [, repo ] = mockedState.repos; + [, repo] = mockedState.repos; - mock - .onGet(repo.tagsPath) - .replyOnce(200, registryServerResponse, {}) + mock.onGet(repo.tagsPath).replyOnce(200, registryServerResponse, {}); }); it('should set received list', done => { -- cgit v1.2.3