#24 ControlsPanel tests

src/components/controls-panel/controls-panel.js

@@ -1,9 +1,12 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
 import './controls-panel.css'
 
-const ControlsPanel = ({ onAdding, weightUnits }) => {
-  const [totalWeight, setTotalWeight] = useState()
+export const ControlsPanel = ({ onAdding, weightUnits }) => {
+  // didn't destructure useState for testing purposes
+  const [totalWeight, setTotalWeight] = React.useState()
+
   useEffect(() => {
     const newWeight = (weightUnits.bulksWeight +
       Math.floor(0.1 * weightUnits.lightCount) +
@@ -14,6 +17,7 @@ const ControlsPanel = ({ onAdding, weightUnits }) => {
   return (
     <div className="controls-panel d-flex justify-content-between align-items-center py-2">
       <button className="btn btn-success"
+        data-test="add-button"
         onClick={onAdding}
       >
         Add item
@@ -30,3 +34,7 @@ const mapStateToProps = ({ main: { equipment } }) => {
 }
 
 export default connect(mapStateToProps)(ControlsPanel)
+
+ControlsPanel.propTypes = {
+  onAdding: PropTypes.func.isRequired
+}

src/components/controls-panel/controls-panel.test.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { mount } from 'enzyme'
+
+import { ControlsPanel } from './controls-panel'
+
+const mockSetTotalWeight = jest.fn()
+React.useState = jest.fn(() => [0, mockSetTotalWeight])
+
+const setup = (props) => {
+  const defaultProps = { onAdding: jest.fn(), weightUnits: {} }
+  return mount(<ControlsPanel {...defaultProps} {...props} />)
+}
+
+describe('rendering testing', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = setup()
+    mockSetTotalWeight.mockClear()
+  })
+
+  test('renders without error', () => {
+    expect(wrapper).toBeTruthy()
+  })
+
+  test('calls onAdding on add-button click', () => {
+    const addButton = wrapper.find('button[data-test="add-button"]')
+    wrapper.prop('onAdding').mockClear()
+    addButton.simulate('click')
+    expect(wrapper.prop('onAdding')).toHaveBeenCalled()
+  })
+
+  test('sets totalWeight value on weightUnits change', () => {
+    wrapper.setProps({ weightUnits: { bulksWeight: 7 } })
+    expect(mockSetTotalWeight).toHaveBeenCalled()
+  })
+
+  test('does not recalculate totalWeight on update with same weightUnits', () => {
+    wrapper.setProps({ otherProp: false })
+    expect(mockSetTotalWeight).not.toHaveBeenCalled()
+  })
+})