Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
view-container / dist / test / css.test.js
Size: Mime:
"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('css features', () => {
    beforeEach(() => {
        styled = utils_1.resetStyled();
    });
    it('should add vendor prefixes in the right order', () => {
        const Comp = styled.div `
      transition: opacity 0.3s;
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { -webkit-transition:opacity 0.3s; transition:opacity 0.3s; }');
    });
    it('should add vendor prefixes for display', () => {
        const Comp = styled.div `
      display: flex;
      flex-direction: column;
      align-items: center;
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches(`
      .sc-a {}
      .b {
        display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-align-items:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center;
      }
    `);
    });
    it('should generate styles for nested media queries', () => {
        const Comp = styled.div `
      @media (min-width: 10px) {
        @media (min-height: 20px) {
          color: red;
        }
      }
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches(`
      .sc-a {}

      @media (min-width: 10px) {
        @media (min-height: 20px) {
          .b {
            color: red;
          }
        }
      }
    `);
    });
    it('should pass through custom properties', () => {
        const Comp = styled.div `
      --custom-prop: some-val;
    `;
        enzyme_1.shallow(react_1.default.createElement(Comp, null));
        utils_1.expectCSSMatches('.sc-a {} .b { --custom-prop:some-val; }');
    });
});
//# sourceMappingURL=css.test.js.map