fleet/frontend/components/forms/UserSettingsForm/UserSettingsForm.tests.jsx

import React from 'react';
import { mount } from 'enzyme';
import { noop } from 'lodash';

import UserSettingsForm from 'components/forms/UserSettingsForm';
import helpers from 'test/helpers';

const { fillInFormInput, itBehavesLikeAFormInputElement } = helpers;

describe('UserSettingsForm - component', () => {
  const defaultProps = {
    handleSubmit: noop,
    onCancel: noop,
  };

  it('has the correct fields', () => {
    const form = mount(<UserSettingsForm {...defaultProps} />);

    itBehavesLikeAFormInputElement(form, 'email');
    itBehavesLikeAFormInputElement(form, 'name');
    itBehavesLikeAFormInputElement(form, 'username');
  });

  it('calls the handleSubmit props with form data', () => {
    const handleSubmitSpy = jest.fn();
    const props = { ...defaultProps, handleSubmit: handleSubmitSpy };
    const form = mount(<UserSettingsForm {...props} />);
    const expectedFormData = { email: 'email@example.com', name: 'Jim Example', username: 'jimmyexamples' };
    const emailInput = form.find({ name: 'email' }).find('input');
    const nameInput = form.find({ name: 'name' }).find('input');
    const usernameInput = form.find({ name: 'username' }).find('input');

    fillInFormInput(emailInput, expectedFormData.email);
    fillInFormInput(nameInput, expectedFormData.name);
    fillInFormInput(usernameInput, expectedFormData.username);

    form.find('form').simulate('submit');

    expect(handleSubmitSpy).toHaveBeenCalledWith(expectedFormData);
  });

  it('initializes the form with the users data', () => {
    const user = { email: 'email@example.com', name: 'Jim Example', username: 'jimmyexamples' };
    const props = { ...defaultProps, formData: user };
    const form = mount(<UserSettingsForm {...props} />);

    expect(form.state().formData).toEqual(user);
  });
});