Add tests and tidy code

Backend.Tests/Controllers/WordControllerTests.cs

@@ -397,5 +397,40 @@ public async Task TestUpdateWordMissingIds()
             var wordResult = await _wordController.UpdateWord(_projId, MissingId, modWord);
             Assert.That(wordResult, Is.InstanceOf<NotFoundObjectResult>());
         }
+
+        [Test]
+        public async Task TestGetWordHistoryNoPermission()
+        {
+            _wordController.ControllerContext.HttpContext = PermissionServiceMock.UnauthorizedHttpContext();
+
+            var origWord = await _wordRepo.Create(Util.RandomWord(_projId));
+            var result = await _wordController.GetWordHistory(_projId, origWord.Id);
+            Assert.That(result, Is.InstanceOf<ForbidResult>());
+        }
+
+        [Test]
+        public async Task TestGetWordHistoryMissingIds()
+        {
+            var origWord = await _wordRepo.Create(Util.RandomWord(_projId));
+            var projectResult = await _wordController.GetWordHistory(MissingId, origWord.Id);
+            Assert.That(projectResult, Is.InstanceOf<NotFoundObjectResult>());
+
+            var wordResult = await _wordController.GetWordHistory(_projId, MissingId);
+            Assert.That(wordResult, Is.InstanceOf<NotFoundObjectResult>());
+        }
+
+        [Test]
+        public async Task TestGetWordHistoryParentCount()
+        {
+            var father = await _wordRepo.Create(Util.RandomWord(_projId));
+            var mother = await _wordRepo.Create(Util.RandomWord(_projId));
+            var word = Util.RandomWord(_projId);
+            word.History = new List<string> { father.Id, mother.Id };
+            word = await _wordRepo.Create(word);
+            var result = await _wordController.GetWordHistory(_projId, word.Id);
+            Assert.That(result, Is.InstanceOf<OkObjectResult>());
+            var pedigree = (Pedigree)((OkObjectResult)result).Value!;
+            Assert.That(pedigree.Parents, Has.Count.EqualTo(2));
+        }
     }
 }

Backend/Interfaces/IWordService.cs

@@ -10,6 +10,6 @@ public interface IWordService
         Task<string?> FindContainingWord(Word word);
         Task<Word?> Delete(string projectId, string wordId, string fileName);
         Task<string?> DeleteFrontierWord(string projectId, string wordId);
-        Task<Pedigree> GeneratePedigree(string projId, Word word);
+        Task<Pedigree> GeneratePedigree(string projectId, Word word);
     }
 }

Backend/Services/WordService.cs

@@ -141,7 +141,7 @@ public async Task<bool> Update(string projectId, string wordId, Word word)
         }
 
         /// <summary> Builds a <see cref="Pedigree"/> from a <see cref="Word"/>'s history. </summary>
-        public async Task<Pedigree> GeneratePedigree(string projId, Word word)
+        public async Task<Pedigree> GeneratePedigree(string projectId, Word word)
         {
             var tree = new Pedigree(word);
             // Iterate backwards through the history and construct the pedigree depth-first.
@@ -150,10 +150,10 @@ public async Task<Pedigree> GeneratePedigree(string projId, Word word)
                 var id = word.History[i];
                 if (!tree.HasAncestor(id))
                 {
-                    var parent = await _wordRepo.GetWord(projId, id);
+                    var parent = await _wordRepo.GetWord(projectId, id);
                     if (parent is not null)
                     {
-                        tree.Parents.Add(await GeneratePedigree(projId, parent));
+                        tree.Parents.Add(await GeneratePedigree(projectId, parent));
                     }
                 }
             }

src/components/DataEntry/DataEntryTable/EntryCellComponents/EntryNote.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from "react-i18next";
 import { EditTextDialog } from "components/Dialogs";
 
 interface EntryNoteProps {
-  buttonId?: string;
   noteText: string;
+  buttonId?: string;
   updateNote?: (newText: string) => void | Promise<void>;
 }
 

src/components/WordCard/SenseCard.tsx

@@ -14,30 +14,32 @@ interface SenseCardProps {
 }
 
 export default function SenseCard(props: SenseCardProps): ReactElement {
-  const gramInfo = props.sense.grammaticalInfo;
+  const { grammaticalInfo, semanticDomains } = props.sense;
 
   return (
-    <Card style={{ backgroundColor: "white" }}>
-      <CardContent style={{ position: "relative", paddingRight: 40 }}>
-        {/* Icon for part of speech (if any). */}
+    <Card style={{ backgroundColor: "white", marginBottom: 10 }}>
+      <CardContent style={{ position: "relative" }}>
+        {/* Part of speech (if any) */}
         <div style={{ position: "absolute", left: 0, top: 0 }}>
-          {gramInfo.catGroup !== GramCatGroup.Unspecified && (
+          {grammaticalInfo.catGroup !== GramCatGroup.Unspecified && (
             <PartOfSpeechButton
               buttonId={`sense-${props.sense.guid}-part-of-speech`}
-              gramInfo={gramInfo}
+              gramInfo={grammaticalInfo}
               onlyIcon
             />
           )}
         </div>
-        {/* List glosses and (if any) definitions. */}
+
+        {/* Glosses and (if any) definitions */}
         <SenseCardText
+          hideDefs={props.minimal}
           languages={props.languages}
-          minimal={props.minimal}
           sense={props.sense}
         />
-        {/* List semantic domains. */}
-        <Grid container spacing={2}>
-          {props.sense.semanticDomains.map((d) => (
+
+        {/* Semantic domains */}
+        <Grid container spacing={1}>
+          {semanticDomains.map((d) => (
             <Grid item key={`${d.id}_${d.name}`}>
               <DomainChip domain={d} provenance={props.provenance} />
             </Grid>

src/components/WordCard/SenseCardText.tsx

@@ -5,7 +5,7 @@ import {
   TableRow,
   Typography,
 } from "@mui/material";
-import { ReactElement } from "react";
+import { CSSProperties, ReactElement } from "react";
 
 import { Sense } from "api/models";
 import theme from "types/theme";
@@ -14,27 +14,23 @@ import { TypographyWithFont } from "utilities/fontComponents";
 interface SenseInLanguage {
   language: string; // bcp-47 code
   glossText: string;
-  definitionText?: string;
+  definitionText: string;
 }
 
 function getSenseInLanguage(
   sense: Sense,
   language: string,
   displaySep = "; "
 ): SenseInLanguage {
-  return {
-    language,
-    glossText: sense.glosses
-      .filter((g) => g.language === language)
-      .map((g) => g.def)
-      .join(displaySep),
-    definitionText: sense.definitions.length
-      ? sense.definitions
-          .filter((d) => d.language === language)
-          .map((d) => d.text)
-          .join(displaySep)
-      : undefined,
-  };
+  const glossText = sense.glosses
+    .filter((g) => g.language === language)
+    .map((g) => g.def)
+    .join(displaySep);
+  const definitionText = sense.definitions
+    .filter((d) => d.language === language)
+    .map((d) => d.text)
+    .join(displaySep);
+  return { language, glossText, definitionText };
 }
 
 function getSenseInLanguages(
@@ -50,12 +46,12 @@ function getSenseInLanguages(
 }
 
 interface SenseCardTextProps {
-  languages?: string[];
-  minimal?: boolean;
   sense: Sense;
+  hideDefs?: boolean;
+  languages?: string[];
 }
 
-// Show glosses and (if not minimal) definitions
+// Show glosses and (if not hideDefs) definitions.
 export default function SenseCardText(props: SenseCardTextProps): ReactElement {
   const senseTextInLangs = getSenseInLanguages(props.sense, props.languages);
 
@@ -64,7 +60,7 @@ export default function SenseCardText(props: SenseCardTextProps): ReactElement {
       <TableBody>
         {senseTextInLangs.map((senseInLang, index) => (
           <SenseTextRows
-            hideDefs={props.minimal}
+            hideDefs={props.hideDefs}
             key={index}
             senseInLang={senseInLang}
           />
@@ -74,6 +70,12 @@ export default function SenseCardText(props: SenseCardTextProps): ReactElement {
   );
 }
 
+const defStyle: CSSProperties = {
+  borderLeft: "1px solid black",
+  marginBottom: theme.spacing(1),
+  paddingLeft: theme.spacing(1),
+};
+
 interface SenseTextRowsProps {
   senseInLang: SenseInLanguage;
   hideDefs?: boolean;
@@ -83,6 +85,7 @@ function SenseTextRows(props: SenseTextRowsProps): ReactElement {
   const lang = props.senseInLang.language;
   return (
     <>
+      {/* Gloss */}
       <TableRow key={lang}>
         <TableCell style={{ borderBottom: "none" }}>
           <Typography variant="caption">
@@ -100,17 +103,13 @@ function SenseTextRows(props: SenseTextRowsProps): ReactElement {
           </TypographyWithFont>
         </TableCell>
       </TableRow>
+
+      {/* Definition */}
       {!!props.senseInLang.definitionText && !props.hideDefs && (
         <TableRow key={lang + "def"}>
           <TableCell style={{ borderBottom: "none" }} />
           <TableCell style={{ borderBottom: "none" }}>
-            <div
-              style={{
-                borderLeft: "1px solid black",
-                marginBottom: theme.spacing(1),
-                paddingLeft: theme.spacing(1),
-              }}
-            >
+            <div style={defStyle}>
               <TypographyWithFont color="textSecondary" lang={lang}>
                 {props.senseInLang.definitionText}
               </TypographyWithFont>

src/components/WordCard/SummarySenseCard.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, Chip, Typography } from "@mui/material";
+import { Card, CardContent, Chip, Grid, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -26,9 +26,9 @@ export default function SummarySenseCard(
   const domIds = [...new Set(semDoms.map((d) => d.id))].sort();
 
   return (
-    <Card style={{ backgroundColor: "white" }}>
-      <CardContent style={{ position: "relative", paddingRight: 40 }}>
-        {/* Icon for part of speech (if any). */}
+    <Card style={{ backgroundColor: "white", marginBottom: 10 }}>
+      <CardContent style={{ position: "relative" }}>
+        {/* Parts of speech */}
         {groupedGramInfo.map((info) => (
           <PartOfSpeechButton
             buttonId={`senses-${senseGuids}-part-of-speech-${info.catGroup}`}
@@ -37,14 +37,20 @@ export default function SummarySenseCard(
             onlyIcon
           />
         ))}
-        {/* Number of senses. */}
+
+        {/* Sense count */}
         <Typography display="block" variant="h5">
           {t("wordHistory.senseCount", { val: props.senses.length })}
         </Typography>
-        {/* Semantic domain numbers. */}
-        {domIds.map((id) => (
-          <Chip key={id} label={id} />
-        ))}
+
+        {/* Semantic domain numbers */}
+        <Grid container spacing={1}>
+          {domIds.map((id) => (
+            <Grid item key={id}>
+              <Chip label={id} />
+            </Grid>
+          ))}
+        </Grid>
       </CardContent>
     </Card>
   );

src/components/WordCard/index.tsx

@@ -6,7 +6,7 @@ import {
   IconButton,
   Typography,
 } from "@mui/material";
-import { ReactElement, useState } from "react";
+import { Fragment, ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Word } from "api/models";
@@ -35,31 +35,31 @@ export default function WordCard(props: WordCardProps): ReactElement {
 
   return (
     <Card style={{ backgroundColor: "lightgray" }}>
-      <CardContent style={{ position: "relative", paddingRight: 40 }}>
+      <CardContent style={{ position: "relative" }}>
         {/* Vernacular */}
         <TypographyWithFont variant="h5" vernacular>
           {word.vernacular}
         </TypographyWithFont>
-        {/* Icons for audio, note, flag (if any). */}
+
+        {/* Icons for audio, note, flag (if any); button for expand/collapse */}
         <div style={{ position: "absolute", right: 0, top: 0 }}>
           {!full && <AudioSummary count={audio.length} />}
           {!!note.text && <EntryNote noteText={note.text} />}
           {flag.active && <FlagButton flag={flag} />}
-          {full ? (
-            <IconButtonWithTooltip
-              buttonId={buttonIdFull(word.id)}
-              icon={<CloseFullscreen style={{ color: "black" }} />}
-              onClick={() => setFull(false)}
-            />
-          ) : (
-            <IconButtonWithTooltip
-              buttonId={buttonIdFull(word.id)}
-              icon={<OpenInFull style={{ color: "gray" }} />}
-              onClick={() => setFull(true)}
-            />
-          )}
+          <IconButtonWithTooltip
+            buttonId={buttonIdFull(word.id)}
+            icon={
+              full ? (
+                <CloseFullscreen style={{ color: "black" }} />
+              ) : (
+                <OpenInFull style={{ color: "gray" }} />
+              )
+            }
+            onClick={() => setFull(!full)}
+          />
         </div>
-        {/* Audio playback. */}
+
+        {/* Audio playback */}
         {audio.length > 0 && full && (
           <PronunciationsBackend
             deleteAudio={() => {}}
@@ -68,7 +68,8 @@ export default function WordCard(props: WordCardProps): ReactElement {
             wordId={id}
           />
         )}
-        {/* Senses. */}
+
+        {/* Senses */}
         {full ? (
           senses.map((s) => (
             <SenseCard
@@ -81,6 +82,7 @@ export default function WordCard(props: WordCardProps): ReactElement {
         ) : (
           <SummarySenseCard senses={senses} />
         )}
+
         {/* Timestamps */}
         {provenance && (
           <Typography display="block" variant="caption">
@@ -104,6 +106,6 @@ export function AudioSummary(props: { count: number }): ReactElement {
       </Badge>
     </IconButton>
   ) : (
-    <div />
+    <Fragment />
   );
 }

src/components/WordCard/tests/index.test.tsx

@@ -34,7 +34,7 @@ beforeEach(async () => {
 });
 
 describe("HistoryCell", () => {
-  it("has full and summary views", async () => {
+  it("has summary and full views", async () => {
     const button = cardHandle.root.findByProps({ id: buttonId });
     expect(cardHandle.root.findByType(AudioSummary).props.count).toEqual(
       mockWord.audio.length