Rithm add prop types

package.json

@@ -40,7 +40,9 @@
     "husky": "^1.3.1",
     "jest-dom": "^3.0.0",
     "prettier": "1.15.3",
-    "pretty-quick": "^1.11.1",
+    "pretty-quick": "^1.8.0",
+    "prop-types": "^15.7.2",
+    "react-testing-library": "^5.4.2",
     "redux-mock-store": "^1.5.3"
   }
 }

src/components/App.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Header from '../components/Header';
 import SidebarContainer from '../containers/SidebarContainer';
 import PreviewContainer from '../containers/PreviewContainer';
@@ -48,4 +49,12 @@ class App extends Component {
   }
 }
 
+App.defaultProps = {
+  onEscape: () => {}
+};
+
+App.propTypes = {
+  onEscape: PropTypes.func.isRequired
+};
+
 export default App;

src/components/Burst.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { getCalcState, setCalcState } from '../lib/calc-helpers';
 import { getBurstErrors } from '../lib/input-helpers';
@@ -160,4 +161,20 @@ class Burst extends Component {
   }
 }
 
+Burst.defaultProps = {
+  expanded: false,
+  width: 300,
+  height: 300,
+  oversample: false,
+  requestBurst: () => {}
+};
+
+Burst.propTypes = {
+  expanded: PropTypes.bool.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  oversample: PropTypes.bool.isRequired,
+  requestBurst: PropTypes.func.isRequired
+};
+
 export default Burst;

src/components/ErrorToast.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './ErrorToast.css';
 
 const ErrorToast = ({ message }) => {
@@ -10,6 +11,10 @@ const ErrorToast = ({ message }) => {
   );
 };
 
+ErrorToast.propTypes = {
+  message: PropTypes.string.isRequired
+};
+
 ErrorToast.defaultProps = {
   message: ''
 };

src/components/Frame.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './Frame.css';
 
@@ -24,4 +25,16 @@ const Frame = ({ imageSrc, playing, togglePlaying }) => (
   </div>
 );
 
+Frame.defaultProps = {
+  imageSrc: '',
+  playing: false,
+  togglePlaying: () => {}
+};
+
+Frame.propTypes = {
+  imageSrc: PropTypes.string.isRequired,
+  playing: PropTypes.bool.isRequired,
+  togglePlaying: PropTypes.func.isRequired
+};
+
 export default Frame;

src/components/Preview.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Frame from './Frame';
 import GenerateGifFormContainer from '../containers/GenerateGifFormContainer';
@@ -147,10 +148,37 @@ class Preview extends Component {
 }
 
 Preview.defaultProps = {
+  expanded: false,
   previewIdx: 0,
+  playing: false,
   frames: {},
   frameIDs: [],
-  gifData: ''
+  gifProgress: 0,
+  width: 300,
+  height: 300,
+  oversample: false,
+  interval: 100,
+  updatePreviewIdx: () => {},
+  generateGIF: () => {},
+  startAnimation: () => {},
+  stopAnimation: () => {}
+};
+
+Preview.propTypes = {
+  expanded: PropTypes.bool.isRequired,
+  previewIdx: PropTypes.number.isRequired,
+  playing: PropTypes.bool.isRequired,
+  frames: PropTypes.object.isRequired,
+  frameIDs: PropTypes.array.isRequired,
+  gifProgress: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  oversample: PropTypes.bool.isRequired,
+  interval: PropTypes.number.isRequired,
+  updatePreviewIdx: PropTypes.func.isRequired,
+  generateGIF: PropTypes.func.isRequired,
+  startAnimation: PropTypes.func.isRequired,
+  stopAnimation: PropTypes.func.isRequired
 };
 
 export default Preview;

src/components/Preview.test.js

@@ -11,7 +11,13 @@ describe('<Preview/>', () => {
 
   it('renders appropriate content', () => {
     const { getByTestId } = global.renderWithRedux(
-      <Preview expanded previewIdx={0} frames={{ 1: 'test' }} frameIDs={[1]} />
+      <Preview
+        expanded
+        previewIdx={0}
+        frames={{ 1: 'test' }}
+        frameIDs={[1]}
+        gifData={[]}
+      />
     );
     expect(getByTestId('Preview-scrubber').firstChild.type).toBe('range');
     expect(getByTestId('Preview-scrubber-counter').textContent).toBe('1 / 1');

src/components/Settings.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { isPositiveInteger, isProperBound } from '../lib/input-helpers';
 import './Settings.css';
@@ -161,4 +162,22 @@ class Settings extends Component {
   }
 }
 
+Settings.defaultProps = {
+  expanded: false,
+  width: 300,
+  height: 300,
+  oversample: false,
+  interval: 100,
+  updateSetting: () => {}
+};
+
+Settings.propTypes = {
+  expanded: PropTypes.bool.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  oversample: PropTypes.bool.isRequired,
+  interval: PropTypes.number.isRequired,
+  updateSetting: PropTypes.func.isRequired
+};
+
 export default Settings;

src/components/Sidebar.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import SidebarButton from './SidebarButton';
 import SidebarButtonWithBadge from './SidebarButtonWithBadge';
 import panes from '../constants/pane-types';
@@ -113,8 +114,28 @@ class Sidebar extends Component {
   }
 }
 
+Sidebar.propTypes = {
+  numFrames: PropTypes.number.isRequired,
+  expandedPane: PropTypes.string.isRequired,
+  gifData: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  oversample: PropTypes.bool.isRequired,
+  requestFrame: PropTypes.func.isRequired,
+  togglePane: PropTypes.func.isRequired,
+  reset: PropTypes.func.isRequired
+};
+
 Sidebar.defaultProps = {
-  gifData: ''
+  numFrames: 0,
+  expandedPane: 'NONE',
+  gifData: '',
+  width: 100,
+  height: 100,
+  oversample: false,
+  requestFrame: () => {},
+  togglePane: () => {},
+  reset: () => {}
 };
 
 export default Sidebar;

src/components/SidebarButton.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import camera from './icons/camera.svg';
 import preview from './icons/preview.svg';
@@ -47,6 +48,15 @@ const SidebarButton = ({ children, icon, onClick, expanded }) => (
 );
 
 SidebarButton.defaultProps = {
+  icon: '',
+  onClick: () => {},
+  expanded: false
+};
+
+SidebarButton.propTypes = {
+  icon: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  expanded: PropTypes.bool,
   icon: 'icon'
 };
 

src/components/SidebarButton.test.js

@@ -6,7 +6,7 @@ afterEach(cleanup);
 
 describe('<SidebarButton/>', () => {
   it('renders without crashing', () => {
-    global.renderWithRedux(<SidebarButton />);
+    global.renderWithRedux(<SidebarButton icon="icon" />);
   });
 
   it('renders appropriate content', () => {

src/components/SidebarButtonWithBadge.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import SidebarButton from './SidebarButton';
 
@@ -18,4 +19,22 @@ const SidebarButtonWithBadge = ({ showBadge, value, color, ...props }) => (
   </SidebarButton>
 );
 
+SidebarButtonWithBadge.defaultProps = {
+  icon: '',
+  onClick: () => {},
+  expanded: false,
+  color: '',
+  showBadge: false,
+  value: 0
+};
+
+SidebarButtonWithBadge.propTypes = {
+  icon: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  expanded: PropTypes.bool,
+  color: PropTypes.string.isRequired,
+  showBadge: PropTypes.bool.isRequired,
+  value: PropTypes.number.isRequired
+};
+
 export default SidebarButtonWithBadge;

src/components/SidebarButtonWithBadge.test.js

@@ -6,12 +6,12 @@ afterEach(cleanup);
 
 describe('<SidebarButtonWithBadge/>', () => {
   it('renders without crashing', () => {
-    global.renderWithRedux(<SidebarButtonWithBadge />);
+    global.renderWithRedux(<SidebarButtonWithBadge icon="icon" />);
   });
 
   it('renders appropriate content', () => {
     const { getByTestId } = global.renderWithRedux(
-      <SidebarButtonWithBadge showBadge={true} color="color" />
+      <SidebarButtonWithBadge showBadge={true} color="color" icon="icon" />
     );
     // check that badge is present
     expect(getByTestId('SidebarButton-icon-button').lastChild).toBeTruthy();

src/setupTests.js

@@ -6,7 +6,8 @@ import { render } from '@testing-library/react';
 import rootReducer from './reducers';
 
 global.console = {
-  log: jest.fn()
+  log: jest.fn(),
+  error: jest.fn()
 };
 
 global.Desmos = {