diff options
Diffstat (limited to 'browser/components/newtab/test/unit/content-src/components/DiscoveryStreamBase.test.jsx')
| -rw-r--r-- | browser/components/newtab/test/unit/content-src/components/DiscoveryStreamBase.test.jsx | 313 |
1 files changed, 313 insertions, 0 deletions
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamBase.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamBase.test.jsx new file mode 100644 index 0000000000..7720e07327 --- /dev/null +++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamBase.test.jsx @@ -0,0 +1,313 @@ +import { + _DiscoveryStreamBase as DiscoveryStreamBase, + isAllowedCSS, +} from "content-src/components/DiscoveryStreamBase/DiscoveryStreamBase"; +import { GlobalOverrider } from "test/unit/utils"; +import { CardGrid } from "content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid"; +import { CollapsibleSection } from "content-src/components/CollapsibleSection/CollapsibleSection"; +import { DSMessage } from "content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage"; +import { HorizontalRule } from "content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule"; +import { Navigation } from "content-src/components/DiscoveryStreamComponents/Navigation/Navigation"; +import React from "react"; +import { shallow } from "enzyme"; +import { SectionTitle } from "content-src/components/DiscoveryStreamComponents/SectionTitle/SectionTitle"; +import { TopSites } from "content-src/components/TopSites/TopSites"; + +describe("<isAllowedCSS>", () => { + it("should allow colors", () => { + assert.isTrue(isAllowedCSS("color", "red")); + }); + + it("should allow chrome urls", () => { + assert.isTrue( + isAllowedCSS( + "background-image", + `url("chrome://global/skin/icons/info.svg")` + ) + ); + }); + + it("should allow chrome urls", () => { + assert.isTrue( + isAllowedCSS( + "background-image", + `url("chrome://browser/skin/history.svg")` + ) + ); + }); + + it("should allow allowed https urls", () => { + assert.isTrue( + isAllowedCSS( + "background-image", + `url("https://img-getpocket.cdn.mozilla.net/media/image.png")` + ) + ); + }); + + it("should disallow other https urls", () => { + assert.isFalse( + isAllowedCSS( + "background-image", + `url("https://mozilla.org/media/image.png")` + ) + ); + }); + + it("should disallow other protocols", () => { + assert.isFalse( + isAllowedCSS( + "background-image", + `url("ftp://mozilla.org/media/image.png")` + ) + ); + }); + + it("should allow allowed multiple valid urls", () => { + assert.isTrue( + isAllowedCSS( + "background-image", + `url("https://img-getpocket.cdn.mozilla.net/media/image.png"), url("chrome://browser/skin/history.svg")` + ) + ); + }); + + it("should disallow if any invaild", () => { + assert.isFalse( + isAllowedCSS( + "background-image", + `url("chrome://browser/skin/history.svg"), url("ftp://mozilla.org/media/image.png")` + ) + ); + }); +}); + +describe("<DiscoveryStreamBase>", () => { + let wrapper; + let globals; + let sandbox; + + function mountComponent(props = {}) { + const defaultProps = { + config: { collapsible: true }, + layout: [], + feeds: { loaded: true }, + spocs: { + loaded: true, + data: { spocs: null }, + }, + ...props, + }; + return shallow( + <DiscoveryStreamBase + locale="en-US" + DiscoveryStream={defaultProps} + Prefs={{ + values: { + "feeds.section.topstories": true, + "feeds.system.topstories": true, + "feeds.topsites": true, + }, + }} + App={{ + locale: "en-US", + }} + document={{ + documentElement: { lang: "en-US" }, + }} + Sections={[ + { + id: "topstories", + learnMore: { link: {} }, + pref: {}, + }, + ]} + /> + ); + } + + beforeEach(() => { + globals = new GlobalOverrider(); + sandbox = sinon.createSandbox(); + wrapper = mountComponent(); + }); + + afterEach(() => { + sandbox.restore(); + globals.restore(); + }); + + it("should render something if spocs are not loaded", () => { + wrapper = mountComponent({ + spocs: { loaded: false, data: { spocs: null } }, + }); + + assert.notEqual(wrapper.type(), null); + }); + + it("should render something if feeds are not loaded", () => { + wrapper = mountComponent({ feeds: { loaded: false } }); + + assert.notEqual(wrapper.type(), null); + }); + + it("should render nothing with no layout", () => { + assert.ok(wrapper.exists()); + assert.isEmpty(wrapper.children()); + }); + + it("should render a HorizontalRule component", () => { + wrapper = mountComponent({ + layout: [{ components: [{ type: "HorizontalRule" }] }], + }); + + assert.equal( + wrapper.find(".ds-column-grid div").children().at(0).type(), + HorizontalRule + ); + }); + + it("should render a CardGrid component", () => { + wrapper = mountComponent({ + layout: [{ components: [{ properties: {}, type: "CardGrid" }] }], + }); + + assert.equal( + wrapper.find(".ds-column-grid div").children().at(0).type(), + CardGrid + ); + }); + + it("should render a Navigation component", () => { + wrapper = mountComponent({ + layout: [{ components: [{ properties: {}, type: "Navigation" }] }], + }); + + assert.equal( + wrapper.find(".ds-column-grid div").children().at(0).type(), + Navigation + ); + }); + + it("should render nothing if there was only a Message", () => { + wrapper = mountComponent({ + layout: [ + { components: [{ header: {}, properties: {}, type: "Message" }] }, + ], + }); + + assert.isEmpty(wrapper.children()); + }); + + it("should render a regular Message when not collapsible", () => { + wrapper = mountComponent({ + config: { collapsible: false }, + layout: [ + { components: [{ header: {}, properties: {}, type: "Message" }] }, + ], + }); + + assert.equal( + wrapper.find(".ds-column-grid div").children().at(0).type(), + DSMessage + ); + }); + + it("should convert first Message component to CollapsibleSection", () => { + wrapper = mountComponent({ + layout: [ + { + components: [ + { header: {}, properties: {}, type: "Message" }, + { type: "HorizontalRule" }, + ], + }, + ], + }); + + assert.equal(wrapper.children().at(0).type(), CollapsibleSection); + assert.equal(wrapper.children().at(0).props().eventSource, "CARDGRID"); + }); + + it("should render a Message component", () => { + wrapper = mountComponent({ + layout: [ + { + components: [ + { header: {}, type: "Message" }, + { properties: {}, type: "Message" }, + ], + }, + ], + }); + + assert.equal( + wrapper.find(".ds-column-grid div").children().at(0).type(), + DSMessage + ); + }); + + it("should render a SectionTitle component", () => { + wrapper = mountComponent({ + layout: [{ components: [{ properties: {}, type: "SectionTitle" }] }], + }); + + assert.equal( + wrapper.find(".ds-column-grid div").children().at(0).type(), + SectionTitle + ); + }); + + it("should render TopSites", () => { + wrapper = mountComponent({ + layout: [{ components: [{ properties: {}, type: "TopSites" }] }], + }); + + assert.equal( + wrapper + .find(".ds-column-grid div") + .find(".ds-top-sites") + .children() + .at(0) + .type(), + TopSites + ); + }); + + describe("#onStyleMount", () => { + let parseStub; + + beforeEach(() => { + parseStub = sandbox.stub(); + globals.set("JSON", { parse: parseStub }); + }); + + afterEach(() => { + sandbox.restore(); + globals.restore(); + }); + + it("should return if no style", () => { + assert.isUndefined(wrapper.instance().onStyleMount()); + assert.notCalled(parseStub); + }); + + it("should insert rules", () => { + const sheetStub = { insertRule: sandbox.stub(), cssRules: [{}] }; + parseStub.returns([ + [ + null, + { + ".ds-message": "margin-bottom: -20px", + }, + null, + null, + ], + ]); + wrapper.instance().onStyleMount({ sheet: sheetStub, dataset: {} }); + + assert.calledOnce(sheetStub.insertRule); + assert.calledWithExactly(sheetStub.insertRule, "DUMMY#CSS.SELECTOR {}"); + }); + }); +}); |