bullet test review

Author: rcaferati

configs/testConfig.js

@@ -2,4 +2,4 @@ const Enzyme = require('enzyme');
 const EnzymeAdapter = require('enzyme-adapter-react-16');
 
 // Setup enzyme's react adapter
-Enzyme.configure({ adapter: new EnzymeAdapter() });
+Enzyme.configure({ adapter: new EnzymeAdapter() });

src/core/bullets.js

@@ -6,37 +6,43 @@ export default class Bullets extends React.Component {
   static propTypes = {
     cssModule: PropTypes.object,
     rootElement: PropTypes.string.isRequired,
-    media: PropTypes.array.isRequired,
-    onClick: PropTypes.func.isRequired,
+    media: PropTypes.array,
+    onClick: PropTypes.func,
     selected: PropTypes.number,
   };
 
   static defaultProps = {
     cssModule: null,
     selected: 0,
+    media: [],
+    onClick: () => {},
   };
 
   constructor(props) {
     super(props);
     this.rootElement = props.rootElement;
   }
 
-  bulletClick = (event) => {
+  bulletClick = event => {
     const button = event.currentTarget;
-    button.classList.add(getClassName(`${this.rootElement}__bullets--loading`, this.props.cssModule));
+    button.classList.add(
+      getClassName(
+        `${this.rootElement}__bullets--loading`,
+        this.props.cssModule
+      )
+    );
     const index = parseInt(button.getAttribute('data-index'), 10);
     const direction = !(this.props.selected > index);
     this.props.onClick({ index, direction });
-  }
+  };
 
   renderBullets() {
-    const {
-      cssModule,
-      selected,
-      media = []
-    } = this.props;
+    const { cssModule, selected, media = [] } = this.props;
     return media.map((item, index) => {
-      const className = index === selected ? getClassName(`${this.rootElement}__bullets--active`, cssModule) : null;
+      const className =
+        index === selected
+          ? getClassName(`${this.rootElement}__bullets--active`, cssModule)
+          : null;
       return (
         <button
           key={`bullet-${index}`}
@@ -51,14 +57,9 @@ export default class Bullets extends React.Component {
   }
 
   render() {
-    const {
-      cssModule,
-      rootElement,
-    } = this.props;
+    const { cssModule, rootElement } = this.props;
     return (
-      <nav
-        className={getClassName(`${rootElement}__bullets`, cssModule)}
-      >
+      <nav className={getClassName(`${rootElement}__bullets`, cssModule)}>
         {this.renderBullets()}
       </nav>
     );

src/core/bullets.test.js

@@ -1,26 +1,24 @@
-import React from 'react'
-import {shallow} from 'enzyme'
-import Bullets from './bullets'
+import React from 'react';
+import { shallow } from 'enzyme';
+import Bullets from './bullets';
 
-
-describe("Bullets Battery Tests", () => {
-
-    describe("Composition", () => {
-        it("Should render empty bullets", () => {
-            const wrapper = shallow(<Bullets rootElement=".foo"/>);
-            expect(wrapper.find("button")).toHaveLength(0);
-            expect(wrapper.find("nav").prop("className")).toEqual(".foo__bullets")
-        })
-        it("Should render bullets with for given media", () => {
-            const media = [1,2,3,4,5]
-            const wrapper = shallow(<Bullets onClick={jest.fn} media={media} rootElement=".foo"/>);
-            const buttons = wrapper.find("button")
-            expect(buttons).toHaveLength(5)
-            expect(buttons.at(0).prop("className")).toEqual(".foo__bullets--active")
-            expect(buttons.at(0).prop("data-index")).toEqual(0)
-            expect(buttons.at(0).text()).toEqual("0")  
-        })
-    })
-
-    
-}) 
+describe('Bullets Battery Tests', () => {
+  describe('Composition', () => {
+    it('Should render empty bullets', () => {
+      const wrapper = shallow(<Bullets rootElement=".foo" />);
+      expect(wrapper.find('button')).toHaveLength(0);
+      expect(wrapper.find('nav').prop('className')).toEqual('.foo__bullets');
+    });
+    it('Should render bullets with for given media', () => {
+      const media = [1, 2, 3, 4, 5];
+      const wrapper = shallow(
+        <Bullets onClick={jest.fn} media={media} rootElement=".foo" />
+      );
+      const buttons = wrapper.find('button');
+      expect(buttons).toHaveLength(5);
+      expect(buttons.at(0).prop('className')).toEqual('.foo__bullets--active');
+      expect(buttons.at(0).prop('data-index')).toEqual(0);
+      expect(buttons.at(0).text()).toEqual('0');
+    });
+  });
+});