From 3faa52ded549e8d9bbf6f5f82a17e157277a1427 Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Wed, 18 Jun 2025 13:40:07 -0400
Subject: [PATCH 1/3] [CharInv] Migrate from deprecated Grid

---
 .../CharInv/CharacterDetail/index.tsx         |  30 +--
 .../CharInv/CharacterEntry.tsx                | 194 ++++++++++++++----
 .../CharInv/CharacterList/index.tsx           | 103 +++++-----
 .../CharInv/CharacterSetHeader.tsx            |  28 ++-
 .../CharacterInventory/CharInv/index.tsx      | 142 ++-----------
 .../CharInv/tests/index.test.tsx              |  33 +--
 6 files changed, 272 insertions(+), 258 deletions(-)

diff --git a/src/goals/CharacterInventory/CharInv/CharacterDetail/index.tsx b/src/goals/CharacterInventory/CharInv/CharacterDetail/index.tsx
index 8580c3b240..c66b3541bc 100644
--- a/src/goals/CharacterInventory/CharInv/CharacterDetail/index.tsx
+++ b/src/goals/CharacterInventory/CharInv/CharacterDetail/index.tsx
@@ -1,5 +1,5 @@
 import { Close } from "@mui/icons-material";
-import { Grid, IconButton, Typography } from "@mui/material";
+import { Grid2, IconButton, Typography } from "@mui/material";
 import { ReactElement } from "react";
 
 import CharacterInfo from "goals/CharacterInventory/CharInv/CharacterDetail/CharacterInfo";
@@ -18,7 +18,7 @@ export default function CharacterDetail(
   props: CharacterDetailProps
 ): ReactElement {
   return (
-    <Grid
+    <Grid2
       container
       spacing={2}
       direction="row"
@@ -26,31 +26,31 @@ export default function CharacterDetail(
       alignItems="center"
       style={{ padding: theme.spacing(1) }}
     >
-      <Grid item xs={3}>
+      <Grid2 size={3}>
         <Typography variant="h1" align="center">
           {props.character}
           {""}
           {/* There is a zero-width joiner here in case of non-printing characters. */}
         </Typography>
-      </Grid>
-      <Grid item xs={8}>
+      </Grid2>
+      <Grid2 size={8}>
         <CharacterStatusControl character={props.character} />
-      </Grid>
-      <Grid item xs={1}>
+      </Grid2>
+      <Grid2 size={1}>
         <IconButton onClick={() => props.close()} size="large">
           {" "}
           <Close />
         </IconButton>
-      </Grid>
-      <Grid item xs={12}>
+      </Grid2>
+      <Grid2 size={12}>
         <CharacterInfo character={props.character} />
-      </Grid>
-      <Grid item xs={12}>
+      </Grid2>
+      <Grid2 size={12}>
         <CharacterWords character={props.character} />
-      </Grid>
-      <Grid item xs={12}>
+      </Grid2>
+      <Grid2 size={12}>
         <FindAndReplace initialFindValue={props.character} />
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }
diff --git a/src/goals/CharacterInventory/CharInv/CharacterEntry.tsx b/src/goals/CharacterInventory/CharInv/CharacterEntry.tsx
index d342dd16a2..3e828ff944 100644
--- a/src/goals/CharacterInventory/CharInv/CharacterEntry.tsx
+++ b/src/goals/CharacterInventory/CharInv/CharacterEntry.tsx
@@ -1,17 +1,39 @@
 import { KeyboardArrowDown } from "@mui/icons-material";
-import { Button, Collapse, Grid } from "@mui/material";
+import {
+  Button,
+  Collapse,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Grid2,
+} from "@mui/material";
 import { ReactElement, ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { LoadingButton } from "components/Buttons";
 import {
+  exit,
   setRejectedCharacters,
   setValidCharacters,
+  uploadInventory,
 } from "goals/CharacterInventory/Redux/CharacterInventoryActions";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
 import theme from "types/theme";
 import { TextFieldWithFont } from "utilities/fontComponents";
 
+export enum CharInvCancelSaveIds {
+  ButtonCancel = "char-inv-cancel-button",
+  ButtonSave = "char-inv-save-button",
+  DialogCancel = "char-inv-cancel-dialog",
+  DialogCancelButtonNo = "char-inv-cancel-dialog-no-button",
+  DialogCancelButtonYes = "char-inv-cancel-dialog-yes-button",
+  DialogCancelText = "char-inv-cancel-dialog-text",
+  DialogCancelTitle = "char-inv-cancel-dialog-title",
+}
+
 /**
  * Allows for viewing and entering accepted and rejected characters in a
  * character set
@@ -23,56 +45,89 @@ export default function CharacterEntry(): ReactElement {
     (state: StoreState) => state.characterInventoryState
   );
 
-  const [checked, setChecked] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+  const [saveInProgress, setSaveInProgress] = useState(false);
 
   const { t } = useTranslation();
 
+  const save = async (): Promise<void> => {
+    setSaveInProgress(true);
+    await dispatch(uploadInventory());
+  };
+
   return (
-    <Grid item xs={12}>
-      <Grid
-        container
-        style={{
-          background: "whitesmoke",
-          borderTop: "1px solid #ccc",
-          padding: theme.spacing(1),
-        }}
-        spacing={2}
-      >
-        <Button
-          id="character-entry-submit"
-          onClick={() => setChecked(!checked)}
-        >
-          {t("charInventory.characterSet.advanced")}{" "}
-          <KeyboardArrowDown
-            style={{
-              transform: checked ? "rotate(180deg)" : "rotate(0deg)",
-              transition: "all 200ms",
+    <div
+      style={{
+        background: "whitesmoke",
+        border: "1px solid #ccc",
+        padding: theme.spacing(1),
+      }}
+    >
+      <Grid2 container alignContent="center" justifyContent="space-between">
+        <Grid2 container spacing={2}>
+          {/* Save button */}
+          <LoadingButton
+            buttonProps={{
+              id: CharInvCancelSaveIds.ButtonSave,
+              onClick: () => save(),
             }}
+            loading={saveInProgress}
+          >
+            {t("buttons.save")}
+          </LoadingButton>
+
+          {/* Cancel button */}
+          <Button
+            color="secondary"
+            id={CharInvCancelSaveIds.ButtonCancel}
+            onClick={() => setCancelDialogOpen(true)}
+            variant="contained"
+          >
+            {t("buttons.cancel")}
+          </Button>
+
+          {/* Cancel yes/no dialog */}
+          <CancelDialog
+            onClose={() => setCancelDialogOpen(false)}
+            open={cancelDialogOpen}
           />
-        </Button>
-        <Collapse in={checked} style={{ width: "100%" }}>
-          {/* Input for accepted characters */}
-          <Grid item xs={12}>
-            <CharactersInput
-              characters={validCharacters}
-              id="valid-characters-input"
-              label={t("charInventory.characterSet.acceptedCharacters")}
-              setCharacters={(chars) => dispatch(setValidCharacters(chars))}
-            />
-          </Grid>
-
-          {/* Input for rejected characters */}
-          <Grid item xs={12}>
-            <CharactersInput
-              characters={rejectedCharacters}
-              id="rejected-characters-input"
-              label={t("charInventory.characterSet.rejectedCharacters")}
-              setCharacters={(chars) => dispatch(setRejectedCharacters(chars))}
+        </Grid2>
+
+        {/* Advanced toggle-button */}
+        <Button
+          endIcon={
+            <KeyboardArrowDown
+              style={{
+                transform: advancedOpen ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "all 200ms",
+              }}
             />
-          </Grid>
-        </Collapse>
-      </Grid>
-    </Grid>
+          }
+          onClick={() => setAdvancedOpen((prev) => !prev)}
+        >
+          {t("charInventory.characterSet.advanced")}
+        </Button>
+      </Grid2>
+
+      <Collapse in={advancedOpen}>
+        {/* Input for accepted characters */}
+        <CharactersInput
+          characters={validCharacters}
+          id="valid-characters-input"
+          label={t("charInventory.characterSet.acceptedCharacters")}
+          setCharacters={(chars) => dispatch(setValidCharacters(chars))}
+        />
+
+        {/* Input for rejected characters */}
+        <CharactersInput
+          characters={rejectedCharacters}
+          id="rejected-characters-input"
+          label={t("charInventory.characterSet.rejectedCharacters")}
+          setCharacters={(chars) => dispatch(setRejectedCharacters(chars))}
+        />
+      </Collapse>
+    </div>
   );
 }
 
@@ -95,10 +150,59 @@ function CharactersInput(props: CharactersInputProps): ReactElement {
       onChange={(e) =>
         props.setCharacters(e.target.value.replace(/\s/g, "").split(""))
       }
-      style={{ maxWidth: 512, marginTop: theme.spacing(1) }}
+      style={{ marginTop: theme.spacing(2) }}
       value={props.characters.join("")}
       variant="outlined"
       vernacular
     />
   );
 }
+
+interface CancelDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/** "Are you sure?" dialog for the cancel button */
+function CancelDialog(props: CancelDialogProps): ReactElement {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog
+      aria-describedby="alert-dialog-description"
+      aria-labelledby="alert-dialog-title"
+      id={CharInvCancelSaveIds.DialogCancel}
+      onClose={() => props.onClose()}
+      open={props.open}
+    >
+      <DialogTitle id={CharInvCancelSaveIds.DialogCancelTitle}>
+        {t("charInventory.dialog.title")}
+      </DialogTitle>
+
+      <DialogContent>
+        <DialogContentText id={CharInvCancelSaveIds.DialogCancelText}>
+          {t("charInventory.dialog.content")}
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions>
+        <Button
+          autoFocus
+          color="secondary"
+          id={CharInvCancelSaveIds.DialogCancelButtonYes}
+          onClick={() => exit()}
+          variant="contained"
+        >
+          {t("charInventory.dialog.yes")}
+        </Button>
+
+        <Button
+          id={CharInvCancelSaveIds.DialogCancelButtonNo}
+          onClick={() => props.onClose()}
+        >
+          {t("charInventory.dialog.no")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/goals/CharacterInventory/CharInv/CharacterList/index.tsx b/src/goals/CharacterInventory/CharInv/CharacterList/index.tsx
index 5608e58b5c..921c1989f0 100644
--- a/src/goals/CharacterInventory/CharInv/CharacterList/index.tsx
+++ b/src/goals/CharacterInventory/CharInv/CharacterList/index.tsx
@@ -1,5 +1,11 @@
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
-import { FormControl, Grid, InputLabel, MenuItem, Select } from "@mui/material";
+import {
+  FormControl,
+  Grid2,
+  InputLabel,
+  MenuItem,
+  Select,
+} from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -42,53 +48,54 @@ export default function CharacterList(): ReactElement {
 
   return (
     <>
-      <Grid item xs={12}>
-        <FormControl variant="standard">
-          <InputLabel htmlFor="sort-order">
-            {t("charInventory.sortBy")}
-          </InputLabel>
-          <Select
-            variant="standard"
-            value={sortOrder}
-            onChange={(e) => setSortOrder(e.target.value as SortOrder)}
-            inputProps={{ id: "sort-order" }}
-          >
-            <MenuItem value={SortOrder.CharacterAscending}>
-              {t("charInventory.characters")}
-              <ArrowUpward fontSize="small" />
-            </MenuItem>
-            <MenuItem value={SortOrder.CharacterDescending}>
-              {t("charInventory.characters")}
-              <ArrowDownward fontSize="small" />
-            </MenuItem>
-            <MenuItem value={SortOrder.OccurrencesAscending}>
-              {t("charInventory.occurrences")}
-              <ArrowUpward fontSize="small" />
-            </MenuItem>
-            <MenuItem value={SortOrder.OccurrencesDescending}>
-              {t("charInventory.occurrences")}
-              <ArrowDownward fontSize="small" />
-            </MenuItem>
-            <MenuItem value={SortOrder.Status}>
-              {t("charInventory.status")}
-            </MenuItem>
-          </Select>
-        </FormControl>
-      </Grid>
-      {
-        /* The grid of character tiles */
-        orderedChars.map((character) => (
-          <CharacterCard
-            key={character.character}
-            char={character.character}
-            count={character.occurrences}
-            status={character.status}
-            onClick={() => selectCharacter(character.character)}
-            fontHeight={fontHeight}
-            cardWidth={cardWidth}
-          />
-        ))
-      }
+      <FormControl variant="standard">
+        <InputLabel htmlFor="sort-order">
+          {t("charInventory.sortBy")}
+        </InputLabel>
+        <Select
+          variant="standard"
+          value={sortOrder}
+          onChange={(e) => setSortOrder(e.target.value as SortOrder)}
+          inputProps={{ id: "sort-order" }}
+        >
+          <MenuItem value={SortOrder.CharacterAscending}>
+            {t("charInventory.characters")}
+            <ArrowUpward fontSize="small" />
+          </MenuItem>
+          <MenuItem value={SortOrder.CharacterDescending}>
+            {t("charInventory.characters")}
+            <ArrowDownward fontSize="small" />
+          </MenuItem>
+          <MenuItem value={SortOrder.OccurrencesAscending}>
+            {t("charInventory.occurrences")}
+            <ArrowUpward fontSize="small" />
+          </MenuItem>
+          <MenuItem value={SortOrder.OccurrencesDescending}>
+            {t("charInventory.occurrences")}
+            <ArrowDownward fontSize="small" />
+          </MenuItem>
+          <MenuItem value={SortOrder.Status}>
+            {t("charInventory.status")}
+          </MenuItem>
+        </Select>
+      </FormControl>
+
+      <Grid2 container>
+        {
+          /* The grid of character tiles */
+          orderedChars.map((character) => (
+            <CharacterCard
+              key={character.character}
+              char={character.character}
+              count={character.occurrences}
+              status={character.status}
+              onClick={() => selectCharacter(character.character)}
+              fontHeight={fontHeight}
+              cardWidth={cardWidth}
+            />
+          ))
+        }
+      </Grid2>
     </>
   );
 }
diff --git a/src/goals/CharacterInventory/CharInv/CharacterSetHeader.tsx b/src/goals/CharacterInventory/CharInv/CharacterSetHeader.tsx
index 3820c844fe..db9bdbdd35 100644
--- a/src/goals/CharacterInventory/CharInv/CharacterSetHeader.tsx
+++ b/src/goals/CharacterInventory/CharInv/CharacterSetHeader.tsx
@@ -1,5 +1,5 @@
 import { Help } from "@mui/icons-material";
-import { Grid, Tooltip, Typography } from "@mui/material";
+import { Tooltip, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -9,20 +9,18 @@ export default function CharacterSetHeader(): ReactElement {
   const { t } = useTranslation();
 
   return (
-    <Grid item xs={12}>
-      <Typography
-        component="h1"
-        variant="h4"
-        style={{ marginTop: theme.spacing(1) }}
+    <Typography
+      component="h1"
+      variant="h4"
+      style={{ marginTop: theme.spacing(1) }}
+    >
+      {t("charInventory.characterSet.title")}{" "}
+      <Tooltip
+        title={t("charInventory.characterSet.help")}
+        placement={document.body.dir === "rtl" ? "left" : "right"}
       >
-        {t("charInventory.characterSet.title")}{" "}
-        <Tooltip
-          title={t("charInventory.characterSet.help")}
-          placement={document.body.dir === "rtl" ? "left" : "right"}
-        >
-          <Help />
-        </Tooltip>
-      </Typography>
-    </Grid>
+        <Help />
+      </Tooltip>
+    </Typography>
   );
 }
diff --git a/src/goals/CharacterInventory/CharInv/index.tsx b/src/goals/CharacterInventory/CharInv/index.tsx
index f7d8a06a99..ddb85da517 100644
--- a/src/goals/CharacterInventory/CharInv/index.tsx
+++ b/src/goals/CharacterInventory/CharInv/index.tsx
@@ -1,39 +1,17 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Grid,
-} from "@mui/material";
-import { ReactElement, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Grid2, Stack } from "@mui/material";
+import { ReactElement, useEffect } from "react";
 
-import { LoadingButton } from "components/Buttons";
 import CharacterDetail from "goals/CharacterInventory/CharInv/CharacterDetail";
 import CharacterEntry from "goals/CharacterInventory/CharInv/CharacterEntry";
 import CharacterList from "goals/CharacterInventory/CharInv/CharacterList";
 import CharacterSetHeader from "goals/CharacterInventory/CharInv/CharacterSetHeader";
 import {
-  exit,
   loadCharInvData,
   resetCharInv,
   setSelectedCharacter,
-  uploadInventory,
 } from "goals/CharacterInventory/Redux/CharacterInventoryActions";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
-import theme from "types/theme";
-
-const idPrefix = "character-inventory";
-export const buttonIdCancel = `${idPrefix}-cancel-button`;
-export const buttonIdSave = `${idPrefix}-save-button`;
-export const dialogButtonIdNo = `${idPrefix}-cancel-dialog-no-button`;
-export const dialogButtonIdYes = `${idPrefix}-cancel-dialog-yes-button`;
-export const dialogIdCancel = `${idPrefix}-cancel-dialog`;
-const dialogTextIdCancel = `${idPrefix}-cancel-dialog-text`;
-const dialogTitleIdCancel = `${idPrefix}-cancel-dialog-title`;
 
 /**
  * Allows users to define a character inventory for a project
@@ -45,11 +23,6 @@ export default function CharacterInventory(): ReactElement {
     (state: StoreState) => state.characterInventoryState.selectedCharacter
   );
 
-  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
-  const [saveInProgress, setSaveInProgress] = useState(false);
-
-  const { t } = useTranslation();
-
   useEffect(() => {
     dispatch(loadCharInvData());
 
@@ -57,99 +30,24 @@ export default function CharacterInventory(): ReactElement {
     () => dispatch(resetCharInv());
   }, [dispatch]);
 
-  const save = async (): Promise<void> => {
-    setSaveInProgress(true);
-    await dispatch(uploadInventory());
-  };
-
   return (
-    <>
-      <Grid container justifyContent="center" spacing={2}>
-        <Grid item xl={9} lg={8} md={7} xs={12}>
-          <Grid
-            container
-            spacing={2}
-            direction="row"
-            justifyContent="flex-start"
-            alignItems="center"
-          >
-            <CharacterSetHeader />
-            <CharacterEntry />
-            <CharacterList />
-          </Grid>
-        </Grid>
-
-        <Grid item xl={3} lg={4} md={5} xs={12}>
-          {!!selectedCharacter && (
-            <CharacterDetail
-              character={selectedCharacter}
-              close={() => dispatch(setSelectedCharacter(""))}
-            />
-          )}
-        </Grid>
-
-        <Grid item xs={12} style={{ borderTop: "1px solid #ccc" }}>
-          {/* Submission buttons */}
-          <Grid container justifyContent="center">
-            <LoadingButton
-              loading={saveInProgress}
-              buttonProps={{
-                id: buttonIdSave,
-                onClick: () => save(),
-                style: { margin: theme.spacing(1) },
-              }}
-            >
-              {t("buttons.save")}
-            </LoadingButton>
-            <Button
-              color="secondary"
-              id={buttonIdCancel}
-              variant="contained"
-              onClick={() => setCancelDialogOpen(true)}
-              style={{ margin: theme.spacing(1) }}
-            >
-              {" "}
-              {t("buttons.cancel")}
-            </Button>
-          </Grid>
-        </Grid>
-      </Grid>
-
-      {/* "Are you sure?" dialog for the cancel button */}
-      <Dialog
-        id={dialogIdCancel}
-        open={cancelDialogOpen}
-        onClose={() => setCancelDialogOpen(false)}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-      >
-        <DialogTitle id={dialogTitleIdCancel}>
-          {t("charInventory.dialog.title")}
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText id={dialogTextIdCancel}>
-            {t("charInventory.dialog.content")}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            id={dialogButtonIdYes}
-            onClick={() => exit()}
-            variant="contained"
-            color="secondary"
-            autoFocus
-          >
-            {t("charInventory.dialog.yes")}
-          </Button>
-          <Button
-            id={dialogButtonIdNo}
-            onClick={() => setCancelDialogOpen(false)}
-            color="primary"
-          >
-            {t("charInventory.dialog.no")}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
+    <Grid2 container spacing={2} sx={{ margin: 2 }}>
+      <Grid2 size={selectedCharacter ? { xl: 9, lg: 8, md: 7, xs: 12 } : 12}>
+        <Stack alignItems="flex-start" spacing={2}>
+          <CharacterSetHeader />
+          <CharacterEntry />
+          <CharacterList />
+        </Stack>
+      </Grid2>
+
+      {!!selectedCharacter && (
+        <Grid2 size="grow">
+          <CharacterDetail
+            character={selectedCharacter}
+            close={() => dispatch(setSelectedCharacter(""))}
+          />
+        </Grid2>
+      )}
+    </Grid2>
   );
 }
diff --git a/src/goals/CharacterInventory/CharInv/tests/index.test.tsx b/src/goals/CharacterInventory/CharInv/tests/index.test.tsx
index e59662d4b2..620726a307 100644
--- a/src/goals/CharacterInventory/CharInv/tests/index.test.tsx
+++ b/src/goals/CharacterInventory/CharInv/tests/index.test.tsx
@@ -2,13 +2,8 @@ import { Provider } from "react-redux";
 import { ReactTestRenderer, act, create } from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
 
-import CharInv, {
-  buttonIdCancel,
-  buttonIdSave,
-  dialogButtonIdNo,
-  dialogButtonIdYes,
-  dialogIdCancel,
-} from "goals/CharacterInventory/CharInv";
+import CharInv from "goals/CharacterInventory/CharInv";
+import { CharInvCancelSaveIds } from "goals/CharacterInventory/CharInv/CharacterEntry";
 import { defaultState as characterInventoryState } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes";
 
 // Replace Dialog with something that doesn't create portals,
@@ -63,30 +58,42 @@ describe("CharInv", () => {
 
   it("saves inventory on save", async () => {
     expect(mockUploadInventory).toHaveBeenCalledTimes(0);
-    const saveButton = charMaster.root.findByProps({ id: buttonIdSave });
+    const saveButton = charMaster.root.findByProps({
+      id: CharInvCancelSaveIds.ButtonSave,
+    });
     await act(async () => saveButton.props.onClick());
     expect(mockUploadInventory).toHaveBeenCalledTimes(1);
   });
 
   it("opens a dialogue on cancel, closes on no", async () => {
-    const cancelDialog = charMaster.root.findByProps({ id: dialogIdCancel });
+    const cancelDialog = charMaster.root.findByProps({
+      id: CharInvCancelSaveIds.DialogCancel,
+    });
     expect(cancelDialog.props.open).toBeFalsy();
 
-    const cancelButton = charMaster.root.findByProps({ id: buttonIdCancel });
+    const cancelButton = charMaster.root.findByProps({
+      id: CharInvCancelSaveIds.ButtonCancel,
+    });
     await act(async () => cancelButton.props.onClick());
     expect(cancelDialog.props.open).toBeTruthy();
 
-    const noButton = charMaster.root.findByProps({ id: dialogButtonIdNo });
+    const noButton = charMaster.root.findByProps({
+      id: CharInvCancelSaveIds.DialogCancelButtonNo,
+    });
     await act(async () => noButton.props.onClick());
     expect(cancelDialog.props.open).toBeFalsy();
   });
 
   it("exits on cancel-yes", async () => {
-    const cancelButton = charMaster.root.findByProps({ id: buttonIdCancel });
+    const cancelButton = charMaster.root.findByProps({
+      id: CharInvCancelSaveIds.ButtonCancel,
+    });
     await act(async () => cancelButton.props.onClick());
     expect(mockExit).toHaveBeenCalledTimes(0);
 
-    const yesButton = charMaster.root.findByProps({ id: dialogButtonIdYes });
+    const yesButton = charMaster.root.findByProps({
+      id: CharInvCancelSaveIds.DialogCancelButtonYes,
+    });
     await act(async () => yesButton.props.onClick());
     expect(mockExit).toHaveBeenCalledTimes(1);
   });

From c5fe9efba62c6a033db2f532f5131d4290719d2b Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Wed, 18 Jun 2025 16:09:12 -0400
Subject: [PATCH 2/3] [CharInv] Move testing to @testing-library

---
 .../CharInv/CharacterEntry.tsx                |  21 ++-
 .../CharInv/tests/index.test.tsx              |  73 +++-----
 .../CharacterInventory/CharInvCompleted.tsx   |  57 +++---
 .../tests/CharInvCompleted.test.tsx           | 172 ++++++++----------
 4 files changed, 145 insertions(+), 178 deletions(-)

diff --git a/src/goals/CharacterInventory/CharInv/CharacterEntry.tsx b/src/goals/CharacterInventory/CharInv/CharacterEntry.tsx
index 3e828ff944..1854b75dfc 100644
--- a/src/goals/CharacterInventory/CharInv/CharacterEntry.tsx
+++ b/src/goals/CharacterInventory/CharInv/CharacterEntry.tsx
@@ -30,8 +30,6 @@ export enum CharInvCancelSaveIds {
   DialogCancel = "char-inv-cancel-dialog",
   DialogCancelButtonNo = "char-inv-cancel-dialog-no-button",
   DialogCancelButtonYes = "char-inv-cancel-dialog-yes-button",
-  DialogCancelText = "char-inv-cancel-dialog-text",
-  DialogCancelTitle = "char-inv-cancel-dialog-title",
 }
 
 /**
@@ -69,6 +67,7 @@ export default function CharacterEntry(): ReactElement {
           {/* Save button */}
           <LoadingButton
             buttonProps={{
+              "data-testid": CharInvCancelSaveIds.ButtonSave,
               id: CharInvCancelSaveIds.ButtonSave,
               onClick: () => save(),
             }}
@@ -80,6 +79,7 @@ export default function CharacterEntry(): ReactElement {
           {/* Cancel button */}
           <Button
             color="secondary"
+            data-testid={CharInvCancelSaveIds.ButtonCancel}
             id={CharInvCancelSaveIds.ButtonCancel}
             onClick={() => setCancelDialogOpen(true)}
             variant="contained"
@@ -144,7 +144,11 @@ function CharactersInput(props: CharactersInputProps): ReactElement {
       autoComplete="off"
       fullWidth
       id={props.id}
-      inputProps={{ spellCheck: false, style: { letterSpacing: 5 } }}
+      inputProps={{
+        "data-testid": props.id,
+        spellCheck: false,
+        style: { letterSpacing: 5 },
+      }}
       label={props.label}
       name="characters"
       onChange={(e) =>
@@ -169,18 +173,15 @@ function CancelDialog(props: CancelDialogProps): ReactElement {
 
   return (
     <Dialog
-      aria-describedby="alert-dialog-description"
-      aria-labelledby="alert-dialog-title"
+      data-testid={CharInvCancelSaveIds.DialogCancel}
       id={CharInvCancelSaveIds.DialogCancel}
       onClose={() => props.onClose()}
       open={props.open}
     >
-      <DialogTitle id={CharInvCancelSaveIds.DialogCancelTitle}>
-        {t("charInventory.dialog.title")}
-      </DialogTitle>
+      <DialogTitle>{t("charInventory.dialog.title")}</DialogTitle>
 
       <DialogContent>
-        <DialogContentText id={CharInvCancelSaveIds.DialogCancelText}>
+        <DialogContentText>
           {t("charInventory.dialog.content")}
         </DialogContentText>
       </DialogContent>
@@ -189,6 +190,7 @@ function CancelDialog(props: CancelDialogProps): ReactElement {
         <Button
           autoFocus
           color="secondary"
+          data-testid={CharInvCancelSaveIds.DialogCancelButtonYes}
           id={CharInvCancelSaveIds.DialogCancelButtonYes}
           onClick={() => exit()}
           variant="contained"
@@ -197,6 +199,7 @@ function CancelDialog(props: CancelDialogProps): ReactElement {
         </Button>
 
         <Button
+          data-testid={CharInvCancelSaveIds.DialogCancelButtonNo}
           id={CharInvCancelSaveIds.DialogCancelButtonNo}
           onClick={() => props.onClose()}
         >
diff --git a/src/goals/CharacterInventory/CharInv/tests/index.test.tsx b/src/goals/CharacterInventory/CharInv/tests/index.test.tsx
index 620726a307..64205e6301 100644
--- a/src/goals/CharacterInventory/CharInv/tests/index.test.tsx
+++ b/src/goals/CharacterInventory/CharInv/tests/index.test.tsx
@@ -1,23 +1,20 @@
+import {
+  act,
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { Provider } from "react-redux";
-import { ReactTestRenderer, act, create } from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
 
 import CharInv from "goals/CharacterInventory/CharInv";
 import { CharInvCancelSaveIds } from "goals/CharacterInventory/CharInv/CharacterEntry";
-import { defaultState as characterInventoryState } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes";
+import { defaultState } from "rootRedux/types";
 
-// Replace Dialog with something that doesn't create portals,
-// because react-test-renderer does not support portals.
-jest.mock("@mui/material/Dialog", () =>
-  jest.requireActual("@mui/material/Container")
-);
-
-jest.mock("goals/CharacterInventory/CharInv/CharacterDetail", () => "div");
 jest.mock("goals/CharacterInventory/Redux/CharacterInventoryActions", () => ({
   exit: () => mockExit(),
   loadCharInvData: () => mockLoadCharInvData(),
-  reset: () => jest.fn(),
-  setSelectedCharacter: () => mockSetSelectedCharacter(),
   uploadInventory: () => mockUploadInventory(),
 }));
 jest.mock("rootRedux/hooks", () => {
@@ -29,17 +26,12 @@ jest.mock("rootRedux/hooks", () => {
 
 const mockExit = jest.fn();
 const mockLoadCharInvData = jest.fn();
-const mockSetSelectedCharacter = jest.fn();
 const mockUploadInventory = jest.fn();
 
-let charMaster: ReactTestRenderer;
-
-const mockStore = configureMockStore()({ characterInventoryState });
-
 async function renderCharInvCreation(): Promise<void> {
   await act(async () => {
-    charMaster = create(
-      <Provider store={mockStore}>
+    render(
+      <Provider store={configureMockStore()(defaultState)}>
         <CharInv />
       </Provider>
     );
@@ -58,43 +50,34 @@ describe("CharInv", () => {
 
   it("saves inventory on save", async () => {
     expect(mockUploadInventory).toHaveBeenCalledTimes(0);
-    const saveButton = charMaster.root.findByProps({
-      id: CharInvCancelSaveIds.ButtonSave,
-    });
-    await act(async () => saveButton.props.onClick());
+    await userEvent.click(screen.getByTestId(CharInvCancelSaveIds.ButtonSave));
     expect(mockUploadInventory).toHaveBeenCalledTimes(1);
   });
 
   it("opens a dialogue on cancel, closes on no", async () => {
-    const cancelDialog = charMaster.root.findByProps({
-      id: CharInvCancelSaveIds.DialogCancel,
-    });
-    expect(cancelDialog.props.open).toBeFalsy();
-
-    const cancelButton = charMaster.root.findByProps({
-      id: CharInvCancelSaveIds.ButtonCancel,
-    });
-    await act(async () => cancelButton.props.onClick());
-    expect(cancelDialog.props.open).toBeTruthy();
+    expect(screen.queryByRole("dialog")).toBeNull();
+    await userEvent.click(
+      screen.getByTestId(CharInvCancelSaveIds.ButtonCancel)
+    );
+    expect(screen.queryByRole("dialog")).toBeTruthy();
 
-    const noButton = charMaster.root.findByProps({
-      id: CharInvCancelSaveIds.DialogCancelButtonNo,
-    });
-    await act(async () => noButton.props.onClick());
-    expect(cancelDialog.props.open).toBeFalsy();
+    await userEvent.click(
+      screen.getByTestId(CharInvCancelSaveIds.DialogCancelButtonNo)
+    );
+    // Wait for dialog removal, else it's only hidden.
+    await waitForElementToBeRemoved(() => screen.queryByRole("dialog"));
+    expect(screen.queryByRole("dialog")).toBeNull();
   });
 
   it("exits on cancel-yes", async () => {
-    const cancelButton = charMaster.root.findByProps({
-      id: CharInvCancelSaveIds.ButtonCancel,
-    });
-    await act(async () => cancelButton.props.onClick());
+    await userEvent.click(
+      screen.getByTestId(CharInvCancelSaveIds.ButtonCancel)
+    );
     expect(mockExit).toHaveBeenCalledTimes(0);
 
-    const yesButton = charMaster.root.findByProps({
-      id: CharInvCancelSaveIds.DialogCancelButtonYes,
-    });
-    await act(async () => yesButton.props.onClick());
+    await userEvent.click(
+      screen.getByTestId(CharInvCancelSaveIds.DialogCancelButtonYes)
+    );
     expect(mockExit).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/goals/CharacterInventory/CharInvCompleted.tsx b/src/goals/CharacterInventory/CharInvCompleted.tsx
index e2d7af44e3..0d61192298 100644
--- a/src/goals/CharacterInventory/CharInvCompleted.tsx
+++ b/src/goals/CharacterInventory/CharInvCompleted.tsx
@@ -23,11 +23,14 @@ import {
 import { useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
 
-export enum CharInvCompletedId {
-  TypographyNoCharChanges = "no-char-changes-typography",
-  TypographyNoWordChanges = "no-word-changes-typography",
-  TypographyWordChanges = "word-changes-typography",
-  TypographyWordsUndo = "words-undo-typography",
+export enum CharInvCompletedTextId {
+  CharChangesMore = "charInventory.changes.more",
+  CharChangesNone = "charInventory.changes.noCharChanges",
+  Title = "charInventory.title",
+  WordChanges = "charInventory.changes.wordChanges",
+  WordChangesNone = "charInventory.changes.noWordChangesFindReplace",
+  WordChangesUndo = "charInventory.undo.undoWords",
+  WordChangesWithString = "charInventory.changes.wordChangesWithStrings",
 }
 
 /** Component to display the full details of changes made during one session of the
@@ -46,16 +49,16 @@ export default function CharInvCompleted(): ReactElement {
     <Stack spacing={1} sx={{ p: 2 }}>
       {/* Title */}
       <Typography component="h1" variant="h4">
-        {t("charInventory.title")}
+        {t(CharInvCompletedTextId.Title)}
       </Typography>
 
       {/* Inventory changes */}
-      <div>
+      <div role="list">
         {changes.charChanges.length ? (
           changes.charChanges.map((c) => <CharChange change={c} key={c[0]} />)
         ) : (
-          <Typography id={CharInvCompletedId.TypographyNoCharChanges}>
-            {t("charInventory.changes.noCharChanges")}
+          <Typography role="listitem">
+            {t(CharInvCompletedTextId.CharChangesNone)}
           </Typography>
         )}
       </div>
@@ -71,9 +74,7 @@ export default function CharInvCompleted(): ReactElement {
       ) : (
         <>
           <Divider />
-          <Typography id={CharInvCompletedId.TypographyNoWordChanges}>
-            {t("charInventory.changes.noWordChangesFindReplace")}
-          </Typography>
+          <Typography>{t(CharInvCompletedTextId.WordChangesNone)}</Typography>
         </>
       )}
     </Stack>
@@ -97,16 +98,14 @@ function WordChangesTypography(props: {
   const wordCount = changes.flatMap((wc) => Object.keys(wc.words)).length;
   const description =
     changes.length === 1
-      ? t("charInventory.changes.wordChangesWithStrings", {
+      ? t(CharInvCompletedTextId.WordChangesWithString, {
           val1: changes[0].find,
           val2: changes[0].replace,
         })
-      : t("charInventory.changes.wordChanges");
+      : t(CharInvCompletedTextId.WordChanges);
 
   return (
-    <Typography id={CharInvCompletedId.TypographyWordChanges}>
-      {`${description} ${wordCount}`}
-    </Typography>
+    <Typography role="listitem">{`${description} ${wordCount}`}</Typography>
   );
 }
 
@@ -121,11 +120,9 @@ export function CharInvChangesGoalList(changes: CharInvChanges): ReactElement {
 
   const noChanges = !(charChanges?.length || wordChanges?.length);
   return noChanges ? (
-    <Typography id={CharInvCompletedId.TypographyNoCharChanges}>
-      {t("charInventory.changes.noCharChanges")}
-    </Typography>
+    <Typography>{t(CharInvCompletedTextId.CharChangesNone)}</Typography>
   ) : (
-    <Stack alignItems="flex-start">
+    <Stack alignItems="flex-start" role="list">
       <CharChangesRows changeLimit={changeLimit} charChanges={charChanges} />
       <WordChangesTypography wordChanges={wordChanges} />
     </Stack>
@@ -134,7 +131,7 @@ export function CharInvChangesGoalList(changes: CharInvChanges): ReactElement {
 
 /** Components summarizing changes to status of inventory characters
  * (or null if no status changes). */
-export function CharChangesRows(props: {
+function CharChangesRows(props: {
   changeLimit: number;
   charChanges?: CharacterChange[];
 }): ReactElement | null {
@@ -150,9 +147,9 @@ export function CharChangesRows(props: {
       {charChanges.slice(0, changeLimit - 1).map((c) => (
         <CharChange change={c} key={c[0]} />
       ))}
-      <Typography>
+      <Typography role="listitem">
         {`+${charChanges.length - (changeLimit - 1)} `}
-        {t("charInventory.changes.more")}
+        {t(CharInvCompletedTextId.CharChangesMore)}
       </Typography>
     </>
   ) : (
@@ -167,7 +164,7 @@ export function CharChangesRows(props: {
 /** One-line display of the inventory status change of a character. */
 export function CharChange(props: { change: CharacterChange }): ReactElement {
   return (
-    <div>
+    <div role="listitem">
       <Typography display="inline">{`${props.change[0]}: `}</Typography>
       <CharacterStatusText status={props.change[1]} inline />
       <Typography display="inline" variant="body2">
@@ -189,8 +186,8 @@ function WordChanges(props: {
   const wordLimit = 5;
 
   const undoWordsTypography = inFrontier.length ? (
-    <Typography id={CharInvCompletedId.TypographyWordsUndo}>
-      {t("charInventory.undo.undoWords", {
+    <Typography>
+      {t(CharInvCompletedTextId.WordChangesUndo, {
         val1: inFrontier.length,
         val2: entries.length,
       })}
@@ -212,8 +209,8 @@ function WordChanges(props: {
 
   return (
     <div>
-      <Typography id={CharInvCompletedId.TypographyWordChanges}>
-        {t("charInventory.changes.wordChangesWithStrings", {
+      <Typography>
+        {t(CharInvCompletedTextId.WordChangesWithString, {
           val1: props.wordChanges.find,
           val2: props.wordChanges.replace,
         })}
@@ -225,7 +222,7 @@ function WordChanges(props: {
         {entries.length > wordLimit ? (
           <Typography>
             {`+${entries.length - wordLimit} ${t(
-              "charInventory.changes.more"
+              CharInvCompletedTextId.CharChangesMore
             )}`}
           </Typography>
         ) : null}
diff --git a/src/goals/CharacterInventory/tests/CharInvCompleted.test.tsx b/src/goals/CharacterInventory/tests/CharInvCompleted.test.tsx
index ef63cdfba5..c1c289eeaa 100644
--- a/src/goals/CharacterInventory/tests/CharInvCompleted.test.tsx
+++ b/src/goals/CharacterInventory/tests/CharInvCompleted.test.tsx
@@ -1,17 +1,10 @@
+import { act, render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
-import {
-  type ReactTestInstance,
-  type ReactTestRenderer,
-  act,
-  create,
-} from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
 
-import WordCard from "components/WordCard";
 import CharInvCompleted, {
-  CharChange,
   CharInvChangesGoalList,
-  CharInvCompletedId,
+  CharInvCompletedTextId,
 } from "goals/CharacterInventory/CharInvCompleted";
 import {
   type CharInvChanges,
@@ -29,8 +22,7 @@ jest.mock("backend", () => ({
   getWord: () => Promise.resolve(mockWord()),
   updateWord: () => jest.fn(),
 }));
-// Mock "i18n", else `thrown: "Error: Error: connect ECONNREFUSED ::1:80 [...]`
-jest.mock("i18n", () => ({}));
+jest.mock("i18n", () => ({})); // else `thrown: "Error: AggregateError`
 
 const mockCharChanges: CharacterChange[] = [
   ["a", CharacterStatus.Accepted, CharacterStatus.Rejected],
@@ -40,15 +32,11 @@ const mockCharChanges: CharacterChange[] = [
   ["e", CharacterStatus.Undecided, CharacterStatus.Accepted],
   ["f", CharacterStatus.Undecided, CharacterStatus.Rejected],
 ];
-const mockWordKeys = ["oldA", "oldB", "oldC"];
+const mockWordKeys = ["oldA", "oldB"];
 const mockWordChanges: FindAndReplaceChange = {
   find: "Q",
   replace: "q",
-  words: {
-    [mockWordKeys[0]]: "newA",
-    [mockWordKeys[1]]: "newB",
-    [mockWordKeys[2]]: "newC",
-  },
+  words: { [mockWordKeys[0]]: "newA", [mockWordKeys[1]]: "newB" },
 };
 const mockState = (changes?: CharInvChanges): Partial<StoreState> => ({
   goalsState: {
@@ -57,115 +45,111 @@ const mockState = (changes?: CharInvChanges): Partial<StoreState> => ({
   },
 });
 
-let renderer: ReactTestRenderer;
-let root: ReactTestInstance;
-
 beforeEach(() => {
   jest.resetAllMocks();
 });
 
 describe("CharInvCompleted", () => {
   const renderCharInvCompleted = async (
-    changes?: CharInvChanges
+    changes?: Partial<CharInvChanges>
   ): Promise<void> => {
+    const charInvChanges = { ...defaultCharInvChanges, ...changes };
     await act(async () => {
-      renderer = create(
-        <Provider store={configureMockStore()(mockState(changes))}>
+      render(
+        <Provider store={configureMockStore()(mockState(charInvChanges))}>
           <CharInvCompleted />
         </Provider>
       );
     });
-    root = renderer.root;
   };
 
-  it("renders all char inv changes", async () => {
-    await renderCharInvCompleted({
-      ...defaultCharInvChanges,
-      charChanges: mockCharChanges,
-    });
-    expect(root.findAllByType(CharChange)).toHaveLength(mockCharChanges.length);
-    expect(root.findAllByType(WordCard)).toHaveLength(0);
-
-    expect(() =>
-      root.findByProps({ id: CharInvCompletedId.TypographyNoCharChanges })
-    ).toThrow();
-    root.findByProps({ id: CharInvCompletedId.TypographyNoWordChanges });
-    expect(() =>
-      root.findByProps({ id: CharInvCompletedId.TypographyWordChanges })
-    ).toThrow();
-  });
+  it("renders char changes", async () => {
+    await renderCharInvCompleted({ charChanges: mockCharChanges });
 
-  it("renders all words changed", async () => {
-    await renderCharInvCompleted({
-      ...defaultCharInvChanges,
-      wordChanges: [mockWordChanges],
-    });
-    expect(root.findAllByType(CharChange)).toHaveLength(0);
-    expect(renderer.root.findAllByType(WordCard)).toHaveLength(
-      mockWordKeys.length
+    // One listitem per char-change.
+    expect(screen.getAllByRole("listitem")).toHaveLength(
+      mockCharChanges.length
     );
+    expect(
+      screen.queryByText(CharInvCompletedTextId.CharChangesNone)
+    ).toBeNull();
 
-    root.findByProps({ id: CharInvCompletedId.TypographyNoCharChanges });
-    expect(() =>
-      root.findByProps({ id: CharInvCompletedId.TypographyNoWordChanges })
-    ).toThrow();
-    root.findByProps({ id: CharInvCompletedId.TypographyWordChanges });
+    // No word-changes.
+    expect(
+      screen.queryAllByText(CharInvCompletedTextId.WordChangesWithString)
+    ).toHaveLength(0);
+    expect(
+      screen.queryByText(CharInvCompletedTextId.WordChangesNone)
+    ).toBeTruthy();
+  });
+
+  it("renders word changes", async () => {
+    await renderCharInvCompleted({ wordChanges: [mockWordChanges] });
+
+    // One listitem for the no-char-change text.
+    expect(screen.getAllByRole("listitem")).toHaveLength(1);
+    expect(
+      screen.queryByText(CharInvCompletedTextId.CharChangesNone)
+    ).toBeTruthy();
+
+    // One word-changes.
+    expect(
+      screen.queryAllByText(CharInvCompletedTextId.WordChangesWithString)
+    ).toHaveLength(1);
+    expect(
+      screen.queryByText(CharInvCompletedTextId.WordChangesNone)
+    ).toBeNull();
   });
 });
 
 describe("CharInvChangesGoalList", () => {
+  const changeLimit = 3;
+
   const renderCharInvChangesGoalList = async (
-    changes?: CharInvChanges
+    changes?: Partial<CharInvChanges>
   ): Promise<void> => {
     await act(async () => {
-      renderer = create(
-        CharInvChangesGoalList(changes ?? defaultCharInvChanges)
-      );
+      render(CharInvChangesGoalList({ ...defaultCharInvChanges, ...changes }));
     });
-    root = renderer.root;
   };
 
-  it("renders up to 3 char changes", async () => {
-    const changes = (count: number): CharInvChanges => ({
-      ...defaultCharInvChanges,
-      charChanges: mockCharChanges.slice(0, count),
-    });
-    await renderCharInvChangesGoalList(changes(0));
-    expect(root.findAllByType(CharChange)).toHaveLength(0);
-    await renderCharInvChangesGoalList(changes(1));
-    expect(root.findAllByType(CharChange)).toHaveLength(1);
-    await renderCharInvChangesGoalList(changes(3));
-    expect(root.findAllByType(CharChange)).toHaveLength(3);
+  describe(`shows up to ${changeLimit} char changes`, () => {
+    for (let i = 0; i <= changeLimit; i++) {
+      test(`shows ${i} char changes`, async () => {
+        const charChanges = mockCharChanges.slice(0, i);
+        await renderCharInvChangesGoalList({ charChanges });
+        expect(screen.queryAllByRole("listitem")).toHaveLength(i);
+        const noChanges = screen.queryByText(
+          CharInvCompletedTextId.CharChangesNone
+        );
+        if (i) {
+          expect(noChanges).toBeNull();
+        } else {
+          expect(noChanges).toBeTruthy();
+        }
+      });
+    }
   });
 
-  it("doesn't render more than 3 char changes", async () => {
-    expect(mockCharChanges.length).toBeGreaterThan(3);
-    await renderCharInvChangesGoalList({
-      ...defaultCharInvChanges,
-      charChanges: mockCharChanges,
-    });
-    // When more than 3 changes, show 2 changes and a "+_ more" line.
-    expect(root.findAllByType(CharChange)).toHaveLength(2);
+  it(`shows only ${changeLimit} items when there are more char changes than that`, async () => {
+    expect(mockCharChanges.length).toBeGreaterThan(changeLimit);
+    await renderCharInvChangesGoalList({ charChanges: mockCharChanges });
+    expect(screen.queryAllByRole("listitem")).toHaveLength(changeLimit);
   });
 
-  it("doesn't show word changes when there are none", async () => {
-    await renderCharInvChangesGoalList(defaultCharInvChanges);
-    expect(() =>
-      root.findByProps({ id: CharInvCompletedId.TypographyNoWordChanges })
-    ).toThrow();
-    expect(() =>
-      root.findByProps({ id: CharInvCompletedId.TypographyWordChanges })
-    ).toThrow();
+  it("doesn't show word changes summary item when there are none", async () => {
+    await renderCharInvChangesGoalList();
+    expect(screen.queryAllByRole("listitem")).toHaveLength(0);
+    expect(
+      screen.queryByText(CharInvCompletedTextId.CharChangesNone)
+    ).toBeTruthy();
   });
 
-  it("shows word changes when there are some", async () => {
-    await renderCharInvChangesGoalList({
-      ...defaultCharInvChanges,
-      wordChanges: [mockWordChanges],
-    });
-    expect(() =>
-      root.findByProps({ id: CharInvCompletedId.TypographyNoWordChanges })
-    ).toThrow();
-    root.findByProps({ id: CharInvCompletedId.TypographyWordChanges });
+  it("shows word changes summary item when there are some", async () => {
+    await renderCharInvChangesGoalList({ wordChanges: [mockWordChanges] });
+    expect(screen.queryAllByRole("listitem")).toHaveLength(1);
+    expect(
+      screen.queryByText(CharInvCompletedTextId.CharChangesNone)
+    ).toBeNull();
   });
 });

From 0cb9836711ea6f3bea2d17edc80c716e1733f7eb Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Thu, 19 Jun 2025 11:39:14 -0400
Subject: [PATCH 3/3] Use color shorthand

---
 .../CharInv/CharacterList/CharacterStatusText.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx b/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx
index a57a44c8db..90d8d1990b 100644
--- a/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx
+++ b/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx
@@ -3,7 +3,6 @@ import { type ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
 import { CharacterStatus } from "goals/CharacterInventory/CharacterInventoryTypes";
-import { themeColors } from "types/theme";
 
 interface CharacterStatusTextProps {
   status: CharacterStatus;
@@ -17,24 +16,22 @@ export default function CharacterStatusText(
 
   return (
     <Typography
-      variant="body2"
-      color="textSecondary"
-      component="p"
-      style={CharacterStatusStyle(props.status)}
       display={props.inline ? "inline" : "initial"}
+      sx={{ color: CharStatusColor(props.status) }}
+      variant="body2"
     >
       {t(`buttons.${props.status}`)}
     </Typography>
   );
 }
 
-function CharacterStatusStyle(status: CharacterStatus): { color: string } {
+function CharStatusColor(status: CharacterStatus): string {
   switch (status) {
     case CharacterStatus.Accepted:
-      return { color: themeColors.success };
+      return "success.main";
     case CharacterStatus.Rejected:
-      return { color: themeColors.error };
+      return "error.main";
     case CharacterStatus.Undecided:
-      return { color: themeColors.primary };
+      return "primary.main";
   }
 }