wix-style-react/dist/src/Tag/Tag.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Tag = require('./Tag');

var _Tag2 = _interopRequireDefault(_Tag);

var _TagDriver = require('./Tag.driver.private');

var _TagDriver2 = _interopRequireDefault(_TagDriver);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _constants = require('../Text/constants');

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

describe('Tag', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_TagDriver2.default);
  var id = 'myId';
  var label = 'Hey';

  describe('size', function () {
    it('should have a default small size', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tag2.default,
        { useOldMargins: false, id: id },
        label
      ));
      expect(driver.isSmall()).toBeTruthy();
    });

    it('should have a tiny size', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tag2.default,
        { useOldMargins: false, id: id, size: 'tiny' },
        label
      ));
      expect(driver.isTiny()).toBeTruthy();
      expect(driver.isCloseButtonSmall()).toBeTruthy();
      expect(driver.getTextSize()).toBe(_constants.SIZES.tiny);
      expect(driver.getTextWeight()).toBe(_constants.WEIGHTS.thin);
    });

    it('should have a small size', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tag2.default,
        { useOldMargins: false, id: id, size: 'small' },
        label
      ));
      expect(driver.isSmall()).toBeTruthy();
      expect(driver.isCloseButtonSmall()).toBeTruthy();
      expect(driver.getTextSize()).toBe(_constants.SIZES.small);
      expect(driver.getTextWeight()).toBe(_constants.WEIGHTS.normal);
    });

    it('should have a medium size', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tag2.default,
        { useOldMargins: false, id: id, size: 'medium' },
        label
      ));
      expect(driver.isMedium()).toBeTruthy();
      expect(driver.isCloseButtonSmall()).toBeTruthy();
      expect(driver.getTextSize()).toBe(_constants.SIZES.small);
      expect(driver.getTextWeight()).toBe(_constants.WEIGHTS.normal);
    });

    it('should have a large size', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tag2.default,
        { useOldMargins: false, id: id, size: 'large' },
        label
      ));
      expect(driver.isLarge()).toBeTruthy();
      expect(driver.getTextSize()).toBe(_constants.SIZES.medium);
      expect(driver.getTextWeight()).toBe(_constants.WEIGHTS.normal);
    });
  });

  it('should have a label', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id },
      label
    ));
    expect(driver.getLabel()).toBe(label);
  });

  it('should be removable by default', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id },
      label
    ));
    expect(driver.isRemovable()).toBeTruthy();
  });

  it('should not be removable', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id, removable: false },
      label
    ));
    expect(driver.isRemovable()).toBeFalsy();
  });

  it('should have not remove button if disabled is true', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id, disabled: true },
      label
    ));
    expect(driver.isRemovable()).toBeFalsy();
  });

  it('should have disabled class if disabled is true', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id, disabled: true },
      label
    ));
    expect(driver.isDisabled()).toBeTruthy();
  });

  it('should call onRemove function on remove', function () {
    var onRemove = jest.fn();
    var onClick = jest.fn();

    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id, onRemove: onRemove, onClick: onClick },
      label
    ));
    driver.removeTag();
    expect(onRemove).toBeCalledWith(id);
    expect(onClick).not.toBeCalled();
  });

  it('should call onClick function on click', function () {
    var onClick = jest.fn();
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id, onClick: onClick },
      label
    ));

    driver.click();
    expect(onClick).toBeCalledWith(id);
  });

  it('should not have pointer cursor when not passed onClick', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id },
      label
    ));
    expect(driver.isClickable()).toBeFalsy();
  });

  it('should have pointer cursor when passed onClick', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id, onClick: jest.fn() },
      label
    ));
    expect(driver.isClickable()).toBeTruthy();
  });

  it('should not display thumb by default', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id },
      label
    ));
    expect(driver.isThumbExists()).toBeFalsy();
  });

  it('should display thumb', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tag2.default,
      { useOldMargins: false, id: id, thumb: _react2.default.createElement(
          'span',
          null,
          'Ho'
        ) },
      label
    ));
    expect(driver.isThumbExists()).toBeTruthy();
  });

  describe('theme attribute', function () {
    it('should have standard theme by default', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tag2.default,
        { useOldMargins: false, id: id },
        'a'
      ));
      expect(driver.isStandardTheme()).toBe(true);
    });

    it('should have warning theme', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tag2.default,
        { useOldMargins: false, id: id, theme: 'warning' },
        'a'
      ));
      expect(driver.isWarningTheme()).toBe(true);
    });

    it('should have error theme', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tag2.default,
        { useOldMargins: false, id: id, theme: 'error' },
        'a'
      ));
      expect(driver.isErrorTheme()).toBe(true);
    });
  });

  describe('deprecation', function () {
    var cachedConsoleWarn = global.console.warn;

    it('should warn with deprecation message for using old margins', function () {
      var consoleLogWarnMock = jest.fn();
      global.console.warn = consoleLogWarnMock;

      createDriver(_react2.default.createElement(
        _Tag2.default,
        { id: '123' },
        'a'
      ));

      expect(global.console.warn).toBeCalled();
      expect(consoleLogWarnMock.mock.calls[0][0]).toMatch(/useOldMargins={false}/);
      global.console.warn = cachedConsoleWarn;
    });
  });
});