tests: added more tests (react-bootstrap#5193)

* test: Added more tests

* Switch to fake timers

* Clean up callback tests

Author: kyletsang

test/CarouselSpec.js

@@ -244,6 +244,14 @@ describe('<Carousel>', () => {
     );
   });
 
+  it('should render correctly when fade is set', () => {
+    mount(
+      <Carousel defaultActiveIndex={1} fade>
+        {items}
+      </Carousel>,
+    ).assertSingle('.carousel-fade');
+  });
+
   describe('automatic traversal', () => {
     let clock;
 
@@ -544,4 +552,78 @@ describe('<Carousel>', () => {
       expect(carouselItems.at(1).is('.active')).to.be.true;
     });
   });
+
+  describe('callback tests', () => {
+    let clock;
+
+    beforeEach(() => {
+      clock = sinon.useFakeTimers();
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('should call onSlide when slide animation is disabled', () => {
+      const onSlideSpy = sinon.spy();
+      const wrapper = mount(
+        <Carousel slide={false} onSelect={() => {}} onSlide={onSlideSpy}>
+          {items}
+        </Carousel>,
+      );
+
+      wrapper.find('a.carousel-control-next').simulate('click');
+      clock.tick(150);
+      onSlideSpy.should.have.been.calledOnce;
+
+      wrapper.find('a.carousel-control-prev').simulate('click');
+      clock.tick(150);
+      onSlideSpy.should.have.been.calledTwice;
+    });
+
+    it('should call onSlid when slide animation is disabled', () => {
+      const onSlidSpy = sinon.spy();
+      const wrapper = mount(
+        <Carousel slide={false} onSelect={() => {}} onSlid={onSlidSpy}>
+          {items}
+        </Carousel>,
+      );
+
+      wrapper.find('a.carousel-control-next').simulate('click');
+      clock.tick(150);
+      onSlidSpy.should.have.been.calledOnce;
+
+      wrapper.find('a.carousel-control-prev').simulate('click');
+      clock.tick(150);
+      onSlidSpy.should.have.been.calledTwice;
+    });
+
+    it('should transition/call onSelect once if previous arrow double clicked', () => {
+      const onSelectSpy = sinon.spy();
+      const wrapper = mount(
+        <Carousel onSelect={onSelectSpy}>{items}</Carousel>,
+      );
+
+      const prev = wrapper.find('a.carousel-control-prev');
+      prev.simulate('click');
+      prev.simulate('click');
+
+      clock.tick(1000);
+      onSelectSpy.should.have.been.calledOnce;
+    });
+
+    it('should transition/call onSelect once if next arrow double clicked', () => {
+      const onSelectSpy = sinon.spy();
+      const wrapper = mount(
+        <Carousel onSelect={onSelectSpy}>{items}</Carousel>,
+      );
+
+      const next = wrapper.find('a.carousel-control-next');
+      next.simulate('click');
+      next.simulate('click');
+
+      clock.tick(1000);
+      onSelectSpy.should.have.been.calledOnce;
+    });
+  });
 });

test/DropdownItemSpec.js

@@ -118,6 +118,17 @@ describe('<Dropdown.Item>', () => {
       .simulate('click');
   });
 
+  it('should not call onSelect for disabled item that is not a SafeAnchor', () => {
+    const onSelectSpy = sinon.spy();
+    mount(
+      <Dropdown.Item as="div" onSelect={onSelectSpy} disabled>
+        Text
+      </Dropdown.Item>,
+    ).simulate('click');
+
+    onSelectSpy.should.not.have.been.called;
+  });
+
   it('should pass through props', () => {
     let node = mount(
       <Dropdown.Item

test/DropdownSpec.js

@@ -36,6 +36,22 @@ describe('<Dropdown>', () => {
     node.className.should.match(/\bdropup\b/);
   });
 
+  it('renders div with dropright class', () => {
+    mount(
+      <Dropdown title="Dropup" drop="right">
+        {dropdownChildren}
+      </Dropdown>,
+    ).assertSingle('.dropright');
+  });
+
+  it('renders div with dropleft class', () => {
+    mount(
+      <Dropdown title="Dropup" drop="left">
+        {dropdownChildren}
+      </Dropdown>,
+    ).assertSingle('.dropleft');
+  });
+
   it('renders toggle with Dropdown.Toggle', () => {
     const buttonNode = mount(simpleDropdown)
       .find('DropdownToggle')

test/InputGroupSpec.js

@@ -9,6 +9,10 @@ describe('<InputGroup>', () => {
     expect(wrapper.find('div').length).to.equal(1);
   });
 
+  it('Should render size correctly', () => {
+    mount(<InputGroup size="sm" />).assertSingle('.input-group-sm');
+  });
+
   describe('<Checkbox>', () => {
     it('Should forward props to underlying input element', () => {
       const name = 'foobar';

test/NavbarSpec.js

@@ -228,4 +228,16 @@ describe('<Navbar>', () => {
     const wrapper = mount(<Navbar />);
     expect(wrapper.find('nav').length).to.equal(1);
   });
+
+  it('Should render correctly when expand is a string', () => {
+    mount(<Navbar expand="sm" />).assertSingle('.navbar-expand-sm');
+  });
+
+  it('Should render correctly when bg is set', () => {
+    mount(<Navbar bg="light" />).assertSingle('.navbar.bg-light');
+  });
+
+  it('Should render correctly when sticky is set', () => {
+    mount(<Navbar sticky="top" />).assertSingle('.navbar.sticky-top');
+  });
 });

test/PageItemSpec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import { First } from '../src/PageItem';
+import PageItem, { First } from '../src/PageItem';
 
 describe('<PageItem>', () => {
   describe('<First>', () => {
@@ -18,5 +18,13 @@ describe('<PageItem>', () => {
       );
       expect(inner.text()).to.equal(innerHTML);
     });
+
+    it('should render a span if active is true', () => {
+      mount(<PageItem active />).assertSingle('span.page-link');
+    });
+
+    it('should render a span if disabled is true', () => {
+      mount(<PageItem disabled />).assertSingle('span.page-link');
+    });
   });
 });

test/PaginationSpec.js

@@ -7,4 +7,10 @@ describe('<Pagination>', () => {
   it('should have class', () => {
     mount(<Pagination>Item content</Pagination>).assertSingle('.pagination');
   });
+
+  it('should render correctly when size is set', () => {
+    mount(<Pagination size="sm">Item content</Pagination>).assertSingle(
+      '.pagination.pagination-sm',
+    );
+  });
 });

test/RowSpec.js

@@ -12,6 +12,12 @@ describe('Row', () => {
     mount(<Row xs={4} md={8} />).assertSingle('.row-cols-md-8.row-cols-4');
   });
 
+  it('Should allow sizes as objects', () => {
+    mount(<Row xs={{ cols: 4 }} md={{ cols: 8 }} />).assertSingle(
+      '.row-cols-md-8.row-cols-4',
+    );
+  });
+
   it('uses "div" by default', () => {
     mount(
       <Row className="custom-class">
@@ -23,4 +29,8 @@ describe('Row', () => {
   it('should allow custom elements instead of "div"', () => {
     mount(<Row as="section" />).assertSingle('section.row');
   });
+
+  it('Should render no-gutters correctly', () => {
+    mount(<Row noGutters />).assertSingle('.row.no-gutters');
+  });
 });