From 59248e5705605ed2b00905df3246f072a2ebf318 Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Fri, 17 Nov 2023 18:20:48 +0000 Subject: [PATCH 1/2] Ensure list of fights refreshes on a fight --- .../src/main/webui/src/app/App.js | 16 +++++++- .../src/main/webui/src/app/App.test.js | 40 +++++++++++++++++-- .../webui/src/app/fight-list/FightList.js | 13 +----- .../src/app/fight-list/FightList.test.js | 19 ++++----- .../src/main/webui/src/app/fight/Fight.js | 7 +++- .../main/webui/src/app/fight/Fight.test.js | 22 ++++++++-- 6 files changed, 83 insertions(+), 34 deletions(-) diff --git a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.js b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.js index 6916799d1..0f966274a 100644 --- a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.js +++ b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.js @@ -1,14 +1,26 @@ import {FightList} from "./fight-list/FightList" import Fight from "./fight/Fight" +import {useEffect, useState} from "react" +import {getFights} from "./shared/api/fight-service" function App() { + + const [fights, setFights] = useState() + + const refreshFights = () => getFights().then(answer => setFights(answer)) + + useEffect(() => { + refreshFights() + }, [] + ) + return ( <>

Welcome to Super Heroes Fight!

- - + + ) } diff --git a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.test.js b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.test.js index b1bf36014..600619c8f 100644 --- a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.test.js +++ b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.test.js @@ -1,9 +1,9 @@ import React from "react" -import {render, screen} from "@testing-library/react" +import {fireEvent, render, screen} from "@testing-library/react" import App from "./App" import "@testing-library/jest-dom" import {act} from "react-dom/test-utils" -import {getFights, getRandomFighters} from "./shared/api/fight-service" +import {getFights, getRandomFighters, startFight} from "./shared/api/fight-service" jest.mock("./shared/api/fight-service") @@ -47,7 +47,12 @@ const fight = { describe("renders the elements", () => { beforeEach(() => { getRandomFighters.mockResolvedValue(fighters) - getFights.mockResolvedValue([fight]) + startFight.mockResolvedValue(fight) + + // To make the row-counting test work, we need the behaviour of getFights to change on each call + getFights.mockResolvedValueOnce([fight]) + getFights.mockResolvedValueOnce([fight, fight]) + getFights.mockResolvedValueOnce([fight, fight, fight]) }) afterAll(() => { @@ -77,4 +82,33 @@ describe("renders the elements", () => { expect(screen.getByText("Fake villain")).toBeInTheDocument() expect(screen.getByText(/FIGHT !/)).toBeInTheDocument() }) + + it("refreshes the fight list on a fight", async () => { + await act(async () => { + render() + }) + const getFightCallCount = getFights.mock.calls.length + await act(async () => { + fireEvent.click(screen.getByText(/FIGHT !/i)) + }) + expect(getFights).toHaveBeenCalledTimes(getFightCallCount + 1) + }) + + it("renders a new fight row on a fight", async () => { + await act(async () => { + render() + }) + + // Do a fight, to get all the fight output populated so we can count properly + await act(async () => { + fireEvent.click(screen.getByText(/FIGHT !/i)) + }) + + const winnerCount = screen.queryAllByText("Some villain").length + await act(async () => { + fireEvent.click(screen.getByText(/FIGHT !/i)) + }) + // There should be an extra row, which means an extra occurence of the villain name + expect(screen.queryAllByText("Some villain")).toHaveLength(winnerCount + 1) + }) }) diff --git a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight-list/FightList.js b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight-list/FightList.js index e9eaa66b4..aed606178 100644 --- a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight-list/FightList.js +++ b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight-list/FightList.js @@ -1,15 +1,4 @@ -import {useEffect, useState} from "react" -import {getFights} from "../shared/api/fight-service" - -export function FightList() { - - - const [fights, setFights] = useState() - - useEffect(() => { - getFights().then(answer => setFights(answer)) - }, [] - ) +export function FightList({fights}) { return ( diff --git a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight-list/FightList.test.js b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight-list/FightList.test.js index 3989539ff..08a995a12 100644 --- a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight-list/FightList.test.js +++ b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight-list/FightList.test.js @@ -2,11 +2,8 @@ import React from "react" import {render, screen, within} from "@testing-library/react" import "@testing-library/jest-dom" import {FightList} from "./FightList" -import {getFights} from "../shared/api/fight-service" import {act} from "react-dom/test-utils" -jest.mock("../shared/api/fight-service") - const fight = { fightDate: "2023-10-24T21:34:47.617598Z", id: 200, @@ -23,18 +20,18 @@ const fight = { } describe("the fight list", () => { - beforeEach(() => { - getFights.mockResolvedValue([fight]) - }) - afterAll(() => { - jest.resetAllMocks() - }) + it("handles missing fights gracefully", async () => { + await act(async () => { + render() + }) + // We don't care too much if it renders headings or shows blank, we just want there not to be an error + }) it("renders a table with column headings", async () => { await act(async () => { - render() + render() }) const table = screen.getByRole("table") @@ -65,7 +62,7 @@ describe("the fight list", () => { it("renders rows for the fights", async () => { await act(async () => { - render() + render() }) expect(screen.getByText("Fake hero")).toBeInTheDocument() diff --git a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight/Fight.js b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight/Fight.js index 756dbca69..1cde43776 100644 --- a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight/Fight.js +++ b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight/Fight.js @@ -4,7 +4,7 @@ import {faComment} from "@fortawesome/free-solid-svg-icons" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" -function Fight() { +function Fight({onFight}) { const [fighters, setFighters] = useState() const [fightResult, setFightResult] = useState() const [narration, setNarration] = useState() @@ -21,7 +21,10 @@ function Fight() { } const fight = () => { - startFight(fighters).then(response => setFightResult(response)) + startFight(fighters).then(response => { + setFightResult(response) + onFight() + }) } // This initialises the component on its initial load with a call to get fighters diff --git a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight/Fight.test.js b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight/Fight.test.js index d1cd7df96..4b051b290 100644 --- a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight/Fight.test.js +++ b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/fight/Fight.test.js @@ -61,6 +61,8 @@ describe("the fight visualisation", () => { }) describe("when a back end is available", () => { + const onFight = jest.fn() + beforeEach(() => { getRandomFighters.mockResolvedValue(fighters) startFight.mockResolvedValue(fight) @@ -73,7 +75,7 @@ describe("the fight visualisation", () => { it("renders fighters", async () => { await act(async () => { - render() + render() }) expect(screen.getByText("Fake hero")).toBeInTheDocument() expect(screen.getByText("Fake villain")).toBeInTheDocument() @@ -81,7 +83,7 @@ describe("the fight visualisation", () => { it("renders a fight button", async () => { await act(async () => { - render() + render() }) const button = screen.getByText(/FIGHT !/i) expect(button).toBeInTheDocument() @@ -89,7 +91,7 @@ describe("the fight visualisation", () => { it("renders winners when the fight button is clicked", async () => { await act(async () => { - render() + render() }) const nameCount = screen.getAllByText("Fake villain").length @@ -105,7 +107,7 @@ describe("the fight visualisation", () => { it("renders narration when the narrate button is clicked", async () => { await act(async () => { - render() + render() }) const nameCount = screen.getAllByText("Fake villain").length @@ -121,6 +123,18 @@ describe("the fight visualisation", () => { expect(screen.getByText(narration)).toBeInTheDocument() }) + it("triggers the onFight callback", async () => { + await act(async () => { + render() + }) + + const nameCount = screen.getAllByText("Fake villain").length + + await act(async () => { + fireEvent.click(screen.getByText(/FIGHT !/i)) + }) + expect(onFight).toHaveBeenCalled() + }) }) From 1795996274dd1c4f0f1236d96396a588dd40ce0e Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Mon, 20 Nov 2023 15:51:20 +0000 Subject: [PATCH 2/2] Tidy test warnings by using better test data --- .../ui-super-heroes/src/main/webui/src/app/App.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.test.js b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.test.js index 600619c8f..770fff9fb 100644 --- a/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.test.js +++ b/quarkus-workshop-super-heroes/super-heroes/ui-super-heroes/src/main/webui/src/app/App.test.js @@ -51,8 +51,8 @@ describe("renders the elements", () => { // To make the row-counting test work, we need the behaviour of getFights to change on each call getFights.mockResolvedValueOnce([fight]) - getFights.mockResolvedValueOnce([fight, fight]) - getFights.mockResolvedValueOnce([fight, fight, fight]) + getFights.mockResolvedValueOnce([{...fight, id: 201}, fight]) + getFights.mockResolvedValueOnce([{...fight, id: 202}, {...fight, id: 201}, fight]) }) afterAll(() => {