Enable handling clicks in CarouselButton

src/Carousel.js

@@ -1,12 +1,26 @@
 import React from 'react';
+import CarouselButton from './CarouselButton';
 
 class Carousel extends React.PureComponent {
   state = {
     slideIndex: 0,
   };
 
+  handlePrevClick = () => {
+    this.setState(({ slideIndex }) => ({ slideIndex: slideIndex - 1 }));
+  };
+
+  handleNextClick = () => {
+    this.setState(({ slideIndex }) => ({ slideIndex: slideIndex + 1 }));
+  };
+
   render() {
-    return <div />;
+    return (
+      <div>
+        <CarouselButton data-action="prev" onClick={this.handlePrevClick}>Prev</CarouselButton>
+        <CarouselButton data-action="next" onClick={this.handleNextClick}>Next</CarouselButton>
+      </div>
+    );
   }
 }
 

src/tests/Carousel.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Carousel from '../Carousel';
+import CarouselButton from '../CarouselButton';
 
 describe('Carousel', () => {
   let wrapper;
@@ -16,4 +17,34 @@ describe('Carousel', () => {
   it('has an intial `slideIndex` of 0', () => {
     expect(wrapper.state('slideIndex')).toBe(0);
   });
+
+  it('renders a CarouselButton labeled "Prev"', () => {
+    expect(
+      wrapper
+        .find(CarouselButton)
+        .at(0)
+        .prop('children')
+    ).toBe('Prev');
+  });
+
+  it('renders a Carouselbutton labeled "Next"', () => {
+    expect(
+      wrapper
+        .find(CarouselButton)
+        .at(1)
+        .prop('children')
+    ).toBe('Next');
+  });
+
+  it('decrements `slideIndex` when Prev is clicked', () => {
+    wrapper.setState({ slideIndex: 1 });
+    wrapper.find('[data-action="prev"]').simulate('click');
+    expect(wrapper.state('slideIndex')).toBe(0);
+  });
+
+  it('increments `slideIndex` when Next is clicked', () => {
+    wrapper.setState({ slideIndex: 1 });
+    wrapper.find('[data-action="next"]').simulate('click');
+    expect(wrapper.state('slideIndex')).toBe(2);
+  });
 });