import React from "react";
import { mount } from "enzyme";
import Search from "./Search";

describe("side-nav/Search", () => {
  it("allows value to be changed only by onChange", () => {
    const wrapper = mount(<Search value="foo" />);
    const input = wrapper.find("input");

    expect(input.prop("value")).toEqual("foo");
    input.simulate("change", { target: { value: "bar" } });
    expect(input.prop("value")).toEqual("bar");

    wrapper.setProps({ value: "baz" });
    expect(input.prop("value")).toEqual("bar"); // Incoming props are ignored
  });
});

@@ -553,13 +553,549 @@
 ed%0A  %7D);
+%0A%0A  it(%22renders a button to clear input%22, () =%3E %7B%0A    const wrapper = mount(%3CSearch /%3E);%0A    const input = wrapper.find(%22input%22);%0A%0A    expect(wrapper.find(%22.hig__side-nav__search__clear%22)).toHaveLength(0);%0A    input.simulate(%22change%22, %7B target: %7B value: %22bar%22 %7D %7D);%0A    expect(wrapper.find(%22.hig__side-nav__search__clear%22)).toHaveLength(1);%0A%0A    wrapper.find(%22.hig__side-nav__search__clear%22).simulate(%22click%22);%0A    expect(input.prop(%22value%22)).toEqual(%22%22);%0A    expect(wrapper.find(%22.hig__side-nav__search__clear%22)).toHaveLength(0);%0A  %7D);
 %0A%7D);%0A

Test clear button on side-nav search