Bug 1561208 - Clean up react-intl usage (shallowWithIntl, mountWithIntl, injectIntl, addLocaleData, IntlProvider) (#5144)
* Bug 1561208 and Bug 1556888 - Cleaning up react-intl usage (shallowWithIntl, mountWithIntl, injectIntl, addLocaleData, IntlProvider) * Cleaning _DSLinkMenu => DSLinkMenu
This commit is contained in:
Родитель
8d69635c20
Коммит
1a28ff35bc
|
@ -1,4 +1,3 @@
|
|||
import {addLocaleData, IntlProvider} from "react-intl";
|
||||
import {actionCreators as ac} from "common/Actions.jsm";
|
||||
import {OUTGOING_MESSAGE_NAME as AS_GENERAL_OUTGOING_MESSAGE_NAME} from "content-src/lib/init-store";
|
||||
import {generateBundles} from "./rich-text-strings";
|
||||
|
@ -216,11 +215,6 @@ export class ASRouterUISurface extends React.PureComponent {
|
|||
}
|
||||
|
||||
componentWillMount() {
|
||||
if (global.document) {
|
||||
// Add locale data for StartupOverlay because it uses react-intl
|
||||
addLocaleData(global.document.documentElement.lang);
|
||||
}
|
||||
|
||||
const endpoint = ASRouterUtils.getPreviewEndpoint();
|
||||
if (endpoint && endpoint.theme === "dark") {
|
||||
global.window.dispatchEvent(new CustomEvent("LightweightTheme:Set", {detail: {data: NEWTAB_DARK_THEME}}));
|
||||
|
@ -288,12 +282,10 @@ export class ASRouterUISurface extends React.PureComponent {
|
|||
if (message.template === "fxa_overlay") {
|
||||
global.document.body.classList.add("fxa");
|
||||
return (
|
||||
<IntlProvider locale={global.document.documentElement.lang} messages={global.gActivityStreamStrings}>
|
||||
<StartupOverlay
|
||||
onReady={this.triggerOnboarding}
|
||||
onBlock={this.onDismissById(message.id)}
|
||||
dispatch={this.props.dispatch} />
|
||||
</IntlProvider>
|
||||
<StartupOverlay
|
||||
onReady={this.triggerOnboarding}
|
||||
onBlock={this.onDismissById(message.id)}
|
||||
dispatch={this.props.dispatch} />
|
||||
);
|
||||
} else if (message.template === "return_to_amo_overlay") {
|
||||
global.document.body.classList.add("amo");
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import {actionCreators as ac, actionTypes as at} from "common/Actions.jsm";
|
||||
import {addLocaleData, IntlProvider} from "react-intl";
|
||||
import {ASRouterAdmin} from "content-src/components/ASRouterAdmin/ASRouterAdmin";
|
||||
import {ASRouterUISurface} from "../../asrouter/asrouter-content";
|
||||
import {ConfirmDialog} from "content-src/components/ConfirmDialog/ConfirmDialog";
|
||||
|
@ -16,13 +15,6 @@ const PrefsButton = props => (
|
|||
</div>
|
||||
);
|
||||
|
||||
// Add the locale data for pluralization and relative-time formatting for now,
|
||||
// this just uses english locale data. We can make this more sophisticated if
|
||||
// more features are needed.
|
||||
function addLocaleDataForReactIntl(locale) {
|
||||
addLocaleData([{locale, parentLocale: "en"}]);
|
||||
}
|
||||
|
||||
// Returns a function will not be continuously triggered when called. The
|
||||
// function will be triggered if called again after `wait` milliseconds.
|
||||
function debounce(func, wait) {
|
||||
|
@ -39,8 +31,6 @@ function debounce(func, wait) {
|
|||
|
||||
export class _Base extends React.PureComponent {
|
||||
componentWillMount() {
|
||||
const {locale} = this.props;
|
||||
addLocaleDataForReactIntl(locale);
|
||||
if (this.props.isFirstrun) {
|
||||
global.document.body.classList.add("welcome", "hide-main");
|
||||
}
|
||||
|
@ -68,21 +58,21 @@ export class _Base extends React.PureComponent {
|
|||
|
||||
render() {
|
||||
const {props} = this;
|
||||
const {App, locale, strings} = props;
|
||||
const {App} = props;
|
||||
const isDevtoolsEnabled = props.Prefs.values["asrouter.devtoolsEnabled"];
|
||||
|
||||
if (!App.initialized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (<IntlProvider locale={locale} messages={strings}>
|
||||
return (
|
||||
<ErrorBoundary className="base-content-fallback">
|
||||
<React.Fragment>
|
||||
<BaseContent {...this.props} />
|
||||
{isDevtoolsEnabled ? <ASRouterAdmin /> : null}
|
||||
</React.Fragment>
|
||||
</ErrorBoundary>
|
||||
</IntlProvider>);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import {actionCreators as ac, actionTypes as at} from "common/Actions.jsm";
|
||||
import {cardContextTypes} from "./types";
|
||||
import {connect} from "react-redux";
|
||||
import {injectIntl} from "react-intl";
|
||||
import {LinkMenu} from "content-src/components/LinkMenu/LinkMenu";
|
||||
import React from "react";
|
||||
import {ScreenshotUtils} from "content-src/lib/screenshot-utils";
|
||||
|
@ -265,5 +264,5 @@ export class _Card extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
_Card.defaultProps = {link: {}};
|
||||
export const Card = connect(state => ({platform: state.Prefs.values.platform}))(injectIntl(_Card));
|
||||
export const Card = connect(state => ({platform: state.Prefs.values.platform}))(_Card);
|
||||
export const PlaceholderCard = props => <Card placeholder={true} className={props.className} />;
|
||||
|
|
|
@ -67,7 +67,6 @@ export class DSCard extends React.PureComponent {
|
|||
id={this.props.id}
|
||||
index={this.props.pos}
|
||||
dispatch={this.props.dispatch}
|
||||
intl={this.props.intl}
|
||||
url={this.props.url}
|
||||
title={this.props.title}
|
||||
source={this.props.source}
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import {injectIntl} from "react-intl";
|
||||
import {LinkMenu} from "content-src/components/LinkMenu/LinkMenu";
|
||||
import React from "react";
|
||||
|
||||
export class _DSLinkMenu extends React.PureComponent {
|
||||
export class DSLinkMenu extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
@ -83,5 +82,3 @@ export class _DSLinkMenu extends React.PureComponent {
|
|||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
export const DSLinkMenu = injectIntl(_DSLinkMenu);
|
||||
|
|
|
@ -105,7 +105,6 @@ export class Hero extends React.PureComponent {
|
|||
id={heroRec.id}
|
||||
index={heroRec.pos}
|
||||
dispatch={this.props.dispatch}
|
||||
intl={this.props.intl}
|
||||
url={heroRec.url}
|
||||
title={heroRec.title}
|
||||
source={heroRec.domain}
|
||||
|
|
|
@ -76,7 +76,6 @@ export class ListItem extends React.PureComponent {
|
|||
id={this.props.id}
|
||||
index={this.props.pos}
|
||||
dispatch={this.props.dispatch}
|
||||
intl={this.props.intl}
|
||||
url={this.props.url}
|
||||
title={this.props.title}
|
||||
source={this.props.source}
|
||||
|
|
|
@ -6,7 +6,6 @@ import {
|
|||
TOP_SITES_SEARCH_SHORTCUTS_CONTEXT_MENU_OPTIONS,
|
||||
TOP_SITES_SOURCE,
|
||||
} from "./TopSitesConstants";
|
||||
import {injectIntl} from "react-intl";
|
||||
import {LinkMenu} from "content-src/components/LinkMenu/LinkMenu";
|
||||
import React from "react";
|
||||
import {ScreenshotUtils} from "content-src/lib/screenshot-utils";
|
||||
|
@ -325,7 +324,7 @@ export class TopSitePlaceholder extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
export class _TopSiteList extends React.PureComponent {
|
||||
export class TopSiteList extends React.PureComponent {
|
||||
static get DEFAULT_STATE() {
|
||||
return {
|
||||
activeIndex: null,
|
||||
|
@ -338,7 +337,7 @@ export class _TopSiteList extends React.PureComponent {
|
|||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = _TopSiteList.DEFAULT_STATE;
|
||||
this.state = TopSiteList.DEFAULT_STATE;
|
||||
this.onDragEvent = this.onDragEvent.bind(this);
|
||||
this.onActivate = this.onActivate.bind(this);
|
||||
}
|
||||
|
@ -351,7 +350,7 @@ export class _TopSiteList extends React.PureComponent {
|
|||
prevTopSites[this.state.draggedIndex].url === this.state.draggedSite.url &&
|
||||
(!newTopSites[this.state.draggedIndex] || newTopSites[this.state.draggedIndex].url !== this.state.draggedSite.url)) {
|
||||
// We got the new order from the redux store via props. We can clear state now.
|
||||
this.setState(_TopSiteList.DEFAULT_STATE);
|
||||
this.setState(TopSiteList.DEFAULT_STATE);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -379,7 +378,7 @@ export class _TopSiteList extends React.PureComponent {
|
|||
case "dragend":
|
||||
if (!this.dropped) {
|
||||
// If there was no drop event, reset the state to the default.
|
||||
this.setState(_TopSiteList.DEFAULT_STATE);
|
||||
this.setState(TopSiteList.DEFAULT_STATE);
|
||||
}
|
||||
break;
|
||||
case "dragenter":
|
||||
|
@ -472,7 +471,6 @@ export class _TopSiteList extends React.PureComponent {
|
|||
const commonProps = {
|
||||
onDragEvent: this.onDragEvent,
|
||||
dispatch: props.dispatch,
|
||||
intl: props.intl,
|
||||
};
|
||||
// We assign a key to each placeholder slot. We need it to be independent
|
||||
// of the slot index (i below) so that the keys used stay the same during
|
||||
|
@ -511,5 +509,3 @@ export class _TopSiteList extends React.PureComponent {
|
|||
</ul>);
|
||||
}
|
||||
}
|
||||
|
||||
export const TopSiteList = injectIntl(_TopSiteList);
|
||||
|
|
|
@ -135,7 +135,7 @@ export class _TopSites extends React.PureComponent {
|
|||
isFirst={props.isFirst}
|
||||
isLast={props.isLast}
|
||||
dispatch={props.dispatch}>
|
||||
<TopSiteList TopSites={props.TopSites} TopSitesRows={props.TopSitesRows} dispatch={props.dispatch} intl={props.intl} topSiteIconType={topSiteIconType} />
|
||||
<TopSiteList TopSites={props.TopSites} TopSitesRows={props.TopSitesRows} dispatch={props.dispatch} topSiteIconType={topSiteIconType} />
|
||||
<div className="edit-topsites-wrapper">
|
||||
{editForm &&
|
||||
<div className="edit-topsites">
|
||||
|
@ -144,7 +144,6 @@ export class _TopSites extends React.PureComponent {
|
|||
site={props.TopSites.rows[editForm.index]}
|
||||
onClose={this.onEditFormClose}
|
||||
dispatch={this.props.dispatch}
|
||||
intl={this.props.intl}
|
||||
{...editForm} />
|
||||
</ModalOverlayWrapper>
|
||||
</div>
|
||||
|
|
|
@ -146,8 +146,3 @@ const {mount} = require("enzyme");
|
|||
...
|
||||
const wrapper = mount(<Foo />);
|
||||
```
|
||||
|
||||
### Rendering localized components
|
||||
|
||||
If you need to render a component that contains localized components, use the
|
||||
`shallowWithIntl` and `mountWithIntl` functions in `system-addon/test/unit/utils`.
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import {ASRouterUISurface, ASRouterUtils} from "content-src/asrouter/asrouter-content";
|
||||
import {GlobalOverrider, mountWithIntl} from "test/unit/utils";
|
||||
import {GlobalOverrider} from "test/unit/utils";
|
||||
import {OUTGOING_MESSAGE_NAME as AS_GENERAL_OUTGOING_MESSAGE_NAME} from "content-src/lib/init-store";
|
||||
import {FAKE_LOCAL_MESSAGES} from "./constants";
|
||||
import {OnboardingMessageProvider} from "lib/OnboardingMessageProvider.jsm";
|
||||
import React from "react";
|
||||
import {mount} from "enzyme";
|
||||
import {Trailhead} from "../../../content-src/asrouter/templates/Trailhead/Trailhead";
|
||||
|
||||
let [FAKE_MESSAGE] = FAKE_LOCAL_MESSAGES;
|
||||
|
@ -88,7 +89,7 @@ describe("ASRouterUISurface", () => {
|
|||
|
||||
sandbox.stub(ASRouterUtils, "sendTelemetry");
|
||||
|
||||
wrapper = mountWithIntl(<ASRouterUISurface document={fakeDocument} />);
|
||||
wrapper = mount(<ASRouterUISurface document={fakeDocument} />);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
@ -153,7 +154,7 @@ describe("ASRouterUISurface", () => {
|
|||
const stub = sandbox.stub(window, "dispatchEvent");
|
||||
sandbox.stub(ASRouterUtils, "getPreviewEndpoint").returns({theme: "dark"});
|
||||
|
||||
wrapper = mountWithIntl(<ASRouterUISurface document={fakeDocument} />);
|
||||
wrapper = mount(<ASRouterUISurface document={fakeDocument} />);
|
||||
|
||||
assert.calledOnce(stub);
|
||||
assert.property(stub.firstCall.args[0].detail.data, "ntp_background");
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import {actionCreators as ac, actionTypes as at} from "common/Actions.jsm";
|
||||
import {_Card as Card, PlaceholderCard} from "content-src/components/Card/Card";
|
||||
import {combineReducers, createStore} from "redux";
|
||||
import {GlobalOverrider, mountWithIntl} from "test/unit/utils";
|
||||
import {GlobalOverrider} from "test/unit/utils";
|
||||
import {INITIAL_STATE, reducers} from "common/Reducers.jsm";
|
||||
import {cardContextTypes} from "content-src/components/Card/types";
|
||||
import {LinkMenu} from "content-src/components/LinkMenu/LinkMenu";
|
||||
import {Provider} from "react-redux";
|
||||
import React from "react";
|
||||
import {shallow} from "enzyme";
|
||||
import {shallow, mount} from "enzyme";
|
||||
|
||||
let DEFAULT_PROPS = {
|
||||
dispatch: sinon.stub(),
|
||||
|
@ -21,7 +21,6 @@ let DEFAULT_PROPS = {
|
|||
image: "http://www.foo.com/img.png",
|
||||
guid: 1,
|
||||
},
|
||||
intl: {formatMessage: x => x},
|
||||
eventSource: "TOP_STORIES",
|
||||
shouldSendImpressionStats: true,
|
||||
contextMenuOptions: ["Separator"],
|
||||
|
@ -34,7 +33,7 @@ let DEFAULT_BLOB_IMAGE = {
|
|||
|
||||
function mountCardWithProps(props) {
|
||||
const store = createStore(combineReducers(reducers), INITIAL_STATE);
|
||||
return mountWithIntl(<Provider store={store}><Card {...props} /></Provider>);
|
||||
return mount(<Provider store={store}><Card {...props} /></Provider>);
|
||||
}
|
||||
|
||||
describe("<Card>", () => {
|
||||
|
@ -54,7 +53,7 @@ describe("<Card>", () => {
|
|||
|
||||
// test that pocket cards get a special open_url href
|
||||
const pocketLink = Object.assign({}, DEFAULT_PROPS.link, {open_url: "getpocket.com/foo", type: "pocket"});
|
||||
wrapper = mountWithIntl(<Card {...Object.assign({}, DEFAULT_PROPS, {link: pocketLink})} />);
|
||||
wrapper = mount(<Card {...Object.assign({}, DEFAULT_PROPS, {link: pocketLink})} />);
|
||||
assert.propertyVal(wrapper.find("a").props(), "href", pocketLink.open_url);
|
||||
});
|
||||
it("should display a title", () => assert.equal(wrapper.find(".card-title").text(), DEFAULT_PROPS.link.title));
|
||||
|
@ -291,7 +290,7 @@ describe("<Card>", () => {
|
|||
});
|
||||
describe("placeholder=true", () => {
|
||||
beforeEach(() => {
|
||||
wrapper = mountWithIntl(<Card placeholder={true} />);
|
||||
wrapper = mount(<Card placeholder={true} />);
|
||||
});
|
||||
it("should render when placeholder=true", () => {
|
||||
assert.ok(wrapper.exists());
|
||||
|
@ -339,7 +338,7 @@ describe("<Card>", () => {
|
|||
it("should provide card_type to telemetry info if type is not history", () => {
|
||||
const link = Object.assign({}, DEFAULT_PROPS.link);
|
||||
link.type = "bookmark";
|
||||
wrapper = mountWithIntl(<Card {...Object.assign({}, DEFAULT_PROPS, {link})} />);
|
||||
wrapper = mount(<Card {...Object.assign({}, DEFAULT_PROPS, {link})} />);
|
||||
const card = wrapper.find(".card");
|
||||
const event = {altKey: "1", button: "2", ctrlKey: "3", metaKey: "4", shiftKey: "5"};
|
||||
|
||||
|
@ -369,7 +368,7 @@ describe("<Card>", () => {
|
|||
|
||||
describe("<PlaceholderCard />", () => {
|
||||
it("should render a Card with placeholder=true", () => {
|
||||
const wrapper = mountWithIntl(<Provider store={createStore(combineReducers(reducers), INITIAL_STATE)}><PlaceholderCard /></Provider>);
|
||||
const wrapper = mount(<Provider store={createStore(combineReducers(reducers), INITIAL_STATE)}><PlaceholderCard /></Provider>);
|
||||
assert.isTrue(wrapper.find(Card).props().placeholder);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -15,7 +15,6 @@ let DEFAULT_PROPS = {
|
|||
rows: [],
|
||||
id: "highlights",
|
||||
dispatch() {},
|
||||
intl: {formatMessage: x => x},
|
||||
perfSvc,
|
||||
};
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {_DiscoveryStreamBase as DiscoveryStreamBase, isAllowedCSS} from "content-src/components/DiscoveryStreamBase/DiscoveryStreamBase";
|
||||
import {GlobalOverrider, shallowWithIntl} from "test/unit/utils";
|
||||
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";
|
||||
|
@ -8,6 +8,7 @@ import {HorizontalRule} from "content-src/components/DiscoveryStreamComponents/H
|
|||
import {List} from "content-src/components/DiscoveryStreamComponents/List/List";
|
||||
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/DiscoveryStreamComponents/TopSites/TopSites";
|
||||
|
||||
|
@ -61,7 +62,7 @@ describe("<DiscoveryStreamBase>", () => {
|
|||
},
|
||||
...props,
|
||||
};
|
||||
return shallowWithIntl(<DiscoveryStreamBase
|
||||
return shallow(<DiscoveryStreamBase
|
||||
DiscoveryStream={defaultProps}
|
||||
Prefs={{
|
||||
values: {
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import {CardGrid} from "content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid";
|
||||
import {DSCard} from "content-src/components/DiscoveryStreamComponents/DSCard/DSCard";
|
||||
import React from "react";
|
||||
import {shallowWithIntl} from "test/unit/utils";
|
||||
import {shallow} from "enzyme";
|
||||
|
||||
describe("<CardGrid>", () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowWithIntl(<CardGrid />);
|
||||
wrapper = shallow(<CardGrid />);
|
||||
});
|
||||
|
||||
it("should render an empty div", () => {
|
||||
|
|
|
@ -3,14 +3,14 @@ import {actionCreators as ac} from "common/Actions.jsm";
|
|||
import {DSLinkMenu} from "content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu";
|
||||
import React from "react";
|
||||
import {SafeAnchor} from "content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
|
||||
import {shallowWithIntl} from "test/unit/utils";
|
||||
import {shallow} from "enzyme";
|
||||
|
||||
describe("<DSCard>", () => {
|
||||
let wrapper;
|
||||
let sandbox;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowWithIntl(<DSCard />);
|
||||
wrapper = shallow(<DSCard />);
|
||||
sandbox = sinon.createSandbox();
|
||||
});
|
||||
|
||||
|
@ -47,7 +47,7 @@ describe("<DSCard>", () => {
|
|||
|
||||
beforeEach(() => {
|
||||
dispatch = sandbox.stub();
|
||||
wrapper = shallowWithIntl(<DSCard dispatch={dispatch} />);
|
||||
wrapper = shallow(<DSCard dispatch={dispatch} />);
|
||||
});
|
||||
|
||||
it("should call dispatch with the correct events", () => {
|
||||
|
@ -97,7 +97,7 @@ describe("<DSCard>", () => {
|
|||
|
||||
describe("<PlaceholderDSCard> component", () => {
|
||||
it("should have placeholder prop", () => {
|
||||
const wrapper = shallowWithIntl(<PlaceholderDSCard />);
|
||||
const wrapper = shallow(<PlaceholderDSCard />);
|
||||
const card = wrapper.find(DSCard);
|
||||
assert.lengthOf(card, 1);
|
||||
|
||||
|
@ -106,13 +106,13 @@ describe("<PlaceholderDSCard> component", () => {
|
|||
});
|
||||
|
||||
it("should contain placeholder div", () => {
|
||||
const wrapper = shallowWithIntl(<DSCard placeholder={true} />);
|
||||
const wrapper = shallow(<DSCard placeholder={true} />);
|
||||
const card = wrapper.find("div.ds-card.placeholder");
|
||||
assert.lengthOf(card, 1);
|
||||
});
|
||||
|
||||
it("should not be clickable", () => {
|
||||
const wrapper = shallowWithIntl(<DSCard placeholder={true} />);
|
||||
const wrapper = shallow(<DSCard placeholder={true} />);
|
||||
const anchor = wrapper.find("SafeAnchor.ds-card-link");
|
||||
assert.lengthOf(anchor, 1);
|
||||
|
||||
|
@ -121,7 +121,7 @@ describe("<PlaceholderDSCard> component", () => {
|
|||
});
|
||||
|
||||
it("should not have context menu", () => {
|
||||
const wrapper = shallowWithIntl(<DSCard placeholder={true} />);
|
||||
const wrapper = shallow(<DSCard placeholder={true} />);
|
||||
const linkMenu = wrapper.find(DSLinkMenu);
|
||||
assert.lengthOf(linkMenu, 0);
|
||||
});
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import {DSEmptyState} from "content-src/components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState";
|
||||
import React from "react";
|
||||
import {shallowWithIntl} from "test/unit/utils";
|
||||
import {shallow} from "enzyme";
|
||||
|
||||
describe("<DSEmptyState>", () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowWithIntl(<DSEmptyState />);
|
||||
wrapper = shallow(<DSEmptyState />);
|
||||
});
|
||||
|
||||
it("should render", () => {
|
||||
|
@ -21,19 +21,19 @@ describe("<DSEmptyState>", () => {
|
|||
});
|
||||
|
||||
it("should render failed state message", () => {
|
||||
wrapper = shallowWithIntl(<DSEmptyState status="failed" />);
|
||||
wrapper = shallow(<DSEmptyState status="failed" />);
|
||||
assert.ok(wrapper.find("button.try-again-button").exists());
|
||||
});
|
||||
|
||||
it("should render waiting state message", () => {
|
||||
wrapper = shallowWithIntl(<DSEmptyState status="waiting" />);
|
||||
wrapper = shallow(<DSEmptyState status="waiting" />);
|
||||
assert.ok(wrapper.find("button.try-again-button.waiting").exists());
|
||||
});
|
||||
|
||||
it("should dispatch DISCOVERY_STREAM_RETRY_FEED on failed state button click", () => {
|
||||
const dispatch = sinon.spy();
|
||||
|
||||
wrapper = shallowWithIntl(<DSEmptyState status="failed" dispatch={dispatch} feed={{url: "https://foo.com", data: {}}} />);
|
||||
wrapper = shallow(<DSEmptyState status="failed" dispatch={dispatch} feed={{url: "https://foo.com", data: {}}} />);
|
||||
wrapper.find("button.try-again-button").simulate("click");
|
||||
|
||||
assert.calledTwice(dispatch);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {mountWithIntl, shallowWithIntl} from "test/unit/utils";
|
||||
import {_DSLinkMenu as DSLinkMenu} from "content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu";
|
||||
import {mount, shallow} from "enzyme";
|
||||
import {DSLinkMenu} from "content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu";
|
||||
import {LinkMenu} from "content-src/components/LinkMenu/LinkMenu";
|
||||
import React from "react";
|
||||
|
||||
|
@ -9,7 +9,7 @@ describe("<DSLinkMenu>", () => {
|
|||
|
||||
describe("DS link menu actions", () => {
|
||||
beforeEach(() => {
|
||||
wrapper = mountWithIntl(<DSLinkMenu />);
|
||||
wrapper = mount(<DSLinkMenu />);
|
||||
parentNode = wrapper.getDOMNode().parentNode;
|
||||
});
|
||||
|
||||
|
@ -41,7 +41,7 @@ describe("<DSLinkMenu>", () => {
|
|||
|
||||
it("Should add last-item to support resized window", async () => {
|
||||
const fakeWindow = {scrollMaxX: "20"};
|
||||
wrapper = mountWithIntl(<DSLinkMenu windowObj={fakeWindow} />);
|
||||
wrapper = mount(<DSLinkMenu windowObj={fakeWindow} />);
|
||||
parentNode = wrapper.getDOMNode().parentNode;
|
||||
wrapper.instance().onMenuShow();
|
||||
// Wait for next frame to allow fluent to render strings
|
||||
|
@ -75,7 +75,7 @@ describe("<DSLinkMenu>", () => {
|
|||
};
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowWithIntl(<DSLinkMenu {...ValidDSLinkMenuProps} />);
|
||||
wrapper = shallow(<DSLinkMenu {...ValidDSLinkMenuProps} />);
|
||||
});
|
||||
|
||||
it("should render a context menu button", () => {
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import {DSMessage} from "content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage";
|
||||
import React from "react";
|
||||
import {SafeAnchor} from "content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
|
||||
import {shallowWithIntl} from "test/unit/utils";
|
||||
import {shallow} from "enzyme";
|
||||
|
||||
describe("<DSMessage>", () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowWithIntl(<DSMessage />);
|
||||
wrapper = shallow(<DSMessage />);
|
||||
});
|
||||
|
||||
it("should render", () => {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import {combineReducers, createStore} from "redux";
|
||||
import {INITIAL_STATE, reducers} from "common/Reducers.jsm";
|
||||
import {Highlights} from "content-src/components/DiscoveryStreamComponents/Highlights/Highlights";
|
||||
import {mountWithIntl} from "test/unit/utils";
|
||||
import {mount} from "enzyme";
|
||||
import {Provider} from "react-redux";
|
||||
import React from "react";
|
||||
|
||||
|
@ -15,7 +15,7 @@ describe("Discovery Stream <Highlights>", () => {
|
|||
it("should render nothing with no highlights data", () => {
|
||||
const store = createStore(combineReducers(reducers), {...INITIAL_STATE});
|
||||
|
||||
wrapper = mountWithIntl(<Provider store={store}><Highlights /></Provider>);
|
||||
wrapper = mount(<Provider store={store}><Highlights /></Provider>);
|
||||
|
||||
assert.ok(wrapper.isEmptyRender());
|
||||
});
|
||||
|
@ -26,7 +26,7 @@ describe("Discovery Stream <Highlights>", () => {
|
|||
Sections: [{id: "highlights", enabled: true}],
|
||||
});
|
||||
|
||||
wrapper = mountWithIntl(<Provider store={store}><Highlights /></Provider>);
|
||||
wrapper = mount(<Provider store={store}><Highlights /></Provider>);
|
||||
|
||||
assert.lengthOf(wrapper.find(".ds-highlights"), 1);
|
||||
});
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import {HorizontalRule} from "content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule";
|
||||
import React from "react";
|
||||
import {shallowWithIntl} from "test/unit/utils";
|
||||
import {shallow} from "enzyme";
|
||||
|
||||
describe("<HorizontalRule>", () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowWithIntl(<HorizontalRule />);
|
||||
wrapper = shallow(<HorizontalRule />);
|
||||
});
|
||||
|
||||
it("should render", () => {
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import {Navigation, Topic} from "content-src/components/DiscoveryStreamComponents/Navigation/Navigation";
|
||||
import React from "react";
|
||||
import {SafeAnchor} from "content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
|
||||
import {shallowWithIntl} from "test/unit/utils";
|
||||
import {shallow} from "enzyme";
|
||||
|
||||
describe("<Navigation>", () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowWithIntl(<Navigation header={{}} />);
|
||||
wrapper = shallow(<Navigation header={{}} />);
|
||||
});
|
||||
|
||||
it("should render", () => {
|
||||
|
@ -36,7 +36,7 @@ describe("<Topic>", () => {
|
|||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowWithIntl(<Topic url="https://foo.com" name="foo" />);
|
||||
wrapper = shallow(<Topic url="https://foo.com" name="foo" />);
|
||||
});
|
||||
|
||||
it("should render", () => {
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import React from "react";
|
||||
import {SectionTitle} from "content-src/components/DiscoveryStreamComponents/SectionTitle/SectionTitle";
|
||||
import {shallowWithIntl} from "test/unit/utils";
|
||||
import {shallow} from "enzyme";
|
||||
|
||||
describe("<SectionTitle>", () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowWithIntl(<SectionTitle header={{}} />);
|
||||
wrapper = shallow(<SectionTitle header={{}} />);
|
||||
});
|
||||
|
||||
it("should render", () => {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {combineReducers, createStore} from "redux";
|
||||
import {INITIAL_STATE, reducers, TOP_SITES_DEFAULT_ROWS} from "common/Reducers.jsm";
|
||||
import {mountWithIntl} from "test/unit/utils";
|
||||
import {mount} from "enzyme";
|
||||
import {TopSites as OldTopSites} from "content-src/components/TopSites/TopSites";
|
||||
import {Provider} from "react-redux";
|
||||
import React from "react";
|
||||
|
@ -13,7 +13,7 @@ describe("Discovery Stream <TopSites>", () => {
|
|||
beforeEach(() => {
|
||||
INITIAL_STATE.Prefs.values.topSitesRows = TOP_SITES_DEFAULT_ROWS;
|
||||
store = createStore(combineReducers(reducers), INITIAL_STATE);
|
||||
wrapper = mountWithIntl(<Provider store={store}><TopSites /></Provider>);
|
||||
wrapper = mount(<Provider store={store}><TopSites /></Provider>);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
@ -39,7 +39,7 @@ describe("Discovery Stream <TopSites>", () => {
|
|||
let DEFAULT_PROPS = {
|
||||
header: {title: "test"},
|
||||
};
|
||||
wrapper = mountWithIntl(<Provider store={store}><TopSites {...DEFAULT_PROPS} /></Provider>);
|
||||
wrapper = mount(<Provider store={store}><TopSites {...DEFAULT_PROPS} /></Provider>);
|
||||
const oldTopSites = wrapper.find(OldTopSites);
|
||||
assert.equal(oldTopSites.props().title, "test");
|
||||
});
|
||||
|
|
|
@ -1,20 +1,20 @@
|
|||
import {MoreRecommendations} from "content-src/components/MoreRecommendations/MoreRecommendations";
|
||||
import React from "react";
|
||||
import {shallowWithIntl} from "test/unit/utils";
|
||||
import {shallow} from "enzyme";
|
||||
|
||||
describe("<MoreRecommendations>", () => {
|
||||
it("should render a MoreRecommendations element", () => {
|
||||
const wrapper = shallowWithIntl(<MoreRecommendations />);
|
||||
const wrapper = shallow(<MoreRecommendations />);
|
||||
assert.ok(wrapper.exists());
|
||||
});
|
||||
it("should render a link when provided with read_more_endpoint prop", () => {
|
||||
const wrapper = shallowWithIntl(<MoreRecommendations read_more_endpoint="https://endpoint.com" />);
|
||||
const wrapper = shallow(<MoreRecommendations read_more_endpoint="https://endpoint.com" />);
|
||||
|
||||
const link = wrapper.find(".more-recommendations");
|
||||
assert.lengthOf(link, 1);
|
||||
});
|
||||
it("should not render a link when provided with read_more_endpoint prop", () => {
|
||||
const wrapper = shallowWithIntl(<MoreRecommendations read_more_endpoint="" />);
|
||||
const wrapper = shallow(<MoreRecommendations read_more_endpoint="" />);
|
||||
|
||||
const link = wrapper.find(".more-recommendations");
|
||||
assert.lengthOf(link, 0);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {mountWithIntl} from "test/unit/utils";
|
||||
import {mount} from "enzyme";
|
||||
import React from "react";
|
||||
import {ReturnToAMO} from "content-src/asrouter/templates/ReturnToAMO/ReturnToAMO";
|
||||
|
||||
|
@ -28,7 +28,7 @@ describe("<ReturnToAMO>", () => {
|
|||
it("should send an IMPRESSION on mount", () => {
|
||||
assert.notCalled(sendUserActionTelemetryStub);
|
||||
|
||||
wrapper = mountWithIntl(<ReturnToAMO onReady={onReady}
|
||||
wrapper = mount(<ReturnToAMO onReady={onReady}
|
||||
dispatch={dispatch}
|
||||
content={content}
|
||||
onBlock={sandbox.stub()}
|
||||
|
@ -46,7 +46,7 @@ describe("<ReturnToAMO>", () => {
|
|||
|
||||
describe("mounted", () => {
|
||||
beforeEach(() => {
|
||||
wrapper = mountWithIntl(<ReturnToAMO onReady={onReady}
|
||||
wrapper = mount(<ReturnToAMO onReady={onReady}
|
||||
dispatch={dispatch}
|
||||
content={content}
|
||||
onBlock={sandbox.stub()}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import {GlobalOverrider, mountWithIntl, shallowWithIntl} from "test/unit/utils";
|
||||
import {GlobalOverrider} from "test/unit/utils";
|
||||
import {mount, shallow} from "enzyme";
|
||||
import React from "react";
|
||||
import {_Search as Search} from "content-src/components/Search/Search";
|
||||
|
||||
|
@ -18,24 +19,24 @@ describe("<Search>", () => {
|
|||
});
|
||||
|
||||
it("should render a Search element", () => {
|
||||
const wrapper = shallowWithIntl(<Search {...DEFAULT_PROPS} />);
|
||||
const wrapper = shallow(<Search {...DEFAULT_PROPS} />);
|
||||
assert.ok(wrapper.exists());
|
||||
});
|
||||
it("should not use a <form> element", () => {
|
||||
const wrapper = mountWithIntl(<Search {...DEFAULT_PROPS} />);
|
||||
const wrapper = mount(<Search {...DEFAULT_PROPS} />);
|
||||
|
||||
assert.equal(wrapper.find("form").length, 0);
|
||||
});
|
||||
it("should listen for ContentSearchClient on render", () => {
|
||||
const spy = globals.set("addEventListener", sandbox.spy());
|
||||
|
||||
const wrapper = mountWithIntl(<Search {...DEFAULT_PROPS} />);
|
||||
const wrapper = mount(<Search {...DEFAULT_PROPS} />);
|
||||
|
||||
assert.calledOnce(spy.withArgs("ContentSearchClient", wrapper.instance()));
|
||||
});
|
||||
it("should stop listening for ContentSearchClient on unmount", () => {
|
||||
const spy = globals.set("removeEventListener", sandbox.spy());
|
||||
const wrapper = mountWithIntl(<Search {...DEFAULT_PROPS} />);
|
||||
const wrapper = mount(<Search {...DEFAULT_PROPS} />);
|
||||
// cache the instance as we can't call this method after unmount is called
|
||||
const instance = wrapper.instance();
|
||||
|
||||
|
@ -46,12 +47,12 @@ describe("<Search>", () => {
|
|||
it("should add gContentSearchController as a global", () => {
|
||||
// current about:home tests need gContentSearchController to exist as a global
|
||||
// so let's test it here too to ensure we don't break this behaviour
|
||||
mountWithIntl(<Search {...DEFAULT_PROPS} />);
|
||||
mount(<Search {...DEFAULT_PROPS} />);
|
||||
assert.property(window, "gContentSearchController");
|
||||
assert.ok(window.gContentSearchController);
|
||||
});
|
||||
it("should pass along search when clicking the search button", () => {
|
||||
const wrapper = mountWithIntl(<Search {...DEFAULT_PROPS} />);
|
||||
const wrapper = mount(<Search {...DEFAULT_PROPS} />);
|
||||
|
||||
wrapper.find(".search-button").simulate("click");
|
||||
|
||||
|
@ -64,7 +65,7 @@ describe("<Search>", () => {
|
|||
dispatchEvent(new CustomEvent("ContentSearchClient", {detail: {type: "Search"}}));
|
||||
};
|
||||
const dispatch = sinon.spy();
|
||||
const wrapper = mountWithIntl(<Search {...DEFAULT_PROPS} dispatch={dispatch} />);
|
||||
const wrapper = mount(<Search {...DEFAULT_PROPS} dispatch={dispatch} />);
|
||||
|
||||
wrapper.find(".search-button").simulate("click");
|
||||
|
||||
|
@ -76,13 +77,13 @@ describe("<Search>", () => {
|
|||
|
||||
describe("Search Hand-off", () => {
|
||||
it("should render a Search element when hand-off is enabled", () => {
|
||||
const wrapper = shallowWithIntl(<Search {...DEFAULT_PROPS} handoffEnabled={true} />);
|
||||
const wrapper = shallow(<Search {...DEFAULT_PROPS} handoffEnabled={true} />);
|
||||
assert.ok(wrapper.exists());
|
||||
assert.equal(wrapper.find(".search-handoff-button").length, 1);
|
||||
});
|
||||
it("should hand-off search when button is clicked", () => {
|
||||
const dispatch = sinon.spy();
|
||||
const wrapper = shallowWithIntl(<Search {...DEFAULT_PROPS} handoffEnabled={true} dispatch={dispatch} />);
|
||||
const wrapper = shallow(<Search {...DEFAULT_PROPS} handoffEnabled={true} dispatch={dispatch} />);
|
||||
wrapper.find(".search-handoff-button").simulate("click", {preventDefault: () => {}});
|
||||
assert.calledThrice(dispatch);
|
||||
assert.calledWith(dispatch, {
|
||||
|
@ -97,7 +98,7 @@ describe("<Search>", () => {
|
|||
});
|
||||
it("should hand-off search on paste", () => {
|
||||
const dispatch = sinon.spy();
|
||||
const wrapper = mountWithIntl(<Search {...DEFAULT_PROPS} handoffEnabled={true} dispatch={dispatch} />);
|
||||
const wrapper = mount(<Search {...DEFAULT_PROPS} handoffEnabled={true} dispatch={dispatch} />);
|
||||
wrapper.instance()._searchHandoffButton = {contains: () => true};
|
||||
wrapper.instance().onSearchHandoffPaste({
|
||||
clipboardData: {
|
||||
|
@ -118,7 +119,7 @@ describe("<Search>", () => {
|
|||
});
|
||||
it("should properly handle drop events", () => {
|
||||
const dispatch = sinon.spy();
|
||||
const wrapper = mountWithIntl(<Search {...DEFAULT_PROPS} handoffEnabled={true} dispatch={dispatch} />);
|
||||
const wrapper = mount(<Search {...DEFAULT_PROPS} handoffEnabled={true} dispatch={dispatch} />);
|
||||
const preventDefault = sinon.spy();
|
||||
wrapper.find(".fake-editable").simulate("drop", {
|
||||
dataTransfer: {getData: () => "dropped text"},
|
||||
|
|
|
@ -1,25 +1,24 @@
|
|||
import {combineReducers, createStore} from "redux";
|
||||
import {INITIAL_STATE, reducers} from "common/Reducers.jsm";
|
||||
import {mountWithIntl, shallowWithIntl} from "test/unit/utils";
|
||||
import {Section, SectionIntl, _Sections as Sections} from "content-src/components/Sections/Sections";
|
||||
import {actionTypes as at} from "common/Actions.jsm";
|
||||
import {mount, shallow} from "enzyme";
|
||||
import {PlaceholderCard} from "content-src/components/Card/Card";
|
||||
import {PocketLoggedInCta} from "content-src/components/PocketLoggedInCta/PocketLoggedInCta";
|
||||
import {Provider} from "react-redux";
|
||||
import React from "react";
|
||||
import {SectionMenu} from "content-src/components/SectionMenu/SectionMenu";
|
||||
import {shallow} from "enzyme";
|
||||
import {Topics} from "content-src/components/Topics/Topics";
|
||||
import {TopSites} from "content-src/components/TopSites/TopSites";
|
||||
|
||||
function mountSectionWithProps(props) {
|
||||
const store = createStore(combineReducers(reducers), INITIAL_STATE);
|
||||
return mountWithIntl(<Provider store={store}><Section {...props} /></Provider>);
|
||||
return mount(<Provider store={store}><Section {...props} /></Provider>);
|
||||
}
|
||||
|
||||
function mountSectionIntlWithProps(props) {
|
||||
const store = createStore(combineReducers(reducers), INITIAL_STATE);
|
||||
return mountWithIntl(<Provider store={store}><SectionIntl {...props} /></Provider>);
|
||||
return mount(<Provider store={store}><SectionIntl {...props} /></Provider>);
|
||||
}
|
||||
|
||||
describe("<Sections>", () => {
|
||||
|
@ -103,7 +102,7 @@ describe("<Section>", () => {
|
|||
assert.equal(wrapper.find(SectionMenu).length, 1);
|
||||
});
|
||||
it("should not render a section menu by default", () => {
|
||||
wrapper = shallowWithIntl(<Section {...FAKE_SECTION} />);
|
||||
wrapper = shallow(<Section {...FAKE_SECTION} />);
|
||||
assert.equal(wrapper.find(SectionMenu).length, 0);
|
||||
});
|
||||
});
|
||||
|
@ -113,7 +112,7 @@ describe("<Section>", () => {
|
|||
const fakeSite = {link: "http://localhost"};
|
||||
function renderWithSites(rows) {
|
||||
const store = createStore(combineReducers(reducers), INITIAL_STATE);
|
||||
return mountWithIntl(<Provider store={store}><Section {...FAKE_SECTION} rows={rows} /></Provider>);
|
||||
return mount(<Provider store={store}><Section {...FAKE_SECTION} rows={rows} /></Provider>);
|
||||
}
|
||||
|
||||
it("should return 2 row of placeholders if realRows is 0", () => {
|
||||
|
@ -147,7 +146,7 @@ describe("<Section>", () => {
|
|||
rows: [],
|
||||
emptyState: {message: "Some message", icon: "moz-extension://some/extension/path"},
|
||||
});
|
||||
wrapper = shallowWithIntl(
|
||||
wrapper = shallow(
|
||||
<Section {...FAKE_SECTION} />);
|
||||
});
|
||||
it("should be shown when rows is empty and initialized is true", () => {
|
||||
|
@ -159,7 +158,7 @@ describe("<Section>", () => {
|
|||
rows: [],
|
||||
emptyState: {message: "Some message", icon: "moz-extension://some/extension/path"},
|
||||
});
|
||||
wrapper = shallowWithIntl(
|
||||
wrapper = shallow(
|
||||
<Section {...FAKE_SECTION} />);
|
||||
assert.isFalse(wrapper.find(".empty-state").exists());
|
||||
});
|
||||
|
@ -276,7 +275,7 @@ describe("<Section>", () => {
|
|||
};
|
||||
|
||||
function renderSection(props = {}) {
|
||||
return shallowWithIntl(<Section
|
||||
return shallow(<Section
|
||||
{...FAKE_TOPSTORIES_SECTION_PROPS}
|
||||
{...props} />);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {actionCreators as ac, actionTypes as at} from "common/Actions.jsm";
|
||||
import {mountWithIntl} from "test/unit/utils";
|
||||
import {mount} from "enzyme";
|
||||
import React from "react";
|
||||
import {_StartupOverlay as StartupOverlay} from "content-src/asrouter/templates/StartupOverlay/StartupOverlay";
|
||||
|
||||
|
@ -15,7 +15,7 @@ describe("<StartupOverlay>", () => {
|
|||
onReady = sandbox.stub();
|
||||
onBlock = sandbox.stub();
|
||||
|
||||
wrapper = mountWithIntl(<StartupOverlay onBlock={onBlock} onReady={onReady} dispatch={dispatch} />);
|
||||
wrapper = mount(<StartupOverlay onBlock={onBlock} onReady={onReady} dispatch={dispatch} />);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
@ -29,7 +29,7 @@ describe("<StartupOverlay>", () => {
|
|||
|
||||
it("should call prop.onReady after mount + timeout", async () => {
|
||||
const clock = sandbox.useFakeTimers();
|
||||
wrapper = mountWithIntl(<StartupOverlay onBlock={onBlock} onReady={onReady} dispatch={dispatch} />);
|
||||
wrapper = mount(<StartupOverlay onBlock={onBlock} onReady={onReady} dispatch={dispatch} />);
|
||||
wrapper.setState({overlayRemoved: false});
|
||||
|
||||
clock.tick(10);
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import {actionCreators as ac, actionTypes as at} from "common/Actions.jsm";
|
||||
import {GlobalOverrider, mountWithIntl, shallowWithIntl} from "test/unit/utils";
|
||||
import {GlobalOverrider} from "test/unit/utils";
|
||||
import {MIN_CORNER_FAVICON_SIZE, MIN_RICH_FAVICON_SIZE} from "content-src/components/TopSites/TopSitesConstants";
|
||||
import {TOP_SITES_DEFAULT_ROWS, TOP_SITES_MAX_SITES_PER_ROW} from "common/Reducers.jsm";
|
||||
import {TopSite, TopSiteLink, _TopSiteList as TopSiteList, TopSitePlaceholder} from "content-src/components/TopSites/TopSite";
|
||||
import {TopSite, TopSiteLink, TopSiteList, TopSitePlaceholder} from "content-src/components/TopSites/TopSite";
|
||||
import {A11yLinkButton} from "content-src/components/A11yLinkButton/A11yLinkButton";
|
||||
import {LinkMenu} from "content-src/components/LinkMenu/LinkMenu";
|
||||
import React from "react";
|
||||
import {SectionMenu} from "content-src/components/SectionMenu/SectionMenu";
|
||||
import {shallow} from "enzyme";
|
||||
import {mount, shallow} from "enzyme";
|
||||
import {TopSiteForm} from "content-src/components/TopSites/TopSiteForm";
|
||||
import {TopSiteFormInput} from "content-src/components/TopSites/TopSiteFormInput";
|
||||
import {_TopSites as TopSites} from "content-src/components/TopSites/TopSites";
|
||||
|
@ -23,7 +23,6 @@ const DEFAULT_PROPS = {
|
|||
TopSitesRows: TOP_SITES_DEFAULT_ROWS,
|
||||
topSiteIconType: () => "no_image",
|
||||
dispatch() {},
|
||||
intl: {formatMessage: x => x},
|
||||
perfSvc,
|
||||
};
|
||||
|
||||
|
@ -46,22 +45,22 @@ describe("<TopSites>", () => {
|
|||
});
|
||||
describe("context menu", () => {
|
||||
it("should render a context menu button", () => {
|
||||
const wrapper = mountWithIntl(<TopSites {...DEFAULT_PROPS} />);
|
||||
const wrapper = mount(<TopSites {...DEFAULT_PROPS} />);
|
||||
assert.equal(wrapper.find(".section-top-bar .context-menu-button").length, 1);
|
||||
});
|
||||
it("should render a section menu when button is clicked", () => {
|
||||
const wrapper = mountWithIntl(<TopSites {...DEFAULT_PROPS} />);
|
||||
const wrapper = mount(<TopSites {...DEFAULT_PROPS} />);
|
||||
const button = wrapper.find(".section-top-bar .context-menu-button");
|
||||
assert.equal(wrapper.find(SectionMenu).length, 0);
|
||||
button.simulate("click", {preventDefault: () => {}});
|
||||
assert.equal(wrapper.find(SectionMenu).length, 1);
|
||||
});
|
||||
it("should not render a section menu by default", () => {
|
||||
const wrapper = mountWithIntl(<TopSites {...DEFAULT_PROPS} />);
|
||||
const wrapper = mount(<TopSites {...DEFAULT_PROPS} />);
|
||||
assert.equal(wrapper.find(SectionMenu).length, 0);
|
||||
});
|
||||
it("should pass through the correct menu extraOptions to SectionMenu", () => {
|
||||
const wrapper = mountWithIntl(<TopSites {...DEFAULT_PROPS} />);
|
||||
const wrapper = mount(<TopSites {...DEFAULT_PROPS} />);
|
||||
wrapper.find(".section-top-bar .context-menu-button").simulate("click", {preventDefault: () => {}});
|
||||
const sectionMenuProps = wrapper.find(SectionMenu).props();
|
||||
assert.deepEqual(sectionMenuProps.extraOptions, ["AddTopSite"]);
|
||||
|
@ -548,7 +547,7 @@ describe("<TopSite>", () => {
|
|||
});
|
||||
|
||||
it("should render a TopSite", () => {
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} />);
|
||||
const wrapper = shallow(<TopSite link={link} />);
|
||||
assert.ok(wrapper.exists());
|
||||
});
|
||||
|
||||
|
@ -556,45 +555,45 @@ describe("<TopSite>", () => {
|
|||
link.url = "https://www.foobar.org";
|
||||
link.hostname = "foobar";
|
||||
link.eTLD = "org";
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} />);
|
||||
const wrapper = shallow(<TopSite link={link} />);
|
||||
|
||||
assert.equal(wrapper.find(TopSiteLink).props().title, "foobar");
|
||||
});
|
||||
|
||||
it("should have .active class, on top-site-outer if context menu is open", () => {
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} index={1} activeIndex={1} />);
|
||||
const wrapper = shallow(<TopSite link={link} index={1} activeIndex={1} />);
|
||||
wrapper.setState({showContextMenu: true});
|
||||
|
||||
assert.equal(wrapper.find(TopSiteLink).props().className.trim(), "active");
|
||||
});
|
||||
it("should not add .active class, on top-site-outer if context menu is closed", () => {
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} index={1} />);
|
||||
const wrapper = shallow(<TopSite link={link} index={1} />);
|
||||
wrapper.setState({showContextMenu: false, activeTile: 1});
|
||||
assert.equal(wrapper.find(TopSiteLink).props().className, "");
|
||||
});
|
||||
it("should render a context menu button", () => {
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} />);
|
||||
const wrapper = shallow(<TopSite link={link} />);
|
||||
assert.equal(wrapper.find(".context-menu-button").length, 1);
|
||||
});
|
||||
it("should render a link menu when button is clicked", () => {
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} />);
|
||||
const wrapper = shallow(<TopSite link={link} />);
|
||||
let button = wrapper.find(".context-menu-button");
|
||||
assert.equal(wrapper.find(LinkMenu).length, 0);
|
||||
button.simulate("click", {preventDefault: () => {}});
|
||||
assert.equal(wrapper.find(LinkMenu).length, 1);
|
||||
});
|
||||
it("should not render a link menu by default", () => {
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} />);
|
||||
const wrapper = shallow(<TopSite link={link} />);
|
||||
assert.equal(wrapper.find(LinkMenu).length, 0);
|
||||
});
|
||||
it("should pass onUpdate, site, options, and index to LinkMenu", () => {
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} />);
|
||||
const wrapper = shallow(<TopSite link={link} />);
|
||||
wrapper.find(".context-menu-button").simulate("click", {preventDefault: () => {}});
|
||||
const linkMenuProps = wrapper.find(LinkMenu).props();
|
||||
["onUpdate", "site", "index", "options"].forEach(prop => assert.property(linkMenuProps, prop));
|
||||
});
|
||||
it("should pass through the correct menu options to LinkMenu", () => {
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} />);
|
||||
const wrapper = shallow(<TopSite link={link} />);
|
||||
wrapper.find(".context-menu-button").simulate("click", {preventDefault: () => {}});
|
||||
const linkMenuProps = wrapper.find(LinkMenu).props();
|
||||
assert.deepEqual(linkMenuProps.options,
|
||||
|
@ -604,7 +603,7 @@ describe("<TopSite>", () => {
|
|||
describe("#onLinkClick", () => {
|
||||
it("should call dispatch when the link is clicked", () => {
|
||||
const dispatch = sinon.stub();
|
||||
const wrapper = shallowWithIntl(<TopSite link={link} index={3} dispatch={dispatch} />);
|
||||
const wrapper = shallow(<TopSite link={link} index={3} dispatch={dispatch} />);
|
||||
|
||||
wrapper.find(TopSiteLink).simulate("click", {preventDefault() {}});
|
||||
|
||||
|
@ -612,7 +611,7 @@ describe("<TopSite>", () => {
|
|||
});
|
||||
it("should dispatch a UserEventAction with the right data", () => {
|
||||
const dispatch = sinon.stub();
|
||||
const wrapper = shallowWithIntl(<TopSite link={Object.assign({}, link, {iconType: "rich_icon", isPinned: true})} index={3} dispatch={dispatch} />);
|
||||
const wrapper = shallow(<TopSite link={Object.assign({}, link, {iconType: "rich_icon", isPinned: true})} index={3} dispatch={dispatch} />);
|
||||
|
||||
wrapper.find(TopSiteLink).simulate("click", {preventDefault() {}});
|
||||
|
||||
|
@ -634,7 +633,7 @@ describe("<TopSite>", () => {
|
|||
hostname: "google",
|
||||
label: "@google",
|
||||
};
|
||||
const wrapper = shallowWithIntl(<TopSite link={Object.assign({}, link, siteInfo)} index={3} dispatch={dispatch} />);
|
||||
const wrapper = shallow(<TopSite link={Object.assign({}, link, siteInfo)} index={3} dispatch={dispatch} />);
|
||||
|
||||
wrapper.find(TopSiteLink).simulate("click", {preventDefault() {}});
|
||||
|
||||
|
@ -650,7 +649,7 @@ describe("<TopSite>", () => {
|
|||
});
|
||||
it("should dispatch OPEN_LINK with the right data", () => {
|
||||
const dispatch = sinon.stub();
|
||||
const wrapper = shallowWithIntl(<TopSite link={Object.assign({}, link, {typedBonus: true})} index={3} dispatch={dispatch} />);
|
||||
const wrapper = shallow(<TopSite link={Object.assign({}, link, {typedBonus: true})} index={3} dispatch={dispatch} />);
|
||||
|
||||
wrapper.find(TopSiteLink).simulate("click", {preventDefault() {}});
|
||||
|
||||
|
@ -668,7 +667,7 @@ describe("<TopSiteForm>", () => {
|
|||
function setup(props = {}) {
|
||||
sandbox = sinon.createSandbox();
|
||||
const customProps = Object.assign({}, {onClose: sandbox.spy(), dispatch: sandbox.spy()}, props);
|
||||
wrapper = mountWithIntl(<TopSiteForm {...customProps} />);
|
||||
wrapper = mount(<TopSiteForm {...customProps} />);
|
||||
}
|
||||
|
||||
describe("validateForm", () => {
|
||||
|
@ -1166,7 +1165,7 @@ describe("<TopSiteList>", () => {
|
|||
for (let i = 0; i < TOP_SITES_MAX_SITES_PER_ROW; i++) {
|
||||
rows.push({url: `https://foo${i}.com`});
|
||||
}
|
||||
const wrapper = mountWithIntl(<TopSiteList {...DEFAULT_PROPS} TopSites={{rows}} TopSitesRows={1} />);
|
||||
const wrapper = mount(<TopSiteList {...DEFAULT_PROPS} TopSites={{rows}} TopSitesRows={1} />);
|
||||
assert.lengthOf(wrapper.find("li.hide-for-narrow"), 2);
|
||||
});
|
||||
});
|
||||
|
@ -1175,7 +1174,7 @@ describe("TopSitePlaceholder", () => {
|
|||
it("should dispatch a TOP_SITES_EDIT action when edit-button is clicked", () => {
|
||||
const dispatch = sinon.spy();
|
||||
const wrapper =
|
||||
shallowWithIntl(<TopSitePlaceholder dispatch={dispatch} index={7} />);
|
||||
shallow(<TopSitePlaceholder dispatch={dispatch} index={7} />);
|
||||
|
||||
wrapper.find(".edit-button").first().simulate("click");
|
||||
|
||||
|
@ -1193,7 +1192,7 @@ describe("#TopSiteFormInput", () => {
|
|||
beforeEach(() => {
|
||||
onChangeStub = sinon.stub();
|
||||
|
||||
wrapper = mountWithIntl(<TopSiteFormInput titleId="newtab-topsites-title-label"
|
||||
wrapper = mount(<TopSiteFormInput titleId="newtab-topsites-title-label"
|
||||
placeholderId="newtab-topsites-title-input"
|
||||
errorMessageId="newtab-topsites-url-validation"
|
||||
onChange={onChangeStub}
|
||||
|
@ -1239,7 +1238,7 @@ describe("#TopSiteFormInput", () => {
|
|||
beforeEach(() => {
|
||||
onChangeStub = sinon.stub();
|
||||
|
||||
wrapper = mountWithIntl(<TopSiteFormInput titleId="newtab-topsites-title-label"
|
||||
wrapper = mount(<TopSiteFormInput titleId="newtab-topsites-title-label"
|
||||
placeholderId="newtab-topsites-title-input"
|
||||
onChange={onChangeStub}
|
||||
validationError={true}
|
||||
|
|
|
@ -1,11 +1,10 @@
|
|||
import {Topic, Topics} from "content-src/components/Topics/Topics";
|
||||
import React from "react";
|
||||
import {shallow} from "enzyme";
|
||||
import {shallowWithIntl} from "test/unit/utils";
|
||||
|
||||
describe("<Topics>", () => {
|
||||
it("should render a Topics element", () => {
|
||||
const wrapper = shallowWithIntl(<Topics topics={[]} />);
|
||||
const wrapper = shallow(<Topics topics={[]} />);
|
||||
assert.ok(wrapper.exists());
|
||||
});
|
||||
it("should render a Topic element for each topic with the right url", () => {
|
||||
|
|
|
@ -1,13 +1,3 @@
|
|||
import {IntlProvider, intlShape} from "react-intl";
|
||||
import {mount, shallow} from "enzyme";
|
||||
import React from "react";
|
||||
|
||||
const messages = require("data/locales.json")["en-US"]; // eslint-disable-line import/no-commonjs
|
||||
|
||||
const intlProvider = new IntlProvider({locale: "en-US", messages});
|
||||
|
||||
const {intl} = intlProvider.getChildContext();
|
||||
|
||||
/**
|
||||
* GlobalOverrider - Utility that allows you to override properties on the global object.
|
||||
* See unit-entry.js for example usage.
|
||||
|
@ -254,21 +244,3 @@ FakePerformance.prototype = {
|
|||
export function addNumberReducer(prevState = 0, action) {
|
||||
return action.type === "ADD" ? prevState + action.data : prevState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper functions to test components that need IntlProvider as an ancestor
|
||||
*/
|
||||
function nodeWithIntlProp(node) {
|
||||
return React.cloneElement(node, {intl});
|
||||
}
|
||||
|
||||
export function shallowWithIntl(node, options = {}) {
|
||||
return shallow(nodeWithIntlProp(node), Object.assign({}, options, {context: {intl}}));
|
||||
}
|
||||
|
||||
export function mountWithIntl(node, options = {}) {
|
||||
return mount(nodeWithIntlProp(node), Object.assign({}, options, {
|
||||
context: {intl},
|
||||
childContextTypes: {intl: intlShape},
|
||||
}));
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче