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

Salesforce Lightning Design System for React

"use strict";

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

var _enzyme = require("enzyme");

var _chai = _interopRequireWildcard(require("chai"));

var _chaiEnzyme = _interopRequireDefault(require("chai-enzyme"));

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

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

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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

/* eslint-disable react/no-render-return-value */

/* eslint-disable react/no-find-dom-node */
_chai.default.use((0, _chaiEnzyme.default)());

describe('SLDSAvatar: ', function describeFunction() {
  var _this2 = this;

  var mountNode;
  var wrapper;
  describe('Default Structure', function describeFunction2() {
    var _this = this;

    beforeEach(function () {
      mountNode = (0, _enzymeHelpers.createMountNode)({
        context: _this
      });
    });
    afterEach(function () {
      (0, _enzymeHelpers.destroyMountNode)({
        wrapper: wrapper,
        mountNode: mountNode
      });
    });
    it('avatar renders with image', function () {
      var expectedSrc = 'assets/images/global-header/logo.svg';
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_avatar.default, {
        imgSrc: expectedSrc
      }), {
        attachTo: mountNode
      });
      var img = wrapper.find('img');
      var src = img.prop('src');
      (0, _chai.expect)(src).to.equal(expectedSrc);
    });
    it('renders proper icon size class', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        size: "large"
      })), {
        attachTo: mountNode
      });
      var avatar = wrapper.find('.slds-avatar_large');
      (0, _chai.expect)(avatar).to.be.present;
    });
    describe('variant is a user', function () {
      beforeEach(function () {
        wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
          iconPath: "/assets/icons"
        }, _react.default.createElement(_avatar.default, {
          variant: "user"
        })), {
          attachTo: mountNode
        });
      });
      it('displays as a circle', function () {
        var circleClass = !!wrapper.find('.slds-avatar_circle');
        (0, _chai.expect)(circleClass).to.be.true;
      });
    });
    describe('variant is an entity', function () {
      beforeEach(function () {
        wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
          iconPath: "/assets/icons"
        }, _react.default.createElement(_avatar.default, {
          variant: "entity"
        })), {
          attachTo: mountNode
        });
      });
      it('displays as a square (no circle class)', function () {
        var avatar = wrapper.find('.slds-avatar_circle');
        (0, _chai.expect)(avatar).to.not.be.present;
      });
    });
  });
  describe('Initials avatar fallback check', function () {
    beforeEach(function () {
      mountNode = (0, _enzymeHelpers.createMountNode)({
        context: _this2
      });
    });
    afterEach(function () {
      (0, _enzymeHelpers.destroyMountNode)({
        wrapper: wrapper,
        mountNode: mountNode
      });
    });
    it('renders "initials prop" initials if they are passed in directly', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        initials: "AW"
      })), {
        attachTo: mountNode
      });
      var abbr = wrapper.find('abbr');
      (0, _chai.expect)(abbr.text()).to.equal('AW');
    });
    it('renders fallback initials abbr node if initials or label prop exists', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        label: "test"
      })), {
        attachTo: mountNode
      });
      var abbr = !!wrapper.find('abbr');
      (0, _chai.expect)(abbr).to.be.true;
    });
    it('calls buildInitials in abbr node if no initials prop', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        label: "Jane Doe"
      })), {
        attachTo: mountNode
      });
      var abbr = wrapper.find('abbr');
      (0, _chai.expect)(abbr.text()).to.equal('JD');
    });
    it('renders first two letters of one word if label is one word', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        label: "Acme"
      })), {
        attachTo: mountNode
      });
      var abbr = wrapper.find('abbr');
      (0, _chai.expect)(abbr.text()).to.equal('Ac');
    });
    it('renders first letters of each word if label is two words', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        label: "Acme Communications"
      })), {
        attachTo: mountNode
      });
      var abbr = wrapper.find('abbr');
      (0, _chai.expect)(abbr.text()).to.equal('AC');
    });
    it('renders first letters of first and last word if label is more than two words', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        label: "Acme Communications Inc."
      })), {
        attachTo: mountNode
      });
      var abbr = wrapper.find('abbr');
      (0, _chai.expect)(abbr.text()).to.equal('AI');
    });
  });
  describe('Icon avatar fallback check', function () {
    beforeEach(function () {
      mountNode = (0, _enzymeHelpers.createMountNode)({
        context: _this2
      });
    });
    afterEach(function () {
      (0, _enzymeHelpers.destroyMountNode)({
        wrapper: wrapper,
        mountNode: mountNode
      });
    });
    it('renders expected assistiveText', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        variant: "entity",
        assistiveText: {
          icon: 'entity icon avatar'
        }
      })), {
        attachTo: mountNode
      });
      var span = wrapper.find('.slds-assistive-text');
      (0, _chai.expect)(span.text()).to.equal('entity icon avatar');
    });
    it('renders account icon', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        variant: "entity"
      })), {
        attachTo: mountNode
      });
      (0, _chai.expect)(wrapper.find('.slds-icon-standard-account')).to.be.present;
    });
    it('renders user icon', function () {
      wrapper = (0, _enzyme.mount)(_react.default.createElement(_iconSettings.default, {
        iconPath: "/assets/icons"
      }, _react.default.createElement(_avatar.default, {
        variant: "user"
      })), {
        attachTo: mountNode
      });
      (0, _chai.expect)(wrapper.find('.slds-icon-standard-user')).to.be.present;
    });
  });
});