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 / constructors / test / injectGlobal.test.js
Size: Mime:
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// @flow
const react_1 = __importDefault(require("react"));
const enzyme_1 = require("enzyme");
const injectGlobal_1 = __importDefault(require("../injectGlobal"));
const stringifyRules_1 = __importDefault(require("../../utils/stringifyRules"));
const css_1 = __importDefault(require("../css"));
const utils_1 = require("../../test/utils");
const injectGlobal = injectGlobal_1.default(stringifyRules_1.default, css_1.default);
let styled = utils_1.resetStyled();
const rule1 = 'width:100%;';
const rule2 = 'padding:10px;';
const rule3 = 'color:blue;';
describe('injectGlobal', () => {
    beforeEach(() => {
        utils_1.resetStyled();
    });
    it(`should inject rules into the head`, () => {
        injectGlobal `
      html {
        ${rule1}
      }
    `;
        utils_1.expectCSSMatches(`
      html {
        ${rule1}
      }
    `);
    });
    it(`should non-destructively inject styles when called repeatedly`, () => {
        injectGlobal `
      html {
        ${rule1}
      }
    `;
        injectGlobal `
      a {
        ${rule2}
      }
    `;
        utils_1.expectCSSMatches(`
      html {
        ${rule1}
      }
      a {
        ${rule2}
      }
    `);
    });
    it(`should non-destructively inject styles when called after a component`, () => {
        const Comp = styled.div `
      ${rule3};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        injectGlobal `
      html {
        ${rule1}
      }
    `;
        utils_1.expectCSSMatches(`
      .sc-a {}
      .b {
        ${rule3}
      }
      html {
        ${rule1}
      }
    `);
    });
    it('should extract @import rules into separate style tags', () => {
        injectGlobal `html { padding: 1px; }`;
        const Comp = styled.div `
      color: green;
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        injectGlobal `html { color: blue; } @import url('bla');`;
        const style = Array.from(document.querySelectorAll('style'))
            .map(tag => tag.outerHTML)
            .join('\n');
        expect(style).toMatchSnapshot();
    });
});
//# sourceMappingURL=injectGlobal.test.js.map