fleet/frontend/components/forms/queries/QueryForm/QueryForm.tests.jsx

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

import { fillInFormInput } from "test/helpers";
import targetMock from "test/target_mock";
import QueryForm from "./index";

const query = {
  id: 1,
  name: "All users",
  description: "Query to get all users",
  query: "SELECT * FROM users",
};
const queryText = "SELECT * FROM users";

const defaultProps = {
  handleSubmit: noop,
  onTargetSelect: noop,
  onOsqueryTableSelect: noop,
  onRunQuery: noop,
  onUpdate: noop,
};

describe("QueryForm - component", () => {
  beforeEach(targetMock);

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

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

  it("renders InputFields for the query name and description", () => {
    const form = mount(
      <QueryForm {...defaultProps} query={query} queryText={queryText} />
    );
    const inputFields = form.find("InputField");

    expect(inputFields.length).toEqual(2);
    expect(inputFields.find({ name: "name" }).length).toBeGreaterThan(0);
    expect(inputFields.find({ name: "description" }).length).toBeGreaterThan(0);
  });

  it("validates the query name before saving changes", () => {
    const updateSpy = jest.fn();
    const form = mount(
      <QueryForm
        {...defaultProps}
        formData={{ ...query, query: queryText }}
        onUpdate={updateSpy}
      />
    );
    const inputFields = form.find("InputField");
    const nameInput = inputFields.find({ name: "name" });

    fillInFormInput(nameInput, "");

    const saveDropButton = form.find(".query-form__save").hostNodes();

    saveDropButton.simulate("click");
    form.find("li").first().find("Button").simulate("click");

    expect(updateSpy).not.toHaveBeenCalled();
  });

  it("calls the handleSubmit prop when the form is valid", () => {
    const spy = jest.fn();
    const form = mount(
      <QueryForm
        {...defaultProps}
        formData={{ ...query, query: queryText }}
        onUpdate={spy}
      />
    );
    const inputFields = form.find("InputField");
    const nameInput = inputFields.find({ name: "name" });

    fillInFormInput(nameInput, "New query name");

    const saveDropButton = form.find(".query-form__save").hostNodes();

    saveDropButton.simulate("click");
    form.find("li").first().find("Button").simulate("click");

    expect(spy).toHaveBeenCalledWith({
      description: query.description,
      name: "New query name",
      query: queryText,
    });
  });

  it("enables the Save Changes button when the name input changes", () => {
    const form = mount(
      <QueryForm {...defaultProps} formData={{ ...query, query: queryText }} />
    );
    const inputFields = form.find("InputField");
    const nameInput = inputFields.find('input[name="name"]');
    let saveChangesOption = form
      .find("li.dropdown-button__option")
      .first()
      .find("Button");

    expect(saveChangesOption.props()).toMatchObject({
      disabled: true,
    });

    fillInFormInput(nameInput, "New query name");
    nameInput.simulate("change", { target: { value: "New query name" } });

    saveChangesOption = form
      .find("li.dropdown-button__option")
      .first()
      .find("Button");
    expect(saveChangesOption.props()).not.toMatchObject({
      disabled: true,
    });
  });

  it("enables the Save Changes button when the description input changes", () => {
    const form = mount(
      <QueryForm {...defaultProps} formData={{ ...query, query: queryText }} />
    );
    const inputFields = form.find("InputField");
    const descriptionInput = inputFields.find({ name: "description" });
    let saveChangesOption = form
      .find("li.dropdown-button__option")
      .first()
      .find("Button");

    expect(saveChangesOption.props()).toMatchObject({
      disabled: true,
    });

    fillInFormInput(descriptionInput, "New query description");

    saveChangesOption = form
      .find("li.dropdown-button__option")
      .first()
      .find("Button");
    expect(saveChangesOption.props()).not.toMatchObject({
      disabled: true,
    });
  });

  it('calls the onSaveAsNew prop when "Save As New" is clicked and the form is valid', () => {
    const onSaveAsNewSpy = jest.fn();
    const form = mount(
      <QueryForm
        {...defaultProps}
        formData={{ ...query, query: queryText }}
        handleSubmit={onSaveAsNewSpy}
      />
    );
    const inputFields = form.find("InputField");
    const nameInput = inputFields.find({ name: "name" });
    const saveAsNewOption = form
      .find("li.dropdown-button__option")
      .last()
      .find("Button");

    fillInFormInput(nameInput, "New query name");

    saveAsNewOption.simulate("click");

    expect(onSaveAsNewSpy).toHaveBeenCalled();
    expect(onSaveAsNewSpy).toHaveBeenCalledWith({
      ...query,
      name: "New query name",
      query: queryText,
    });
  });

  it('does not call the onSaveAsNew prop when "Save As New" is clicked and the form is not valid', () => {
    const onSaveAsNewSpy = jest.fn();
    const form = mount(
      <QueryForm
        {...defaultProps}
        formData={{ ...query, query: queryText }}
        handleSubmit={onSaveAsNewSpy}
      />
    );
    const inputFields = form.find("InputField");
    const nameInput = inputFields.find({ name: "name" });
    const saveAsNewOption = form
      .find("li.dropdown-button__option")
      .last()
      .find("Button");

    fillInFormInput(nameInput, "");

    saveAsNewOption.simulate("click");

    expect(onSaveAsNewSpy).not.toHaveBeenCalled();
    expect(form.state()).toMatchObject({
      errors: {
        name: "Title must be present",
      },
    });
  });
});