Commit 6be15f7c authored by Illya Klymov's avatar Illya Klymov

Refactor search_list_spec to Jest

* moves search_list_spec to Jest
* moves entire ide/mock_data to frontend folder
* reexport mock_data for karma tests
parent 8d562ab9
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { __ } from '~/locale';
import List from '~/ide/components/branches/search_list.vue';
import Item from '~/ide/components/branches/item.vue';
import { GlLoadingIcon } from '@gitlab/ui';
import { branches } from '../../mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('IDE branches search list', () => {
let wrapper;
const fetchBranchesMock = jest.fn();
const createComponent = (state, currentBranchId = 'branch') => {
const fakeStore = new Vuex.Store({
state: {
currentBranchId,
currentProjectId: 'project',
},
modules: {
branches: {
namespaced: true,
state: { isLoading: false, branches: [], ...state },
actions: {
fetchBranches: fetchBranchesMock,
},
},
},
});
wrapper = shallowMount(List, {
localVue,
store: fakeStore,
sync: false,
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('calls fetch on mounted', () => {
createComponent();
expect(fetchBranchesMock).toHaveBeenCalled();
});
it('renders loading icon when `isLoading` is true', () => {
createComponent({ isLoading: true });
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
});
it('renders branches not found when search is not empty and branches list is empty', () => {
createComponent({ branches: [] });
wrapper.find('input[type="search"]').setValue('something');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.text()).toContain(__('No branches found'));
});
});
describe('with branches', () => {
it('renders list', () => {
createComponent({ branches });
const items = wrapper.findAll(Item);
expect(items.length).toBe(branches.length);
});
it('renders check next to active branch', () => {
const activeBranch = 'regular';
createComponent({ branches }, activeBranch);
const items = wrapper.findAll(Item).filter(w => w.props('isActive'));
expect(items.length).toBe(1);
expect(items.at(0).props('item').name).toBe(activeBranch);
});
});
});
import { TEST_HOST } from 'spec/test_constants';
export const projectData = {
id: 1,
name: 'abcproject',
web_url: '',
avatar_url: '',
path: '',
name_with_namespace: 'namespace/abcproject',
branches: {
master: {
treeId: 'abcproject/master',
can_push: true,
commit: {
id: '123',
},
},
},
mergeRequests: {},
merge_requests_enabled: true,
default_branch: 'master',
};
export const pipelines = [
{
id: 1,
ref: 'master',
sha: '123',
details: {
status: {
icon: 'status_failed',
group: 'failed',
text: 'Failed',
},
},
commit: { id: '123' },
},
{
id: 2,
ref: 'master',
sha: '213',
details: {
status: {
icon: 'status_failed',
group: 'failed',
text: 'Failed',
},
},
commit: { id: '213' },
},
];
export const stages = [
{
dropdown_path: `${TEST_HOST}/testing`,
name: 'build',
status: {
icon: 'status_failed',
group: 'failed',
text: 'failed',
},
},
{
dropdown_path: 'testing',
name: 'test',
status: {
icon: 'status_failed',
group: 'failed',
text: 'failed',
},
},
];
export const jobs = [
{
id: 1,
name: 'test',
path: 'testing',
status: {
icon: 'status_success',
text: 'passed',
},
stage: 'test',
duration: 1,
started: new Date(),
},
{
id: 2,
name: 'test 2',
path: 'testing2',
status: {
icon: 'status_success',
text: 'passed',
},
stage: 'test',
duration: 1,
started: new Date(),
},
{
id: 3,
name: 'test 3',
path: 'testing3',
status: {
icon: 'status_success',
text: 'passed',
},
stage: 'test',
duration: 1,
started: new Date(),
},
{
id: 4,
name: 'test 4',
path: 'testing4',
status: {
icon: 'status_failed',
text: 'failed',
},
stage: 'build',
duration: 1,
started: new Date(),
},
];
export const fullPipelinesResponse = {
data: {
count: {
all: 2,
},
pipelines: [
{
id: '51',
path: 'test',
commit: {
id: '123',
},
details: {
status: {
icon: 'status_failed',
text: 'failed',
},
stages: [...stages],
},
},
{
id: '50',
commit: {
id: 'abc123def456ghi789jkl',
},
details: {
status: {
icon: 'status_success',
text: 'passed',
},
stages: [...stages],
},
},
],
},
};
export const mergeRequests = [
{
id: 1,
iid: 1,
title: 'Test merge request',
project_id: 1,
web_url: `${TEST_HOST}/namespace/project-path/merge_requests/1`,
},
];
export const branches = [
{
id: 1,
name: 'master',
commit: {
message: 'Update master branch',
committed_date: '2018-08-01T00:20:05Z',
},
can_push: true,
protected: true,
default: true,
},
{
id: 2,
name: 'protected/no-access',
commit: {
message: 'Update some stuff',
committed_date: '2018-08-02T00:00:05Z',
},
can_push: false,
protected: true,
default: false,
},
{
id: 3,
name: 'protected/access',
commit: {
message: 'Update some stuff',
committed_date: '2018-08-02T00:00:05Z',
},
can_push: true,
protected: true,
default: false,
},
{
id: 4,
name: 'regular',
commit: {
message: 'Update some more stuff',
committed_date: '2018-06-30T00:20:05Z',
},
can_push: true,
protected: false,
default: false,
},
{
id: 5,
name: 'regular/no-access',
commit: {
message: 'Update some more stuff',
committed_date: '2018-06-30T00:20:05Z',
},
can_push: false,
protected: false,
default: false,
},
];
import Vue from 'vue';
import store from '~/ide/stores';
import * as types from '~/ide/stores/modules/branches/mutation_types';
import List from '~/ide/components/branches/search_list.vue';
import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
import { branches as testBranches } from '../../mock_data';
import { resetStore } from '../../helpers';
describe('IDE branches search list', () => {
const Component = Vue.extend(List);
let vm;
beforeEach(() => {
vm = createComponentWithStore(Component, store, {});
spyOn(vm, 'fetchBranches');
vm.$mount();
});
afterEach(() => {
vm.$destroy();
resetStore(store);
});
it('calls fetch on mounted', () => {
expect(vm.fetchBranches).toHaveBeenCalledWith({
search: '',
});
});
it('renders loading icon', done => {
vm.$store.state.branches.isLoading = true;
vm.$nextTick()
.then(() => {
expect(vm.$el).toContainElement('.loading-container');
})
.then(done)
.catch(done.fail);
});
it('renders branches not found when search is not empty', done => {
vm.search = 'testing';
vm.$nextTick(() => {
expect(vm.$el).toContainText('No branches found');
done();
});
});
describe('with branches', () => {
const currentBranch = testBranches[1];
beforeEach(done => {
vm.$store.state.currentBranchId = currentBranch.name;
vm.$store.commit(`branches/${types.RECEIVE_BRANCHES_SUCCESS}`, testBranches);
vm.$nextTick(done);
});
it('renders list', () => {
const elementText = Array.from(vm.$el.querySelectorAll('li strong')).map(x =>
x.textContent.trim(),
);
expect(elementText).toEqual(testBranches.map(x => x.name));
});
it('renders check next to active branch', () => {
const checkedText = Array.from(vm.$el.querySelectorAll('li'))
.filter(x => x.querySelector('.ide-search-list-current-icon svg'))
.map(x => x.querySelector('strong').textContent.trim());
expect(checkedText).toEqual([currentBranch.name]);
});
});
});
import { TEST_HOST } from '../test_constants'; export * from '../../frontend/ide/mock_data';
export const projectData = {
id: 1,
name: 'abcproject',
web_url: '',
avatar_url: '',
path: '',
name_with_namespace: 'namespace/abcproject',
branches: {
master: {
treeId: 'abcproject/master',
can_push: true,
commit: {
id: '123',
},
},
},
mergeRequests: {},
merge_requests_enabled: true,
default_branch: 'master',
};
export const pipelines = [
{
id: 1,
ref: 'master',
sha: '123',
details: {
status: {
icon: 'status_failed',
group: 'failed',
text: 'Failed',
},
},
commit: { id: '123' },
},
{
id: 2,
ref: 'master',
sha: '213',
details: {
status: {
icon: 'status_failed',
group: 'failed',
text: 'Failed',
},
},
commit: { id: '213' },
},
];
export const stages = [
{
dropdown_path: `${TEST_HOST}/testing`,
name: 'build',
status: {
icon: 'status_failed',
group: 'failed',
text: 'failed',
},
},
{
dropdown_path: 'testing',
name: 'test',
status: {
icon: 'status_failed',
group: 'failed',
text: 'failed',
},
},
];
export const jobs = [
{
id: 1,
name: 'test',
path: 'testing',
status: {
icon: 'status_success',
text: 'passed',
},
stage: 'test',
duration: 1,
started: new Date(),
},
{
id: 2,
name: 'test 2',
path: 'testing2',
status: {
icon: 'status_success',
text: 'passed',
},
stage: 'test',
duration: 1,
started: new Date(),
},
{
id: 3,
name: 'test 3',
path: 'testing3',
status: {
icon: 'status_success',
text: 'passed',
},
stage: 'test',
duration: 1,
started: new Date(),
},
{
id: 4,
name: 'test 4',
path: 'testing4',
status: {
icon: 'status_failed',
text: 'failed',
},
stage: 'build',
duration: 1,
started: new Date(),
},
];
export const fullPipelinesResponse = {
data: {
count: {
all: 2,
},
pipelines: [
{
id: '51',
path: 'test',
commit: {
id: '123',
},
details: {
status: {
icon: 'status_failed',
text: 'failed',
},
stages: [...stages],
},
},
{
id: '50',
commit: {
id: 'abc123def456ghi789jkl',
},
details: {
status: {
icon: 'status_success',
text: 'passed',
},
stages: [...stages],
},
},
],
},
};
export const mergeRequests = [
{
id: 1,
iid: 1,
title: 'Test merge request',
project_id: 1,
web_url: `${TEST_HOST}/namespace/project-path/merge_requests/1`,
},
];
export const branches = [
{
id: 1,
name: 'master',
commit: {
message: 'Update master branch',
committed_date: '2018-08-01T00:20:05Z',
},
can_push: true,
protected: true,
default: true,
},
{
id: 2,
name: 'protected/no-access',
commit: {
message: 'Update some stuff',
committed_date: '2018-08-02T00:00:05Z',
},
can_push: false,
protected: true,
default: false,
},
{
id: 3,
name: 'protected/access',
commit: {
message: 'Update some stuff',
committed_date: '2018-08-02T00:00:05Z',
},
can_push: true,
protected: true,
default: false,
},
{
id: 4,
name: 'regular',
commit: {
message: 'Update some more stuff',
committed_date: '2018-06-30T00:20:05Z',
},
can_push: true,
protected: false,
default: false,
},
{
id: 5,
name: 'regular/no-access',
commit: {
message: 'Update some more stuff',
committed_date: '2018-06-30T00:20:05Z',
},
can_push: false,
protected: false,
default: false,
},
];
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