diff options
Diffstat (limited to 'browser/components/newtab/test/unit/content-src')
4 files changed, 156 insertions, 33 deletions
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx index dad4d19fa5..1d572ee3ce 100644 --- a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx +++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx @@ -54,9 +54,9 @@ describe("<DSCard>", () => { it("should render a SafeAnchor", () => { wrapper.setProps({ url: "https://foo.com" }); - assert.equal(wrapper.children().at(0).type(), SafeAnchor); + assert.equal(wrapper.children().at(1).type(), SafeAnchor); assert.propertyVal( - wrapper.children().at(0).props(), + wrapper.children().at(1).props(), "url", "https://foo.com" ); @@ -64,14 +64,14 @@ describe("<DSCard>", () => { it("should pass onLinkClick prop", () => { assert.propertyVal( - wrapper.children().at(0).props(), + wrapper.children().at(1).props(), "onLinkClick", wrapper.instance().onLinkClick ); }); it("should render DSLinkMenu", () => { - assert.equal(wrapper.children().at(1).type(), DSLinkMenu); + assert.equal(wrapper.children().at(3).type(), DSLinkMenu); }); it("should start with no .active class", () => { diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/FeatureHighlight.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/FeatureHighlight.test.jsx new file mode 100644 index 0000000000..2d7ef66ecf --- /dev/null +++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/FeatureHighlight.test.jsx @@ -0,0 +1,60 @@ +import { FeatureHighlight } from "content-src/components/DiscoveryStreamComponents/FeatureHighlight/FeatureHighlight"; +import { SponsoredContentHighlight } from "content-src/components/DiscoveryStreamComponents/FeatureHighlight/SponsoredContentHighlight"; +import React from "react"; +import { mount } from "enzyme"; + +describe("<FeatureHighlight>", () => { + let wrapper; + let fakeWindow; + + beforeEach(() => { + wrapper = mount(<FeatureHighlight />); + }); + + it("should render", () => { + assert.ok(wrapper.exists()); + assert.ok(wrapper.find(".feature-highlight").exists()); + }); + + it("should render a title", () => { + wrapper.setProps({ message: "foo" }); + assert.ok(wrapper.find(".feature-highlight-modal p").exists()); + assert.equal(wrapper.find(".feature-highlight-modal p").text(), "foo"); + }); + + it("should open a modal", () => { + assert.ok(wrapper.find(".feature-highlight-modal.closed").exists()); + wrapper.find(".toggle-button").simulate("click"); + assert.ok(wrapper.find(".feature-highlight-modal.opened").exists()); + wrapper.find(".icon-dismiss").simulate("click"); + assert.ok(wrapper.find(".feature-highlight-modal.closed").exists()); + }); + + it("should close a modal if clicking outside", () => { + fakeWindow = { + document: { + addEventListener: (event, handler) => { + fakeWindow.document.handleOutsideClick = handler; + }, + removeEventListener: () => {}, + }, + }; + wrapper.setProps({ windowObj: fakeWindow }); + + wrapper.find(".toggle-button").simulate("click"); + fakeWindow.document.handleOutsideClick({ target: null }); + }); +}); + +describe("<SponsoredContentHighlight>", () => { + let wrapper; + + beforeEach(() => { + wrapper = mount(<SponsoredContentHighlight />); + }); + + it("should render", () => { + assert.ok(wrapper.exists()); + assert.ok(wrapper.find(".sponsored-content-highlight").exists()); + }); +}); diff --git a/browser/components/newtab/test/unit/content-src/components/ModalOverlay.test.jsx b/browser/components/newtab/test/unit/content-src/components/ModalOverlay.test.jsx new file mode 100644 index 0000000000..2320e16fc3 --- /dev/null +++ b/browser/components/newtab/test/unit/content-src/components/ModalOverlay.test.jsx @@ -0,0 +1,69 @@ +import { ModalOverlayWrapper } from "content-src/components/ModalOverlay/ModalOverlay"; +import { mount } from "enzyme"; +import React from "react"; + +describe("ModalOverlayWrapper", () => { + let fakeDoc; + let sandbox; + let header; + beforeEach(() => { + sandbox = sinon.createSandbox(); + header = document.createElement("div"); + + fakeDoc = { + addEventListener: sandbox.stub(), + removeEventListener: sandbox.stub(), + body: { classList: { add: sandbox.stub(), remove: sandbox.stub() } }, + getElementById() { + return header; + }, + }; + }); + afterEach(() => { + sandbox.restore(); + }); + it("should add eventListener and a class on mount", async () => { + mount(<ModalOverlayWrapper document={fakeDoc} />); + assert.calledOnce(fakeDoc.addEventListener); + assert.calledWith(fakeDoc.body.classList.add, "modal-open"); + }); + + it("should remove eventListener on unmount", async () => { + const wrapper = mount(<ModalOverlayWrapper document={fakeDoc} />); + wrapper.unmount(); + assert.calledOnce(fakeDoc.addEventListener); + assert.calledOnce(fakeDoc.removeEventListener); + assert.calledWith(fakeDoc.body.classList.remove, "modal-open"); + }); + + it("should call props.onClose on an Escape key", async () => { + const onClose = sandbox.stub(); + mount(<ModalOverlayWrapper document={fakeDoc} onClose={onClose} />); + + // Simulate onkeydown being called + const [, callback] = fakeDoc.addEventListener.firstCall.args; + callback({ key: "Escape" }); + + assert.calledOnce(onClose); + }); + + it("should not call props.onClose on other keys than Escape", async () => { + const onClose = sandbox.stub(); + mount(<ModalOverlayWrapper document={fakeDoc} onClose={onClose} />); + + // Simulate onkeydown being called + const [, callback] = fakeDoc.addEventListener.firstCall.args; + callback({ key: "Ctrl" }); + + assert.notCalled(onClose); + }); + + it("should not call props.onClose when clicked outside dialog", async () => { + const onClose = sandbox.stub(); + const wrapper = mount( + <ModalOverlayWrapper document={fakeDoc} onClose={onClose} /> + ); + wrapper.find("div.modalOverlayOuter.active").simulate("click"); + assert.notCalled(onClose); + }); +}); diff --git a/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx b/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx index 1977066f0d..798bb9b8c7 100644 --- a/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx +++ b/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx @@ -1488,20 +1488,21 @@ describe("<TopSiteList>", () => { TOP_SITES_DEFAULT_ROWS * TOP_SITES_MAX_SITES_PER_ROW ); }); - it("should fill with placeholders if TopSites rows is less than TopSitesRows", () => { + it("should add a single placeholder is there is availible space in the row", () => { const rows = [{ url: "https://foo.com" }, { url: "https://bar.com" }]; + const availibleRows = 1; const wrapper = shallow( <TopSiteList {...DEFAULT_PROPS} TopSites={{ rows }} - TopSitesRows={1} + TopSitesRows={availibleRows} App={{ APP }} /> ); assert.lengthOf(wrapper.find(TopSite), 2, "topSites"); assert.lengthOf( wrapper.find(TopSitePlaceholder), - TOP_SITES_MAX_SITES_PER_ROW - 2, + availibleRows >= wrapper.find(TopSite).length ? 0 : 1, "placeholders" ); }); @@ -1522,11 +1523,7 @@ describe("<TopSiteList>", () => { /> ); assert.lengthOf(wrapper.find(TopSite), 2, "topSites"); - assert.lengthOf( - wrapper.find(TopSitePlaceholder), - TOP_SITES_MAX_SITES_PER_ROW - 2, - "placeholders" - ); + assert.lengthOf(wrapper.find(TopSitePlaceholder), 4, "placeholders"); }); it("should fill any holes in TopSites with placeholders", () => { const rows = [{ url: "https://foo.com" }]; @@ -1540,11 +1537,7 @@ describe("<TopSiteList>", () => { /> ); assert.lengthOf(wrapper.find(TopSite), 2, "topSites"); - assert.lengthOf( - wrapper.find(TopSitePlaceholder), - TOP_SITES_MAX_SITES_PER_ROW - 2, - "placeholders" - ); + assert.lengthOf(wrapper.find(TopSitePlaceholder), 1, "placeholders"); }); it("should update state onDragStart and clear it onDragEnd", () => { const wrapper = shallow(<TopSiteList {...DEFAULT_PROPS} App={{ APP }} />); @@ -1638,6 +1631,7 @@ describe("<TopSiteList>", () => { App={{ APP }} /> ); + const addButton = { isAddButton: true }; let instance = wrapper.instance(); instance.setState({ draggedIndex: 0, @@ -1652,7 +1646,7 @@ describe("<TopSiteList>", () => { site2, draggedSite, site3, - null, + addButton, null, null, null, @@ -1662,7 +1656,7 @@ describe("<TopSiteList>", () => { site2, site3, draggedSite, - null, + addButton, null, null, null, @@ -1671,7 +1665,7 @@ describe("<TopSiteList>", () => { assert.deepEqual(instance._makeTopSitesPreview(3), [ site2, site3, - null, + addButton, draggedSite, null, null, @@ -1683,7 +1677,7 @@ describe("<TopSiteList>", () => { site2, draggedSite, site3, - null, + addButton, null, null, null, @@ -1693,7 +1687,7 @@ describe("<TopSiteList>", () => { site3, site2, draggedSite, - null, + addButton, null, null, null, @@ -1704,7 +1698,7 @@ describe("<TopSiteList>", () => { site2, draggedSite, site3, - null, + addButton, null, null, null, @@ -1714,7 +1708,7 @@ describe("<TopSiteList>", () => { site2, site3, draggedSite, - null, + addButton, null, null, null, @@ -1725,7 +1719,7 @@ describe("<TopSiteList>", () => { site2, draggedSite, site3, - null, + addButton, null, null, null, @@ -1735,7 +1729,7 @@ describe("<TopSiteList>", () => { site2, site3, draggedSite, - null, + addButton, null, null, null, @@ -1752,7 +1746,7 @@ describe("<TopSiteList>", () => { draggedSite, site1, site3, - null, + addButton, null, null, null, @@ -1762,7 +1756,7 @@ describe("<TopSiteList>", () => { site1, site3, draggedSite, - null, + addButton, null, null, null, @@ -1779,7 +1773,7 @@ describe("<TopSiteList>", () => { draggedSite, site2, site1, - null, + addButton, null, null, null, @@ -1797,7 +1791,7 @@ describe("<TopSiteList>", () => { draggedSite, site2, site1, - null, + addButton, null, null, null, @@ -1822,13 +1816,13 @@ describe("<TopSiteList>", () => { }); describe("TopSitePlaceholder", () => { - it("should dispatch a TOP_SITES_EDIT action when edit-button is clicked", () => { + it("should dispatch a TOP_SITES_EDIT action when the addbutton is clicked", () => { const dispatch = sinon.spy(); const wrapper = shallow( - <TopSitePlaceholder dispatch={dispatch} index={7} /> + <TopSitePlaceholder dispatch={dispatch} index={7} isAddButton={true} /> ); - wrapper.find(".edit-button").first().simulate("click"); + wrapper.find(".add-button").first().simulate("click"); assert.calledOnce(dispatch); assert.calledWithExactly(dispatch, { |