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

wix-style-react

import React from 'react';
import Tag from './Tag';
import tagPrivateDriverFactory from './Tag.driver.private';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import { SIZES, WEIGHTS } from '../Text/constants';

describe('Tag', function () {
  var createDriver = createDriverFactory(tagPrivateDriverFactory);
  var id = 'myId';
  var label = 'Hey';

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

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

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

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

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

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

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

  it('should not be removable', function () {
    var driver = createDriver(React.createElement(
      Tag,
      { 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(React.createElement(
      Tag,
      { useOldMargins: false, id: id, disabled: true },
      label
    ));
    expect(driver.isRemovable()).toBeFalsy();
  });

  it('should have disabled class if disabled is true', function () {
    var driver = createDriver(React.createElement(
      Tag,
      { 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(React.createElement(
      Tag,
      { 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(React.createElement(
      Tag,
      { 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(React.createElement(
      Tag,
      { useOldMargins: false, id: id },
      label
    ));
    expect(driver.isClickable()).toBeFalsy();
  });

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

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

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

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

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

    it('should have error theme', function () {
      var driver = createDriver(React.createElement(
        Tag,
        { 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(React.createElement(
        Tag,
        { id: '123' },
        'a'
      ));

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