@mujo/box/dist/box.test.js

A React utility to add a style guide to primative components

import _regeneratorRuntime from "/Users/jcblw/dev/personal/libs/box/node_modules/babel-preset-react-app/node_modules/@babel/runtime/regenerator";
import _defineProperty from "/Users/jcblw/dev/personal/libs/box/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty";
import _asyncToGenerator from "/Users/jcblw/dev/personal/libs/box/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { flexStyles } from './styles/flex';
import { withBox } from '.';
test('Box should render some basic styles', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
  var styleGuide, Box, wrapper, el, styles;
  return _regeneratorRuntime.wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          styleGuide = _objectSpread({}, flexStyles);
          Box = withBox({
            styleGuide: styleGuide,
            defaultComponent: 'div'
          });
          wrapper = render( /*#__PURE__*/React.createElement(Box, {
            flexDirection: "row",
            flex: 0,
            "data-testid": "foo"
          }));
          _context.next = 5;
          return wrapper.findByTestId('foo');

        case 5:
          el = _context.sent;
          styles = window.getComputedStyle(el);
          expect(styles.flex).toBe('0 0px');
          expect(styles.flexDirection).toBe('row');

        case 9:
        case "end":
          return _context.stop();
      }
    }
  }, _callee);
})));
test('Box should be able to render custom styles', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
  var styleGuide, Box, wrapper, el, styles;
  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
    while (1) {
      switch (_context2.prev = _context2.next) {
        case 0:
          styleGuide = {
            foo: {
              bar: {
                color: 'red'
              }
            }
          };
          Box = withBox({
            styleGuide: styleGuide,
            defaultComponent: 'div'
          });
          wrapper = render( /*#__PURE__*/React.createElement(Box, {
            foo: "bar",
            "data-testid": "foo"
          }));
          _context2.next = 5;
          return wrapper.findByTestId('foo');

        case 5:
          el = _context2.sent;
          styles = window.getComputedStyle(el);
          expect(styles.color).toBe('red');

        case 8:
        case "end":
          return _context2.stop();
      }
    }
  }, _callee2);
})));
test('Box should render custom components in props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
  var Foo, styleGuide, Box, wrapper, el;
  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
    while (1) {
      switch (_context3.prev = _context3.next) {
        case 0:
          Foo = function Foo() {
            return /*#__PURE__*/React.createElement("span", {
              "data-testid": "bar"
            });
          };

          styleGuide = {};
          Box = withBox({
            styleGuide: styleGuide,
            defaultComponent: 'div'
          });
          wrapper = render( /*#__PURE__*/React.createElement(Box, {
            Component: Foo
          }));
          _context3.next = 6;
          return wrapper.findByTestId('bar');

        case 6:
          el = _context3.sent;
          expect(el).toBeTruthy();

        case 8:
        case "end":
          return _context3.stop();
      }
    }
  }, _callee3);
})));
test('Box should be able to render css with the css prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
  var styleGuide, Box, wrapper, el, styles;
  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
    while (1) {
      switch (_context4.prev = _context4.next) {
        case 0:
          styleGuide = {};
          Box = withBox({
            styleGuide: styleGuide,
            defaultComponent: 'div'
          });
          wrapper = render( /*#__PURE__*/React.createElement(Box, {
            "data-testid": "foo",
            css: {
              backgroundColor: 'red'
            }
          }));
          _context4.next = 5;
          return wrapper.findByTestId('foo');

        case 5:
          el = _context4.sent;
          styles = window.getComputedStyle(el);
          expect(styles.backgroundColor).toBe('red');

        case 8:
        case "end":
          return _context4.stop();
      }
    }
  }, _callee4);
})));
test('Box should pass through other props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
  var styleGuide, Box, foo, wrapper, el;
  return _regeneratorRuntime.wrap(function _callee5$(_context5) {
    while (1) {
      switch (_context5.prev = _context5.next) {
        case 0:
          styleGuide = {};
          Box = withBox({
            styleGuide: styleGuide,
            defaultComponent: 'div'
          });
          foo = 0;
          wrapper = render( /*#__PURE__*/React.createElement(Box, {
            "data-testid": "foo",
            onClick: function onClick() {
              foo += 1;
            }
          }));
          _context5.next = 6;
          return wrapper.findByTestId('foo');

        case 6:
          el = _context5.sent;
          fireEvent.click(el);
          expect(foo).toBe(1);

        case 9:
        case "end":
          return _context5.stop();
      }
    }
  }, _callee5);
})));