Merge 4fc90e9 into 9cb419e

src/__tests__/components/ItemDisplayInput.test.js

@@ -0,0 +1,40 @@
+import { customRender } from '../../test-utils'
+import { fireEvent } from '@testing-library/react'
+import ItemDisplayInput from '../../components/ItemDisplayInput'
+
+const item = {
+  name: 'Test Item',
+  space: 1,
+  value: 1,
+  id: '0',
+  destination: {
+    name: 'Test Planet 2',
+    value: 50
+  },
+  quantity: 10
+}
+
+describe('<ItemDisplayInput />', () => {
+  it('Should render the <ItemDisplayInput /> component.', () => {
+    const container = customRender({
+      component: ItemDisplayInput,
+      props: { item }
+    })
+    expect(container.asFragment()).toMatchSnapshot()
+  })
+
+  it('Should handle the user buying an item.', () => {
+    const container = customRender({
+      component: ItemDisplayInput,
+      props: { item }
+    })
+
+    const { getByTestId } = container
+
+    const quantityInput = container.container.querySelector('#quantity-input-0')
+    const addButton = getByTestId('add-button-0')
+
+    fireEvent.change(quantityInput, { target: { value: 2 } })
+    fireEvent.click(addButton)
+  })
+})

src/__tests__/components/__snapshots__/ItemDisplayInput.test.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ItemDisplayInput /> Should render the <ItemDisplayInput /> component. 1`] = `
+<DocumentFragment>
+  <div
+    class="StyledBox-sc-13pk1d4-0 hroMnY"
+  >
+    <button
+      class="StyledButton-sc-323bzc-0 jJyttA"
+      data-testid="add-button-0"
+      disabled=""
+      type="button"
+    >
+      <svg
+        aria-label="Add"
+        class="StyledIcon-ofa7kd-0 iOkQrb"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,22 L12,2 M2,12 L22,12"
+          fill="none"
+          stroke="#000"
+          stroke-width="2"
+        />
+      </svg>
+    </button>
+    <div
+      class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+    />
+    <label
+      for="quantity-input-0"
+    >
+      Quantity to Add
+    </label>
+    <div
+      class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+    />
+    <input
+      id="quantity-input-0"
+      max="5"
+      min="0"
+      type="number"
+      value="0"
+    />
+  </div>
+</DocumentFragment>
+`;

src/components/ItemDisplayInput.js

@@ -4,12 +4,14 @@ import { Box, Button } from 'grommet'
 import { Add } from 'grommet-icons'
 import { connect } from 'react-redux'
 import { storeCargo } from '../redux/actions/ship'
+import { removeCash } from '../redux/actions/user'
 import { removeItem } from '../redux/actions/world'
 
 const ItemDisplayInput = ({
   handleStoreCargo,
   item,
-  shipCargoVolumeRemaining
+  shipCargoVolumeRemaining,
+  userCash
 }) => {
   const { id, quantity } = item
 
@@ -19,7 +21,11 @@ const ItemDisplayInput = ({
     <Box gap="small" pad="medium">
       <Button
         data-testid={`add-button-${id}`}
-        disabled={shipCargoVolumeRemaining === 0 || value === 0}
+        disabled={
+          shipCargoVolumeRemaining === 0 ||
+          value === 0 ||
+          userCash < value * item.value
+        }
         hoverIndicator
         icon={<Add />}
         onClick={() => handleStoreCargo(item, value)}
@@ -45,15 +51,19 @@ const ItemDisplayInput = ({
 ItemDisplayInput.propTypes = {
   handleStoreCargo: PropTypes.func.isRequired,
   item: PropTypes.object.isRequired,
-  shipCargoVolumeRemaining: PropTypes.number.isRequired
+  shipCargoVolumeRemaining: PropTypes.number.isRequired,
+  userCash: PropTypes.number.isRequired
 }
 
-const mapStateToProps = ({ ship }) => ({
-  shipCargoVolumeRemaining: ship.cargo.volumeRemaining
+const mapStateToProps = ({ ship, user }) => ({
+  shipCargoVolumeRemaining: ship.cargo.volumeRemaining,
+  userCash: user.cash
 })
 
 const mapDispatchToProps = dispatch => ({
   handleStoreCargo: (item, quantity) => {
+    // * dispatch an action to buy the items with the user's cash
+    dispatch(removeCash(item.value * quantity))
     // * dispatch an action to store the item in ship cargo
     dispatch(storeCargo(item, quantity))
     // * dispatch an action to remove the item from the list of stored items on this planet

src/redux/actions/user.js

@@ -1,8 +1,10 @@
 // * ACTION TYPES
 const ADD_CASH = 'ADD_CASH'
+const REMOVE_CASH = 'REMOVE_CASH'
 
 // * ACTION GENERATORS
 export const addCash = amount => ({ type: ADD_CASH, payload: { amount } })
+export const removeCash = amount => ({ type: REMOVE_CASH, payload: { amount } })
 
 // * PROMISES
 

src/redux/reducers/user.js

@@ -6,6 +6,8 @@ export default (state = userDefaultState, action) => {
   switch (action.type) {
     case 'ADD_CASH':
       return { ...state, cash: state.cash + action.payload.amount }
+    case 'REMOVE_CASH':
+      return { ...state, cash: state.cash - action.payload.amount }
     default:
       return state
   }

src/test-utils.js

@@ -9,13 +9,13 @@ const middlewares = []
 export const mockStore = configureStore(middlewares)
 
 export const customRender = options => {
-  const { component, state } = options
+  const { component, state, props } = options
 
   const Component = component
 
   return render(
     <Provider store={mockStore(state ? state : defaultState)}>
-      <Component />
+      <Component {...props} />
     </Provider>
   )
 }