/**
 * TEAM: frontend_infra
 * @flow
 */

// TODO: Fix this eslint issue on next edit. This is an autogenerated comment.
// eslint-disable-next-line flexport/no-legacy-dependencies
import {mount} from "enzyme";

import Label from "../Label";
import TextInput from "../TextInput";

function mountLabel(propOverrides: {...} = {}) {
  const defaultProps = {
    value: "Test label",
  };

  // $FlowFixMe[cannot-spread-inexact] upgrade 0.121.1 -> 0.122.0
  const mergedProps = {
    ...defaultProps,
    ...propOverrides,
  };
  return mount(<Label {...mergedProps} />);
}

describe("Label", () => {
  describe("handles display and value properly", () => {
    xit("focuses the first child input when the label is clicked", () => {
      const wrapper = mountLabel({
        children: (
          <>
            <TextInput value="test1" onChange={() => {}} />
            <TextInput value="test2" onChange={() => {}} />
          </>
        ),
      });
      const firstNestedTextInput = wrapper.find("input").at(0).instance();
      const secondNestedTextInput = wrapper.find("input").at(1).instance();

      wrapper.find("label").props().onClick();
      wrapper.update();

      // Make sure our first text input is focused
      expect(firstNestedTextInput).toBe(document.activeElement);

      // Make sure our second text input is not focused
      expect(secondNestedTextInput).not.toBe(document.activeElement);
    });

    it("renders label text", () => {
      const wrapper = mountLabel();
      expect(wrapper.find("label").contains("Test label")).toBe(true);
    });
  });
});