@mekari/mekari-ui-vue
Version:
--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import
303 lines (272 loc) • 10.4 kB
JavaScript
import MTable from './index.vue';
import MPagination from '../Pagination';
import { shallowMount } from '@vue/test-utils';
const columnsMock = [
{
key: 0,
label: 'firstLabel',
sortable: true,
sortKey: 'first',
checked: true,
},
{
key: 1,
label: 'secondLabel',
isCustom: true,
checked: false,
},
];
const valuesMock = [
{
checked: false,
contents: [
'firstValue 1',
'secondValue 1',
],
},
{
checked: true,
contents: [
'firstLabel 2',
'secondValue 2',
],
},
];
describe('Mekari UI Table Component', () => {
let wrapper;
afterEach(() => {
wrapper.destroy();
});
const initWrapper = options => {
return shallowMount(MTable, {
propsData: { ...options },
});
};
const initWrapperScroll = sticky => {
return shallowMount(MTable, {
propsData: {
columns: columnsMock,
values: valuesMock,
sticky,
},
attachTo: document.body,
});
};
it('should match snapshot', () => {
wrapper = initWrapper({
columns: columnsMock,
values: valuesMock,
});
expect(wrapper.element).toMatchSnapshot();
});
it('should not show table if columns and values are empty', async () => {
wrapper = initWrapper();
expect(wrapper.find('tbody').exists()).toBe(false);
});
describe('should toggle box-shadow-table class when sticky table is scrolled to right', () => {
it('should add box shadow when sticky is left, and table container is scrolled.', async () => {
wrapper = initWrapperScroll('left');
const tableContainer = wrapper.findComponent({ ref: 'tableContainer' });
tableContainer.element.scrollLeft = 10;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-0').classes('box-shadow-table')).toBe(true);
expect(wrapper.find('.th-0').classes('box-shadow-table')).toBe(true);
tableContainer.element.scrollLeft = 0;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-0').classes('box-shadow-table')).toBe(false);
expect(wrapper.find('.th-0').classes('box-shadow-table')).toBe(false);
});
it('should not add box shadow when sticky is right, and table container is scrolled.', async () => {
wrapper = initWrapperScroll('right');
const tableContainer = wrapper.findComponent({ ref: 'tableContainer' });
tableContainer.element.scrollLeft = 10;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-0').classes('box-shadow-table')).toBe(false);
expect(wrapper.find('.th-0').classes('box-shadow-table')).toBe(false);
tableContainer.element.scrollLeft = 0;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-0').classes('box-shadow-table')).toBe(false);
expect(wrapper.find('.th-0').classes('box-shadow-table')).toBe(false);
});
it('should add box shadow when sticky is both, and table container is scrolled.', async () => {
wrapper = initWrapperScroll('both');
const tableContainer = wrapper.findComponent({ ref: 'tableContainer' });
tableContainer.element.scrollLeft = 10;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-0').classes('box-shadow-table')).toBe(true);
expect(wrapper.find('.th-0').classes('box-shadow-table')).toBe(true);
tableContainer.element.scrollLeft = 0;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-0').classes('box-shadow-table')).toBe(false);
expect(wrapper.find('.th-0').classes('box-shadow-table')).toBe(false);
});
});
describe('should toggle box-shadow-table class when sticky table is scrolled to left', () => {
it('should not add box shadow when sticky is left, and table container is scrolled.', async () => {
wrapper = initWrapperScroll('left');
const tableContainer = wrapper.findComponent({ ref: 'tableContainer' });
tableContainer.element.scrollLeft = -1;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-1').classes('box-shadow-table')).toBe(false);
expect(wrapper.find('.th-1').classes('box-shadow-table')).toBe(false);
wrapper.findComponent({ ref: 'tableContainer' }).element.scrollLeft = 0;
wrapper.findComponent({ ref: 'tableContainer' }).trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-1').classes('box-shadow-table')).toBe(false);
expect(wrapper.find('.th-1').classes('box-shadow-table')).toBe(false);
});
it('should add box shadow when sticky is right, and table container is scrolled.', async () => {
wrapper = initWrapperScroll('right');
const tableContainer = wrapper.findComponent({ ref: 'tableContainer' });
tableContainer.element.scrollLeft = -1;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-1').classes('box-shadow-table')).toBe(true);
expect(wrapper.find('.th-1').classes('box-shadow-table')).toBe(true);
tableContainer.element.scrollLeft = 0;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-1').classes('box-shadow-table')).toBe(false);
expect(wrapper.find('.th-1').classes('box-shadow-table')).toBe(false);
});
it('should add box shadow when sticky is both, and table container is scrolled.', async () => {
wrapper = initWrapperScroll('both');
const tableContainer = wrapper.findComponent({ ref: 'tableContainer' });
tableContainer.element.scrollLeft = -1;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-1').classes('box-shadow-table')).toBe(true);
expect(wrapper.find('.th-1').classes('box-shadow-table')).toBe(true);
tableContainer.element.scrollLeft = 0;
tableContainer.trigger('scroll');
await wrapper.vm.$nextTick();
expect(wrapper.find('.td-1').classes('box-shadow-table')).toBe(false);
expect(wrapper.find('.th-1').classes('box-shadow-table')).toBe(false);
});
});
it('should emit sort if the head of column is clicked', async () => {
wrapper = initWrapper({
columns: columnsMock,
values: valuesMock,
});
wrapper.findComponent({ ref: 'tableHeaderCol-0' }).trigger('click');
await wrapper.vm.$nextTick();
expect(wrapper.emitted('sort-update')[0][0]).toBe('first');
});
it('should emit pagination-update if pagination component is updated', async () => {
wrapper = initWrapper({
columns: columnsMock,
values: valuesMock,
});
wrapper.findComponent(MPagination).vm.$emit('update', { page: 1, limit: 10 });
await wrapper.vm.$nextTick();
expect(wrapper.emitted('pagination-update')[0][0]).toEqual({ current_page: 1, per_page: 10 });
});
it('should rerender the component if columns is changed', async () => {
const columnsMockModified = [
{
key: 'first',
label: 'firstLabel',
sortable: true,
sortKey: 'first',
checked: true,
},
{
key: 'second',
label: 'secondLabel',
sortable: true,
sortKey: 'second',
checked: true,
},
];
wrapper = initWrapper({
columns: columnsMock,
values: valuesMock,
});
const formerHtml = wrapper.html();
wrapper.setProps({
columns: columnsMockModified,
});
await wrapper.vm.$nextTick();
const newHtml = wrapper.html();
await wrapper.vm.$nextTick();
expect(formerHtml !== newHtml).toBe(true);
});
describe('should emit checked if check box in table is changed', () => {
it('check box in table body is changed', async () => {
wrapper = initWrapper({
columns: columnsMock,
values: valuesMock,
sortable: true,
});
wrapper.findComponent({ ref: 'checkbox-0' }).vm.$emit('change', true);
await wrapper.vm.$nextTick();
expect(wrapper.emitted('checked')[0][0]).toEqual({
0: true,
1: true,
});
wrapper.findComponent({ ref: 'checkbox-1' }).vm.$emit('change', false);
await wrapper.vm.$nextTick();
expect(wrapper.emitted('checked')[1][0]).toEqual({
0: true,
1: false,
});
});
it('check box in table head is changed', async () => {
wrapper = initWrapper({
columns: columnsMock,
values: valuesMock,
sortable: true,
});
wrapper.findComponent({ ref: 'checkAllTrigger' }).vm.$emit('change', true);
await wrapper.vm.$nextTick();
expect(wrapper.emitted('checked')[0][0]).toEqual({
0: true,
1: true,
});
wrapper.findComponent({ ref: 'checkAllTrigger' }).vm.$emit('change', false);
await wrapper.vm.$nextTick();
expect(wrapper.emitted('checked')[0][0]).toEqual({
0: false,
1: false,
});
});
});
describe('should have a `table-sticky` class and additional class when prop sticky is set', () => {
it('should have class `table-sticky--left` if sticky props is `left`', () => {
wrapper = initWrapper({
columns: columnsMock,
values: valuesMock,
sticky: 'left',
});
expect(wrapper.find('.table-sticky').exists()).toBe(true);
expect(wrapper.find('.table-sticky--left').exists()).toBe(true);
});
it('should have class `table-sticky--left` if sticky props is `right`', () => {
wrapper = initWrapper({
columns: columnsMock,
values: valuesMock,
sticky: 'right',
});
expect(wrapper.find('.table-sticky').exists()).toBe(true);
expect(wrapper.find('.table-sticky--right').exists()).toBe(true);
});
it('should have class `table-sticky--left` and `table-sticky--right` if sticky props is `both`', () => {
wrapper = initWrapper({
columns: columnsMock,
values: valuesMock,
sticky: 'both',
});
expect(wrapper.find('.table-sticky').exists()).toBe(true);
expect(wrapper.find('.table-sticky--left').exists()).toBe(true);
expect(wrapper.find('.table-sticky--right').exists()).toBe(true);
});
});
});