it("should say 'Visited Recently' if no bookmark or timestamp are available", () => {
const props = Object.assign({}, fakeSite, {
lastVisitDate: null
});
instance = renderWithProvider(<SpotlightItem {...props} />);
assert.equal(instance.refs.contextMessage.textContent, "Visited recently");
});
it("should correct length prop to Bookmarks component", () => {
let propsWithIsReadyTrue = Object.assign({}, fakeProps, {isReady: true});
instance = renderWithProvider(<NewTabPage {...propsWithIsReadyTrue} dispatch={() => {}} />);
const comp = TestUtils.findRenderedComponentWithType(instance, Bookmarks);
assert.equal(comp.props.length, BOOKMARKS_DISPLAYED_LENGTH);
});
it("should use the context_message if it exists", () => {
const props = Object.assign({}, fakeSite, {
context_message: "Foo bar baz"
});
instance = renderWithProvider(<SpotlightItem {...props} />);
assert.equal(instance.refs.contextMessage.innerHTML, "Foo bar baz");
});
it("should hide the VisitAgain section when showVisitAgain is false", () => {
let props = Object.assign({}, fakeProps, {isReady: true, Prefs: {prefs: {showVisitAgain: false}}});
instance = renderWithProvider(<NewTabPage {...props} dispatch={() => {}} />);
const children = TestUtils.scryRenderedComponentsWithType(instance, VisitAgain);
assert.equal(children.length, 0);
});
it("if the recommendation's timestamp is 0 don't show a timestamp", () => {
const props = Object.assign({}, fakeSite, {
timestamp: 0
});
instance = renderWithProvider(<SpotlightItem {...props} />);
assert.equal(instance.refs.contextMessage.dataset.timestamp, "");
});
it("should render the bookmarkDateCreated if it exists", () => {
const props = Object.assign({}, fakeSite, {
bookmarkDateCreated: 1456426160465
});
instance = renderWithProvider(<SpotlightItem {...props} />);
assert.equal(instance.refs.contextMessage.textContent, `Bookmarked ${moment(1456426160465).fromNow()}`);
});
it("should pass correct length prop to VisitAgain component", () => {
let propsWithIsReadyTrue = Object.assign({}, fakeProps, {isReady: true});
instance = renderWithProvider(<NewTabPage {...propsWithIsReadyTrue} dispatch={() => {}} />);
const comp = TestUtils.findRenderedComponentWithType(instance, VisitAgain);
assert.equal(comp.props.length, VISITAGAIN_DISPLAYED_LENGTH);
});
it("should show the Bookmarks section when showBookmarks is true", () => {
let props = Object.assign({}, fakeProps, {isReady: true, Prefs: {prefs: {showBookmarks: true}}});
instance = renderWithProvider(<NewTabPage {...props} dispatch={() => {}} />);
const children = TestUtils.scryRenderedComponentsWithType(instance, Bookmarks);
assert.equal(children.length, 1);
});
it("should should not allow drops without required topsites type", () => {
instance = renderWithProvider(<PlaceholderTopSitesItem dispatch={sinon.spy()} index={7} />);
instance.handleDrop({
preventDefault: () => {},
dataTransfer: {getData: type => undefined}
});
assert.notCalled(instance.props.dispatch);
});
it("should show placeholder if props.placeholder is true", () => {
instance = renderWithProvider(<Bookmarks dispatch={stubDispatcher}
placeholder={true}
sites={fakeBookmarkItems}
prefs={{collapseBookmarks: false}} />);
const children = TestUtils.scryRenderedComponentsWithType(instance, PlaceholderBookmarks);
assert.equal(children.length, 1);
});
it("should fire an event if data isn't ready and we show the loader", done => {
renderWithProvider(<NewTabPage {...fakeProps} isReady={false} dispatch={a => {
if (a.type === "NOTIFY_UNDESIRED_EVENT") {
assert.equal(a.data.event, "SHOW_LOADER");
assert.equal(a.data.source, "NEW_TAB");
done();
}
}} />);
});
/**
* Overwrites the lexically scoped instance variable with a version
* that is connected to the mock store.
*
* @param {Function} dispatch Dispatch function for the store; defaults
* to a NO-OP function
* @param {Function} mapStatesToProps passed through to connect().
* defaults to forceIsReadySelectNewTabs,
* since we (almost?) always want to test
* the regular display, not the placeholder
* one.
*/
function setupConnected(
dispatch = () => {}, mapStatesToProps = forceIsReadySelectNewTabs) {
let ConnectedNewTabPage = connect(mapStatesToProps)(injectIntl(NewTabPage)); // eslint-disable-line no-shadow
instance = TestUtils.findRenderedComponentWithType(
renderWithProvider(<ConnectedNewTabPage />, {dispatch}),
NewTabPage
);
}
it("should pass `collapseVisitAgain` to CollapsibleSection component", () => {
instance = renderWithProvider(<VisitAgain dispatch={stubDispatcher}
placeholder={false}
sites={fakeVisitAgainItems}
prefs={{collapseVisitAgain: true}} />);
const comp = TestUtils.findRenderedComponentWithType(instance, CollapsibleSection);
assert.equal(comp.props.prefName, "collapseVisitAgain");
});
it("should render the tooltip when hovering over a recommendation's context_message", () => {
const props = Object.assign({}, fakeSite, {
recommended: true,
lastVisitDate: null
});
instance = renderWithProvider(<SpotlightItem {...props} />);
assert.isTrue(instance.refs.spotlightTooltip.hidden);
TestUtils.Simulate.mouseOver(instance.refs.spotlightContext);
assert.isFalse(instance.refs.spotlightTooltip.hidden);
});
it("should say 'Trending' if it is a recommendation and have a timestamp", () => {
const props = Object.assign({}, fakeSite, {
recommended: true,
lastVisitDate: null,
timestamp: 1456426160465
});
instance = renderWithProvider(<SpotlightItem {...props} />);
assert.equal(instance.refs.contextMessage.textContent, "Trending");
assert.equal(instance.refs.contextMessage.dataset.timestamp, moment(1456426160465).fromNow());
});
it("should show provide `BOOKMARKS` source prop to SpotlightItems", () => {
let i;
instance = renderWithProvider(<Bookmarks dispatch={stubDispatcher}
placeholder={false}
sites={fakeBookmarkItems}
prefs={{collapseBookmarks: false}} />);
const children = TestUtils.scryRenderedComponentsWithType(instance, SpotlightItem);
for (i = 0; i < children.length; i++) {
assert.equal(children[i].props.source, "BOOKMARKS");
}
});
it("should provide bestImage prop to SpotlightItems", () => {
let i;
instance = renderWithProvider(<VisitAgain dispatch={stubDispatcher}
placeholder={false}
sites={fakeVisitAgainItems}
prefs={{collapseVisitAgain: false}} />);
const children = TestUtils.scryRenderedComponentsWithType(instance, SpotlightItem);
for (i = 0; i < children.length; i++) {
assert.equal(children[i].props.bestImage, getBestImage(fakeVisitAgainItems[i].images));
}
});
it("should fire an event if data is ready", done => {
renderWithProvider(<NewTabPage {...fakeProps} isReady={true} dispatch={a => {
if (a.type === "NOTIFY_NEWTAB_STATS") {
assert.equal(a.data.topsitesSize, mockData.TopSites.rows.length);
assert.equal(a.data.topsitesTippytop, 0);
assert.equal(a.data.topsitesScreenshot, 0);
assert.equal(a.data.topsitesLowResIcon, 0);
done();
}
}} />);
});
it("should fire a click event when an item is clicked", done => {
function dispatch(a) {
if (a.type === "NOTIFY_USER_EVENT") {
assert.equal(a.data.event, "CLICK");
assert.equal(a.data.page, "NEW_TAB");
assert.equal(a.data.source, "TOP_SITES");
assert.equal(a.data.action_position, 0);
done();
}
}
topSites = renderWithProvider(<TopSites page={"NEW_TAB"} dispatch={dispatch} sites={fakeProps.sites} />);
TestUtils.Simulate.click(TestUtils.scryRenderedComponentsWithType(topSites, TopSitesItem)[0].refs.topSiteLink);
});
it("should fire a click event when an item is clicked", done => {
function dispatch(a) {
if (a.type === "NOTIFY_USER_EVENT") {
assert.equal(a.data.event, "CLICK");
assert.equal(a.data.page, "NEW_TAB");
assert.equal(a.data.source, "VISITAGAIN");
assert.equal(a.data.action_position, 0);
assert.equal(a.data.metadata_source, "EmbedlyTest");
assert.equal(a.data.highlight_type, fakeVisitAgainItems[0].type);
done();
}
}
instance = renderWithProvider(<VisitAgain page={"NEW_TAB"} dispatch={dispatch} sites={fakeVisitAgainItems} prefs={{}} />);
TestUtils.Simulate.click(TestUtils.scryRenderedComponentsWithType(instance, SpotlightItem)[0].refs.link);
});
it("should fire a click event an item is clicked without a url or recommender type if it is not a recommendation", done => {
function dispatch(a) {
if (a.type === "NOTIFY_USER_EVENT") {
assert.equal(a.data.event, "CLICK");
assert.equal(a.data.page, "NEW_TAB");
assert.equal(a.data.source, "FEATURED");
assert.equal(a.data.action_position, 0);
assert.equal(a.data.url, null);
assert.equal(a.data.recommender_type, null);
done();
}
}
instance = renderWithProvider(<Spotlight page={"NEW_TAB"} dispatch={dispatch} sites={fakeSpotlightItems} />);
TestUtils.Simulate.click(TestUtils.scryRenderedComponentsWithType(instance, SpotlightItem)[0].refs.link);
});
it("should pass placeholder=true to Stories, TopSites and Bookmarks when isReady is false", () => {
instance = renderWithProvider(
<NewTabPage {...fakeProps} dispatch={() => {}} />);
let stories = TestUtils.findRenderedComponentWithType(instance, PocketStories);
assert.equal(stories.props.placeholder, true);
let topSites = TestUtils.findRenderedComponentWithType(instance, TopSites);
assert.equal(topSites.props.placeholder, true);
let bookmarks = TestUtils.findRenderedComponentWithType(instance, Bookmarks);
assert.equal(bookmarks.props.placeholder, true);
let visitAgain = TestUtils.findRenderedComponentWithType(instance, VisitAgain);
assert.equal(visitAgain.props.placeholder, true);
});
it("should pass placeholder=false to Stories, TopSites and Bookmarks when isReady is true", () => {
let propsWithIsReadyTrue = Object.assign({}, fakeProps, {isReady: true});
instance = renderWithProvider(
<NewTabPage {...propsWithIsReadyTrue} dispatch={() => {}} />);
let stories = TestUtils.findRenderedComponentWithType(instance, PocketStories);
assert.equal(stories.props.placeholder, false);
let topSites = TestUtils.findRenderedComponentWithType(instance, TopSites);
assert.equal(topSites.props.placeholder, false);
let bookmarks = TestUtils.findRenderedComponentWithType(instance, Bookmarks);
assert.equal(bookmarks.props.placeholder, false);
let visitAgain = TestUtils.findRenderedComponentWithType(instance, VisitAgain);
assert.equal(visitAgain.props.placeholder, false);
});
it("should fire a click event an item is clicked with url and recommender type when site is a recommendation", done => {
function dispatch(a) {
if (a.type === "NOTIFY_USER_EVENT") {
assert.equal(a.data.event, "CLICK");
assert.equal(a.data.page, "NEW_TAB");
assert.equal(a.data.source, "FEATURED");
assert.equal(a.data.action_position, 0);
assert.equal(a.data.url, fakeRecommendation.url);
assert.equal(a.data.recommender_type, fakeRecommendation.recommender_type);
done();
}
}
let fakeSitesWithRecommendation = fakeSpotlightItems;
let fakeRecommendation = {url: "http://example.com", recommender_type: "pocket-trending", recommended: true};
fakeSitesWithRecommendation[0] = Object.assign({}, fakeSitesWithRecommendation[0], fakeRecommendation);
instance = renderWithProvider(<Spotlight page={"NEW_TAB"} dispatch={dispatch} sites={fakeSitesWithRecommendation} />);
TestUtils.Simulate.click(TestUtils.scryRenderedComponentsWithType(instance, SpotlightItem)[0].refs.link);
});
it("should fire a drop action when a top site is dropped on it", done => {
const url = "http://example.com";
const title = "an example title";
const index = 7;
let callCount = 0;
function dispatch(a) {
if (a.type === "TOPSITES_DROP_REQUEST") {
assert.equal(a.data.url, url);
assert.equal(a.data.title, title);
assert.equal(a.data.index, index);
if (++callCount === 2) {
done();
}
}
if (a.type === "NOTIFY_USER_EVENT") {
assert.equal(a.data.event, "DROP_TOPSITE");
assert.equal(a.data.action_position, index);
if (++callCount === 2) {
done();
}
}
}
instance = renderWithProvider(<PlaceholderTopSitesItem dispatch={dispatch} index={index} />);
instance.handleDrop({
preventDefault: () => {},
dataTransfer: {
getData: type => {
if (type === "text/topsite-index") {
return 1;
}
if (type === "text/topsite-title") {
return title;
}
return url;
}
}
});
});
it("should render connected component with correct props", () => {
const container = renderWithProvider(<ConnectedNewTabPage />);
const inner = TestUtils.findRenderedComponentWithType(container, NewTabPage);
Object.keys(NewTabPage.propTypes).forEach(key => assert.property(inner.props, key));
});
beforeEach(() => {
instance = renderWithProvider(<NewTabPage {...fakeProps} dispatch={() => {}} />);
});
beforeEach(() => {
instance = renderWithProvider(<TimelinePage {...fakeProps}>
<div className="fake-child">Hello world</div>
</TimelinePage>);
});
function setup(customProps = {}, dispatch) {
const props = Object.assign({}, fakeProps, customProps);
instance = renderWithProvider(<TimelineHistory {...props} />, dispatch && {dispatch});
loadMore = TestUtils.findRenderedComponentWithType(instance, LoadMore);
}
it("should render the connected container with the correct props", () => {
const container = renderWithProvider(<ConnectedTimelineHistory />);
const inner = TestUtils.findRenderedComponentWithType(container, TimelineHistory);
Object.keys(TimelineHistory.propTypes).forEach(key => assert.property(inner.props, key));
});