debian-mirror-gitlab/spec/frontend/sidebar/todo_spec.js

95 lines
2.8 KiB
JavaScript
Raw Normal View History

2020-11-24 15:15:51 +05:30
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount } from '@vue/test-utils';
2019-12-21 20:55:43 +05:30
import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue';
const defaultProps = {
issuableId: 1,
issuableType: 'epic',
};
describe('SidebarTodo', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = shallowMount(SidebarTodos, {
propsData: {
...defaultProps,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
});
it.each`
state | classes
2021-03-11 19:13:27 +05:30
${false} | ${['gl-button', 'btn', 'btn-default', 'btn-todo', 'issuable-header-btn', 'float-right']}
2019-12-21 20:55:43 +05:30
${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.find('button').classes()).toStrictEqual(classes);
});
it.each`
isTodo | iconClass | label | icon
2021-03-11 19:13:27 +05:30
${false} | ${''} | ${'Add a to do'} | ${'todo-add'}
2019-12-21 20:55:43 +05:30
${true} | ${'todo-undone'} | ${'Mark as done'} | ${'todo-done'}
`(
'renders proper button when `isTodo` prop is `$isTodo`',
({ isTodo, iconClass, label, icon }) => {
createComponent({ isTodo });
2021-03-08 18:12:59 +05:30
expect(wrapper.find(GlIcon).classes().join(' ')).toStrictEqual(iconClass);
2020-11-24 15:15:51 +05:30
expect(wrapper.find(GlIcon).props('name')).toStrictEqual(icon);
2019-12-21 20:55:43 +05:30
expect(wrapper.find('button').text()).toBe(label);
},
);
describe('template', () => {
it('emits `toggleTodo` event when clicked on button', () => {
createComponent();
wrapper.find('button').trigger('click');
2020-03-13 15:44:24 +05:30
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().toggleTodo).toBeTruthy();
});
2019-12-21 20:55:43 +05:30
});
it('renders component container element with proper data attributes', () => {
createComponent({
issuableId: 1,
issuableType: 'epic',
});
expect(wrapper.element).toMatchSnapshot();
});
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 });
2020-11-24 15:15:51 +05:30
expect(wrapper.find(GlIcon).props('name')).toBe('todo-done');
2019-12-21 20:55:43 +05:30
});
it('renders loading icon when `isActionActive` prop is true', () => {
createComponent({ isActionActive: true });
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
});
2020-01-01 13:55:28 +05:30
it('hides button icon when `isActionActive` prop is true', () => {
createComponent({ collapsed: true, isActionActive: true });
2020-11-24 15:15:51 +05:30
expect(wrapper.find(GlIcon).isVisible()).toBe(false);
2020-01-01 13:55:28 +05:30
});
2019-12-21 20:55:43 +05:30
});
});