feat: [closes #479] add total price to item (#480)

* feat: add total price to Item
* test: convert Item tests to rtl
* test: price display
* test: total display

src/components/Item/Item.js

@@ -213,6 +213,19 @@ export const Item = ({
                     )}
                 </p>
               )}
+              {isPurchaseView && (
+                <p>
+                  Total:{' '}
+                  {purchaseQuantity ? (
+                    <AnimatedNumber
+                      {...{
+                        number: purchaseQuantity * adjustedValue,
+                        formatter: moneyString,
+                      }}
+                    />
+                  ) : null}
+                </p>
+              )}
               {isSellView && (
                 <p>
                   <Tooltip
@@ -242,6 +255,19 @@ export const Item = ({
                     )}
                 </p>
               )}
+              {isSellView && (
+                <p>
+                  Total:{' '}
+                  {sellQuantity ? (
+                    <AnimatedNumber
+                      {...{
+                        number: sellQuantity * sellPrice,
+                        formatter: moneyString,
+                      }}
+                    />
+                  ) : null}
+                </p>
+              )}
               {showQuantity && (
                 <p>
                   <strong>In inventory:</strong>{' '}

src/components/Item/Item.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import CardHeader from '@mui/material/CardHeader'
-import { shallow } from 'enzyme'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { testItem } from '../../test-utils'
 
@@ -10,95 +10,123 @@ import { Item } from './Item'
 
 jest.mock('../../data/maps')
 
-let component
-
-beforeEach(() => {
-  component = shallow(
-    <Item
-      {...{
-        completedAchievements: {},
-        historicalValueAdjustments: [],
-        inventory: [],
-        inventoryLimit: INFINITE_STORAGE_LIMIT,
-        item: testItem({ name: '' }),
-        money: 0,
-        playerInventoryQuantities: {},
-        valueAdjustments: {},
-        adjustedValue: 0,
-        previousDayAdjustedValue: 0,
-      }}
-    />
-  )
-})
-
-describe('static UI', () => {
-  beforeEach(() => {
-    component.setProps({ item: testItem({ name: 'an-item' }) })
-  })
-
-  test('renders the name', () => {
-    expect(component.find(CardHeader).props().title).toEqual('an-item')
-  })
-})
-
-describe('conditional UI', () => {
-  describe('class names', () => {
-    beforeEach(() => {
-      component.setProps({ isSelected: true })
+describe('Item', () => {
+  const baseProps = {
+    completedAchievements: {},
+    historicalValueAdjustments: [],
+    inventory: [],
+    inventoryLimit: INFINITE_STORAGE_LIMIT,
+    item: testItem(),
+    money: 0,
+    playerInventoryQuantities: {},
+    valueAdjustments: {},
+    adjustedValue: 0,
+    previousDayAdjustedValue: 0,
+  }
+
+  describe('static UI', () => {
+    test('renders the name', () => {
+      const itemName = 'Cool Item'
+      render(<Item {...{ ...baseProps, item: testItem({ name: itemName }) }} />)
+      expect(screen.getByText(itemName)).toBeInTheDocument()
     })
+  })
 
-    test('supports is-selected', () => {
-      expect(component.hasClass('is-selected')).toBeTruthy()
+  describe('conditional UI', () => {
+    describe('class names', () => {
+      test('supports is-selected', () => {
+        const { container } = render(
+          <Item {...{ ...baseProps, isSelected: true }} />
+        )
+        expect(container.firstChild).toHaveClass('is-selected')
+      })
     })
-  })
 
-  describe('isPurchaseView', () => {
-    beforeEach(() => {
-      component.setProps({
+    describe('isPurchaseView', () => {
+      const props = {
+        ...baseProps,
         isPurchaseView: true,
-        item: testItem({ name: 'an-item' }),
-        adjustedValue: 10,
+        adjustedValue: 10.42,
+      }
+
+      describe('user has enough money', () => {
+        beforeEach(() => {
+          render(<Item {...{ ...props, money: 20 }} />)
+        })
+
+        test('enables purchase buttons', () => {
+          expect(screen.getByRole('button', { name: 'Buy' })).not.toBeDisabled()
+        })
       })
-    })
 
-    describe('user has enough money', () => {
-      beforeEach(() => {
-        component.setProps({
-          money: 20,
+      describe('user does not have enough money', () => {
+        beforeEach(() => {
+          render(<Item {...{ ...props, money: 5 }} />)
+        })
+
+        test('disables purchase buttons', () => {
+          expect(screen.getByRole('button', { name: 'Buy' })).toBeDisabled()
         })
       })
 
-      test('enables purchase buttons', () => {
-        expect(component.find('.purchase').props().disabled).toEqual(false)
+      describe('prices', () => {
+        beforeEach(() => {
+          render(<Item {...{ ...props, money: 100 }} />)
+        })
+
+        test('displays item price', () => {
+          const buyPrice = screen.getByText('Price:')
+          expect(within(buyPrice).getByText('$10.42')).toBeInTheDocument()
+        })
+
+        test('displays total price', async () => {
+          const increment = screen.getByRole('button', { name: 'Increment' })
+          userEvent.click(increment)
+          const total = screen.getByText('Total:')
+          await waitFor(() =>
+            expect(within(total).getByText('$20.84')).toBeInTheDocument()
+          )
+        })
       })
     })
 
-    describe('user does not have enough money', () => {
+    describe('isSellView', () => {
       beforeEach(() => {
-        component.setProps({
-          money: 5,
-        })
+        const id = 'an-item'
+        render(
+          <Item
+            {...{
+              ...baseProps,
+              isSellView: true,
+              adjustedValue: 10.42,
+              item: testItem({ id }),
+              playerInventoryQuantities: { [id]: 4 },
+            }}
+          />
+        )
       })
 
-      test('disables purchase buttons', () => {
-        expect(component.find('.purchase').props().disabled).toEqual(true)
+      test('renders sell buttons', () => {
+        expect(screen.getByRole('button', { name: 'Sell' })).toBeInTheDocument()
       })
-    })
-  })
 
-  describe('isSellView', () => {
-    beforeEach(() => {
-      component.setProps({
-        isSellView: true,
-        item: testItem({ id: 'an-item' }),
-        playerInventoryQuantities: {
-          'an-item': 1,
-        },
-      })
-    })
+      describe('prices', () => {
+        test('displays item price', () => {
+          const sellPrice = screen.getByText('Sell price:')
+          expect(within(sellPrice).getByText('$10.42')).toBeInTheDocument()
+        })
 
-    test('renders sell buttons', () => {
-      expect(component.find('.sell')).toHaveLength(1)
+        test('displays total price', async () => {
+          const increment = screen.getByRole('button', { name: 'Increment' })
+          userEvent.click(increment)
+          userEvent.click(increment)
+          userEvent.click(increment)
+          const total = screen.getByText('Total:')
+          await waitFor(() =>
+            expect(within(total).getByText('$41.68')).toBeInTheDocument()
+          )
+        })
+      })
     })
   })
 })

src/test-utils/index.js

@@ -28,5 +28,8 @@ export const testItem = (item = {}) => ({
   id: '',
   name: '',
   value: 0,
+  description: '',
+  doesPriceFluctuate: false,
+  isReplantable: false,
   ...item,
 })