Skip to content

Commit

Permalink
Add WordCard tests
Browse files Browse the repository at this point in the history
  • Loading branch information
imnasnainaec committed Oct 20, 2023
1 parent 8555dbc commit e24a044
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 19 deletions.
4 changes: 2 additions & 2 deletions src/components/Buttons/FlagButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { themeColors } from "types/theme";

interface FlagButtonProps {
flag: Flag;
buttonId: string;
buttonId?: string;
updateFlag?: (flag: Flag) => void;
}

Expand Down Expand Up @@ -56,7 +56,7 @@ export default function FlagButton(props: FlagButtonProps): ReactElement {
onClick={
props.updateFlag ? () => setOpen(true) : active ? () => {} : undefined
}
buttonId={props.buttonId}
buttonId={props.buttonId ?? "flag-button"}
side="top"
/>
{props.updateFlag && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
import { EditTextDialog } from "components/Dialogs";

interface EntryNoteProps {
buttonId: string;
buttonId?: string;
noteText: string;
updateNote?: (newText: string) => void | Promise<void>;
}
Expand Down
36 changes: 20 additions & 16 deletions src/components/WordCard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ interface WordCardProps {
word: Word;
}

export const buttonIdFull = (wordId: string): string => `word-${wordId}-full`;

export default function WordCard(props: WordCardProps): ReactElement {
const { languages, provenance, word } = props;
const { audio, flag, id, note, senses } = word;
Expand All @@ -38,30 +40,20 @@ export default function WordCard(props: WordCardProps): ReactElement {
<TypographyWithFont variant="h5" vernacular>
{word.vernacular}
</TypographyWithFont>
{/* Icons for note & flag (if any). */}
{/* Icons for audio, note, flag (if any). */}
<div style={{ position: "absolute", right: 0, top: 0 }}>
{!full && audio.length > 0 && (
<IconButton>
<Badge badgeContent={audio.length}>
<PlayArrow style={{ color: themeColors.success }} />
</Badge>
</IconButton>
)}
{!!note.text && (
<EntryNote buttonId={`word-${id}-note`} noteText={note.text} />
)}
{flag.active && (
<FlagButton flag={flag} buttonId={`word-${id}-flag`} />
)}
{!full && <AudioSummary count={audio.length} />}
{!!note.text && <EntryNote noteText={note.text} />}
{flag.active && <FlagButton flag={flag} />}
{full ? (
<IconButtonWithTooltip
buttonId={`word-${word.id}-collapse`}
buttonId={buttonIdFull(word.id)}
icon={<CloseFullscreen style={{ color: "black" }} />}
onClick={() => setFull(false)}
/>
) : (
<IconButtonWithTooltip
buttonId={`word-${word.id}-expand`}
buttonId={buttonIdFull(word.id)}
icon={<OpenInFull style={{ color: "gray" }} />}
onClick={() => setFull(true)}
/>
Expand Down Expand Up @@ -103,3 +95,15 @@ export default function WordCard(props: WordCardProps): ReactElement {
</Card>
);
}

export function AudioSummary(props: { count: number }): ReactElement {
return props.count > 0 ? (
<IconButton>
<Badge badgeContent={props.count}>
<PlayArrow style={{ color: themeColors.success }} />
</Badge>
</IconButton>
) : (
<div />
);
}
63 changes: 63 additions & 0 deletions src/components/WordCard/tests/index.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { ReactTestRenderer, act, create } from "react-test-renderer";

import "tests/reactI18nextMock";

import { Word } from "api/models";
import WordCard, { AudioSummary, buttonIdFull } from "components/WordCard";
import SenseCard from "components/WordCard/SenseCard";
import SummarySenseCard from "components/WordCard/SummarySenseCard";
import { newSense, newWord } from "types/word";

// Mock the audio components
jest
.spyOn(window.HTMLMediaElement.prototype, "pause")
.mockImplementation(() => {});
jest.mock("components/Pronunciations/AudioPlayer", () => "div");
jest.mock("components/Pronunciations/Recorder");

const mockWordId = "mock-id";
const buttonId = buttonIdFull(mockWordId);
const mockWord: Word = { ...newWord(), id: mockWordId };
mockWord.audio.push("song", "speech", "rap", "poem");
mockWord.senses.push(newSense(), newSense());

let cardHandle: ReactTestRenderer;

const renderHistoryCell = async (): Promise<void> => {
await act(async () => {
cardHandle = create(<WordCard word={mockWord} />);
});
};

beforeEach(async () => {
await renderHistoryCell();
});

describe("HistoryCell", () => {
it("has full and summary views", async () => {
const button = cardHandle.root.findByProps({ id: buttonId });
expect(cardHandle.root.findByType(AudioSummary).props.count).toEqual(
mockWord.audio.length
);
expect(cardHandle.root.findAllByType(SenseCard)).toHaveLength(0);
expect(cardHandle.root.findAllByType(SummarySenseCard)).toHaveLength(1);

await act(async () => {
button.props.onClick();
});
expect(cardHandle.root.findAllByType(AudioSummary)).toHaveLength(0);
expect(cardHandle.root.findAllByType(SenseCard)).toHaveLength(
mockWord.senses.length
);
expect(cardHandle.root.findAllByType(SummarySenseCard)).toHaveLength(0);

await act(async () => {
button.props.onClick();
});
expect(cardHandle.root.findByType(AudioSummary).props.count).toEqual(
mockWord.audio.length
);
expect(cardHandle.root.findAllByType(SenseCard)).toHaveLength(0);
expect(cardHandle.root.findAllByType(SummarySenseCard)).toHaveLength(1);
});
});

0 comments on commit e24a044

Please sign in to comment.