Repository URL to install this package:
Version:
1.2.13 ▾
|
"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('basic', () => {
/**
* Make sure the setup is the same for every test
*/
beforeEach(() => {
styled = utils_1.resetStyled();
});
it('should not throw an error when called with a valid element', () => {
expect(() => styled.div ``).not.toThrowError();
const FunctionalComponent = () => react_1.default.createElement("div", null);
class ClassComponent extends react_1.Component {
render() {
return react_1.default.createElement("div", null);
}
}
const validComps = ['div', FunctionalComponent, ClassComponent];
validComps.forEach(comp => {
expect(() => {
const Comp = styled(comp);
enzyme_1.shallow(react_1.default.createElement(Comp, null));
}).not.toThrowError();
});
});
it('should throw a meaningful error when called with an invalid element', () => {
const FunctionalComponent = () => react_1.default.createElement("div", null);
class ClassComponent extends react_1.Component {
render() {
return react_1.default.createElement("div", null);
}
}
const invalidComps = [
undefined,
null,
123,
[],
react_1.default.createElement("div", null),
react_1.default.createElement(FunctionalComponent, null),
react_1.default.createElement(ClassComponent, null),
];
invalidComps.forEach(comp => {
expect(() => {
// $FlowInvalidInputTest
const Comp = styled(comp);
enzyme_1.shallow(react_1.default.createElement(Comp, null));
// $FlowInvalidInputTest
}).toThrow(`Cannot create styled-component for component: ${comp}`);
});
});
it('should not inject anything by default', () => {
styled.div ``;
utils_1.expectCSSMatches('');
});
it('should inject component class when rendered even if no styles are passed', () => {
const Comp = styled.div ``;
enzyme_1.shallow(react_1.default.createElement(Comp, null));
utils_1.expectCSSMatches('.sc-a {}');
});
it('should inject styles', () => {
const Comp = styled.div `
color: blue;
`;
enzyme_1.shallow(react_1.default.createElement(Comp, null));
utils_1.expectCSSMatches('.sc-a { } .b { color:blue; }');
});
it("should inject only once for a styled component, no matter how often it's mounted", () => {
const Comp = styled.div `
color: blue;
`;
enzyme_1.shallow(react_1.default.createElement(Comp, null));
enzyme_1.shallow(react_1.default.createElement(Comp, null));
utils_1.expectCSSMatches('.sc-a {} .b { color:blue; }');
});
it('Should have the correct styled(component) displayName', () => {
const CompWithoutName = () => () => react_1.default.createElement("div", null);
const StyledTag = styled.div ``;
expect(StyledTag.displayName).toBe('styled.div');
const CompWithName = () => react_1.default.createElement("div", null);
CompWithName.displayName = null;
const StyledCompWithName = styled(CompWithName) ``;
expect(StyledCompWithName.displayName).toBe('Styled(CompWithName)');
const CompWithDisplayName = CompWithoutName();
CompWithDisplayName.displayName = 'displayName';
const StyledCompWithDisplayName = styled(CompWithDisplayName) ``;
expect(StyledCompWithDisplayName.displayName).toBe('Styled(displayName)');
const CompWithBoth = () => react_1.default.createElement("div", null);
CompWithBoth.displayName = 'displayName';
const StyledCompWithBoth = styled(CompWithBoth) ``;
expect(StyledCompWithBoth.displayName).toBe('Styled(displayName)');
const CompWithNothing = CompWithoutName();
CompWithNothing.displayName = null;
const StyledCompWithNothing = styled(CompWithNothing) ``;
expect(StyledCompWithNothing.displayName).toBe('Styled(Component)');
});
it('should allow you to pass in style objects', () => {
const Comp = styled.div({
color: 'blue',
});
enzyme_1.shallow(react_1.default.createElement(Comp, null));
utils_1.expectCSSMatches('.sc-a {} .b { color:blue; }');
});
describe('jsdom tests', () => {
it('should pass the ref to the component', () => {
const Comp = styled.div ``;
class Wrapper extends react_1.Component {
constructor() {
super(...arguments);
this.innerRef = comp => {
this.testRef = comp;
};
}
render() {
return react_1.default.createElement(Comp, { innerRef: this.innerRef });
}
}
const wrapper = enzyme_1.mount(react_1.default.createElement(Wrapper, null));
const component = wrapper.find(Comp).first();
expect(wrapper.instance().testRef).toBe(component.getDOMNode());
expect(component.find('div').prop('innerRef')).toBeFalsy();
});
class InnerComponent extends react_1.Component {
render() {
return null;
}
}
it('should not leak the innerRef prop to the wrapped child', () => {
const OuterComponent = styled(InnerComponent) ``;
class Wrapper extends react_1.Component {
render() {
return (react_1.default.createElement(OuterComponent, { innerRef: comp => {
this.testRef = comp;
} }));
}
}
const wrapper = enzyme_1.mount(react_1.default.createElement(Wrapper, null));
const innerComponent = wrapper.find(InnerComponent).first();
expect(wrapper.instance().testRef).toBe(innerComponent.instance());
expect(innerComponent.prop('innerRef')).toBeFalsy();
});
it('should pass the full className to the wrapped child', () => {
const OuterComponent = styled(InnerComponent) ``;
class Wrapper extends react_1.Component {
render() {
return react_1.default.createElement(OuterComponent, { className: "test" });
}
}
const wrapper = enzyme_1.mount(react_1.default.createElement(Wrapper, null));
expect(wrapper.find(InnerComponent).prop('className')).toBe('test sc-a b');
});
it('should pass the innerRef to the wrapped styled component', () => {
const InnerComponent = styled.div ``;
const OuterComponent = styled(InnerComponent) ``;
class Wrapper extends react_1.Component {
constructor() {
super(...arguments);
this.innerRef = comp => {
this.testRef = comp;
};
}
render() {
return react_1.default.createElement(OuterComponent, { innerRef: this.innerRef });
}
}
const wrapper = enzyme_1.mount(react_1.default.createElement(Wrapper, null));
const innerComponent = wrapper.find(InnerComponent).first();
const outerComponent = wrapper.find(OuterComponent).first();
const wrapperNode = wrapper.instance();
expect(wrapperNode.testRef).toBe(innerComponent.getDOMNode());
expect(innerComponent.prop('innerRef')).toBe(wrapperNode.innerRef);
});
it('should respect the order of StyledComponent creation for CSS ordering', () => {
const FirstComponent = styled.div `
color: red;
`;
const SecondComponent = styled.div `
color: blue;
`;
// NOTE: We're mounting second before first and check if we're breaking their order
enzyme_1.shallow(react_1.default.createElement(SecondComponent, null));
enzyme_1.shallow(react_1.default.createElement(FirstComponent, null));
utils_1.expectCSSMatches('.sc-a {} .d { color:red; } .sc-b {} .c { color:blue; }');
});
it('handle media at-rules inside style rules', () => {
const Comp = styled.div `
> * {
@media (min-width: 500px) {
color: pink;
}
}
`;
enzyme_1.shallow(react_1.default.createElement(Comp, null));
utils_1.expectCSSMatches('.sc-a{ } @media (min-width:500px){ .b > *{ color:pink; } } ');
});
it('should hoist non-react static properties', () => {
const InnerComponent = styled.div ``;
InnerComponent.foo = 'bar';
const OuterComponent = styled(InnerComponent) ``;
expect(OuterComponent).toHaveProperty('foo', 'bar');
});
it('should not hoist styled component statics', () => {
const InnerComponent = styled.div ``;
const OuterComponent = styled(InnerComponent) ``;
expect(OuterComponent.styledComponentId).not.toBe(InnerComponent.styledComponentId);
expect(OuterComponent.componentStyle).not.toEqual(InnerComponent.componentStyle);
});
it('generates unique classnames when not using babel', () => {
const Named1 = styled.div.withConfig({ displayName: 'Name' }) `
color: blue;
`;
const Named2 = styled.div.withConfig({ displayName: 'Name' }) `
color: red;
`;
expect(Named1.styledComponentId).not.toBe(Named2.styledComponentId);
});
it('honors a passed componentId', () => {
const Named1 = styled.div.withConfig({
componentId: 'foo',
displayName: 'Name',
}) `
color: blue;
`;
const Named2 = styled.div.withConfig({
componentId: 'bar',
displayName: 'Name',
}) `
color: red;
`;
expect(Named1.styledComponentId).toBe('Name-foo');
expect(Named2.styledComponentId).toBe('Name-bar');
});
});
});
//# sourceMappingURL=basic.test.js.map