Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
view-container / dist / models / test / ThemeProvider.test.js
Size: Mime:
"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