From af567dd4c0175843931e3f40b6efc895bba4255f Mon Sep 17 00:00:00 2001 From: Steev Sachs Date: Tue, 25 Sep 2018 11:09:55 -0400 Subject: [PATCH] Add missing break to prevent showing toolip on focus when on="hover" * Update tests to use `on` prop instead of `triggerOn` * Add react-testing-library and update tests to test behavior --- __test__/__snapshots__/index.test.js.snap | 463 ++-------------------- __test__/index.test.js | 75 ++-- package.json | 1 + src/Popup.js | 1 + 4 files changed, 75 insertions(+), 465 deletions(-) diff --git a/__test__/__snapshots__/index.test.js.snap b/__test__/__snapshots__/index.test.js.snap index 5055d9d..238dc1a 100644 --- a/__test__/__snapshots__/index.test.js.snap +++ b/__test__/__snapshots__/index.test.js.snap @@ -3,7 +3,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 1`] = ` } - triggerOn="click" >
} - triggerOn="click" > } - triggerOn="click" > popup content `; -exports[`it should render correctly on click 1`] = ` - - - Trigger - - } - > -
-
-
-
- popup content -
- - - - - -`; - -exports[`it should render correctly on click (triggerOn = 'click') 1`] = ` - - - Trigger - - } - triggerOn="click" - > -
-
-
-
- popup content -
- - - - - -`; - exports[`it should render correctly on click and will update the the popup content text 1`] = ` `; -exports[`it should render correctly on hover (triggerOn = 'focus') 1`] = ` - - - } - triggerOn="focus" - > - - - - - -`; - -exports[`it should render correctly on hover (triggerOn = 'hover') 1`] = ` - - - Trigger - - } - triggerOn="hover" - > - - - - - -`; - exports[`it should rendered in the bottom center position 1`] = ` } - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" >
} - triggerOn="click" > ( popup content ); -const PopupTestInput = props => ( - }> - popup content - -); const PopupTriggerFunction = props => ( ( {(close, open) =>
Popup content {open ? "open" : "close"}
} ); + +afterEach(() => cleanup()); + test("it should render correctly ", () => { - const popup = shallow(); + const popup = shallow(); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should render correctly on click ", () => { - const popup = mount(); - popup.find("button").simulate("click"); - expect(shallowToJson(popup)).toMatchSnapshot(); + const { getByText } = render(); + fireEvent.click(getByText("Trigger")); + expect(getByText("popup content")).toBeDefined(); }); -test("it should render correctly on click (triggerOn = 'click') ", () => { - const popup = mount(); - popup.find("button").simulate("click"); - expect(shallowToJson(popup)).toMatchSnapshot(); +test("it should render correctly on click (on = 'click') ", () => { + const { getByText } = render(); + fireEvent.click(getByText("Trigger")); + expect(getByText("popup content")).toBeDefined(); }); -test("it should render correctly on hover (triggerOn = 'hover') ", () => { - const popup = mount(); - popup.find("button").simulate("mouseEnter"); - expect(shallowToJson(popup)).toMatchSnapshot(); +test("it should render correctly on hover (on = 'hover') ", async () => { + const { getByText } = render(); + fireEvent.mouseOver(getByText("Trigger")); + await waitForElement(() => getByText("popup content")); }); -test("it should render correctly on hover (triggerOn = 'focus') ", () => { - const popup = mount(); - popup.find("input").simulate("focus"); - expect(shallowToJson(popup)).toMatchSnapshot(); +test("it should not render on hover (on = 'focus') ", async () => { + const { getByText, queryByText } = render(); + fireEvent.mouseOver(getByText("Trigger")); + expect(queryByText("popup content")).toBeNull(); +}); + +test("it should not render on focus (on = 'hover') ", () => { + const { getByText, queryByText } = render(); + fireEvent.focus(getByText("Trigger")); + expect(queryByText("popup content")).toBeNull(); }); // trigger as function @@ -79,7 +84,7 @@ test("it should render correctly on click and will update the the popup content // closeOnDocumentClick Tests PopupContentAsFunction test("it shouldn't close on click outside popup ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); popup.find("div.popup-overlay").simulate("click"); @@ -87,7 +92,7 @@ test("it shouldn't close on click outside popup ", () => { }); test("it should close on click outside popup (closeOnDocumentClick = true )", () => { const popup = mount( - + ); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); @@ -98,65 +103,65 @@ test("it should close on click outside popup (closeOnDocumentClick = true )", () // position Tests test("it should rendered in the top left position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the top center position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the top right position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the bottom left position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the bottom center position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the bottom right position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the right top position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the right center position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the right bottom position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the left top position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the left center position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); test("it should rendered in the left bottom position ", () => { - const popup = mount(); + const popup = mount(); popup.find("button").simulate("click"); expect(shallowToJson(popup)).toMatchSnapshot(); }); diff --git a/package.json b/package.json index 6b44ef4..6cb0744 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "prop-types": "^15.6.0", "react": "^16.0.0", "react-dom": "^16.0.0", + "react-testing-library": "^5.1.0", "story-router": "^1.0.1", "why-did-you-update": "^0.1.1" }, diff --git a/src/Popup.js b/src/Popup.js index 21bf6a8..5da2088 100644 --- a/src/Popup.js +++ b/src/Popup.js @@ -215,6 +215,7 @@ export default class Popup extends React.PureComponent { case "hover": triggerProps.onMouseEnter = this.onMouseEnter; triggerProps.onMouseLeave = this.onMouseLeave; + break; case "focus": triggerProps.onFocus = this.onMouseEnter; break;