Fix prop types

src/Autowhatever.js

@@ -34,10 +34,10 @@ export default class Autowhatever extends Component {
     renderInputComponent: PropTypes.func, // When specified, it is used to render the input element.
     renderItemsContainer: PropTypes.func, // Renders the items container.
     items: PropTypes.array.isRequired, // Array of items or sections to render.
-    renderItem: PropTypes.func.isRequired, // This function renders a single item.
+    renderItem: PropTypes.func, // This function renders a single item.
     renderItemData: PropTypes.object, // Arbitrary data that will be passed to renderItem()
-    renderSectionTitle: PropTypes.func.isRequired, // This function gets a section and renders its title.
-    getSectionItems: PropTypes.func.isRequired, // This function gets a section and returns its items, which will be passed into `renderItem` for rendering.
+    renderSectionTitle: PropTypes.func, // This function gets a section and renders its title.
+    getSectionItems: PropTypes.func, // This function gets a section and returns its items, which will be passed into `renderItem` for rendering.
     containerProps: PropTypes.object, // Arbitrary container props
     inputProps: PropTypes.object, // Arbitrary input props
     itemProps: PropTypes.oneOfType([
@@ -59,7 +59,16 @@ export default class Autowhatever extends Component {
     multiSection: false,
     renderInputComponent: defaultRenderInputComponent,
     renderItemsContainer: defaultRenderItemsContainer,
+    renderItem: () => {
+      throw new Error('`renderItem` must be provided');
+    },
     renderItemData: emptyObject,
+    renderSectionTitle: () => {
+      throw new Error('`renderSectionTitle` must be provided');
+    },
+    getSectionItems: () => {
+      throw new Error('`getSectionItems` must be provided');
+    },
     containerProps: emptyObject,
     inputProps: emptyObject,
     itemProps: emptyObject,

test/autowhatever/default-props/Autowhatever.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import TestUtils from 'react-dom/test-utils';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import AutowhateverApp from './AutowhateverApp';
+
+describe('Autowhatever default props', () => {
+  const render = (props) => {
+    TestUtils.renderIntoDocument(<AutowhateverApp {...props} />);
+  };
+
+  describe('should throw', () => {
+    sinon.stub(console, 'error');
+
+    it('if renderItem is not provided', () => {
+      const renderWithoutRenderItems = () =>
+        render({
+          renderSectionTitle: () => 'Section',
+          getSectionItems: () => ['item'],
+        });
+
+      expect(renderWithoutRenderItems).to.throw('renderItem');
+    });
+
+    it('if renderSectionTitle is not provided', () => {
+      const renderWithoutRenderItems = () =>
+        render({ getSectionItems: () => ['item'], renderItem: () => null });
+
+      expect(renderWithoutRenderItems).to.throw('renderSectionTitle');
+    });
+
+    it('if getSectionItems is not provided', () => {
+      const renderWithoutRenderItems = () =>
+        render({ renderSectionTitle: () => 'Section' });
+
+      expect(renderWithoutRenderItems).to.throw('getSectionItems');
+    });
+  });
+});

test/autowhatever/default-props/AutowhateverApp.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import sinon from 'sinon';
+import Autowhatever from '../../../src/Autowhatever';
+import sections from './sections';
+
+let app;
+
+export const onKeyDown = sinon.spy(
+  (event, { newHighlightedSectionIndex, newHighlightedItemIndex }) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      app.setState({
+        highlightedSectionIndex: newHighlightedSectionIndex,
+        highlightedItemIndex: newHighlightedItemIndex,
+      });
+    }
+  }
+);
+
+export default class AutowhateverApp extends Component {
+  static getDerivedStateFromError() {}
+
+  constructor() {
+    super();
+
+    app = this;
+
+    this.state = {
+      value: '',
+      highlightedSectionIndex: null,
+      highlightedItemIndex: null,
+    };
+  }
+
+  storeAutowhateverReference = (autowhatever) => {
+    if (autowhatever !== null) {
+      this.autowhatever = autowhatever;
+    }
+  };
+
+  onChange = (event) => {
+    this.setState({
+      value: event.target.value,
+    });
+  };
+
+  render() {
+    const { renderSectionTitle, getSectionItems, renderItem } = this.props;
+    const { value, highlightedSectionIndex, highlightedItemIndex } = this.state;
+    const inputProps = {
+      value,
+      onChange: this.onChange,
+      onKeyDown,
+    };
+
+    return (
+      <Autowhatever
+        multiSection={true}
+        items={sections}
+        inputProps={inputProps}
+        highlightedSectionIndex={highlightedSectionIndex}
+        highlightedItemIndex={highlightedItemIndex}
+        ref={this.storeAutowhateverReference}
+        renderSectionTitle={renderSectionTitle}
+        getSectionItems={getSectionItems}
+        renderItem={renderItem}
+      />
+    );
+  }
+}

test/autowhatever/default-props/sections.js

@@ -0,0 +1,29 @@
+export default [
+  {
+    title: 'A',
+    items: [
+      {
+        text: 'Apple',
+      },
+      {
+        text: 'Apricot',
+      },
+    ],
+  },
+  {
+    title: 'B',
+    items: [
+      {
+        text: 'Banana',
+      },
+    ],
+  },
+  {
+    title: 'C',
+    items: [
+      {
+        text: 'Cherry',
+      },
+    ],
+  },
+];