"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
const react_1 = __importDefault(require("react"));
const enzyme_1 = require("enzyme");
const nonce = __importStar(require("../utils/nonce"));
const utils_1 = require("./utils");
const StyleSheet_1 = __importDefault(require("../models/StyleSheet"));
const injectGlobal_1 = __importDefault(require("../constructors/injectGlobal"));
const stringifyRules_1 = __importDefault(require("../utils/stringifyRules"));
const css_1 = __importDefault(require("../constructors/css"));
const injectGlobal = injectGlobal_1.default(stringifyRules_1.default, css_1.default);
jest.mock('../utils/nonce');
jest.spyOn(nonce, 'default').mockImplementation(() => 'foo');
let styled;
describe('with styles', () => {
    /**
     * Make sure the setup is the same for every test
     */
    beforeEach(() => {
        // $FlowFixMe
        document.head.innerHTML = '';
        styled = utils_1.resetStyled();
    });
    it('should append a style', () => {
        const rule = 'color: blue;';
        const Comp = styled.div `
      ${rule};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { color:blue; }');
    });
    it('should append multiple styles', () => {
        const rule1 = 'color: blue;';
        const rule2 = 'background: red;';
        const Comp = styled.div `
      ${rule1} ${rule2};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { color:blue; background:red; }');
    });
    it('should handle inline style objects', () => {
        const rule1 = {
            backgroundColor: 'blue',
        };
        const Comp = styled.div `
      ${rule1};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { background-color:blue; }');
    });
    it('should handle inline style objects with media queries', () => {
        const rule1 = {
            backgroundColor: 'blue',
            '@media screen and (min-width: 250px)': {
                backgroundColor: 'red',
            },
        };
        const Comp = styled.div `
      ${rule1};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { background-color:blue; } @media screen and (min-width:250px) { .b { background-color:red; } }');
    });
    it('should handle inline style objects with pseudo selectors', () => {
        const rule1 = {
            backgroundColor: 'blue',
            '&:hover': {
                color: 'green',
            },
        };
        const Comp = styled.div `
      ${rule1};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { background-color:blue; } .b:hover { color:green; }');
    });
    it('should handle inline style objects with pseudo selectors', () => {
        const rule1 = {
            backgroundColor: 'blue',
            '&:hover': {
                color: 'green',
            },
        };
        const Comp = styled.div `
      ${rule1};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { background-color:blue; } .b:hover { color:green; }');
    });
    it('should handle inline style objects with nesting', () => {
        const rule1 = {
            backgroundColor: 'blue',
            '> h1': {
                color: 'white',
            },
        };
        const Comp = styled.div `
      ${rule1};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { background-color:blue; } .b > h1 { color:white; }');
    });
    it('should handle inline style objects with contextual selectors', () => {
        const rule1 = {
            backgroundColor: 'blue',
            'html.something &': {
                color: 'white',
            },
        };
        const Comp = styled.div `
      ${rule1};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { background-color:blue; } html.something .b { color:white; }');
    });
    it('should inject styles of multiple components', () => {
        const firstRule = 'background: blue;';
        const secondRule = 'background: red;';
        const FirstComp = styled.div `
      ${firstRule};
    `;
        const SecondComp = styled.div `
      ${secondRule};
    `;
        enzyme_1.shallow(react_1.default.createElement(FirstComp, null));
        enzyme_1.shallow(react_1.default.createElement(SecondComp, null));
        utils_1.expectCSSMatches('.sc-a {} .c { background:blue; } .sc-b {} .d { background:red; }');
    });
    it('should inject styles of multiple components based on creation, not rendering order', () => {
        const firstRule = 'content: "first rule";';
        const secondRule = 'content: "second rule";';
        const FirstComp = styled.div `
      ${firstRule};
    `;
        const SecondComp = styled.div `
      ${secondRule};
    `;
        // Switch rendering order, shouldn't change injection order
        enzyme_1.shallow(react_1.default.createElement(SecondComp, null));
        enzyme_1.shallow(react_1.default.createElement(FirstComp, null));
        // Classes _do_ get generated in the order of rendering but that's ok
        utils_1.expectCSSMatches(`
        .sc-a {}
        .d { content:"first rule"; }
        .sc-b {}
        .c { content:"second rule"; }
      `);
    });
    it('should strip a JS-style (invalid) comment in the styles', () => {
        const comment = '// This is an invalid comment';
        const rule = 'color: blue;';
        const Comp = styled.div `
      ${comment} ${rule};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches(`
        .sc-a {}
        .b {
          color:blue;
        }
      `);
    });
    it('should respect removed rules', () => {
        const Heading = styled.h1 `
      color: red;
    `;
        const Text = styled.span `
      color: green;
    `;
        enzyme_1.shallow(react_1.default.createElement(Heading, null,
            react_1.default.createElement(Text, null)));
        StyleSheet_1.default.master.remove(Text.styledComponentId);
        utils_1.expectCSSMatches(`
        .sc-a {}
        .c {
          color:red;
        }
      `);
    });
    it('should add a webpack nonce to the style tags if one is available in the global scope', () => {
        const rule = 'color: blue;';
        const Comp = styled.div `
      ${rule};
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches(`
        .sc-a {}
        .b {
          color:blue;
        }
      `);
        Array.from(document.querySelectorAll('style')).forEach(el => {
            expect(el.getAttribute('nonce')).toBe('foo');
        });
    });
});
//# sourceMappingURL=styles.test.js.map