"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * @jest-environment node
 */
const react_1 = __importDefault(require("react"));
const server_1 = require("react-dom/server");
const ServerStyleSheet_1 = __importDefault(require("../models/ServerStyleSheet"));
const utils_1 = require("./utils");
const injectGlobal_1 = __importDefault(require("../constructors/injectGlobal"));
const keyframes_1 = __importDefault(require("../constructors/keyframes"));
const stringifyRules_1 = __importDefault(require("../utils/stringifyRules"));
const css_1 = __importDefault(require("../constructors/css"));
jest.mock('../utils/nonce');
const injectGlobal = injectGlobal_1.default(stringifyRules_1.default, css_1.default);
let index = 0;
const keyframes = keyframes_1.default(() => `keyframe_${index++}`, stringifyRules_1.default, css_1.default);
let styled;
describe('ssr', () => {
    beforeEach(() => {
        // eslint-disable-next-line
        require('../utils/nonce').mockReset();
        styled = utils_1.resetStyled(true);
    });
    afterEach(() => {
        process.env.NODE_ENV = 'test';
    });
    it('should extract the CSS in a simple case', () => {
        const Heading = styled.h1 `
      color: red;
    `;
        const sheet = new ServerStyleSheet_1.default();
        const html = server_1.renderToString(sheet.collectStyles(react_1.default.createElement(Heading, null, "Hello SSR!")));
        const css = sheet.getStyleTags();
        expect(html).toMatchSnapshot();
        expect(css).toMatchSnapshot();
    });
    it('should extract both global and local CSS', () => {
        injectGlobal `
      body { background: papayawhip; }
    `;
        const Heading = styled.h1 `
      color: red;
    `;
        const sheet = new ServerStyleSheet_1.default();
        const html = server_1.renderToString(sheet.collectStyles(react_1.default.createElement(Heading, null, "Hello SSR!")));
        const css = sheet.getStyleTags();
        expect(html).toMatchSnapshot();
        expect(css).toMatchSnapshot();
    });
    it('should not spill ServerStyleSheets into each other', () => {
        const A = styled.h1 `
      color: red;
    `;
        const B = styled.h1 `
      color: green;
    `;
        const sheetA = new ServerStyleSheet_1.default();
        server_1.renderToString(sheetA.collectStyles(react_1.default.createElement(A, null)));
        const cssA = sheetA.getStyleTags();
        const sheetB = new ServerStyleSheet_1.default();
        server_1.renderToString(sheetB.collectStyles(react_1.default.createElement(B, null)));
        const cssB = sheetB.getStyleTags();
        expect(cssA).toContain('red');
        expect(cssA).not.toContain('green');
        expect(cssB).not.toContain('red');
        expect(cssB).toContain('green');
    });
    it('should add a nonce to the stylesheet if webpack nonce is detected in the global scope', () => {
        // eslint-disable-next-line
        require('../utils/nonce').mockImplementation(() => 'foo');
        injectGlobal `
      body { background: papayawhip; }
    `;
        const Heading = styled.h1 `
      color: red;
    `;
        const sheet = new ServerStyleSheet_1.default();
        const html = server_1.renderToString(sheet.collectStyles(react_1.default.createElement(Heading, null, "Hello SSR!")));
        const css = sheet.getStyleTags();
        expect(html).toMatchSnapshot();
        expect(css).toMatchSnapshot();
    });
    it('should render CSS in the order the components were defined, not rendered', () => {
        const ONE = styled.h1.withConfig({ componentId: 'ONE' }) `
      color: red;
    `;
        const TWO = styled.h2.withConfig({ componentId: 'TWO' }) `
      color: blue;
    `;
        const sheet = new ServerStyleSheet_1.default();
        const html = server_1.renderToString(sheet.collectStyles(react_1.default.createElement("div", null,
            react_1.default.createElement(TWO, null),
            react_1.default.createElement(ONE, null))));
        const css = sheet.getStyleTags();
        expect(html).toMatchSnapshot();
        expect(css).toMatchSnapshot();
    });
    it('should share global styles but keep renders separate', () => {
        injectGlobal `
      body { background: papayawhip; }
    `;
        const PageOne = styled.h1.withConfig({ componentId: 'PageOne' }) `
      color: red;
    `;
        const PageTwo = styled.h2.withConfig({ componentId: 'PageTwo' }) `
      color: blue;
    `;
        const sheetOne = new ServerStyleSheet_1.default();
        const htmlOne = server_1.renderToString(sheetOne.collectStyles(react_1.default.createElement(PageOne, null, "Camera One!")));
        const cssOne = sheetOne.getStyleTags();
        const sheetTwo = new ServerStyleSheet_1.default();
        const htmlTwo = server_1.renderToString(sheetTwo.collectStyles(react_1.default.createElement(PageTwo, null, "Camera Two!")));
        const cssTwo = sheetTwo.getStyleTags();
        expect(htmlOne).toMatchSnapshot();
        expect(cssOne).toMatchSnapshot();
        expect(htmlTwo).toMatchSnapshot();
        expect(cssTwo).toMatchSnapshot();
    });
    it('should allow global styles to be injected during rendering', () => {
        injectGlobal `html::before { content: 'Before both renders'; }`;
        const PageOne = styled.h1.withConfig({ componentId: 'PageOne' }) `
      color: red;
    `;
        const PageTwo = styled.h2.withConfig({ componentId: 'PageTwo' }) `
      color: blue;
    `;
        const sheetOne = new ServerStyleSheet_1.default();
        const htmlOne = server_1.renderToString(sheetOne.collectStyles(react_1.default.createElement(PageOne, null, "Camera One!")));
        injectGlobal `html::before { content: 'During first render'; }`;
        const cssOne = sheetOne.getStyleTags();
        injectGlobal `html::before { content: 'Between renders'; }`;
        const sheetTwo = new ServerStyleSheet_1.default();
        injectGlobal `html::before { content: 'During second render'; }`;
        const htmlTwo = server_1.renderToString(sheetTwo.collectStyles(react_1.default.createElement(PageTwo, null, "Camera Two!")));
        const cssTwo = sheetTwo.getStyleTags();
        injectGlobal `html::before { content: 'After both renders'; }`;
        expect(htmlOne).toMatchSnapshot();
        expect(cssOne).toMatchSnapshot();
        expect(htmlTwo).toMatchSnapshot();
        expect(cssTwo).toMatchSnapshot();
    });
    it('should dispatch global styles to each ServerStyleSheet', () => {
        injectGlobal `
      body { background: papayawhip; }
    `;
        const Header = styled.h1.withConfig({ componentId: 'Header' }) `
      animation: ${props => props.animation} 1s both;
    `;
        const sheet = new ServerStyleSheet_1.default();
        const html = server_1.renderToString(sheet.collectStyles(react_1.default.createElement(Header, { animation: keyframes `0% { opacity: 0; }` })));
        const css = sheet.getStyleTags();
        expect(html).toMatchSnapshot();
        expect(css).toMatchSnapshot();
    });
    it('should return a generated React style element', () => {
        injectGlobal `
      body { background: papayawhip; }
    `;
        const Heading = styled.h1 `
      color: red;
    `;
        const sheet = new ServerStyleSheet_1.default();
        const html = server_1.renderToString(sheet.collectStyles(react_1.default.createElement(Heading, null, "Hello SSR!")));
        const elements = sheet.getStyleElement();
        expect(elements).toHaveLength(1);
        /* I know this looks pointless, but apparently I have the feeling we'll need this */
        expect(elements[0].props.dangerouslySetInnerHTML).toBeDefined();
        expect(elements[0].props.children).not.toBeDefined();
        expect(elements[0].props).toMatchSnapshot();
    });
    it('should return a generated React style element with nonce if webpack nonce is preset in the global scope', () => {
        // eslint-disable-next-line
        require('../utils/nonce').mockImplementation(() => 'foo');
        injectGlobal `
      body { background: papayawhip; }
    `;
        const Heading = styled.h1 `
      color: red;
    `;
        const sheet = new ServerStyleSheet_1.default();
        const html = server_1.renderToString(sheet.collectStyles(react_1.default.createElement(Heading, null, "Hello SSR!")));
        const elements = sheet.getStyleElement();
        expect(elements).toHaveLength(1);
        expect(elements[0].props.nonce).toBe('foo');
    });
    it('should interleave styles with rendered HTML when utilitizing streaming', () => {
        injectGlobal `
      body { background: papayawhip; }
    `;
        const Heading = styled.h1 `
      color: red;
    `;
        const sheet = new ServerStyleSheet_1.default();
        const jsx = sheet.collectStyles(react_1.default.createElement(Heading, null, "Hello SSR!"));
        const stream = sheet.interleaveWithNodeStream(server_1.renderToNodeStream(jsx));
        return new Promise((resolve, reject) => {
            let received = '';
            stream.on('data', chunk => {
                received += chunk;
            });
            stream.on('end', () => {
                expect(received).toMatchSnapshot();
                expect(sheet.closed).toBe(true);
                resolve();
            });
            stream.on('error', reject);
        });
    });
    it('should handle errors while streaming', () => {
        injectGlobal `
      body { background: papayawhip; }
    `;
        const Heading = styled.h1 `
      color: red;
    `;
        const sheet = new ServerStyleSheet_1.default();
        const jsx = sheet.collectStyles(null);
        const stream = sheet.interleaveWithNodeStream(server_1.renderToNodeStream(jsx));
        return new Promise((resolve, reject) => {
            stream.on('data', function noop() { });
            stream.on('error', err => {
                expect(err).toMatchSnapshot();
                expect(sheet.closed).toBe(true);
                resolve();
            });
        });
    });
});
//# sourceMappingURL=ssr.test.js.map