@salesforce/design-system-react/module/components/split-view/__tests__/split-view.listbox.header.browser-test.js

Salesforce Lightning Design System for React

import React from 'react';
import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';
import { mount } from 'enzyme';
import sinon from 'sinon';
import IconSettings from '../../../components/icon-settings';
import SplitViewListbox, { SORT_OPTIONS } from '../../../components/split-view/listbox';
chai.use(chaiEnzyme());
var listOptions = [{
  id: 'option1',
  label: 'Riley Shultz',
  topRightText: '99',
  bottomLeftText: 'Biotech, Inc.',
  bottomRightText: 'Nurturing'
}, {
  id: 'option2',
  label: 'Jason A. - VP of Sales',
  topRightText: '92',
  bottomLeftText: 'Case Management Solutions',
  bottomRightText: 'Contacted'
}, {
  id: 'option3',
  label: 'Josh Smith',
  topRightText: '90',
  bottomLeftText: 'Acme, Inc.',
  bottomRightText: 'Contacted'
}, {
  id: 'option4',
  label: 'Bobby Tree',
  topRightText: '89',
  bottomLeftText: 'Salesforce, Inc.',
  bottomRightText: 'Closing'
}];
describe('SLDSSplitView - Listbox header', function () {
  var component;

  var WrappedComponent = function WrappedComponent(props) {
    return /*#__PURE__*/React.createElement(IconSettings, {
      iconPath: "/assets/icons"
    }, /*#__PURE__*/React.createElement(SplitViewListbox, props));
  };

  var mountComponent = function mountComponent(props) {
    return mount( /*#__PURE__*/React.createElement(WrappedComponent, props));
  };

  var props = {
    options: listOptions,
    labels: {
      header: 'test header'
    },
    assistiveText: {
      sort: {
        sortedBy: 'test sort by',
        descending: 'test descending',
        ascending: 'test ascending'
      }
    },
    sortDirection: SORT_OPTIONS.DOWN,
    events: {
      onSort: sinon.spy(),
      onSelect: function onSelect(event, _ref) {
        var selectedItems = _ref.selectedItems;
        component.setProps({
          selection: selectedItems
        });
      }
    }
  };
  beforeEach(function () {
    component = mountComponent(props);
  });
  it('should have a header', function () {
    expect(component.find('.slds-split-view__list-header')).to.have.length(1);
  });
  it('should not have a header when no label specified', function () {
    component.setProps({
      labels: {}
    });
    expect(component.find('.slds-split-view__list-header')).to.have.length(0);
  });
  it('should have test label', function () {
    expect(component.find('.slds-split-view__list-header > span > span').at(1).text()).to.equal('test header');
  });
  it('should have sort by assistive text', function () {
    expect(component.find('.slds-split-view__list-header > span > span').at(0).text()).to.equal('test sort by: ');
  });
  describe('sort', function () {
    describe('direction', function () {
      it('should have a sort direction down icon', function () {
        expect(component.find('.slds-split-view__list-header svg > use').prop('href')).to.have.string('arrowdown');
      });
      it('should have sort descending assistive text', function () {
        expect(component.find('.slds-split-view__list-header > span > span').at(2).text()).to.equal('- test descending');
      });
      it('should have a sort direction up icon', function () {
        component.setProps({
          sortDirection: SORT_OPTIONS.UP
        });
        expect(component.find('.slds-split-view__list-header svg > use').prop('href')).to.have.string('arrowup');
      });
      it('should have sort ascending assistive text', function () {
        component.setProps({
          sortDirection: SORT_OPTIONS.UP
        });
        expect(component.find('.slds-split-view__list-header > span > span').at(2).text()).to.equal('- test ascending');
      });
      it('should not have a sort direction when no direction specified', function () {
        component.setProps({
          sortDirection: undefined
        });
        expect(component.find('.slds-split-view__list-header svg')).to.have.length(0);
      });
      it('should call onSort when the header is clicked', function () {
        component.find('a.slds-split-view__list-header').simulate('click');
        expect(props.events.onSort.called).to.be.true;
      });
      it('should not be clickable when onSort not specified', function () {
        component.setProps({
          events: {
            onSelect: sinon.spy()
          }
        });
        expect(component.find('.slds-split-view__list-header a')).to.be.length(0);
      });
    });
  });
});
//# sourceMappingURL=split-view.listbox.header.browser-test.js.map