terrassumptions/client/src/tests/Dropdown.test.js

import React from "react";
import { shallow } from "enzyme";
import {
  CountryDropdown,
  CountryItem,
  Dropdown,
  DropdownGroup,
  findSelectedDisplay,
  Item,
} from "../components/util/GameCreationForm/Dropdown";

jest.mock("../domain/flagLookup");

import flagLookup from "../domain/flagLookup";

describe("DropdownGroup", () => {
  it("renders with no dropdowns", () => {
    const rendered = shallow(<DropdownGroup />);
    expect(rendered).toMatchSnapshot();
  });

  it("renders with dropdowns", () => {
    const rendered = shallow(
      <DropdownGroup>
        <Dropdown open="dd1" />
        <Dropdown open="dd2" />
        <Dropdown open="dd3" />
      </DropdownGroup>
    );
    expect(rendered).toMatchSnapshot();
  });

  it("can have a dropdown opened", () => {
    const rendered = shallow(
      <DropdownGroup>
        <Dropdown open="dd1" />
        <Dropdown open="dd2" />
        <Dropdown open="dd3" />
      </DropdownGroup>
    );
    rendered.find("Dropdown").at(1).prop("onClick")();
    expect(rendered).toMatchSnapshot();
  });

  it("can have a dropdown closed after opening", () => {
    const rendered = shallow(
      <DropdownGroup>
        <Dropdown open="dd1" />
        <Dropdown open="dd2" />
        <Dropdown open="dd3" />
      </DropdownGroup>
    );
    rendered.find("Dropdown").at(1).prop("onClick")();
    rendered.find("Dropdown").at(1).prop("onClick")();
    expect(rendered).toMatchSnapshot();
  });

  it("selecting a dropdown re-closes it", () => {
    const onSelect = jest.fn();
    const rendered = shallow(
      <DropdownGroup>
        <Dropdown open="dd1" />
        <Dropdown open="dd2" onSelect={onSelect} />
        <Dropdown open="dd3" />
      </DropdownGroup>
    );
    rendered.find("Dropdown").at(1).prop("onClick")();
    rendered.find("Dropdown").at(1).prop("onSelect")("test");
    expect(rendered).toMatchSnapshot();
    expect(onSelect).toHaveBeenCalledWith("test");
  });
});

describe("Dropdown", () => {
  it("renders closed", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(<Dropdown {...{ onSelect, onClick }} />);
    expect(rendered).toMatchSnapshot();
  });

  it("renders with no items", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(<Dropdown open {...{ onSelect, onClick }} />);
    expect(rendered).toMatchSnapshot();
  });

  it("renders with items", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <Dropdown open {...{ onSelect, onClick }}>
        <Item value="test1" />
        <Item value="test2" />
      </Dropdown>
    );
    expect(rendered).toMatchSnapshot();
  });

  it("can be clicked", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <Dropdown {...{ onSelect, onClick }}>
        <Item value="test1" />
        <Item value="test2" />
      </Dropdown>
    );
    rendered.find("div.button").first().simulate("click");
    expect(onClick).toHaveBeenCalled();
  });

  it("can be selected with Enter", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <Dropdown {...{ onSelect, onClick }}>
        <Item value="test1" />
        <Item value="test2" />
      </Dropdown>
    );
    rendered.find("div.button").first().simulate("keydown", { key: "Enter" });
    expect(onClick).toHaveBeenCalled();
  });

  it("cannot be selected with other keydowns", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <Dropdown {...{ onSelect, onClick }}>
        <Item value="test1" />
        <Item value="test2" />
      </Dropdown>
    );
    rendered.find("div.button").first().simulate("keydown", { key: "Escape" });
    expect(onClick).not.toHaveBeenCalled();
  });

  it("responds to item selection", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <Dropdown open {...{ onSelect, onClick }}>
        <Item value="test1" />
        <Item value="test2" />
      </Dropdown>
    );
    rendered.find("Item").first().prop("onSelect")("value", "display");
    expect(onSelect).toHaveBeenCalledWith("value");
    expect(rendered).toMatchSnapshot();
  });

  describe("findSelectedDisplay", () => {
    it("returns null when nothing is selected", () => {
      expect(findSelectedDisplay()).toBeNull();
    });

    it("extracts the display of the selected element", () => {
      expect(
        findSelectedDisplay("two", [
          <Item display="1" value="one" />,
          <Item display="2" value="two" />,
          <Item display="3" value="three" />,
        ])
      ).toBe("2");
    });

    it("extracts the value of the selected element if there is no display", () => {
      expect(
        findSelectedDisplay("two", [
          <Item value="one" />,
          <Item value="two" />,
          <Item value="three" />,
        ])
      ).toBe("two");
    });

    it("returns null if there is no matching element", () => {
      expect(
        findSelectedDisplay("four", [
          <Item value="one" />,
          <Item value="two" />,
          <Item value="three" />,
        ])
      ).toBeNull();
    });

    it("returns the first display found if there is more than one matching element", () => {
      expect(
        findSelectedDisplay("two", [
          <Item display="1" value="one" />,
          <Item display="2" value="two" />,
          <Item display="3" value="three" />,
          <Item display="4" value="two" />,
        ])
      ).toBe("2");
    });
  });
});

describe("CountryItem", () => {
  it("renders", () => {
    flagLookup.mockReturnValue("flag");
    const rendered = shallow(
      <CountryItem code="test-code" country="test-country" />
    );
    expect(rendered).toMatchSnapshot();
    expect(flagLookup).toHaveBeenCalledWith("test-code");
  });

  it("responds to click", () => {
    flagLookup.mockReturnValue("flag");
    const onSelect = jest.fn();
    const rendered = shallow(
      <CountryItem
        onSelect={onSelect}
        code="test-code"
        country="test-country"
      />
    );
    rendered.simulate("click");
    expect(onSelect).toHaveBeenCalledWith("test-code");
  });

  it("responds to keydown Enter", () => {
    flagLookup.mockReturnValue("flag");
    const onSelect = jest.fn();
    const rendered = shallow(
      <CountryItem
        onSelect={onSelect}
        code="test-code"
        country="test-country"
      />
    );
    rendered.simulate("keydown", { key: "Enter" });
    expect(onSelect).toHaveBeenCalledWith("test-code");
  });

  it("responds to click", () => {
    flagLookup.mockReturnValue("flag");
    const onSelect = jest.fn();
    const rendered = shallow(
      <CountryItem
        onSelect={onSelect}
        code="test-code"
        country="test-country"
      />
    );
    rendered.simulate("keydown", { key: "Escape" });
    expect(onSelect).not.toHaveBeenCalled();
  });
});

describe("CountryDropdown", () => {
  it("renders closed", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown {...{ countryLookup, selected, onSelect, onClick }} />
    );
    expect(rendered).toMatchSnapshot();
  });

  it("renders", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    expect(rendered).toMatchSnapshot();
  });

  it("renders with countries", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    expect(rendered).toMatchSnapshot();
  });

  it("can be clicked", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("div.button").first().simulate("click");
    expect(onClick).toHaveBeenCalled();
  });

  it("can be selected with Enter", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("div.button").first().simulate("keydown", { key: "Enter" });
    expect(onClick).toHaveBeenCalled();
  });

  it("cannot be selected with other keydowns", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("div.button").first().simulate("keydown", { key: "Escape" });
    expect(onClick).not.toHaveBeenCalled();
  });

  it("can have a country selected", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("CountryItem").first().prop("onSelect")();
    expect(onSelect).toHaveBeenCalled();
  });

  it("selects country based on searchbox", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered
      .find("input")
      .first()
      .simulate("change", { target: { value: "changed" } });
    expect(countryLookup).toHaveBeenCalledWith("changed");
  });

  it("can have first option selected with Enter", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("input").first().simulate("keydown", { key: "Enter" });
    expect(onSelect).toHaveBeenCalledWith("a21");
  });

  it("can have previously selected option selected with Escape", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("input").first().simulate("keydown", { key: "Escape" });
    expect(onSelect).toHaveBeenCalledWith("selected");
  });

  it("does not select from other keydowns", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("input").first().simulate("keydown", { key: "Tab" });
    expect(onSelect).not.toHaveBeenCalled();
  });
});

describe("Item", () => {
  it("renders with no text", () => {
    const onSelect = jest.fn();
    const display = "display";
    const value = "value";
    const rendered = shallow(<Item {...{ onSelect, display, value }} />);
    expect(rendered).toMatchSnapshot();
  });

  it("responds to click", () => {
    const onSelect = jest.fn();
    const display = "display";
    const value = "value";
    const rendered = shallow(<Item {...{ onSelect, display, value }} />);
    rendered.simulate("click");
    expect(onSelect).toHaveBeenCalledWith(value, display);
  });

  it("responds to enter", () => {
    const onSelect = jest.fn();
    const display = "display";
    const value = "value";
    const rendered = shallow(<Item {...{ onSelect, display, value }} />);
    rendered.simulate("keydown", { key: "Enter" });
    expect(onSelect).toHaveBeenCalledWith(value, display);
  });

  it("does not respond to other keydowns", () => {
    const onSelect = jest.fn();
    const display = "display";
    const value = "value";
    const rendered = shallow(<Item {...{ onSelect, display, value }} />);
    rendered.simulate("keydown", { key: "Escape" });
    expect(onSelect).not.toHaveBeenCalled();
  });

  it("responds to click with value when no display", () => {
    const onSelect = jest.fn();
    const value = "value";
    const rendered = shallow(<Item {...{ onSelect, value }} />);
    rendered.simulate("click");
    expect(onSelect).toHaveBeenCalledWith(value, value);
  });

  it("responds to click with children when no display or value", () => {
    const onSelect = jest.fn();
    const child = <div>child</div>;
    const rendered = shallow(<Item {...{ onSelect }}>{child}</Item>);
    rendered.simulate("click");
    expect(onSelect).toHaveBeenCalledWith(child, child);
  });
});