vcc-ui/lib/components/text/test.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _ = require(".");

var _createSnapshot = _interopRequireDefault(require("../../test/create-snapshot"));

var _render = _interopRequireDefault(require("../../test/render"));

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

describe('<Text />', function () {
  it('renders <Text /> component correctly with default props', function () {
    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, null, "Hello world!"));
    expect(snapshot).toMatchSnapshot();
  });
  it('passes through custom theme object to extend', function () {
    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
      extend: function extend(_ref) {
        var theme = _ref.theme;
        return {
          color: theme.color.foreground.secondary
        };
      }
    }, "Hello world!"));
    expect(snapshot).toMatchSnapshot();
  });
  describe('Type Scales + Sub Styles', function () {
    describe('Peary', function () {
      it('Standard', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "peary"
        }, "Peary"));
        expect(snapshot).toMatchSnapshot();
      });
    });
    describe('Cook', function () {
      it('Standard', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "cook"
        }, "Cook"));
        expect(snapshot).toMatchSnapshot();
      });
    });
    describe('Ootah', function () {
      it('Standard', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "ootah"
        }, "Ootah"));
        expect(snapshot).toMatchSnapshot();
      });
    });
    describe('Hillary', function () {
      it('Standard', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "hillary"
        }, "Hillary"));
        expect(snapshot).toMatchSnapshot();
      });
      it('Inline Link', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "hillary",
          subStyle: "inline-link"
        }, "Hillary - Inline Link"));
        expect(snapshot).toMatchSnapshot();
      });
      it('Emphasis', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "hillary",
          subStyle: "emphasis"
        }, "Hillary - Inline Link"));
        expect(snapshot).toMatchSnapshot();
      });
    });
    describe('Columbus', function () {
      it('Standard', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "columbus"
        }, "Columbus"));
        expect(snapshot).toMatchSnapshot();
      });
      it('Inline Link', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "columbus",
          subStyle: "inline-link"
        }, "Columbus - Inline Link"));
        expect(snapshot).toMatchSnapshot();
      });
      it('Emphasis', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "columbus",
          subStyle: "emphasis"
        }, "Columbus - Inline Link"));
        expect(snapshot).toMatchSnapshot();
      });
    });
    describe('Bates', function () {
      it('Standard', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "bates"
        }, "Bates"));
        expect(snapshot).toMatchSnapshot();
      });
      it('Inline Link', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "bates",
          subStyle: "inline-link"
        }, "Bates - Inline Link"));
        expect(snapshot).toMatchSnapshot();
      });
      it('Emphasis', function () {
        var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
          variant: "bates",
          subStyle: "emphasis"
        }, "Bates - Inline Link"));
        expect(snapshot).toMatchSnapshot();
      });
    });
    it('Amundsen', function () {
      var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
        variant: "amundsen"
      }, "Amundsen"));
      expect(snapshot).toMatchSnapshot();
    });
    it('Armstrong', function () {
      var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
        variant: "armstrong"
      }, "Armstrong"));
      expect(snapshot).toMatchSnapshot();
    });
    it('Jemison', function () {
      var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
        variant: "jemison"
      }, "Jemison"));
      expect(snapshot).toMatchSnapshot();
    });
    it('Ride', function () {
      var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
        variant: "ride"
      }, "Ride"));
      expect(snapshot).toMatchSnapshot();
    });
  });
  it('renders with custom root element', function () {
    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
      as: "blockquote"
    }, "Custom element"));
    expect(snapshot).toMatchSnapshot();
  });
  it('renders with custom root element and non-default variant', function () {
    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
      as: "div",
      variant: "peary"
    }, "Peary Custom element"));
    expect(snapshot).toMatchSnapshot();
  });
  it('can disable baseline adjustments', function () {
    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
      alignBaseline: false
    }, "Baseline adjustment disabled"));
    expect(snapshot).toMatchSnapshot();
  });
  it('can extend styles', function () {
    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
      extend: {
        color: 'red'
      }
    }, "Red color"));
    expect(snapshot).toMatchSnapshot();
  });
  it('can add custom DOM attributes', function () {
    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Text, {
      "data-test": "foo"
    }, "Custom data attributes"));
    expect(snapshot).toMatchSnapshot();
  });
  it('handles nested sub-styles', function () {
    _react.default.createElement(_.Text, null, "Hello ", _react.default.createElement(_.Text, {
      subStyle: "emphasis"
    }, "World"), "!");
  });
  it('correctly implements ref prop', function () {
    var mockRef = _react.default.createRef();

    (0, _render.default)(_react.default.createElement(_.Text, {
      ref: mockRef
    }, "Hello world"));
    expect(mockRef.current).not.toBe(null);
  });
  describe('convertBaselineValues()', function () {
    it('correctly maps an object of baseline adjustments to pixel values', function () {
      var mockData = {
        top: 'mockTop',
        bottom: 'mockBottom',
        'mock-media': {
          top: 'mockMediaTop',
          bottom: 'mockMediaBottom'
        }
      };
      var result = (0, _.convertBaselineValues)(mockData);
      expect(result).toEqual({
        top: 'mockToppx 0 0',
        bottom: '0 0 mockBottompx',
        'mock-media': {
          top: 'mockMediaToppx 0 0',
          bottom: '0 0 mockMediaBottompx'
        }
      });
    });
  });
  describe('renameBaselineKeys()', function () {
    it('correctly renames keys on given baselineAdjustment object', function () {
      var result = (0, _.renameBaselineKeys)({
        top: 'mockTop',
        bottom: 'mockBottom'
      });
      expect(result).toEqual({
        padding: 'mockTop',
        margin: 'mockBottom'
      });
    });
  });
  describe('convertBaselineKeys()', function () {
    it('correctly converts keys to margin/paddings on given baselineAdjustments object', function () {
      var result = (0, _.convertBaselineKeys)({
        top: 'mockTop',
        bottom: 'mockBottom',
        'mock-media': {
          top: 'mockMediaTop',
          bottom: 'mockMediaBottom'
        }
      });
      expect(result).toEqual({
        padding: 'mockTop',
        margin: 'mockBottom',
        'mock-media': {
          padding: 'mockMediaTop',
          margin: 'mockMediaBottom'
        }
      });
    });
  });
  describe('createBaselineAdjustments()', function () {
    it('correctly converts baselineAdjustments object to valid css format when element is at the root', function () {
      var result = (0, _.createBaselineAdjustments)({
        isRootElement: true,
        shouldAdjustBaseline: true,
        baselineAdjustments: {
          top: 'mockTop',
          bottom: 'mockBottom',
          'mock-media': {
            top: 'mockMediaTop',
            bottom: 'mockMediaBottom'
          }
        }
      });
      expect(result).toEqual({
        padding: 'mockToppx 0 0',
        margin: '0 0 mockBottompx',
        'mock-media': {
          padding: 'mockMediaToppx 0 0',
          margin: '0 0 mockMediaBottompx'
        }
      });
    });
    it('correctly converts baselineAdjustments object to valid css format when element is not at the root', function () {
      var result = (0, _.createBaselineAdjustments)({
        isRootElement: false,
        shouldAdjustBaseline: true,
        baselineAdjustments: {
          top: 'mockTop',
          bottom: 'mockBottom',
          'mock-media': {
            top: 'mockMediaTop',
            bottom: 'mockMediaBottom'
          }
        }
      });
      expect(result).toEqual({
        padding: 0,
        margin: 0
      });
    });
    it('correctly converts baselineAdjustments object to valid css format when user defines no baselineAdjustments', function () {
      var result = (0, _.createBaselineAdjustments)({
        isRootElement: false,
        shouldAdjustBaseline: true,
        baselineAdjustments: {
          top: 'mockTop',
          bottom: 'mockBottom',
          'mock-media': {
            top: 'mockMediaTop',
            bottom: 'mockMediaBottom'
          }
        }
      });
      expect(result).toEqual({
        padding: 0,
        margin: 0
      });
    });
  });
});