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

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

import ConfirmInviteForm from "components/forms/ConfirmInviteForm";
import { fillInFormInput } from "test/helpers";

describe("ConfirmInviteForm - component", () => {
  const handleSubmitSpy = jest.fn();
  const inviteToken = "abc123";
  const formData = { invite_token: inviteToken };
  const form = mount(
    <ConfirmInviteForm formData={formData} handleSubmit={handleSubmitSpy} />
  );

  const nameInput = form.find({ name: "name" }).find("input");
  const passwordConfirmationInput = form
    .find({ name: "password_confirmation" })
    .find("input");
  const passwordInput = form.find({ name: "password" }).find("input");
  const submitBtn = form.find("button");
  const usernameInput = form.find({ name: "username" }).find("input");

  it("renders", () => {
    expect(form.length).toEqual(1);
  });

  it("renders the base error", () => {
    const baseError = "Unable to authenticate the current user";
    const formWithError = mount(
      <ConfirmInviteForm
        serverErrors={{ base: baseError }}
        handleSubmit={noop}
      />
    );
    const formWithoutError = mount(<ConfirmInviteForm handleSubmit={noop} />);

    expect(formWithError.text()).toContain(baseError);
    expect(formWithoutError.text()).not.toContain(baseError);
  });

  it("calls the handleSubmit prop with the invite_token when valid", () => {
    fillInFormInput(nameInput, "Gnar Dog");
    fillInFormInput(usernameInput, "gnardog");
    fillInFormInput(passwordInput, "p@ssw0rd");
    fillInFormInput(passwordConfirmationInput, "p@ssw0rd");
    submitBtn.simulate("click");

    expect(handleSubmitSpy).toHaveBeenCalledWith({
      ...formData,
      name: "Gnar Dog",
      username: "gnardog",
      password: "p@ssw0rd",
      password_confirmation: "p@ssw0rd",
    });
  });

  describe("name input", () => {
    it("changes form state on change", () => {
      fillInFormInput(nameInput, "Gnar Dog");

      expect(form.state().formData).toMatchObject({ name: "Gnar Dog" });
    });

    it("validates the field must be present", () => {
      fillInFormInput(nameInput, "");
      form.find("button").simulate("click");

      expect(form.state().errors).toMatchObject({
        name: "Full name must be present",
      });
    });
  });

  describe("username input", () => {
    it("changes form state on change", () => {
      fillInFormInput(usernameInput, "gnardog");

      expect(form.state().formData).toMatchObject({ username: "gnardog" });
    });

    it("validates the field must be present", () => {
      fillInFormInput(usernameInput, "");
      submitBtn.simulate("click");

      expect(form.state().errors).toMatchObject({
        username: "Username must be present",
      });
    });
  });

  describe("password input", () => {
    it("changes form state on change", () => {
      fillInFormInput(passwordInput, "p@ssw0rd");

      expect(form.state().formData).toMatchObject({ password: "p@ssw0rd" });
    });

    it("validates the field must be present", () => {
      fillInFormInput(passwordInput, "");
      form.find("button").simulate("click");

      expect(form.state().errors).toMatchObject({
        password: "Password must be present",
      });
    });
  });

  describe("password_confirmation input", () => {
    it("changes form state on change", () => {
      fillInFormInput(passwordConfirmationInput, "p@ssw0rd");

      expect(form.state().formData).toMatchObject({
        password_confirmation: "p@ssw0rd",
      });
    });

    it("validates the password_confirmation matches the password", () => {
      fillInFormInput(passwordInput, "p@ssw0rd");
      fillInFormInput(passwordConfirmationInput, "another-password");
      form.find("button").simulate("click");

      expect(form.state().errors).toMatchObject({
        password_confirmation: "Password confirmation does not match password",
      });
    });

    it("validates the field must be present", () => {
      fillInFormInput(passwordConfirmationInput, "");
      form.find("button").simulate("click");

      expect(form.state().errors).toMatchObject({
        password_confirmation: "Password confirmation must be present",
      });
    });
  });
});