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

import {shallow} from 'enzyme';
import React from 'react';

import {Button, Form, Modal} from 'src/components';
import * as AddDashboardModal from 'src/main/components/AddDashboardModal';

describe('src/main/components/AddDashboardModal', () => {
  describe('AddDashboardModal', () => {
    let mockOnClose = null;
    let mockOnSave = null;

    beforeEach(() => {
      mockOnClose = jasmine.createSpy();
      mockOnSave = jasmine.createSpy();
    });

    it('closes the modal when it hides', async () => {
      // Given
      const component = shallow(
        <AddDashboardModal.AddDashboardModal
          show={true}
          onClose={mockOnClose}
          onSave={mockOnSave}
        />
      );

      // When
      component.find(Form.Control).at(0).simulate(
        'change', {target: {value: 'spam'}}
      );

      const modal = component.find(Modal).at(0);
      await modal.invoke('onHide')();

      // Then
      expect(component.find(Form.Control).at(0).prop('value')).toEqual('');
      expect(mockOnClose).toHaveBeenCalled();
    });

    it('configures and renders the name input', () => {
      // Given
      const component = shallow(
        <AddDashboardModal.AddDashboardModal
          show={true}
          onClose={mockOnClose}
          onSave={mockOnSave}
        />
      );

      // When
      const nameInput = component.find(Form.Control).at(0);

      // Then
      expect(nameInput.exists()).toBe(true);
      expect(nameInput.prop('value')).toEqual('');
    });

    it('updates the state when name input changes', () => {
      // Given
      const component = shallow(
        <AddDashboardModal.AddDashboardModal
          show={true}
          onClose={mockOnClose}
          onSave={mockOnSave}
        />
      );

      // When
      component.find(Form.Control).at(0).simulate(
        'change', {target: {value: 'spam'}}
      );

      // Then
      const nameInput = component.find(Form.Control).at(0);
      expect(nameInput.prop('value')).toEqual('spam');
    });

    it('closes the modal when cancel button is clicked', () => {
      // Given
      const component = shallow(
        <AddDashboardModal.AddDashboardModal
          show={true}
          onClose={mockOnClose}
          onSave={mockOnSave}
        />
      );

      // When
      component.find(Form.Control).at(0).simulate(
        'change', {target: {value: 'spam'}}
      );
      component.find(Button).at(0).simulate('click');

      // Then
      const nameInput = component.find(Form.Control).at(0);
      expect(nameInput.prop('value')).toEqual('');
      expect(mockOnClose).toHaveBeenCalled();
    });

    it('saves and closes the modal when the save button is clicked', () => {
      // Given
      const component = shallow(
        <AddDashboardModal.AddDashboardModal
          show={true}
          onClose={mockOnClose}
          onSave={mockOnSave}
        />
      );

      // When
      component.find(Form.Control).at(0).simulate(
        'change', {target: {value: 'spam'}}
      );
      component.find(Button).at(1).simulate('click');

      // Then
      const nameInput = component.find(Form.Control).at(0);
      expect(nameInput.prop('value')).toEqual('');
      expect(mockOnSave).toHaveBeenCalledWith('spam');
      expect(mockOnClose).toHaveBeenCalled();
    });
  });
});