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

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _BreadcrumbsPrivate = require('./Breadcrumbs.private.driver');

var _BreadcrumbsPrivate2 = _interopRequireDefault(_BreadcrumbsPrivate);

var _Breadcrumbs = require('./Breadcrumbs');

var _Breadcrumbs2 = _interopRequireDefault(_Breadcrumbs);

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

var createDriver = (0, _driverFactory.createDriverFactory)(_BreadcrumbsPrivate2.default);
var items = [{ id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }];
var onClick = void 0;

describe('Breadcrumbs', function () {
  beforeEach(function () {
    onClick = jest.fn();
  });

  it('should have correct text on each breadcrumb', function () {
    var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { onClick: onClick, items: items }));
    expect(driver.breadcrumbsLength()).toBe(items.length);
    expect(driver.breadcrumbContentAt(0)).toBe(items[0].value);
    expect(driver.breadcrumbContentAt(1)).toBe(items[1].value);
  });

  it('should call onClick callback on click with correct item', function () {
    var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { onClick: onClick, items: items }));
    var itemIndex = 1;

    driver.clickBreadcrumbAt(itemIndex);
    expect(onClick).toBeCalledWith({
      id: items[itemIndex].id,
      value: 'Option 2'
    });
  });

  it('should get correct size from props', function () {
    var size = 'large';
    var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { onClick: onClick, items: items, size: size }));
    expect(driver.isLarge()).toBe(true);
  });

  it('should use medium size as default', function () {
    var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { onClick: onClick, items: items }));
    expect(driver.isMedium()).toBe(true);
  });

  it('should get theme from props', function () {
    var theme = 'onWhiteBackground';
    var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { onClick: onClick, items: items, theme: theme }));
    expect(driver.isOnWhiteBackground()).toBe(true);
  });

  it('should use default theme gray background', function () {
    var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { onClick: onClick, items: items }));
    expect(driver.isOnGrayBackground()).toBe(true);
  });

  it('should get active id from props and have correct class', function () {
    var itemIndex = 1;
    var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { onClick: onClick, items: items, activeId: items[itemIndex].id }));
    expect(driver.getActiveItemId()).toBe(itemIndex);
  });

  it('should return null if not exists active id', function () {
    var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { onClick: onClick, items: items }));
    expect(driver.getActiveItemId()).toBe(null);
  });

  describe('item with link attribute', function () {
    var linkItems = [{ id: 0, value: 'Option 1', link: '//www.wix.com' }, { id: 1, value: 'Option 2', link: '//www.facebook.com' }];

    it('should not have links if link attribute is not given', function () {
      var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { items: items }));
      expect(driver.isActiveLinkAt(0)).toBe(false);
      expect(driver.isActiveLinkAt(1)).toBe(false);
    });

    it('should be a link if no activeId is given', function () {
      var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { items: linkItems }));
      expect(driver.isActiveLinkAt(0)).toBe(true);
      expect(driver.isActiveLinkAt(1)).toBe(true);
    });

    it('should not be a link if it is the item with activeId', function () {
      var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { items: linkItems, activeId: 0 }));
      expect(driver.isActiveLinkAt(0)).toBe(false);
      expect(driver.isActiveLinkAt(1)).toBe(true);
    });
  });

  describe('customElement attribute', function () {
    var customItems = [{
      id: 0,
      value: 'Option 1',
      customElement: _react2.default.createElement(
        'a',
        { href: '//www.wix.com' },
        'Option 1'
      )
    }, {
      id: 1,
      value: 'Option 2',
      customElement: _react2.default.createElement(
        'a',
        { href: '//www.facebook.com' },
        'Option 2'
      )
    }];

    var customItemsWithLinks = [{
      id: 0,
      value: 'value',
      customElement: _react2.default.createElement(
        'a',
        { href: '//www.wix.com' },
        'Custom value'
      ),
      link: 'www.bla.com'
    }];

    it('should render the customElement when given', function () {
      var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { items: customItems }));

      expect(driver.breadcrumbsLength()).toBe(customItems.length);
      expect(driver.breadcrumbContentAt(0)).toBe(customItems[0].value);
      expect(driver.breadcrumbContentAt(1)).toBe(customItems[1].value);
    });

    it('should render the customElement even if link attribute is given', function () {
      var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { items: customItemsWithLinks }));

      expect(driver.breadcrumbsLength()).toBe(customItemsWithLinks.length);
      expect(driver.breadcrumbContentAt(0)).toBe('Custom value');
    });

    it('should render the value attribute of the item when this is the activeId', function () {
      var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { items: customItemsWithLinks, activeId: 0 }));

      expect(driver.breadcrumbContentAt(0)).toBe(customItemsWithLinks[0].value);
    });
  });

  describe('given only one item', function () {
    it('should take full width', function () {
      var driver = createDriver(_react2.default.createElement(_Breadcrumbs2.default, { items: [{ id: 0, value: 'Option 1' }] }));
      expect(driver.isItemFullWidthAt(0)).toBe(true);
    });
  });
});