fix(closes #527): Enable cow renaming (#528)

* chore(tsconfig): set moduleResolution: node

* fix(#527): enable cow renaming

* fix(#526): improve flakey inventory test

* refactor(#527): use usehooks-ts implementation of isMounted

src/components/CowCard/CowCard.js

@@ -16,6 +16,7 @@ import Typography from '@mui/material/Typography/index.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import classNames from 'classnames'
 import { faMars, faVenus } from '@fortawesome/free-solid-svg-icons'
+import { useIsMounted } from 'usehooks-ts'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 
@@ -34,7 +35,6 @@ import {
   OFFER_COW_FOR_TRADE,
   WITHDRAW_COW_FROM_TRADE,
 } from '../../templates.js'
-import { useMountState } from '../../hooks/useMountState/index.js'
 
 import Subheader from './Subheader/index.js'
 
@@ -123,7 +123,7 @@ export const CowCard = (
     isCowOfferedForTradeByPeer && cowIdOfferedForTrade.length > 0
   )
 
-  const { isMounted } = useMountState()
+  const isMounted = useIsMounted()
 
   useEffect(() => {
     ;(async () => {
@@ -187,10 +187,8 @@ export const CowCard = (
                     {...{
                       disabled: id !== cow.originalOwnerId,
                       onChange: e => {
-                        if (debounced) {
-                          setDisplayName(e.target.value)
-                          debounced.handleCowNameInputChange({ ...e }, cow)
-                        }
+                        setDisplayName(e.target.value)
+                        debounced?.handleCowNameInputChange({ ...e }, cow)
                       },
                       placeholder: 'Name',
                       value: displayName,

src/components/CowCard/CowCard.test.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { generateCow } from '../../utils/index.js'
 import { noop } from '../../utils/noop.js'
@@ -342,4 +343,38 @@ describe('CowCard', () => {
       })
     })
   })
+
+  describe('custom naming', () => {
+    // NOTE: Validates the fix for:
+    // https://github.com/jeremyckahn/farmhand/issues/527
+    test('cows orignally owned by the player can be renamed', () => {
+      const renderComponent = () => {
+        render(
+          <CowCard
+            {...{
+              ...baseProps,
+              cowInventory: [{ ...cow }],
+              isSelected: true,
+              // NOTE: This simulates how CowCard is integrated into the rest of
+              // the component tree. It also effectively reproduces the scenario
+              // that caused https://github.com/jeremyckahn/farmhand/issues/527
+              debounced: {
+                handleCowNameInputChange: () => renderComponent(),
+              },
+            }}
+          />
+        )
+      }
+
+      renderComponent()
+
+      const nameInput = screen.getByPlaceholderText('Name')
+
+      const customName = 'Custom'
+      userEvent.clear(nameInput)
+      userEvent.type(nameInput, customName)
+
+      expect(nameInput).toHaveValue(customName)
+    })
+  })
 })

src/components/Inventory/Inventory.test.js

@@ -66,7 +66,7 @@ describe('Inventory Component', () => {
       const searchInput = screen.getByPlaceholderText('Search inventory...')
       fireEvent.change(searchInput, { target: { value: 'Carrot' } })
 
-      vitest.runAllTimers()
+      vitest.advanceTimersByTime(1000)
 
       expect(screen.getByText('Carrot')).toBeInTheDocument()
       expect(screen.queryByText('Pumpkin Seed')).not.toBeInTheDocument()

tsconfig.json

@@ -46,7 +46,7 @@
     // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */