@age/quantum/shared/shadow.unit.test.js

Catho react components

"use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var _shadow = _interopRequireDefault(require("./shadow"));

var _theme = _interopRequireWildcard(require("./theme"));

var _hexToRgba = _interopRequireDefault(require("./hexToRgba"));

var _test = require("../GlobalStyle/test.utils");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var opacity0 = 0.2,
    opacity1 = 0.14,
    opacity2 = 0.12;

var normalize = function normalize(str) {
  return (0, _test.normalizeCSS)(str.trimLeft().split('\n'));
};

describe('Shadow helper', function () {
  describe('without a color', function () {
    it('should get the correct elevation style', function () {
      var defaultColor = _theme.colors.neutral[700];
      expect(normalize((0, _shadow.default)()({
        theme: _theme.default
      }))).toBe(normalize("\n          box-shadow:\n            0px 0px 0px 0px ".concat((0, _hexToRgba.default)(defaultColor, opacity0), ",\n            0px 0px 0px 0px ").concat((0, _hexToRgba.default)(defaultColor, opacity1), ",\n            0px 0px 0px 0px ").concat((0, _hexToRgba.default)(defaultColor, opacity2), ";\n          ")));
      expect(normalize((0, _shadow.default)(0)({
        theme: _theme.default
      }))).toBe(normalize("\n          box-shadow:\n            0px 0px 0px 0px ".concat((0, _hexToRgba.default)(defaultColor, opacity0), ",\n            0px 0px 0px 0px ").concat((0, _hexToRgba.default)(defaultColor, opacity1), ",\n            0px 0px 0px 0px ").concat((0, _hexToRgba.default)(defaultColor, opacity2), ";\n          ")));
      expect(normalize((0, _shadow.default)(2)({
        theme: _theme.default
      }))).toBe(normalize("\n          box-shadow:\n            0px 3px 1px -2px ".concat((0, _hexToRgba.default)(defaultColor, opacity0), ",\n            0px 2px 2px 0px ").concat((0, _hexToRgba.default)(defaultColor, opacity1), ",\n            0px 1px 5px 0px ").concat((0, _hexToRgba.default)(defaultColor, opacity2), ";\n          ")));
    });
  });
  describe('with a color', function () {
    it('should get the correct elevation style', function () {
      var first = _theme.colors.primary[100],
          second = _theme.colors.secondary[300],
          third = _theme.colors.success[500];
      expect(normalize((0, _shadow.default)(5, first)({
        theme: _theme.default
      }))).toBe(normalize("box-shadow:\n            0px 3px 5px -1px ".concat((0, _hexToRgba.default)(first, opacity0), ",\n            0px 5px 8px 0px ").concat((0, _hexToRgba.default)(first, opacity1), ",\n            0px 1px 14px 0px ").concat((0, _hexToRgba.default)(first, opacity2), ";\n          ")));
      expect(normalize((0, _shadow.default)(9, second)({
        theme: _theme.default
      }))).toBe(normalize("box-shadow:\n            0px 5px 6px -3px ".concat((0, _hexToRgba.default)(second, opacity0), ",\n            0px 9px 12px 1px ").concat((0, _hexToRgba.default)(second, opacity1), ",\n            0px 3px 16px 2px ").concat((0, _hexToRgba.default)(second, opacity2), ";\n          ")));
      expect(normalize((0, _shadow.default)(15, third)({
        theme: _theme.default
      }))).toBe(normalize("box-shadow:\n            0px 8px 9px -5px ".concat((0, _hexToRgba.default)(third, opacity0), ",\n            0px 15px 22px 2px ").concat((0, _hexToRgba.default)(third, opacity1), ",\n            0px 6px 28px 5px ").concat((0, _hexToRgba.default)(third, opacity2), ";\n          ")));
    });
  });
});