Коммит 93ca0aef создал по автору Illya Klymov's avatar Illya Klymov
Просмотр файлов

Refactored Karma spec to Jest for todo_spec.js

владелец 6b107790
Скрыть пробелы
Построчно Рядом
changelogs/unreleased/ce-xanf-migrate-todo-spec-to-jest.yml 0 → 100644
Просмотр файла @ 93ca0aef
---
title: Refactored Karma spec to Jest for todo_spec.js
merge_request: 32283
author: Illya Klymov
type: other
spec/frontend/sidebar/todo_spec.js 0 → 100644
Просмотр файла @ 93ca0aef
import { shallowMount } from '@vue/test-utils';
import { GlLoadingIcon } from '@gitlab/ui';
import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue';
import Icon from '~/vue_shared/components/icon.vue';
const defaultProps = {
issuableId: 1,
issuableType: 'epic',
};
describe('SidebarTodo', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = shallowMount(SidebarTodos, {
sync: false,
propsData: {
...defaultProps,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
});
describe('computed', () => {
describe('buttonClasses', () => {
it.each`
state | classes
${false} | ${'btn btn-default btn-todo issuable-header-btn float-right'}
${true} | ${'btn-blank btn-todo sidebar-collapsed-icon dont-change-state'}
`(
'returns todo button classes for when `collapsed` prop is `$state`',
({ state, classes }) => {
createComponent({ collapsed: state });
expect(wrapper.vm.buttonClasses).toBe(classes);
},
);
});
describe('buttonLabel', () => {
it.each`
isTodo | label
${false} | ${'Add a To Do'}
${true} | ${'Mark as done'}
`(
'returns todo button text for add todo when `isTodo` prop is `$isTodo`',
({ isTodo, label }) => {
createComponent({ isTodo });
expect(wrapper.vm.buttonLabel).toBe(label);
},
);
});
describe('collapsedButtonIconClasses', () => {
it.each`
isTodo | iconClass
${false} | ${''}
${true} | ${'todo-undone'}
`(
'returns collapsed button icon class when `isTodo` prop is `$isTodo`',
({ isTodo, iconClass }) => {
createComponent({ isTodo });
expect(wrapper.vm.collapsedButtonIconClasses).toBe(iconClass);
},
);
});
describe('collapsedButtonIcon', () => {
it.each`
isTodo | icon
${false} | ${'todo-add'}
${true} | ${'todo-done'}
`('returns button icon name when `isTodo` prop is `$isTodo`', ({ isTodo, icon }) => {
createComponent({ isTodo });
expect(wrapper.vm.collapsedButtonIcon).toBe(icon);
});
});
});
describe('template', () => {
it('emits `toggleTodo` event when clicked on button', () => {
createComponent();
wrapper.find('button').trigger('click');
expect(wrapper.emitted().toggleTodo).toBeTruthy();
});
it('renders component container element', () => {
createComponent({
issuableId: 1,
issuableType: 'epic',
});
const dataAttributes = {
issuableId: '1',
issuableType: 'epic',
originalTitle: '',
placement: 'left',
container: 'body',
boundary: 'viewport',
};
expect(wrapper.element.nodeName).toBe('BUTTON');
const elDataAttrs = wrapper.element.dataset;
Object.keys(elDataAttrs).forEach(attr => {
expect(elDataAttrs[attr]).toBe(dataAttributes[attr]);
});
});
it('check button label computed property', () => {
createComponent();
expect(wrapper.vm.buttonLabel).toEqual('Mark as done');
});
it('renders button label element when `collapsed` prop is `false`', () => {
createComponent({ collapsed: false });
expect(wrapper.find('span.issuable-todo-inner').text()).toBe('Mark as done');
});
it('renders button icon when `collapsed` prop is `true`', () => {
createComponent({ collapsed: true });
expect(wrapper.find(Icon).props('name')).toBe('todo-done');
});
it('renders loading icon when `isActionActive` prop is true', () => {
createComponent({ isActionActive: true });
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
});
});
});
spec/javascripts/sidebar/todo_spec.js удалено 100644 → 0
Просмотр файла @ 6b107790
import Vue from 'vue';
import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
const createComponent = ({
issuableId = 1,
issuableType = 'epic',
isTodo,
isActionActive,
collapsed,
}) => {
const Component = Vue.extend(SidebarTodos);
return mountComponent(Component, {
issuableId,
issuableType,
isTodo,
isActionActive,
collapsed,
});
};
describe('SidebarTodo', () => {
let vm;
beforeEach(() => {
vm = createComponent({});
});
afterEach(() => {
vm.$destroy();
});
describe('computed', () => {
describe('buttonClasses', () => {
it('returns todo button classes for when `collapsed` prop is `false`', () => {
expect(vm.buttonClasses).toBe('btn btn-default btn-todo issuable-header-btn float-right');
});
it('returns todo button classes for when `collapsed` prop is `true`', done => {
vm.collapsed = true;
Vue.nextTick()
.then(() => {
expect(vm.buttonClasses).toBe(
'btn-blank btn-todo sidebar-collapsed-icon dont-change-state',
);
})
.then(done)
.catch(done.fail);
});
});
describe('buttonLabel', () => {
it('returns todo button text for marking todo as done when `isTodo` prop is `true`', () => {
expect(vm.buttonLabel).toBe('Mark as done');
});
it('returns todo button text for add todo when `isTodo` prop is `false`', done => {
vm.isTodo = false;
Vue.nextTick()
.then(() => {
expect(vm.buttonLabel).toBe('Add a To Do');
})
.then(done)
.catch(done.fail);
});
});
describe('collapsedButtonIconClasses', () => {
it('returns collapsed button icon class when `isTodo` prop is `true`', () => {
expect(vm.collapsedButtonIconClasses).toBe('todo-undone');
});
it('returns empty string when `isTodo` prop is `false`', done => {
vm.isTodo = false;
Vue.nextTick()
.then(() => {
expect(vm.collapsedButtonIconClasses).toBe('');
})
.then(done)
.catch(done.fail);
});
});
describe('collapsedButtonIcon', () => {
it('returns button icon name when `isTodo` prop is `true`', () => {
expect(vm.collapsedButtonIcon).toBe('todo-done');
});
it('returns button icon name when `isTodo` prop is `false`', done => {
vm.isTodo = false;
Vue.nextTick()
.then(() => {
expect(vm.collapsedButtonIcon).toBe('todo-add');
})
.then(done)
.catch(done.fail);
});
});
});
describe('methods', () => {
describe('handleButtonClick', () => {
it('emits `toggleTodo` event on component', () => {
spyOn(vm, '$emit');
vm.handleButtonClick();
expect(vm.$emit).toHaveBeenCalledWith('toggleTodo');
});
});
});
describe('template', () => {
it('renders component container element', () => {
const dataAttributes = {
issuableId: '1',
issuableType: 'epic',
originalTitle: '',
placement: 'left',
container: 'body',
boundary: 'viewport',
};
expect(vm.$el.nodeName).toBe('BUTTON');
const elDataAttrs = vm.$el.dataset;
Object.keys(elDataAttrs).forEach(attr => {
expect(elDataAttrs[attr]).toBe(dataAttributes[attr]);
});
});
it('check button label computed property', () => {
expect(vm.buttonLabel).toEqual('Mark as done');
});
it('renders button label element when `collapsed` prop is `false`', () => {
const buttonLabelEl = vm.$el.querySelector('span.issuable-todo-inner');
expect(buttonLabelEl).not.toBeNull();
expect(buttonLabelEl.innerText.trim()).toBe('Mark as done');
});
it('renders button icon when `collapsed` prop is `true`', done => {
vm.collapsed = true;
Vue.nextTick()
.then(() => {
const buttonIconEl = vm.$el.querySelector('svg');
expect(buttonIconEl).not.toBeNull();
expect(buttonIconEl.querySelector('use').getAttribute('xlink:href')).toContain(
'todo-done',
);
})
.then(done)
.catch(done.fail);
});
it('renders loading icon when `isActionActive` prop is true', done => {
vm.isActionActive = true;
Vue.nextTick()
.then(() => {
const loadingEl = vm.$el.querySelector('span.loading-container');
expect(loadingEl).not.toBeNull();
})
.then(done)
.catch(done.fail);
});
});
});
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать