Repository URL to install this package:
|
Version:
1.2.13 ▾
|
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
// @flow
/* eslint-disable react/no-multi-comp */
const react_1 = __importDefault(require("react"));
const enzyme_1 = require("enzyme");
const ThemeProvider_1 = __importStar(require("../ThemeProvider"));
describe('ThemeProvider', () => {
it('should not throw an error when no children are passed', () => {
const result = enzyme_1.shallow(react_1.default.createElement(ThemeProvider_1.default, { theme: {} }));
expect(result.html()).toEqual(null);
});
it('should accept a theme prop that\'s a plain object', () => {
enzyme_1.shallow(react_1.default.createElement(ThemeProvider_1.default, { theme: { main: 'black' } }));
});
it('should render its child', () => {
const child = (react_1.default.createElement("p", null, "Child!"));
const renderedComp = enzyme_1.shallow(react_1.default.createElement(ThemeProvider_1.default, { theme: { main: 'black' } }, child));
expect(renderedComp.contains(child)).toEqual(true);
});
it('should merge its theme with an outer theme', (done) => {
const outerTheme = { main: 'black' };
const innerTheme = { secondary: 'black' };
// Setup Child
class Child extends react_1.default.Component {
componentWillMount() {
this.context[ThemeProvider_1.CHANNEL_NEXT].subscribe(theme => {
expect(theme).toEqual(Object.assign({}, outerTheme, innerTheme));
done();
});
}
render() { return null; }
}
Child.contextTypes = {
[ThemeProvider_1.CHANNEL_NEXT]: ThemeProvider_1.CONTEXT_CHANNEL_SHAPE,
};
enzyme_1.render(react_1.default.createElement(ThemeProvider_1.default, { theme: outerTheme },
react_1.default.createElement(ThemeProvider_1.default, { theme: innerTheme },
react_1.default.createElement(Child, null))));
});
it('should merge its theme with multiple outer themes', (done) => {
const outerestTheme = { main: 'black' };
const outerTheme = { main: 'blue' };
const innerTheme = { secondary: 'black' };
// Setup Child
class Child extends react_1.default.Component {
componentWillMount() {
this.context[ThemeProvider_1.CHANNEL_NEXT].subscribe(theme => {
expect(theme).toEqual(Object.assign({}, outerestTheme, outerTheme, innerTheme));
done();
});
}
render() { return null; }
}
Child.contextTypes = {
[ThemeProvider_1.CHANNEL_NEXT]: ThemeProvider_1.CONTEXT_CHANNEL_SHAPE,
};
enzyme_1.render(react_1.default.createElement(ThemeProvider_1.default, { theme: outerestTheme },
react_1.default.createElement(ThemeProvider_1.default, { theme: outerTheme },
react_1.default.createElement(ThemeProvider_1.default, { theme: innerTheme },
react_1.default.createElement(Child, null)))));
});
it('should be able to render two independent themes', (done) => {
const themes = {
one: { main: 'black', secondary: 'red' },
two: { main: 'blue', other: 'green' },
};
let childRendered = 0;
// Setup Child
class Child extends react_1.default.Component {
componentWillMount() {
this.context[ThemeProvider_1.CHANNEL_NEXT].subscribe(theme => {
// eslint-disable-next-line react/prop-types
expect(theme).toEqual(themes[this.props.shouldHaveTheme]);
childRendered++; // eslint-disable-line no-plusplus
if (childRendered === Object.keys(themes).length) {
done();
}
});
}
render() { return null; }
}
Child.contextTypes = {
[ThemeProvider_1.CHANNEL_NEXT]: ThemeProvider_1.CONTEXT_CHANNEL_SHAPE,
};
enzyme_1.render(react_1.default.createElement("div", null,
react_1.default.createElement(ThemeProvider_1.default, { theme: themes.one },
react_1.default.createElement(Child, { shouldHaveTheme: "one" })),
react_1.default.createElement(ThemeProvider_1.default, { theme: themes.two },
react_1.default.createElement(Child, { shouldHaveTheme: "two" }))));
});
it('ThemeProvider propagates theme updates through nested ThemeProviders', () => {
const theme = { themed: true };
const augment = outerTheme => Object.assign({}, outerTheme, { augmented: true });
const update = { updated: true };
let actual;
const expected = { themed: true, augmented: true, updated: true };
// Setup Child
class Child extends react_1.default.Component {
componentWillMount() {
this.context[ThemeProvider_1.CHANNEL_NEXT].subscribe(receivedTheme => {
actual = receivedTheme;
});
}
render() {
return null;
}
}
Child.contextTypes = {
[ThemeProvider_1.CHANNEL_NEXT]: ThemeProvider_1.CONTEXT_CHANNEL_SHAPE,
};
const wrapper = enzyme_1.mount(react_1.default.createElement(ThemeProvider_1.default, { theme: theme },
react_1.default.createElement(ThemeProvider_1.default, { theme: augment },
react_1.default.createElement(Child, null))));
wrapper.setProps({ theme: Object.assign({}, theme, update) });
expect(actual).toEqual(expected);
});
});
//# sourceMappingURL=ThemeProvider.test.js.map