@salesforce/design-system-react/lib/components/pill-container/__tests__/pill-container.browser-test.js

Salesforce Lightning Design System for React

"use strict";

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

var _testUtils = _interopRequireDefault(require("react-dom/test-utils"));

var _chai = require("chai");

var _avatar = _interopRequireDefault(require("../../avatar"));

var _icon = _interopRequireDefault(require("../../icon"));

var _iconSettings = _interopRequireDefault(require("../../icon-settings"));

var _pillContainer = _interopRequireDefault(require("../../pill-container"));

var _enzymeHelpers = require("../../../tests/enzyme-helpers");

var _keyCode = require("../../../utilities/key-code");

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

/* eslint-disable react/no-find-dom-node */
var Simulate = _testUtils.default.Simulate;
var options = [{
  id: '1',
  label: 'Pill Label 1',
  title: 'Full pill label verbiage mirrored here'
}, {
  icon: _react.default.createElement(_icon.default, {
    category: "standard",
    name: "account",
    title: "Account"
  }),
  id: '2',
  label: 'Pill Label 2',
  title: 'Full pill label verbiage mirrored here'
}, {
  icon: {
    category: 'standard',
    name: 'account'
  },
  id: '3',
  label: 'Pill Label 3',
  title: 'Full pill label verbiage mirrored here'
}, {
  avatar: _react.default.createElement(_avatar.default, {
    imgSrc: "https://lightningdesignsystem.com/assets/images/avatar1.jpg",
    title: "User 4",
    variant: "user"
  }),
  id: '4',
  label: 'Pill Label 4',
  title: 'Full pill label verbiage mirrored here'
}, {
  avatar: {
    imgSrc: 'https://lightningdesignsystem.com/assets/images/avatar1.jpg',
    title: 'User 5'
  },
  id: '5',
  label: 'Pill Label 5',
  title: 'Full pill label verbiage mirrored here'
}, {
  bare: true,
  id: '6',
  label: 'Pill Label 6',
  title: 'Full pill label verbiage mirrored here'
}, {
  error: true,
  id: '7',
  label: 'Pill Label 7',
  title: 'Full pill label verbiage mirrored here'
}];
describe('SLDSPillContainer', function () {
  describe('Base', function () {
    var clickData = {};
    var requestRemoveData = {};
    beforeEach((0, _enzymeHelpers.mountComponent)(_react.default.createElement(_iconSettings.default, {
      iconPath: "/assets/icons"
    }, _react.default.createElement(_pillContainer.default, {
      options: options,
      onClickPill: function onClickPill(event, data) {
        clickData = data;
      },
      onRequestRemovePill: function onRequestRemovePill(event, data) {
        requestRemoveData = data;
      }
    }))));
    afterEach(_enzymeHelpers.unmountComponent);
    it('Renders the base Pill Container correctly', function () {
      var idOfCurrentPill = 1;
      (0, _chai.expect)(this.wrapper.find('.slds-pill_container').length).to.eql(1);
      (0, _chai.expect)(this.wrapper.find('ul.slds-listbox').length).to.eql(1);
      this.wrapper.find('ul.slds-listbox .slds-pill').forEach(function (pill) {
        (0, _chai.expect)(pill.find('.slds-pill__label').text()).to.eql("Pill Label ".concat(idOfCurrentPill));
        Simulate.click(pill.getDOMNode());
        (0, _chai.expect)(clickData.option.id).to.eql("".concat(idOfCurrentPill));
        Simulate.click(pill.find('.slds-pill__remove').getDOMNode());
        (0, _chai.expect)(requestRemoveData.option.id).to.eql("".concat(idOfCurrentPill));

        if (idOfCurrentPill === 2 || idOfCurrentPill === 3) {
          (0, _chai.expect)(pill.find('.slds-icon_container.slds-icon-standard-account').length).to.eql(1);
        } else if (idOfCurrentPill === 4 || idOfCurrentPill === 5) {
          (0, _chai.expect)(pill.find('.slds-avatar.slds-avatar_circle.slds-avatar_medium').length).to.eql(1);
        } else if (idOfCurrentPill === 6) {
          (0, _chai.expect)(pill.find('.slds-pill_bare').length).to.eql(1);
        } else if (idOfCurrentPill === 7) {
          (0, _chai.expect)(pill.find('.slds-has-error').length).to.eql(1);
        }

        idOfCurrentPill++;
      });
    });
    it('Handles keyboard navigation properly', function () {
      var getFocusedPillLabel = function getFocusedPillLabel() {
        return document.activeElement.querySelector('.slds-pill__label').innerText;
      };

      var i = 1;
      Simulate.focus(this.wrapper.find('.slds-pill_container').find('.slds-pill').first().getDOMNode());

      for (i = 1; i < 7; i++) {
        Simulate.keyDown(document.activeElement, _keyCode.keyObjects.RIGHT);
        (0, _chai.expect)(getFocusedPillLabel()).to.eql(options[i].label);
      }

      Simulate.keyDown(document.activeElement, _keyCode.keyObjects.RIGHT);
      (0, _chai.expect)(getFocusedPillLabel()).to.eql(options[0].label);
      Simulate.keyDown(document.activeElement, _keyCode.keyObjects.LEFT);
      (0, _chai.expect)(getFocusedPillLabel()).to.eql(options[6].label);

      for (i = 0; i < 3; i++) {
        Simulate.keyDown(document.activeElement, _keyCode.keyObjects.LEFT);
      }

      Simulate.keyDown(document.activeElement, _keyCode.keyObjects.DELETE);
      (0, _chai.expect)(requestRemoveData.option.label).to.eql(options[3].label);
      Simulate.keyDown(document.activeElement, _keyCode.keyObjects.LEFT);
      Simulate.keyDown(document.activeElement, _keyCode.keyObjects.BACKSPACE);
      (0, _chai.expect)(requestRemoveData.option.label).to.eql(options[2].label);
    });
  });
  describe('Bare', function () {
    beforeEach((0, _enzymeHelpers.mountComponent)(_react.default.createElement(_iconSettings.default, {
      iconPath: "/assets/icons"
    }, _react.default.createElement(_pillContainer.default, {
      options: options,
      variant: "bare"
    }))));
    afterEach(_enzymeHelpers.unmountComponent);
    it('Renders the bare Pill Container correctly', function () {
      this.wrapper.find('ul.slds-listbox .slds-pill').forEach(function (pill) {
        (0, _chai.expect)(pill.find('.slds-pill_bare').length).to.eql(1);
      });
    });
  });
});