@salesforce/design-system-react/module/components/button-stateful/__tests__/button-stateful.browser-test.js

Salesforce Lightning Design System for React

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import ReactDOM from 'react-dom';
import assign from 'lodash.assign';
import chai from 'chai';
import IconSettings from '../../icon-settings';
import ButtonStateful from '../../button-stateful';
chai.should();
describe('Button Stateful: ', function () {
  // Base defaults
  var requiredPropsNoVariant = {
    assistiveText: {
      icon: 'like'
    },
    iconName: 'like',
    iconSize: 'large'
  };

  var requiredProps = _objectSpread({}, requiredPropsNoVariant, {
    variant: 'icon'
  }); // Setup and takedown


  var renderButton = function renderButton(instance) {
    return function renderButtonFunction() {
      this.dom = document.createElement('div');
      document.body.appendChild(this.dom);
      /* deepscan-disable REACT_ASYNC_RENDER_RETURN_VALUE */

      this.component = ReactDOM.render(
      /*#__PURE__*/
      React.createElement(IconSettings, {
        iconPath: "/assets/icons"
      }, instance), this.dom);
      /* deepscan-enable REACT_ASYNC_RENDER_RETURN_VALUE */
    };
  };

  function removeButton() {
    ReactDOM.unmountComponentAtNode(this.dom);
    document.body.removeChild(this.dom);
  }

  var getButton = function getButton(dom) {
    return dom.querySelector('.slds-button');
  }; // Tests


  describe('Default Structure', function () {
    beforeEach(renderButton(
    /*#__PURE__*/
    React.createElement(ButtonStateful, requiredProps)));
    afterEach(removeButton);
    it('button exists - is not undefined', function () {
      var button = getButton(this.dom);
      button.should.not.be.undefined;
    });
    it('if no active prop, is not active', function () {
      var button = getButton(this.dom);
      button.className.should.include('slds-not-selected');
    });
  });
  describe('External active props works', function () {
    var propsWithActive = assign({
      active: true
    }, requiredProps);
    beforeEach(renderButton(
    /*#__PURE__*/
    React.createElement(ButtonStateful, propsWithActive)));
    afterEach(removeButton);
    it('renders active prop', function () {
      var button = getButton(this.dom);
      button.className.should.include('slds-is-selected');
    });
  });
  describe('Aria-* is supported', function () {
    var propsWithAria = assign({
      'aria-pressed': true,
      'aria-label': 'abc',
      'aria-live': null
    }, requiredProps);
    beforeEach(renderButton(
    /*#__PURE__*/
    React.createElement(ButtonStateful, propsWithAria)));
    afterEach(removeButton);
    it('honors aria override', function () {
      var button = getButton(this.dom);
      button.getAttribute('aria-pressed').should.equal('true');
      button.getAttribute('aria-label').should.equal('abc');
      chai.expect(button.getAttribute('aria-live')).to.be.null;
    });
  });
  describe('Aria default for icon button', function () {
    var propsToUse = assign({
      variant: 'icon'
    }, requiredPropsNoVariant);
    beforeEach(renderButton(
    /*#__PURE__*/
    React.createElement(ButtonStateful, propsToUse)));
    afterEach(removeButton);
    it('gives correct aria default for buttons with icon', function () {
      var button = getButton(this.dom);
      button.getAttribute('aria-live').should.equal('polite');
    });
  });
  describe('Aria default for icon-filled button', function () {
    var propsToUse = assign({
      variant: 'icon-filled'
    }, requiredPropsNoVariant);
    beforeEach(renderButton(
    /*#__PURE__*/
    React.createElement(ButtonStateful, propsToUse)));
    afterEach(removeButton);
    it('gives correct aria default for buttons with icon-filled', function () {
      var button = getButton(this.dom);
      button.getAttribute('aria-live').should.equal('polite');
    });
  });
  describe('Aria default for non-icon button', function () {
    var propsToUse = assign({
      variant: 'base'
    }, requiredPropsNoVariant);
    beforeEach(renderButton(
    /*#__PURE__*/
    React.createElement(ButtonStateful, propsToUse)));
    afterEach(removeButton);
    it('gives correct aria default for non-icon buttons', function () {
      var button = getButton(this.dom);
      button.getAttribute('aria-live').should.equal('assertive');
    });
  }); // TODO: Write more tests for custom renderers
});
//# sourceMappingURL=button-stateful.browser-test.js.map