homehub/packages/homehub_app/tests/main/components/Dashboard.spec.js

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);
    });
  });
});