@bbc/spartacus/lib/server/styles.test.js

SPArtacus

'use strict';

var _templateObject = _taggedTemplateLiteral(['\n  color: teal;\n'], ['\n  color: teal;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  background-image: url(\'https://placehold.it/640x360\');\n'], ['\n  background-image: url(\'https://placehold.it/640x360\');\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _server = require('react-dom/server');

var _styles = require('./styles');

var _packageLock = require('../../package-lock.json');

var _packageLock2 = _interopRequireDefault(_packageLock);

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

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } // eslint-disable-line no-unused-vars


// mock up and render a simple styled application
var sheet = new _styledComponents.ServerStyleSheet();
var StyledHeading = _styledComponents2.default.h1(_templateObject);
var StyledDivUsingQuotes = _styledComponents2.default.div(_templateObject2);
var expectedOutput = function expectedOutput(inlineAttribute) {
  return '<style ' + inlineAttribute + ' data-reactroot="">\n/* sc-component-id: sc-bdVaJa */\n.fPvERq{color:teal;}\n/* sc-component-id: sc-bwzfXH */\n.cJWpcf{background-image:url(\'https://placehold.it/640x360\');}</style>';
};

(0, _server.renderToString)(sheet.collectStyles(_react2.default.createElement(
  StyledDivUsingQuotes,
  null,
  _react2.default.createElement(
    StyledHeading,
    null,
    'Hello world app'
  )
)));

describe('getStyleTag', function () {
  describe('canonical version', function () {
    it('should respond with styled-components style tag with correct attributes', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      var inlineCss;
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              inlineCss = (0, _server.renderToString)((0, _styles.getStyleTag)(sheet));

              expect(inlineCss).toBe(expectedOutput('data-styled="fPvERq cJWpcf" data-styled-version="' + _packageLock2.default.dependencies['styled-components'].version + '"'));

            case 2:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, undefined);
    })));
  });

  describe('AMP version', function () {
    var isAmp = true;
    it('should respond with amp-custom attribute and should not URL-encode quotes', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
      var inlineCss;
      return regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              inlineCss = (0, _server.renderToString)((0, _styles.getStyleTag)(sheet, isAmp));

              expect(inlineCss).toBe(expectedOutput('amp-custom=""'));

            case 2:
            case 'end':
              return _context2.stop();
          }
        }
      }, _callee2, undefined);
    })));
  });
});