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

Salesforce Lightning Design System for React

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

/* eslint-disable max-lines */

/* eslint-disable react/no-render-return-value */
import React from 'react';
import ReactDOM from 'react-dom';
import { expect } from 'chai';
import assign from 'lodash.assign';
import TestUtils from 'react-dom/test-utils';
import Input from '../../input';
import Icon from '../../icon';
import InputIcon from '../../icon/input-icon';
import IconSettings from '../../icon-settings';
describe('SLDSInput', function () {
  var defaultProps = {
    placeholder: 'Placeholder Text'
  };
  var body;

  var renderInput = function renderInput(instance) {
    body = document.createElement('div');
    document.body.appendChild(body);
    /* deepscan-disable REACT_ASYNC_RENDER_RETURN_VALUE */

    return ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconSettings, {
      iconPath: "/assets/icons"
    }, instance)), body);
    /* deepscan-enable REACT_ASYNC_RENDER_RETURN_VALUE */
  };

  function removeInput() {
    ReactDOM.unmountComponentAtNode(body);
    document.body.removeChild(body);
  }

  var createInput = function createInput(props) {
    return /*#__PURE__*/React.createElement(Input, assign({}, defaultProps, props));
  };

  var getInput = function getInput(props) {
    return renderInput(createInput(props));
  };

  describe('Standard Input with Label', function () {
    var component;
    var wrapper;
    var input;
    var label;
    beforeEach(function () {
      component = getInput({
        label: 'Input Label',
        id: 'custom-id'
      });

      var _component$getElement = component.getElementsByClassName('slds-form-element');

      var _component$getElement2 = _slicedToArray(_component$getElement, 1);

      wrapper = _component$getElement2[0];

      var _component$getElement3 = component.getElementsByTagName('input');

      var _component$getElement4 = _slicedToArray(_component$getElement3, 1);

      input = _component$getElement4[0];

      var _component$getElement5 = component.getElementsByClassName('slds-form-element__label');

      var _component$getElement6 = _slicedToArray(_component$getElement5, 1);

      label = _component$getElement6[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('is wrapped in div with class "slds-form-element"', function () {
      expect(wrapper.className).to.include('slds-form-element');
    });
    it('renders label', function () {
      expect(label.textContent).to.equal('Input Label');
    });
    it('renders input element with class "slds-input"', function () {
      expect(input.className).to.include('slds-input');
    });
    it('has an id', function () {
      expect(input.getAttribute('id')).to.be.ok;
    });
    it('can pass custom id', function () {
      expect(input.getAttribute('id')).to.equal('custom-id');
    });
    it('renders placeholder text', function () {
      expect(input.getAttribute('placeholder')).to.equal('Placeholder Text');
    });
    it('has associated label for tag pointing to id of input', function () {
      var labelForTag = label.getAttribute('for');
      var inputId = input.getAttribute('id');
      expect(labelForTag).to.equal(inputId);
    });
  });
  describe('Input without Assistive Text Label', function () {
    var component;
    var label;
    var input;
    beforeEach(function () {
      component = getInput({
        assistiveText: {
          label: 'Assistive Label'
        }
      });

      var _component$getElement7 = component.getElementsByTagName('input');

      var _component$getElement8 = _slicedToArray(_component$getElement7, 1);

      input = _component$getElement8[0];

      var _component$getElement9 = component.getElementsByClassName('slds-form-element__label');

      var _component$getElement10 = _slicedToArray(_component$getElement9, 1);

      label = _component$getElement10[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('renders label (assitive)', function () {
      expect(label.textContent).to.equal('Assistive Label');
    });
    it('label has class "slds-assistive-text"', function () {
      expect(label.className).to.include('slds-assistive-text');
    });
    it('has associated label for tag pointing to id of input', function () {
      var labelForTag = label.getAttribute('for');
      var inputId = input.getAttribute('id');
      expect(labelForTag).to.equal(inputId);
    });
  });
  describe('Read Only Input', function () {
    var component;
    var label;
    var input;
    beforeEach(function () {
      component = getInput({
        label: 'Input Label',
        readOnly: true
      });

      var _component$getElement11 = component.getElementsByTagName('input');

      var _component$getElement12 = _slicedToArray(_component$getElement11, 1);

      input = _component$getElement12[0];

      var _component$getElement13 = component.getElementsByTagName('label');

      var _component$getElement14 = _slicedToArray(_component$getElement13, 1);

      label = _component$getElement14[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('label has class "slds-form-element__label"', function () {
      expect(label.className).to.include('slds-form-element__label');
    });
    it('input has attribute "readonly"', function () {
      expect(input.getAttribute('readonly')).to.equal('');
    });
  });
  describe('Static Input', function () {
    var component;
    var label;
    var input;
    beforeEach(function () {
      component = getInput({
        label: 'Input Label',
        isStatic: true
      });

      var _component$getElement15 = component.getElementsByTagName('span');

      var _component$getElement16 = _slicedToArray(_component$getElement15, 1);

      label = _component$getElement16[0];
      // eslint-disable-next-line prefer-destructuring
      input = component.getElementsByTagName('span')[1];
    });
    afterEach(function () {
      removeInput();
    });
    it('label is a span and has class "slds-form-element__label"', function () {
      expect(label.className).to.include('slds-form-element__label');
    });
    it('input is a span and has class "slds-form-element__static"', function () {
      expect(input.className).to.include('slds-form-element__static');
    });
  });
  describe('Disabled Input', function () {
    var component;
    var input;
    beforeEach(function () {
      component = getInput({
        label: 'Input Label',
        disabled: true
      });

      var _component$getElement17 = component.getElementsByTagName('input');

      var _component$getElement18 = _slicedToArray(_component$getElement17, 1);

      input = _component$getElement18[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('input has attribute "disabled"', function () {
      expect(input.getAttribute('disabled')).to.equal('');
    });
  });
  describe('Multiple Inputs', function () {
    var component1;
    var component2;
    var input1;
    var input2;
    beforeEach(function () {
      component1 = getInput({
        className: 'input-one',
        label: 'Input One'
      });
      component2 = getInput({
        className: 'input-two',
        label: 'Input Two'
      });

      var _component1$getElemen = component1.getElementsByTagName('input');

      var _component1$getElemen2 = _slicedToArray(_component1$getElemen, 1);

      input1 = _component1$getElemen2[0];

      var _component2$getElemen = component2.getElementsByTagName('input');

      var _component2$getElemen2 = _slicedToArray(_component2$getElemen, 1);

      input2 = _component2$getElemen2[0];
    });
    afterEach(function () {
      var inputNodes = document.querySelectorAll('.slds-form-element');
      inputNodes[0].parentNode.remove(inputNodes[0]);
      inputNodes[1].parentNode.remove(inputNodes[1]);
    });
    it('each input has unique generated id', function () {
      expect(input1.getAttribute('id')).to.not.equal(input2.getAttribute('id'));
    });
  });
  describe('Required Input in Error State', function () {
    var component;
    var wrapper;
    var error;
    var input;
    beforeEach(function () {
      component = getInput({
        label: 'Input Label',
        required: true,
        errorText: 'Error Message'
      });

      var _component$getElement19 = component.getElementsByClassName('slds-form-element');

      var _component$getElement20 = _slicedToArray(_component$getElement19, 1);

      wrapper = _component$getElement20[0];

      var _component$getElement21 = component.getElementsByTagName('input');

      var _component$getElement22 = _slicedToArray(_component$getElement21, 1);

      input = _component$getElement22[0];

      var _component$getElement23 = component.getElementsByClassName('slds-form-element__help');

      var _component$getElement24 = _slicedToArray(_component$getElement23, 1);

      error = _component$getElement24[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('input wrapper contains an <abbr> that has class "slds-required"', function () {
      expect(component.getElementsByTagName('abbr')[0].className).to.include('slds-required');
    });
    it('input wrapper has class "slds-has-error"', function () {
      expect(wrapper.className).to.include('slds-has-error');
    });
    it('renders error message', function () {
      expect(error.textContent).to.equal('Error Message');
    });
    it('has associated aria-describedby pointing to id of error message', function () {
      var inputDescribedby = input.getAttribute('aria-describedby');
      var errorId = error.getAttribute('id');
      expect(inputDescribedby).to.equal(errorId);
    });
  });
  describe('Input with Left Clickable Icon', function () {
    var component;
    var elementControl;
    var leftButton;
    var iconAssistiveText;
    var clickCallback = sinon.spy();
    beforeEach(function () {
      component = getInput({
        iconLeft: /*#__PURE__*/React.createElement(InputIcon, {
          assistiveText: {
            icon: 'Passed assistive text to icon'
          },
          name: "search",
          category: "utility",
          onClick: clickCallback
        })
      });

      var _component$getElement25 = component.getElementsByTagName('button');

      var _component$getElement26 = _slicedToArray(_component$getElement25, 1);

      leftButton = _component$getElement26[0];

      var _component$getElement27 = component.getElementsByClassName('slds-assistive-text');

      var _component$getElement28 = _slicedToArray(_component$getElement27, 1);

      iconAssistiveText = _component$getElement28[0];

      var _component$getElement29 = component.getElementsByClassName('slds-form-element__control');

      var _component$getElement30 = _slicedToArray(_component$getElement29, 1);

      elementControl = _component$getElement30[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('element control has class "slds-input-has-icon"', function () {
      expect(elementControl.className).to.include('slds-input-has-icon');
    });
    it('passes "assitiveText" down to icon', function () {
      expect(iconAssistiveText.textContent).to.equal('Passed assistive text to icon');
    });
    it('icon renders button BEFORE input in DOM', function () {
      var render = elementControl.innerHTML;
      expect(render.indexOf('<button')).to.be.below(render.indexOf('<input'));
    });
    it('icon can be clicked', function () {
      TestUtils.Simulate.click(leftButton);
      expect(clickCallback.calledOnce).to.be.true;
    });
  });
  describe('Input with Right Clickable Icon', function () {
    var component;
    var elementControl;
    var leftButton;
    var clickCallback = sinon.spy();
    beforeEach(function () {
      component = getInput({
        iconRight: /*#__PURE__*/React.createElement(InputIcon, {
          assistiveText: {
            icon: 'Passed assistive text to icon'
          },
          name: "search",
          category: "utility",
          onClick: clickCallback
        })
      });

      var _component$getElement31 = component.getElementsByTagName('button');

      var _component$getElement32 = _slicedToArray(_component$getElement31, 1);

      leftButton = _component$getElement32[0];

      var _component$getElement33 = component.getElementsByClassName('slds-form-element__control');

      var _component$getElement34 = _slicedToArray(_component$getElement33, 1);

      elementControl = _component$getElement34[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('element control has class "slds-input-has-icon"', function () {
      expect(elementControl.className).to.include('slds-input-has-icon');
    });
    it('icon renders button AFTER input in DOM', function () {
      var render = elementControl.innerHTML;
      expect(render.indexOf('<button')).to.be.above(render.indexOf('<input'));
    });
    it('icon can be clicked', function () {
      TestUtils.Simulate.click(leftButton);
      expect(clickCallback.calledOnce).to.be.true;
    });
  });
  describe('Input with Non-Clickable Icon', function () {
    var component;
    var elementControl;
    beforeEach(function () {
      component = getInput({
        iconRight: /*#__PURE__*/React.createElement(Icon, {
          name: "search",
          category: "utility"
        })
      });

      var _component$getElement35 = component.getElementsByClassName('slds-form-element__control');

      var _component$getElement36 = _slicedToArray(_component$getElement35, 1);

      elementControl = _component$getElement36[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('button tag does not exist', function () {
      expect(elementControl.getElementsByTagName('button')[0]).to.not.be.ok;
    });
  });
  describe('Input with Loading Spinner Icon', function () {
    var component;
    var spinner;
    var input;
    beforeEach(function () {
      component = getInput({
        assistiveText: {
          label: 'Passed assistive text to icon'
        },
        hasSpinner: true,
        iconRight: /*#__PURE__*/React.createElement(InputIcon, {
          assistiveText: {
            icon: 'Passed assistive text to icon'
          },
          name: "search",
          category: "utility"
        }),
        id: 'unique-id-4',
        label: 'Input Label'
      });

      var _component$getElement37 = component.getElementsByClassName('slds-spinner');

      var _component$getElement38 = _slicedToArray(_component$getElement37, 1);

      spinner = _component$getElement38[0];

      var _component$getElement39 = component.getElementsByTagName('input');

      var _component$getElement40 = _slicedToArray(_component$getElement39, 1);

      input = _component$getElement40[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('renders loading spinner icon', function () {
      expect(spinner).to.be.ok;
    });
    it('input aria-describedby points to id of spinner)', function () {
      var spinnerId = spinner.getAttribute('id');
      var inputDescribedby = input.getAttribute('aria-describedby');
      expect(inputDescribedby).to.include(spinnerId);
    });
    it('input aria-describedby points to id of spinner AND id of error message)', function () {
      var spinnerId = spinner.getAttribute('id');
      var inputDescribedby = input.getAttribute('aria-describedby');
      expect(inputDescribedby).to.include(spinnerId);
    });
  });
  describe('Input with Loading Spinner Icon & Error', function () {
    var component;
    var spinner;
    var input;
    var error;
    beforeEach(function () {
      component = getInput({
        assistiveText: {
          label: 'Passed assistive text to icon'
        },
        required: true,
        errorText: 'Error Message',
        hasSpinner: true,
        iconRight: /*#__PURE__*/React.createElement(InputIcon, {
          assistiveText: {
            icon: 'Passed assistive text to icon'
          },
          name: "search",
          category: "utility"
        }),
        id: 'unique-id-4',
        label: 'Input Label'
      });

      var _component$getElement41 = component.getElementsByClassName('slds-spinner');

      var _component$getElement42 = _slicedToArray(_component$getElement41, 1);

      spinner = _component$getElement42[0];

      var _component$getElement43 = component.getElementsByTagName('input');

      var _component$getElement44 = _slicedToArray(_component$getElement43, 1);

      input = _component$getElement44[0];

      var _component$getElement45 = component.getElementsByClassName('slds-form-element__help');

      var _component$getElement46 = _slicedToArray(_component$getElement45, 1);

      error = _component$getElement46[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('input aria-describedby points to id of spinner AND id of error message)', function () {
      var errorId = error.getAttribute('id');
      var spinnerId = spinner.getAttribute('id');
      var inputDescribedby = input.getAttribute('aria-describedby');
      expect(inputDescribedby).to.equal("".concat(spinnerId, " ").concat(errorId));
    });
  });
  describe('Input with Fixed Left Text', function () {
    var component;
    var fixedTextLeft;
    beforeEach(function () {
      component = getInput({
        fixedTextLeft: '$',
        id: 'unique-id-5',
        label: 'Input Label'
      });

      var _component$getElement47 = component.getElementsByClassName('slds-form-element__addon');

      var _component$getElement48 = _slicedToArray(_component$getElement47, 1);

      fixedTextLeft = _component$getElement48[0];
    });
    afterEach(function () {
      removeInput();
    });
    it('renders fixed text node', function () {
      expect(fixedTextLeft).to.be.ok;
    });
    it('renders fixed text node content', function () {
      expect(fixedTextLeft.textContent).to.equal('$');
    });
  });
  describe('Counter Input', function () {
    var changeOccurred;
    var component;
    var decrement;
    var increment;
    var onChangeData;
    afterEach(function () {
      removeInput();
    });
    it('increments and decrements as expected', function () {
      component = getInput({
        onChange: function onChange(event, data) {
          onChangeData = data;
        },
        value: 1,
        variant: 'counter'
      });

      var _component$getElement49 = component.getElementsByClassName('slds-input__button_decrement');

      var _component$getElement50 = _slicedToArray(_component$getElement49, 1);

      decrement = _component$getElement50[0];

      var _component$getElement51 = component.getElementsByClassName('slds-input__button_increment');

      var _component$getElement52 = _slicedToArray(_component$getElement51, 1);

      increment = _component$getElement52[0];
      onChangeData = {};
      TestUtils.Simulate.mouseDown(increment);
      TestUtils.Simulate.mouseUp(increment);
      expect(onChangeData.number === 2 && onChangeData.value === '2').to.be.true;
      onChangeData = {};
      TestUtils.Simulate.keyDown(increment, {
        key: 'Enter',
        keyCode: 13,
        which: 13
      });
      TestUtils.Simulate.keyUp(increment, {
        key: 'Enter',
        keyCode: 13,
        which: 13
      });
      expect(onChangeData.number === 2 && onChangeData.value === '2').to.be.true;
      TestUtils.Simulate.mouseDown(decrement);
      TestUtils.Simulate.mouseUp(decrement);
      expect(onChangeData.number === 0 && onChangeData.value === '0').to.be.true;
      onChangeData = {};
      TestUtils.Simulate.keyDown(decrement, {
        key: 'Enter',
        keyCode: 13,
        which: 13
      });
      TestUtils.Simulate.keyUp(decrement, {
        key: 'Enter',
        keyCode: 13,
        which: 13
      });
      expect(onChangeData.number === 0 && onChangeData.value === '0').to.be.true;
    });
    it('respects min and max values', function () {
      component = getInput({
        maxValue: 1,
        minValue: 1,
        onChange: function onChange() {
          changeOccurred = true;
        },
        value: 1,
        variant: 'counter'
      });

      var _component$getElement53 = component.getElementsByClassName('slds-input__button_decrement');

      var _component$getElement54 = _slicedToArray(_component$getElement53, 1);

      decrement = _component$getElement54[0];

      var _component$getElement55 = component.getElementsByClassName('slds-input__button_increment');

      var _component$getElement56 = _slicedToArray(_component$getElement55, 1);

      increment = _component$getElement56[0];
      changeOccurred = false;
      TestUtils.Simulate.mouseDown(increment);
      TestUtils.Simulate.mouseUp(increment);
      expect(changeOccurred).to.be.false;
      expect(increment.disabled).to.be.true;
      changeOccurred = false;
      TestUtils.Simulate.mouseDown(decrement);
      TestUtils.Simulate.mouseUp(decrement);
      expect(changeOccurred).to.be.false;
      expect(decrement.disabled).to.be.true;
    });
    it('acknowledges custom step values', function () {
      component = getInput({
        onChange: function onChange(event, data) {
          onChangeData = data;
        },
        step: 0.1,
        value: 1,
        variant: 'counter'
      });

      var _component$getElement57 = component.getElementsByClassName('slds-input__button_decrement');

      var _component$getElement58 = _slicedToArray(_component$getElement57, 1);

      decrement = _component$getElement58[0];

      var _component$getElement59 = component.getElementsByClassName('slds-input__button_increment');

      var _component$getElement60 = _slicedToArray(_component$getElement59, 1);

      increment = _component$getElement60[0];
      onChangeData = {};
      TestUtils.Simulate.mouseDown(increment);
      TestUtils.Simulate.mouseUp(increment);
      expect(onChangeData.number === 1.1 && onChangeData.value === '1.1').to.be.true;
      TestUtils.Simulate.mouseDown(decrement);
      TestUtils.Simulate.mouseUp(decrement);
      expect(onChangeData.number === 0.9 && onChangeData.value === '0.9').to.be.true;
    });
  });
});
//# sourceMappingURL=input.browser-test.js.map