import React from 'react';
import { mount, render } from 'enzyme';
import Layout from '../';
describe('Layout test', () => {
it('Basic layout', () => {
const w1 = mount(
);
const w2 = mount(
);
const w3 = mount(
);
const w4 = mount(
);
const w5 = mount(
);
const w6 = mount(
);
expect(w1.find('.el-row .el-col-24 .grid-content').exists()).toBeTruthy();
expect(w1.find('.el-row .el-col-24').length).toBe(1);
expect(w2.find('.el-row .el-col-12').length).toBe(2);
expect(w3.find('.el-row .el-col-8').length).toBe(3);
expect(w4.find('.el-row .el-col-6').length).toBe(4);
expect(w5.find('.el-row .el-col-4').length).toBe(6);
expect(w6.find('.el-row .el-col-0').length).toBe(1);
});
it('Column spacing', () => {
const w = mount(
);
expect(w.find('.el-row .el-col-6').length).toBe(4);
expect(w.find('.el-row .el-col-6').at(0).prop('style').paddingLeft).toBe('10px');
expect(w.find('.el-row .el-col-6').at(0).prop('style').paddingRight).toBe('10px');
})
it('Hybrid layout', () => {
const w1 = mount(
);
const w2 = mount(
);
const w3 = mount(
);
expect(w1.find('.el-row .el-col-16').length).toBe(1);
expect(w1.find('.el-row .el-col-8').length).toBe(1);
expect(w2.find('.el-row .el-col-8').length).toBe(2);
expect(w2.find('.el-row .el-col-4').length).toBe(2);
expect(w3.find('.el-row .el-col-16').length).toBe(1);
expect(w3.find('.el-row .el-col-4').length).toBe(2);
})
it('Column offset', () => {
const w1 = mount(
);
const w2 = mount(
);
const w3 = mount(
);
expect(w1.find('.el-row .el-col-6').length).toBe(2);
expect(w1.find('.el-row .el-col-6.el-col-offset-6').length).toBe(1);
expect(w2.find('.el-row .el-col-6.el-col-offset-6').length).toBe(2);
expect(w3.find('.el-row .el-col-12.el-col-offset-6').length).toBe(1);
});
it('Alignment', () => {
const w1 = render(
);
const w2 = render(
);
const w3 = render(
);
const w4 = render(
);
const w5 = render(
);
expect(w1.hasClass('el-row--flex')).toBeTruthy();
expect(w2.hasClass('is-justify-center')).toBeTruthy();
expect(w3.hasClass('is-justify-end')).toBeTruthy();
expect(w4.hasClass('is-justify-space-between')).toBeTruthy();
expect(w5.hasClass('is-justify-space-around')).toBeTruthy();
});
it('Responsive Layout', () => {
const w = mount(
);
const w1 = mount(
);
expect(w.find('.el-col-24.el-col-xs-8.el-col-sm-6.el-col-md-4.el-col-lg-3').length).toBe(2);
expect(w.find('.el-col-24.el-col-xs-4.el-col-sm-6.el-col-md-8.el-col-lg-9').length).toBe(2);
expect(w1.find('.el-col-24.el-col-xs-0.el-col-sm-6.el-col-md-4.el-col-lg-3').length).toBe(1);
});
it('Row custom tag', () => {
const w = mount(
);
expect(w.find('section').length).toBe(1);
});
it('Column custom tag', () => {
const w = mount(
);
expect(w.find('.el-row section.el-col-24').length).toBe(1);
});
it('Row with align', () => {
const w1 = render(
);
const w2 = render(
);
expect(w1.hasClass('is-align-middle')).toBeTruthy();
expect(w2.hasClass('is-align-bottom')).toBeTruthy();
});
it('Column with push', () => {
const w = mount(
);
expect(w.find('.el-col-12').hasClass('el-col-push-12')).toBeTruthy();
});
it('Column with pull', () => {
const w = mount(
);
expect(w.find('.el-col-12').hasClass('el-col-pull-12')).toBeTruthy();
});
});