Merge pull request #64 from snowcoders/k2snowman69/addTests

Added some unit tests

Author: k2snowman69

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "editor.formatOnSave": true
-}
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "sortier.onSave": true
+}

src/component.test.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+
+import { Popover, PopoverProps } from "./popover";
+
+import { configure, shallow } from "enzyme";
+
+// Configure enzyme
+import Adapter = require("enzyme-adapter-react-16");
+configure({ adapter: new Adapter() });
+
+describe("External example", () => {
+  let defaultProps: PopoverProps;
+  let spy: jest.Mock<any>;
+
+  beforeEach(() => {
+    spy = jest.fn();
+    defaultProps = {
+      popperContent: (
+        <div className="globally_unique_classname">
+          <div>
+            This is a more complex example to show off how to unit test the
+            content that exists within the Popover component
+          </div>
+          <div>
+            <button onClick={spy}>Hi</button>
+          </div>
+        </div>
+      ),
+      popperType: "hover",
+      targetContent: (
+        <span>
+          <i>Icon</i>
+        </span>
+      ),
+      targetType: "hover"
+    };
+  });
+
+  it("Calls spy when button is clicked", () => {
+    // Render and find the popper content
+    let wrapper = shallow(<Popover {...defaultProps} />);
+    let popperContent = wrapper.find(".globally_unique_classname");
+    expect(popperContent).toHaveLength(1);
+
+    // Click the button that triggers the spy
+    let onClick = popperContent.find("button").props().onClick;
+    if (onClick != null) {
+      onClick({} as any);
+    } else {
+      throw new Error(
+        "Button onclick should be defined in test initialization"
+      );
+    }
+
+    expect(spy).toHaveBeenCalled();
+  });
+});

src/example.test.tsx

@@ -0,0 +1,296 @@
+import * as React from "react";
+
+import { Popover, PopoverProps } from "./popover";
+import { PopperHover } from "./popper.hover";
+import { TargetHover } from "./target.hover";
+
+import { configure, shallow } from "enzyme";
+
+// Configure enzyme
+import Adapter = require("enzyme-adapter-react-16");
+import { PopperBlur } from "./popper.blur";
+import { PopperClick } from "./popper.click";
+import { TargetClick } from "./target.click";
+configure({ adapter: new Adapter() });
+
+describe("Popover", () => {
+  let defaultProps: PopoverProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      popperContent: "Popper content",
+      popperType: "hover",
+      targetContent: "Target content",
+      targetType: "hover"
+    };
+  });
+
+  it("Renders", () => {
+    let wrapper = shallow(<Popover {...defaultProps} />);
+    let targetHover = wrapper.find(TargetHover);
+    let popperHover = wrapper.find(PopperHover);
+
+    expect(targetHover).toEqual(wrapper.childAt(0));
+    expect(popperHover).toEqual(wrapper.childAt(1));
+  });
+
+  it("Renders with wrapper", () => {
+    defaultProps = {
+      ...defaultProps,
+      wrapperElementProps: {
+        className: "wrapper"
+      },
+      wrapperElementType: "div"
+    };
+    let wrapper = shallow(<Popover {...defaultProps} />);
+    let targetHover = wrapper.find(TargetHover);
+    let popperHover = wrapper.find(PopperHover);
+
+    let wrapperElement = wrapper.childAt(0);
+    expect(wrapperElement.name()).toBe("div");
+    expect(wrapperElement.hasClass("wrapper")).toBe(true);
+
+    expect(targetHover).toEqual(wrapperElement.childAt(0));
+    expect(popperHover).toEqual(wrapperElement.childAt(1));
+  });
+
+  describe("Popper hover type", () => {
+    beforeEach(() => {
+      defaultProps = {
+        ...defaultProps,
+        popperType: "hover"
+      };
+    });
+
+    it("Renders closed by default", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popperHover = wrapper.find(PopperHover);
+      expect(popperHover).toHaveLength(1);
+      expect(popperHover.hasClass("visible")).toBe(false);
+    });
+
+    it("Renders open when being hovered", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popperHover = wrapper.find(PopperHover);
+      popperHover.props().onHoverChange(true);
+
+      popperHover = wrapper.find(PopperHover);
+      expect(popperHover).toHaveLength(1);
+      expect(popperHover.hasClass("visible")).toBe(true);
+    });
+  });
+
+  describe("Popper none type", () => {
+    beforeEach(() => {
+      defaultProps = {
+        ...defaultProps,
+        popperType: "none"
+      };
+    });
+
+    it("Renders closed by default", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popperHover = wrapper.find(PopperHover);
+      expect(popperHover).toHaveLength(1);
+      expect(popperHover.hasClass("visible")).toBe(false);
+    });
+
+    it("Renders closed even if hovered on", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popperHover = wrapper.find(PopperHover);
+      popperHover.props().onHoverChange(true);
+
+      popperHover = wrapper.find(PopperHover);
+      expect(popperHover).toHaveLength(1);
+      expect(popperHover.hasClass("visible")).toBe(false);
+    });
+  });
+
+  describe("Popper click type", () => {
+    beforeEach(() => {
+      defaultProps = {
+        ...defaultProps,
+        popperType: "click"
+      };
+    });
+
+    it("Renders closed by default", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popperClick = wrapper.find(PopperClick);
+      expect(popperClick).toHaveLength(1);
+      expect(popperClick.hasClass("visible")).toBe(false);
+    });
+
+    it("Renders closed when dismissed", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      // Hover on the target to open the popper
+      let targetHover = wrapper.find(TargetHover);
+      targetHover.props().onHoverChange(true);
+
+      // Verify the popper is open
+      let popperClick = wrapper.find(PopperClick);
+      expect(popperClick).toHaveLength(1);
+      expect(popperClick.hasClass("visible")).toBe(true);
+
+      // Now close and verify the popper
+      popperClick.props().onDismiss({} as any);
+      popperClick = wrapper.find(PopperClick);
+      expect(popperClick).toHaveLength(1);
+      expect(popperClick.hasClass("visible")).toBe(false);
+    });
+  });
+
+  describe("Popper blur type", () => {
+    beforeEach(() => {
+      defaultProps = {
+        ...defaultProps,
+        popperType: "blur"
+      };
+    });
+
+    it("Renders closed by default", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popper = wrapper.find(PopperBlur);
+      expect(popper).toHaveLength(1);
+      expect(popper.hasClass("visible")).toBe(false);
+    });
+
+    it("Renders closed when dismissed", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      // Hover on the target to open the popper
+      let targetHover = wrapper.find(TargetHover);
+      targetHover.props().onHoverChange(true);
+
+      // Verify the popper is open
+      let popper = wrapper.find(PopperBlur);
+      expect(popper).toHaveLength(1);
+      expect(popper.hasClass("visible")).toBe(true);
+
+      // Now close and verify the popper
+      popper.props().onDismiss({} as any);
+      popper = wrapper.find(PopperBlur);
+      expect(popper).toHaveLength(1);
+      expect(popper.hasClass("visible")).toBe(false);
+    });
+  });
+
+  describe("Target hover type", () => {
+    beforeEach(() => {
+      defaultProps = {
+        ...defaultProps,
+        popperType: "hover",
+        targetType: "hover"
+      };
+    });
+
+    it("Renders closed by default", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popper = wrapper.find(PopperHover);
+      expect(popper).toHaveLength(1);
+      expect(popper.hasClass("visible")).toBe(false);
+    });
+
+    it("Renders open/closed when clicked", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      // Click the target and open it
+      let targetHover = wrapper.find(TargetHover);
+      targetHover.props().onHoverChange(true);
+
+      // Verify the popper is open
+      let popper = wrapper.find(PopperHover);
+      expect(popper).toHaveLength(1);
+      expect(popper.hasClass("visible")).toBe(true);
+
+      // Now click the target again to close it
+      targetHover = wrapper.find(TargetHover);
+      targetHover.props().onHoverChange(false);
+      popper = wrapper.find(PopperHover);
+      expect(popper).toHaveLength(1);
+      expect(popper.hasClass("visible")).toBe(false);
+    });
+  });
+
+  describe("Target click type", () => {
+    beforeEach(() => {
+      defaultProps = {
+        ...defaultProps,
+        popperType: "hover",
+        targetType: "click"
+      };
+    });
+
+    it("Renders closed by default", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popper = wrapper.find(PopperHover);
+      expect(popper).toHaveLength(1);
+      expect(popper.hasClass("visible")).toBe(false);
+    });
+
+    it("Renders open/closed when clicked", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      // Click the target and open it
+      let targetClick = wrapper.find(TargetClick);
+      targetClick.props().onClick({} as any);
+
+      // Verify the popper is open
+      let popper = wrapper.find(PopperHover);
+      expect(popper).toHaveLength(1);
+      expect(popper.hasClass("visible")).toBe(true);
+
+      // Now click the target again to close it
+      targetClick = wrapper.find(TargetClick);
+      targetClick.props().onClick({} as any);
+      popper = wrapper.find(PopperHover);
+      expect(popper).toHaveLength(1);
+      expect(popper.hasClass("visible")).toBe(false);
+    });
+  });
+
+  describe("Uncontrolled component methods", () => {
+    it("Opens on request", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popperHover = wrapper.find(PopperHover);
+      expect(popperHover).toHaveLength(1);
+      expect(popperHover.hasClass("visible")).toBe(false);
+
+      (wrapper.instance() as Popover).open();
+
+      popperHover = wrapper.find(PopperHover);
+      expect(popperHover).toHaveLength(1);
+      expect(popperHover.hasClass("visible")).toBe(true);
+    });
+
+    it("Closes on request", () => {
+      let wrapper = shallow(<Popover {...defaultProps} />);
+
+      let popperHover = wrapper.find(PopperHover);
+      expect(popperHover).toHaveLength(1);
+      expect(popperHover.hasClass("visible")).toBe(false);
+
+      popperHover.props().onHoverChange(true);
+
+      popperHover = wrapper.find(PopperHover);
+      expect(popperHover).toHaveLength(1);
+      expect(popperHover.hasClass("visible")).toBe(true);
+
+      (wrapper.instance() as Popover).close();
+
+      popperHover = wrapper.find(PopperHover);
+      expect(popperHover).toHaveLength(1);
+      expect(popperHover.hasClass("visible")).toBe(false);
+    });
+  });
+});

src/popover.test.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { PopperBlur, PopperBlurProps } from "./popper.blur";
+
+import { configure, shallow } from "enzyme";
+
+// Configure enzyme
+import Adapter = require("enzyme-adapter-react-16");
+configure({ adapter: new Adapter() });
+
+describe("Popper.Blur", () => {
+  let defaultProps: PopperBlurProps;
+  let spy: jest.Mock<any>;
+
+  beforeEach(() => {
+    spy = jest.fn();
+    defaultProps = {
+      onDismiss: () => {}
+    };
+  });
+
+  it("Renders", () => {
+    // Render and find the popper content
+    let wrapper = shallow(<PopperBlur {...defaultProps} />);
+  });
+});