"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 utils_1 = require("./utils");
let styled;
describe('expanded api', () => {
    /**
     * Make sure the setup is the same for every test
     */
    beforeEach(() => {
        styled = utils_1.resetStyled();
    });
    describe('displayName', () => {
        it('should be auto-generated if none passed', () => {
            const Comp = styled.div ``;
            expect(Comp.displayName).toBe('styled.div');
        });
        it('should be attached if supplied', () => {
            const Comp = styled.div.withConfig({ displayName: 'Comp' }) ``;
            expect(Comp.displayName).toBe('Comp');
        });
    });
    describe('componentId', () => {
        it('should be generated as "sc" + hash', () => {
            const Comp = styled.div ``;
            const Comp2 = styled.div ``;
            expect(Comp.styledComponentId).toBe('sc-a');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).prop('className')).toMatch(/sc-a/);
            expect(Comp2.styledComponentId).toBe('sc-b');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp2, null)).prop('className')).toMatch(/sc-b/);
        });
        it('should be generated from displayName + hash', () => {
            const Comp = styled.div.withConfig({ displayName: 'Comp' }) ``;
            const Comp2 = styled.div.withConfig({ displayName: 'Comp2' }) ``;
            expect(Comp.styledComponentId).toBe('Comp-a');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).prop('className')).toMatch(/Comp-a/);
            expect(Comp2.styledComponentId).toBe('Comp2-b');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp2, null)).prop('className')).toMatch(/Comp2-b/);
        });
        it('should be attached if passed in', () => {
            const Comp = styled.div.withConfig({ componentId: 'LOLOMG' }) ``;
            const Comp2 = styled.div.withConfig({ componentId: 'OMGLOL' }) ``;
            expect(Comp.styledComponentId).toBe('LOLOMG');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).prop('className')).toMatch(/LOLOMG/);
            expect(Comp2.styledComponentId).toBe('OMGLOL');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp2, null)).prop('className')).toMatch(/OMGLOL/);
        });
        it('should be combined with displayName if both passed in', () => {
            const Comp = styled.div.withConfig({
                displayName: 'Comp',
                componentId: 'LOLOMG',
            }) ``;
            const Comp2 = styled.div.withConfig({
                displayName: 'Comp2',
                componentId: 'OMGLOL',
            }) ``;
            expect(Comp.styledComponentId).toBe('Comp-LOLOMG');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).prop('className')).toMatch(/Comp-LOLOMG/);
            expect(Comp2.styledComponentId).toBe('Comp2-OMGLOL');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp2, null)).prop('className')).toMatch(/Comp2-OMGLOL/);
        });
        it('should work with `.extend`', () => {
            const Comp = styled.div.withConfig({
                displayName: 'Comp',
                componentId: 'LOLOMG',
            }) `
        color: blue;
      `;
            const Comp2 = Comp.extend `
        color: ${'red'};
        background: ${props => props.bg};
      `;
            expect(Comp.styledComponentId).toBe('Comp-LOLOMG');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).prop('className')).toMatch(/Comp-LOLOMG/);
            expect(Comp2.styledComponentId).toBe('LOLOMG-Comp-a');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp2, { bg: "red" })).prop('className')).toMatch(/LOLOMG-Comp-a/);
        });
        it('should work with `.withComponent`', () => {
            const Dummy = () => null;
            const Comp = styled.div.withConfig({
                displayName: 'Comp',
                componentId: 'OMGLOL',
            }) ``.withComponent('h1');
            const Comp2 = styled.div.withConfig({
                displayName: 'Comp2',
                componentId: 'OMFG',
            }) ``.withComponent(Dummy);
            expect(Comp.styledComponentId).toBe('Comp-OMGLOL-h1');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).prop('className')).toMatch(/Comp-OMGLOL-h1/);
            expect(Comp2.styledComponentId).toBe('Comp2-OMFG-Dummy');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp2, null)).prop('className')).toMatch(/Comp2-OMFG-Dummy/);
        });
    });
    describe('chaining', () => {
        it('should merge the options strings', () => {
            const Comp = styled.div
                .withConfig({ componentId: 'id-1' })
                .withConfig({ displayName: 'dn-2' }) ``;
            expect(Comp.displayName).toBe('dn-2');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).prop('className')).toBe('dn-2-id-1 a');
        });
        it('should keep the last value passed in when merging', () => {
            const Comp = styled.div
                .withConfig({ displayName: 'dn-2', componentId: 'id-3' })
                .withConfig({ displayName: 'dn-5', componentId: 'id-4' }) ``;
            expect(Comp.displayName).toBe('dn-5');
            expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).prop('className')).toBe('dn-5-id-4 a');
        });
    });
});
//# sourceMappingURL=expanded-api.test.js.map