babel-plugin-transform-jsx-stylesheet/lib/__tests__/index.js

Transform stylesheet selector to style in JSX Elements.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var syntaxJSX = require("babel-plugin-syntax-jsx");
var babel_core_1 = require("babel-core");
var constants_1 = require("../constants");
var index_1 = require("../index");
console.log('syntaxJSX', syntaxJSX);
function getTransformCode(code, opts) {
    return (0, babel_core_1.transform)(code, {
        plugins: [
            [index_1.default, opts],
            syntaxJSX,
        ],
    }).code;
}
exports.default = getTransformCode;
describe('jsx style plugin', function () {
    it('transform only one className to style as member', function () {
        expect(getTransformCode("\nimport { createElement, Component } from 'rax';\nimport './app.css';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header\" />;\n  }\n}")).toBe("\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.css';\n\nvar _styleSheet = appStyleSheet;\nclass App extends Component {\n  render() {\n    return <div style={_styleSheet[\"header\"]} />;\n  }\n}");
    });
    it('transform multiple classNames to style as array', function () {
        expect(getTransformCode("\nimport { createElement, Component } from 'rax';\nimport './app.css';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header1 header2\" />;\n  }\n}")).toBe("\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.css';\n\nvar _styleSheet = appStyleSheet;\nclass App extends Component {\n  render() {\n    return <div style={Object.assign({}, _styleSheet[\"header1\"], _styleSheet[\"header2\"])} />;\n  }\n}");
    });
    it('transform array, object and expressions', function () {
        expect(getTransformCode("\nimport { createElement, Component } from 'rax';\nimport './app.css';\n\nclass App extends Component {\n  render() {\n    return <div className={'header'}>\n      <div className={{ active: props.isActive }} />\n      <div className={['header1 header2', 'header3', { active: props.isActive }]} />\n      <div className={props.visible ? 'show' : 'hide'} />\n      <div className={getClassName()} />\n    </div>;\n  }\n}")).toBe("\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.css';\n\nvar _styleSheet = appStyleSheet;\n\n".concat((0, constants_1.getClassNameFunctionString)(), "\n\n").concat((0, constants_1.getStyleFunctionString)(), "\n\nclass App extends Component {\n  render() {\n    return <div style={_styleSheet[\"header\"]}>\n      <div style={_getStyle({ active: props.isActive })} />\n      <div style={_getStyle(['header1 header2', 'header3', { active: props.isActive }])} />\n      <div style={_getStyle(props.visible ? 'show' : 'hide')} />\n      <div style={_getStyle(getClassName())} />\n    </div>;\n  }\n}"));
    });
    it('combine one style and className', function () {
        expect(getTransformCode("\nimport { createElement, Component } from 'rax';\nimport './app.css';\nimport styles from './style.css';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header2\" style={styles.header1} />;\n  }\n}")).toBe("\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.css';\nimport styles from './style.css';\n\nvar _styleSheet = appStyleSheet;\nclass App extends Component {\n  render() {\n    return <div style={Object.assign({}, _styleSheet[\"header2\"], styles.header1)} />;\n  }\n}");
    });
    it('combine inline style object and className', function () {
        expect(getTransformCode("\nimport { createElement, Component } from 'rax';\nimport './app.css';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header\" style={{\n      height: 100\n    }} />;\n  }\n}")).toBe("\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.css';\n\nvar _styleSheet = appStyleSheet;\nclass App extends Component {\n  render() {\n    return <div style={Object.assign({}, _styleSheet[\"header\"], {\n      height: 100\n    })} />;\n  }\n}");
    });
    it('combine multiple styles and className', function () {
        expect(getTransformCode("\nimport { createElement, Component } from 'rax';\nimport './app.css';\nimport styles from './style.css';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header2\" style={[styles.header1, styles.header3]} />;\n  }\n}")).toBe("\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.css';\nimport styles from './style.css';\n\nvar _styleSheet = appStyleSheet;\nclass App extends Component {\n  render() {\n    return <div style={[_styleSheet[\"header2\"], styles.header1, styles.header3]} />;\n  }\n}");
    });
    it('do not transfrom code when no css file', function () {
        var code = "\nimport { createElement, Component } from 'rax';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header\" />;\n  }\n}";
        expect(getTransformCode(code)).toBe(code);
    });
    it('transform scss file', function () {
        expect(getTransformCode("\nimport { createElement, Component } from 'rax';\nimport './app.scss';\n\nclass App extends Component {\n  render() {\n    return <div className=\"header\" />;\n  }\n}")).toBe("\nimport { createElement, Component } from 'rax';\nimport appStyleSheet from './app.scss';\n\nvar _styleSheet = appStyleSheet;\nclass App extends Component {\n  render() {\n    return <div style={_styleSheet[\"header\"]} />;\n  }\n}");
    });
    it('transform constant elements in render', function () {
        expect(getTransformCode("\nimport { createElement, render } from 'rax';\nimport './app.css';\n\nrender(<div className=\"header\" />);\n")).toBe("\nimport { createElement, render } from 'rax';\nimport appStyleSheet from './app.css';\n\nvar _styleSheet = appStyleSheet;\nrender(<div style={_styleSheet[\"header\"]} />);");
    });
    it('dont remove className', function () {
        expect(getTransformCode("\nimport { createElement, render } from 'rax';\nimport './app.css';\n\nrender(<div className=\"header\" />);\n", { retainClassName: true })).toBe("\nimport { createElement, render } from 'rax';\nimport appStyleSheet from './app.css';\n\nvar _styleSheet = appStyleSheet;\nrender(<div className=\"header\" style={_styleSheet[\"header\"]} />);");
    });
});
describe('test development env', function () {
    var lastEnv;
    beforeEach(function () {
        lastEnv = process.env.NODE_ENV;
        process.env.NODE_ENV = 'development';
    });
    it('transform constant element in development env', function () {
        expect(getTransformCode("\nimport { createElement, render } from 'rax';\nimport './app.css';\n\nrender(<div className=\"header\" />);\n")).toBe("\nimport { createElement, render } from 'rax';\nimport appStyleSheet from './app.css';\n\nvar _styleSheet = appStyleSheet;\nrender(<div __class=\"header\" style={_styleSheet[\"header\"]} />);");
    });
    afterEach(function () {
        process.env.NODE_ENV = lastEnv;
    });
});
describe('edge test', function () {
    it('transform class and style import same file', function () {
        expect(getTransformCode("\nimport { createElement, render } from 'rax';\nimport './app.css';\nimport styles from './app.css';\n\nrender(<div className=\"header1\" style={styles.header} />);\n")).toBe("\nimport { createElement, render } from 'rax';\nimport appStyleSheet from './app.css';\nimport styles from './app.css';\n\nvar _styleSheet = appStyleSheet;\nrender(<div style={Object.assign({}, _styleSheet[\"header1\"], styles.header)} />);");
    });
    it('should transform two class files', function () {
        expect(getTransformCode("\nimport { createElement, render } from 'rax';\nimport './app1.css';\nimport './app2.css';\n\nrender(<div className=\"header1 header2\" />);\n")).toBe("".concat((0, constants_1.mergeStylesFunctionString)(), "\n\nimport { createElement, render } from 'rax';\nimport app1StyleSheet from './app1.css';\nimport app2StyleSheet from './app2.css';\n\nvar _styleSheet = _mergeStyles(app1StyleSheet, app2StyleSheet);\n\nrender(<div style={Object.assign({}, _styleSheet[\"header1\"], _styleSheet[\"header2\"])} />);"));
    });
    it('should delete className attr when empty string', function () {
        expect(getTransformCode("\nimport { createElement, render } from 'rax';\nimport 'app.css'\n\nrender(<div className=\"\" />);\n")).toBe("\nimport { createElement, render } from 'rax';\nimport appStyleSheet from 'app.css';\n\nvar _styleSheet = appStyleSheet;\nrender(<div />);");
    });
});
//# sourceMappingURL=index.js.map