@kiwicom/orbit-components/src/InputField/__tests__/index.test.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

// @flow
import * as React from "react";
import { shallow, mount } from "enzyme";

import InputField from "../index";
import ButtonLink from "../../ButtonLink";
import TextLink from "../../TextLink";
import Visibility from "../../icons/Visibility";
import Search from "../../icons/Search";

describe(`InputField with help, prefix and suffix`, () => {
  const size = "normal";
  const type = "text";
  const name = "name";
  const label = "Label";
  const value = "value";
  const placeholder = "placeholder";
  const dataTest = "test";
  const minLength = 1;
  const maxLength = 10;
  const onChange = jest.fn();
  const onFocus = jest.fn();
  const onBlur = jest.fn();

  const component = shallow(
    <InputField
      size={size}
      type={type}
      name={name}
      label={label}
      value={value}
      placeholder={placeholder}
      minLength={minLength}
      maxLength={maxLength}
      dataTest={dataTest}
      prefix={<Search />}
      suffix={<ButtonLink transparent icon={<Visibility />} />}
      help={
        <div>
          Did you mean <TextLink>something</TextLink>?
        </div>
      }
      onChange={onChange}
      onFocus={onFocus}
      onBlur={onBlur}
    />,
  );
  const prefix = component.find("InputField__Prefix");
  const labelComponent = component.find("InputField__Field");
  const input = component.find("InputField__Input");
  const suffix = component.find("InputField__Suffix");

  it("should contain a label", () => {
    expect(
      component
        .find("FormLabel")
        .render()
        .text(),
    ).toBe(label);
  });
  it("should contain a icon as prefix", () => {
    expect(prefix.find("Search").exists()).toBe(true);
  });
  it("should contain an input", () => {
    expect(input.exists()).toBe(true);
  });
  it("should have passed props", () => {
    expect(input.prop("size")).toBe(size);
    expect(input.prop("type")).toBe(type);
    expect(input.prop("name")).toBe(name);
    expect(input.prop("value")).toBe(value);
    expect(input.prop("placeholder")).toBe(placeholder);
    expect(input.prop("maxLength")).toBe(maxLength);
    expect(input.prop("minLength")).toBe(minLength);
    expect(labelComponent.render().prop("data-test")).toBe(dataTest);
  });
  it("should contain a Button as suffix", () => {
    expect(suffix.find("ButtonLink").exists()).toBe(true);
  });
  it("should contain a fake div with styling", () => {
    expect(component.find("InputField__FakeInput").exists()).toBe(true);
  });
  it("should contain FeedBack help", () => {
    expect(component.find(`FormFeedback[type="help"]`).exists()).toBe(true);
  });
  it("should execute onChange method", () => {
    input.simulate("change");
    expect(onChange).toHaveBeenCalled();
  });
  it("should execute onFocus method", () => {
    input.simulate("focus");
    expect(onFocus).toHaveBeenCalled();
  });
  it("should execute onBlur method", () => {
    input.simulate("focus");
    input.simulate("blur");
    expect(onBlur).toHaveBeenCalled();
  });
  it("should match snapshot", () => {
    expect(component).toMatchSnapshot();
  });
});

describe(`Compact input`, () => {
  const component = shallow(<InputField label="Label" inlineLabel />);

  it("should render FormLabel in prefix", () => {
    expect(component.find("InputField__StyledInlineLabel").exists()).toBe(true);
  });
});

describe(`Required field`, () => {
  const label = "Label";

  const component = mount(<InputField label={label} required />);

  it("should render asterisk", () => {
    expect(component.find("FormLabel__StyledAsterisk").exists()).toBe(true);
  });
});

describe(`InputField number with error and help`, () => {
  const size = "normal";
  const type = "number";
  const minValue = 1;
  const maxValue = 5;

  const component = shallow(
    <InputField
      size={size}
      type={type}
      minValue={minValue}
      maxValue={maxValue}
      help={<div>Everything is fine.</div>}
      error={<div>Something went wrong.</div>}
    />,
  );

  it("should NOT contain a label", () => {
    expect(component.find("FormLabel").exists()).toBe(false);
  });
  it("should have passed props", () => {
    expect(component.find("InputField__Input").prop("size")).toBe(size);
    expect(component.find("InputField__Input").prop("type")).toBe(type);
    expect(component.find("InputField__Input").prop("min")).toBe(minValue);
    expect(component.find("InputField__Input").prop("max")).toBe(maxValue);
  });
  it("should NOT contain FeedBack help", () => {
    expect(component.find(`FormFeedback[type="help"]`).exists()).toBe(false);
  });
  it("should contain FeedBack error", () => {
    expect(component.find(`FormFeedback[type="error"]`).exists()).toBe(true);
  });
  it("should match snapshot", () => {
    expect(component).toMatchSnapshot();
  });
});