react-dazzle/test/components/Row.spec.js

The simple yet flexible dashbording solution for React

import { expect } from 'chai';
import React from 'react';
import { mount, shallow } from 'enzyme';
import Column from '../../lib/components/Column';
import Row from '../../lib/components/Row';
import Widgets from '../../lib/components/Widgets';
import TestComponent from '../fake/TestComponent';
import TestCustomFrame from '../fake/TestCustomFrame';
import ContainerWithDndContext from '../fake/ContainerWithDndContext';

function setup() {
  const columns = [{
    className: 'col-md-4 col-sm-6 col-xs-6',
    widgets: [{ key: 'HelloWorld' }],
  }, {
    className: 'col-md-4 col-sm-6 col-xs-6',
    widgets: [{ key: 'HelloWorld' }],
  }, {
    className: 'col-md-4 col-sm-6 col-xs-6',
    widgets: [{ key: 'HelloWorld' }],
  }];

  const widgets = {
    HelloWorld: {
      type: TestComponent,
      title: 'Sample Hello World App',
    },
  };

  return {
    columns,
    widgets,
    onAdd: () => {},
    onRemove: () => {},
    layout: {},
    rowIndex: 1,
  };
}

describe('<Row />', () => {
  /* eslint max-len: "off" */
  it('Should render the correct number of <Column />', () => {
    const { columns, widgets } = setup();
    const component = mount(<ContainerWithDndContext><Row columns={columns} widgets={widgets} /></ContainerWithDndContext>);
    expect(component.find(Column)).to.have.length(3);
  });

  it('Should have the row class rendered', () => {
    const { columns, widgets, onAdd, layout, rowIndex } = setup();

    const component = shallow(
      <Row
        rowClass="RowClass"
        columns={columns}
        widgets={widgets}
        onAdd={onAdd}
        layout={layout}
        rowIndex={rowIndex}
        editable
      />
    );
    expect(component.find('.RowClass')).to.have.length(1);
  });

  it('Should pass the required properties to <Column />', () => {
    const { columns, widgets, onAdd, layout, rowIndex } = setup();
    const component = mount(
      <ContainerWithDndContext>
        <Row
          columns={columns}
          widgets={widgets}
          onAdd={onAdd}
          layout={layout}
          rowIndex={rowIndex}
          editable
        />
      </ContainerWithDndContext>
    );
    expect(component.find(Column).first().prop('className')).to.equal('col-md-4 col-sm-6 col-xs-6');
    expect(component.find(Column).first().prop('onAdd')).to.equal(onAdd);
    expect(component.find(Column).first().prop('layout')).to.equal(layout);
    expect(component.find(Column).first().prop('rowIndex')).to.equal(rowIndex);
    expect(component.find(Column).first().prop('columnIndex')).to.equal(0);
    expect(component.find(Column).first().prop('editable')).to.equal(true);
  });

  it('Should pass the required properties to <Widgets />', () => {
    const { columns, widgets, onAdd, onRemove, layout, rowIndex } = setup();
    const component = mount(
      <ContainerWithDndContext>
        <Row
          columns={columns}
          widgets={widgets}
          onAdd={onAdd}
          onRemove={onRemove}
          layout={layout}
          rowIndex={rowIndex}
          frameComponent={TestCustomFrame}
          editable
        />
      </ContainerWithDndContext>
    );
    expect(component.find(Widgets).first().prop('widgets')).to.equal(columns[0].widgets);
    expect(component.find(Widgets).first().prop('widgetTypes')).to.equal(widgets);
    expect(component.find(Widgets).first().prop('onRemove')).to.equal(onRemove);
    expect(component.find(Widgets).first().prop('layout')).to.equal(layout);
    expect(component.find(Widgets).first().prop('rowIndex')).to.equal(rowIndex);
    expect(component.find(Widgets).first().prop('columnIndex')).to.equal(0);
    expect(component.find(Widgets).first().prop('editable')).to.equal(true);
    expect(component.find(Widgets).first().prop('frameComponent')).to.equal(TestCustomFrame);
  });
});