121 lines
3.6 KiB
JavaScript
121 lines
3.6 KiB
JavaScript
import {shallow} from 'enzyme';
|
|
import React from 'react';
|
|
import {Responsive} from 'react-grid-layout';
|
|
|
|
import * as Dashboard from 'src/main/components/Dashboard';
|
|
|
|
describe('src/main/components/Dashboard', () => {
|
|
describe('ControlledDashboard', () => {
|
|
let layout = null;
|
|
let mockOnGridLayoutChange = null;
|
|
|
|
beforeEach(() => {
|
|
layout = [
|
|
{i: 'test2', x: 1, y: 0, w: 1, h: 1},
|
|
{i: 'test', x: 0, y: 0, w: 1, h: 3},
|
|
];
|
|
mockOnGridLayoutChange = jasmine.createSpy();
|
|
});
|
|
|
|
it('configures and renders the Responsive grid', () => {
|
|
// Given
|
|
const component = shallow(
|
|
<Dashboard.ControlledDashboard
|
|
layout={layout}
|
|
width={1024}
|
|
onGridLayoutChange={mockOnGridLayoutChange}
|
|
>
|
|
<span key="test">It works!</span>
|
|
</Dashboard.ControlledDashboard>
|
|
);
|
|
|
|
const expectedLayouts = {
|
|
lg: layout,
|
|
md: [
|
|
{i: 'test', x: 0, y: 0, w: 12, h: 3},
|
|
{i: 'test2', x: 0, y: 3, w: 12, h: 1},
|
|
],
|
|
};
|
|
|
|
// Then
|
|
const responsiveGrid = component.find(Responsive).at(0);
|
|
expect(responsiveGrid.exists()).toBe(true);
|
|
expect(responsiveGrid.prop('breakpoints')).toEqual({lg: 1023, md: 0});
|
|
expect(responsiveGrid.prop('cols')).toEqual({lg: 12, md: 12});
|
|
expect(responsiveGrid.prop('containerPadding')).toEqual({
|
|
lg: [10, 10],
|
|
md: [10, 10],
|
|
});
|
|
expect(responsiveGrid.prop('draggableHandle')).toEqual(
|
|
'.draggable-handle',
|
|
);
|
|
expect(responsiveGrid.prop('isDraggable')).toBe(true);
|
|
expect(responsiveGrid.prop('isResizable')).toBe(true);
|
|
expect(responsiveGrid.prop('layouts')).toEqual(expectedLayouts);
|
|
expect(responsiveGrid.prop('rowHeight')).toEqual(30);
|
|
expect(responsiveGrid.prop('width')).toEqual(1024);
|
|
expect(responsiveGrid.prop('onLayoutChange')).toEqual(
|
|
mockOnGridLayoutChange
|
|
);
|
|
});
|
|
|
|
it('renders as read-only on non-desktop screens', () => {
|
|
// Given
|
|
const component = shallow(
|
|
<Dashboard.ControlledDashboard
|
|
layout={layout}
|
|
width={1023}
|
|
onGridLayoutChange={mockOnGridLayoutChange}
|
|
>
|
|
<span key="test">It works!</span>
|
|
</Dashboard.ControlledDashboard>
|
|
);
|
|
|
|
// Then
|
|
expect(component.hasClass('read-only')).toBe(true);
|
|
|
|
const responsiveGrid = component.find(Responsive).at(0);
|
|
expect(responsiveGrid.prop('isDraggable')).toBe(false);
|
|
expect(responsiveGrid.prop('isResizable')).toBe(false);
|
|
});
|
|
|
|
it('renders as read-only', () => {
|
|
// Given
|
|
const component = shallow(
|
|
<Dashboard.ControlledDashboard
|
|
layout={layout}
|
|
readOnly={true}
|
|
width={1024}
|
|
onGridLayoutChange={mockOnGridLayoutChange}
|
|
>
|
|
<span key="test">It works!</span>
|
|
</Dashboard.ControlledDashboard>
|
|
);
|
|
|
|
// Then
|
|
expect(component.hasClass('read-only')).toBe(true);
|
|
|
|
const responsiveGrid = component.find(Responsive).at(0);
|
|
expect(responsiveGrid.prop('isDraggable')).toBe(false);
|
|
expect(responsiveGrid.prop('isResizable')).toBe(false);
|
|
});
|
|
|
|
it('renders the children', () => {
|
|
// Given
|
|
const children = <span key="test">It works!</span>;
|
|
const component = shallow(
|
|
<Dashboard.ControlledDashboard
|
|
layout={layout}
|
|
width={1024}
|
|
onGridLayoutChange={mockOnGridLayoutChange}
|
|
>
|
|
{children}
|
|
</Dashboard.ControlledDashboard>
|
|
);
|
|
|
|
// Then
|
|
expect(component.contains(children)).toBe(true);
|
|
});
|
|
});
|
|
});
|