"use strict";
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 = __importStar(require("react"));
const enzyme_1 = require("enzyme");
const utils_1 = require("./utils");
let styled;
describe('attrs', () => {
    beforeEach(() => {
        styled = utils_1.resetStyled();
    });
    it('work fine with an empty object', () => {
        const Comp = styled.div.attrs({}) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<div class="sc-a b"></div>');
    });
    it('pass a simple attr', () => {
        const Comp = styled.button.attrs({
            type: 'button',
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<button type="button" class="sc-a b"></button>');
    });
    it('pass a React component', () => {
        // $FlowFixMe
        class ReactComponent extends react_1.Component {
            render() {
                return react_1.default.createElement("p", null, "React Component");
            }
        }
        const Button = ({ component: ChildComponent }) => (react_1.default.createElement("button", null,
            react_1.default.createElement(ChildComponent, null)));
        const Comp = styled(Button).attrs({
            component: ReactComponent,
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<button><p>React Component</p></button>');
    });
    it('call an attr function', () => {
        const Comp = styled.button.attrs({
            type: () => 'button',
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<button type="button" class="sc-a b"></button>');
    });
    it('pass props to the attr function', () => {
        const Comp = styled.button.attrs({
            type: props => (props.submit ? 'submit' : 'button'),
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<button type="button" class="sc-a b"></button>');
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, { submit: true })).html()).toEqual('<button type="submit" class="sc-a b"></button>');
    });
    it('should replace attrs with props', () => {
        const Comp = styled.button.attrs({
            type: props => (props.submit ? 'submit' : 'button'),
            tabIndex: 0,
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<button type="button" tabindex="0" class="sc-a b"></button>');
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, { type: "reset" })).html()).toEqual('<button type="reset" tabindex="0" class="sc-a b"></button>');
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, { type: "reset", tabIndex: "-1" })).html()).toEqual('<button type="reset" tabindex="-1" class="sc-a b"></button>');
    });
    it('should merge className', () => {
        const Comp = styled.div.attrs({
            className: 'meow nya',
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<div class="sc-a meow nya b"></div>');
    });
    it('should merge className even if its a function', () => {
        const Comp = styled.div.attrs({
            className: props => `meow ${props.purr ? 'purr' : 'nya'}`,
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<div class="sc-a meow nya b"></div>');
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, { purr: true })).html()).toEqual('<div class="sc-a meow purr b"></div>');
    });
    it('should work with data and aria attributes', () => {
        const Comp = styled.div.attrs({
            'data-foo': 'bar',
            'aria-label': 'A simple FooBar',
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<div data-foo="bar" aria-label="A simple FooBar" class="sc-a b"></div>');
    });
    it('merge attrs', () => {
        const Comp = styled.button
            .attrs({
            type: 'button',
            tabIndex: 0,
        })
            .attrs({
            type: 'submit',
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<button type="submit" tabindex="0" class="sc-a b"></button>');
    });
    it('merge attrs when inheriting SC', () => {
        const Parent = styled.button.attrs({
            type: 'button',
            tabIndex: 0,
        }) ``;
        const Child = Parent.extend.attrs({
            type: 'submit',
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Child, null)).html()).toEqual('<button type="submit" tabindex="0" class="sc-b c"></button>');
    });
    it('pass attrs to style block', () => {
        /* Would be a React Router Link in real life */
        const Comp = styled.a.attrs({
            href: '#',
            'data-active-class-name': '--is-active',
        }) `
      color: blue;
      &.${props => props['data-active-class-name']} {
        color: red;
      }
    `;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<a href="#" data-active-class-name="--is-active" class="sc-a b"></a>');
        utils_1.expectCSSMatches('.sc-a {} .b { color:blue; } .b.--is-active { color:red; }');
    });
    it('should pass through children as a normal prop', () => {
        const Comp = styled.div.attrs({
            children: 'Probably a bad idea',
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<div class="sc-a b">Probably a bad idea</div>');
    });
    it('should pass through complex children as well', () => {
        const Comp = styled.div.attrs({
            children: react_1.default.createElement("span", null, "Probably a bad idea"),
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null)).html()).toEqual('<div class="sc-a b"><span>Probably a bad idea</span></div>');
    });
    it('should override children of course', () => {
        const Comp = styled.div.attrs({
            children: react_1.default.createElement("span", null, "Amazing"),
        }) ``;
        expect(enzyme_1.shallow(react_1.default.createElement(Comp, null, "Something else")).html()).toEqual('<div class="sc-a b">Something else</div>');
    });
});
//# sourceMappingURL=attrs.test.js.map