text: import { mount } from 'enzyme';
  import React from 'react';
  import Card from '../src/Card';
  import Nav from '../src/Nav';
  import Navbar from '../src/Navbar';
  import NavDropdown from '../src/NavDropdown';
  import { shouldWarn } from './helpers';
  
  describe('<Nav>', () => {
    let mountPoint;
  
    beforeEach(() => {
      mountPoint = document.createElement('div');
      document.body.appendChild(mountPoint);
    });
  
    afterEach(() => {
      document.body.removeChild(mountPoint);
    });
  
    it('should have div as default component', () => {
      mount(<Nav />).assertSingle('div');
    });
  
    it('should set the correct item active', () => {
      const wrapper = mount(
        <Nav variant="pills" defaultActiveKey={1}>
          <Nav.Link eventKey={1}>Pill 1 content</Nav.Link>
          <Nav.Link eventKey={2}>Pill 2 content</Nav.Link>
        </Nav>,
      );
  
      const items = wrapper.find('a.nav-link');
  
      assert.ok(items.at(0).is('.active'));
      assert.notOk(items.at(1).is('.active'));
    });
  
    it('should add variant class', () => {
      mount(
        <Nav variant="tabs">
          <Nav.Link eventKey={1}>Pill 1 content</Nav.Link>
          <Nav.Link eventKey={2}>Pill 2 content</Nav.Link>
        </Nav>,
      ).assertSingle('div.nav.nav-tabs');
    });
  
    it('should add justified class', () => {
      mount(
        <Nav justify>
          <Nav.Link eventKey={1}>Pill 1 content</Nav.Link>
          <Nav.Link eventKey={2}>Pill 2 content</Nav.Link>
        </Nav>,
      ).assertSingle('div.nav.nav-justified');
    });
  
    it('should add fill class', () => {
      mount(
        <Nav fill>
          <Nav.Link eventKey={1}>Pill 1 content</Nav.Link>
          <Nav.Link eventKey={2}>Pill 2 content</Nav.Link>
        </Nav>,
      ).assertSingle('div.nav.nav-fill');
    });
  
    it('should be navbar aware', () => {
      mount(
        <Navbar>
          <Nav>
            <Nav.Link eventKey={1}>Pill 1 content</Nav.Link>
            <Nav.Link eventKey={2}>Pill 2 content</Nav.Link>
          </Nav>
        </Navbar>,
      ).assertSingle('div.navbar-nav');
    });
  
    it('should be card aware', () => {
      mount(
        <Card>
          <Nav variant="pills">
            <Nav.Link eventKey={1}>Pill 1 content</Nav.Link>
            <Nav.Link eventKey={2}>Pill 2 content</Nav.Link>
          </Nav>
        </Card>,
      ).assertSingle('div.card-header-pills');
    });
  
    it('should call onSelect when a Nav.Link is selected', (done) => {
      function handleSelect(key) {
        assert.equal(key, '2');
        done();
      }
  
      mount(
        <Nav onSelect={handleSelect}>
          <Nav.Link eventKey={1}>Tab 1 content</Nav.Link>
          <Nav.Link eventKey={2}>
            <span>Tab 2 content</span>
          </Nav.Link>
        </Nav>,
      )
        .find('a')
        .last()
        .simulate('click');
    });
  
    it('should call onSelect when a NavDropdown.Item is selected', () => {
      const onSelectSpy = sinon.spy();
  
      mount(
        <Nav onSelect={onSelectSpy}>
          <NavDropdown title="Dropdown" id="nav-dropdown-test" renderMenuOnMount>
            <NavDropdown.Item eventKey={1}>Dropdown item</NavDropdown.Item>
          </NavDropdown>
        </Nav>,
      )
        .find('DropdownItem')
        .simulate('click');
  
      onSelectSpy.should.have.been.calledOnce;
    });
  
    it('should set the correct item active by href', () => {
      mount(
        <Nav defaultActiveKey="#item1">
          <Nav.Link href="#item1" className="test-selected">
            Pill 1 content
          </Nav.Link>
          <Nav.Link href="#item2">Pill 2 content</Nav.Link>
        </Nav>,
      ).assertSingle('a.test-selected.active');
    });
  
    it('should warn when attempting to use a justify navbar nav', () => {
      shouldWarn('justify navbar `Nav`s are not supported');
  
      mount(<Nav navbar justify />);
    });
  
    describe('keyboard navigation', () => {
      let wrapper;
      let selectSpy;
      let keyDownSpy;
  
      beforeEach(() => {
        selectSpy = sinon.spy((activeKey) => {
          wrapper.setProps({ activeKey });
        });
        keyDownSpy = sinon.spy();
  
        wrapper = mount(
          <Nav
            activeKey={1}
            onSelect={selectSpy}
            onKeyDown={keyDownSpy}
            role="tablist"
          >
            <Nav.Link eventKey={1}>Nav.Link 1 content</Nav.Link>
            <Nav.Link eventKey={2} disabled>
              Nav.Link 2 content
            </Nav.Link>
            <Nav.Link eventKey={3}>Nav.Link 3 content</Nav.Link>
            <Nav.Link eventKey={4} disabled>
              Nav.Link 4 content
            </Nav.Link>
            <Nav.Link eventKey={5}>Nav.Link 5 content</Nav.Link>
          </Nav>,
          { attachTo: mountPoint },
        );
      });
  
      afterEach(() => wrapper.unmount());
  
      it('should not allow focusing on disabled tabs', () => {
        const links = wrapper.find('a').map((n) => n.getDOMNode());
  
        expect(links[0].getAttribute('tabindex')).to.not.equal('-1');
        expect(links[1].getAttribute('tabindex')).to.equal('-1');
        expect(links[2].getAttribute('tabindex')).to.not.equal('-1');
        expect(links[3].getAttribute('tabindex')).to.equal('-1');
        expect(links[4].getAttribute('tabindex')).to.not.equal('-1');
      });
  
      it('should focus the next tab on arrow key', () => {
        const anchors = wrapper.find('a');
  
        anchors
          .at(0)
          .tap((a) => a.getDOMNode().focus())
          .simulate('keydown', {
            key: 'ArrowRight',
          });
  
        expect(wrapper.prop('activeKey')).to.equal('3');
  
        expect(document.activeElement).to.equal(anchors.at(2).getDOMNode());
      });
  
      it('should focus the previous tab on arrow key', () => {
        wrapper.setProps({ activeKey: 5 });
  
        const anchors = wrapper.find('a');
  
        anchors
          .at(4)
          .tap((a) => a.getDOMNode().focus())
          .simulate('keydown', {
            key: 'ArrowLeft',
          });
  
        expect(wrapper.prop('activeKey')).to.equal('3');
        expect(document.activeElement).to.equal(anchors.at(2).getDOMNode());
      });
  
      it('should wrap to the next tab on arrow key', () => {
        wrapper.setProps({ activeKey: 5 });
        const anchors = wrapper.find('a');
  
        anchors
          .at(4)
          .tap((a) => a.getDOMNode().focus())
          .simulate('keydown', {
            key: 'ArrowDown',
          });
  
        expect(wrapper.prop('activeKey')).to.equal('1');
        expect(document.activeElement).to.equal(anchors.at(0).getDOMNode());
      });
  
      it('should wrap to the previous tab on arrow key', () => {
        const anchors = wrapper.find('a');
  
        anchors
          .at(0)
          .tap((a) => a.getDOMNode().focus())
          .simulate('keydown', {
            key: 'ArrowUp',
          });
  
        expect(wrapper.prop('activeKey')).to.equal('5');
        expect(document.activeElement).to.equal(anchors.at(4).getDOMNode());
      });
  
      it('should forward to a onKeyDown listener', () => {
        const anchors = wrapper.find('a');
  
        anchors
          .at(0)
          .tap((a) => a.getDOMNode().focus())
          .simulate('keydown', {
            key: 'ArrowUp',
          });
  
        sinon.assert.calledOnce(keyDownSpy);
      });
  
      ['a', 'b', 'left', 'up'].forEach(({ key }) => {
        it(`should ignore non-arrow keys: case ${key}`, () => {
          const anchors = wrapper.find('a');
  
          anchors
            .at(0)
            .tap((a) => a.getDOMNode().focus())
            .simulate('keydown', {
              key,
            });
  
          expect(document.activeElement).to.equal(anchors.at(0).getDOMNode());
          sinon.assert.calledOnce(keyDownSpy);
        });
      });
    });
  
    describe('Web Accessibility', () => {
      it('should have tablist and tab roles', () => {
        const wrapper = mount(
          <Nav>
            <Nav.Link key={1}>Tab 1 content</Nav.Link>
            <Nav.Link key={2}>Tab 2 content</Nav.Link>
          </Nav>,
        );
  
        wrapper.assertNone('div.nav[role="tablist"]');
        wrapper.assertNone('a[role="tab"]');
  
        wrapper.setProps({ role: 'tablist' });
  
        wrapper.assertSingle('div.nav[role="tablist"]');
        wrapper.find('a[role="tab"]').length.should.equal(2);
      });
    });
  });
  