From 6669ffad92d4bd98218097868d381d9280eb9fca Mon Sep 17 00:00:00 2001 From: Austin Cory Bart Date: Sat, 19 Feb 2022 15:23:47 -0500 Subject: [PATCH 1/8] First draft of components subtasks --- public/tasks/task-components.md | 5 +++ src/App.tsx | 12 +++++++ src/bad-components/ColoredBox.tsx | 41 ++++++++++++++++++++++ src/bad-components/DoubleHalf.tsx | 21 +++++++++++ src/bad-components/DoubleHalfState.tsx | 3 ++ src/bad-components/ShoveBox.tsx | 48 ++++++++++++++++++++++++++ src/bad-components/TrackingNumbers.tsx | 38 ++++++++++++++++++++ 7 files changed, 168 insertions(+) create mode 100644 public/tasks/task-components.md create mode 100644 src/bad-components/ColoredBox.tsx create mode 100644 src/bad-components/DoubleHalf.tsx create mode 100644 src/bad-components/DoubleHalfState.tsx create mode 100644 src/bad-components/ShoveBox.tsx create mode 100644 src/bad-components/TrackingNumbers.tsx diff --git a/public/tasks/task-components.md b/public/tasks/task-components.md new file mode 100644 index 0000000000..a6ff48694d --- /dev/null +++ b/public/tasks/task-components.md @@ -0,0 +1,5 @@ +# Task - Components + +Version: 0.0.1 + +Fix some components that are using state incorrectly. diff --git a/src/App.tsx b/src/App.tsx index 504138f1c3..98499aa554 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,10 @@ import { StartAttempt } from "./components/StartAttempt"; import { TwoDice } from "./components/TwoDice"; import { CycleHoliday } from "./components/CycleHoliday"; import { Counter } from "./components/Counter"; +import { DoubleHalf } from "./bad-components/DoubleHalf"; +import { ColoredBox } from "./bad-components/ColoredBox"; +import { ShoveBox } from "./bad-components/ShoveBox"; +import { TrackingNumbers } from "./bad-components/TrackingNumbers"; function App(): JSX.Element { return ( @@ -14,6 +18,14 @@ function App(): JSX.Element { UD CISC275 with React Hooks and TypeScript
+ {/* */} +
+ +
+ +
+ +
diff --git a/src/bad-components/ColoredBox.tsx b/src/bad-components/ColoredBox.tsx new file mode 100644 index 0000000000..622f77fd31 --- /dev/null +++ b/src/bad-components/ColoredBox.tsx @@ -0,0 +1,41 @@ +import React, { useState } from "react"; +import { Button } from "react-bootstrap"; + +export const COLORS = ["red", "blue", "green"]; +const DEFAULT_COLOR_INDEX = 0; + +function ChangeColor(): JSX.Element { + const [colorIndex, setColorIndex] = useState(DEFAULT_COLOR_INDEX); + return ( + + ); +} + +function ColorPreview(): JSX.Element { + return ( +
+ ); +} + +export function ColoredBox(): JSX.Element { + return ( +
+ The current color is: {COLORS[DEFAULT_COLOR_INDEX]} +
+ + +
+
+ ); +} diff --git a/src/bad-components/DoubleHalf.tsx b/src/bad-components/DoubleHalf.tsx new file mode 100644 index 0000000000..a8376dbea2 --- /dev/null +++ b/src/bad-components/DoubleHalf.tsx @@ -0,0 +1,21 @@ +import React, { useState } from "react"; +import { Button } from "react-bootstrap"; +import { dhValue, setDhValue } from "./DoubleHalfState"; + +function Doubler(): JSX.Element { + return ; +} + +function Halver(): JSX.Element { + return ; +} + +export function DoubleHalf(): JSX.Element { + return ( +
+ The current value is: {dhValue} + + +
+ ); +} diff --git a/src/bad-components/DoubleHalfState.tsx b/src/bad-components/DoubleHalfState.tsx new file mode 100644 index 0000000000..2b4569a37a --- /dev/null +++ b/src/bad-components/DoubleHalfState.tsx @@ -0,0 +1,3 @@ +import { useState } from "react"; + +export const [dhValue, setDhValue] = useState(10); diff --git a/src/bad-components/ShoveBox.tsx b/src/bad-components/ShoveBox.tsx new file mode 100644 index 0000000000..d0b4ec0561 --- /dev/null +++ b/src/bad-components/ShoveBox.tsx @@ -0,0 +1,48 @@ +import React, { useState } from "react"; +import { Button } from "react-bootstrap"; + +function ShoveBoxButton({ + position, + setPosition +}: { + position: number; + setPosition: (newPosition: number) => void; +}) { + return ( + + ); +} + +function MoveableBox(): JSX.Element { + const [position, setPosition] = useState(10); + return ( +
+ ); +} + +export function ShoveBox(): JSX.Element { + const box = MoveableBox(); + + return ( +
+ {/* The box is at: {box.position} +
+ + {box} +
*/} +
+ ); +} diff --git a/src/bad-components/TrackingNumbers.tsx b/src/bad-components/TrackingNumbers.tsx new file mode 100644 index 0000000000..910e273ed1 --- /dev/null +++ b/src/bad-components/TrackingNumbers.tsx @@ -0,0 +1,38 @@ +import React, { useState } from "react"; +import { Button } from "react-bootstrap"; + +export function TrackingNumbers(): JSX.Element { + const [latestNumber, setLatestNumber] = useState(0); + const [trackedNumbers, setTrackedNumbers] = useState([]); + + function stopTracking(targetNumber: number) { + const withoutNumber = trackedNumbers.filter( + (aNumber: number) => aNumber !== targetNumber + ); + setTrackedNumbers(withoutNumber); + } + + function trackNumber() { + setLatestNumber(1 + latestNumber); + const withNumber = [...trackedNumbers, latestNumber]; + setTrackedNumbers(withNumber); + } + + // Uncomment the below and fix the error! + return ( +
+ {/*
    + {trackedNumbers.map((trackedNumber: number) => ( +
  1. + Tracking {trackedNumber} ( + + ) +
    2. + ))} +
*/} + +
+ ); +} From 562f3067fd1fce48bd3ed2cb4cb6bfe1e24d65f5 Mon Sep 17 00:00:00 2001 From: Austin Cory Bart Date: Thu, 24 Feb 2022 10:48:53 -0500 Subject: [PATCH 2/8] Another subtask, ChooseTeam --- src/App.tsx | 3 ++ src/bad-components/ChooseTeam.tsx | 54 +++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 src/bad-components/ChooseTeam.tsx diff --git a/src/App.tsx b/src/App.tsx index 98499aa554..d4ec176137 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,7 @@ import { DoubleHalf } from "./bad-components/DoubleHalf"; import { ColoredBox } from "./bad-components/ColoredBox"; import { ShoveBox } from "./bad-components/ShoveBox"; import { TrackingNumbers } from "./bad-components/TrackingNumbers"; +import { ChooseTeam } from "./bad-components/ChooseTeam"; function App(): JSX.Element { return ( @@ -20,6 +21,8 @@ function App(): JSX.Element {
{/* */}
+ +
diff --git a/src/bad-components/ChooseTeam.tsx b/src/bad-components/ChooseTeam.tsx new file mode 100644 index 0000000000..f2c3cd49f0 --- /dev/null +++ b/src/bad-components/ChooseTeam.tsx @@ -0,0 +1,54 @@ +import React, { useState } from "react"; +import { Button, Row, Col } from "react-bootstrap"; + +const PEOPLE = [ + "Alan Turing", + "Grace Hopper", + "Ada Lovelace", + "Charles Babbage", + "Barbara Liskov", + "Margaret Hamilton" +]; + +export function ChooseTeam(): JSX.Element { + const [allOptions, setAllOptions] = useState(PEOPLE); + const [team, setTeam] = useState([]); + + function chooseMember() { + /* + if (!team.includes(newMember)) { + team.push(newMember); + } + */ + } + + function clearTeam() { + /* + team = []; + */ + } + + return ( +
+ + + {allOptions.map((option: string) => ( +
+ Add{" "} + +
+ ))} + + + Team: + {team.map((member: string) => ( +
  • {member}
    • + ))} + + +     +
    + ); +} From 4a34f5fa59524db440c37c83f2edcbb1b640096c Mon Sep 17 00:00:00 2001 From: Austin Cory Bart Date: Thu, 24 Feb 2022 11:33:41 -0500 Subject: [PATCH 3/8] Oops order out of operations --- src/bad-components/ColoredBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/bad-components/ColoredBox.tsx b/src/bad-components/ColoredBox.tsx index 622f77fd31..5e2a9f7ac8 100644 --- a/src/bad-components/ColoredBox.tsx +++ b/src/bad-components/ColoredBox.tsx @@ -7,7 +7,7 @@ const DEFAULT_COLOR_INDEX = 0; function ChangeColor(): JSX.Element { const [colorIndex, setColorIndex] = useState(DEFAULT_COLOR_INDEX); return ( - ); From 7327f4c2f93d210353eba03e002770d1d6503174 Mon Sep 17 00:00:00 2001 From: Austin Cory Bart Date: Thu, 24 Feb 2022 11:41:03 -0500 Subject: [PATCH 4/8] Add headers to each subtask --- src/bad-components/ChooseTeam.tsx | 1 + src/bad-components/ColoredBox.tsx | 1 + src/bad-components/DoubleHalf.tsx | 1 + src/bad-components/ShoveBox.tsx | 1 + src/bad-components/TrackingNumbers.tsx | 1 + 5 files changed, 5 insertions(+) diff --git a/src/bad-components/ChooseTeam.tsx b/src/bad-components/ChooseTeam.tsx index f2c3cd49f0..c02334e661 100644 --- a/src/bad-components/ChooseTeam.tsx +++ b/src/bad-components/ChooseTeam.tsx @@ -30,6 +30,7 @@ export function ChooseTeam(): JSX.Element { return (
    +

    Choose Team

    {allOptions.map((option: string) => ( diff --git a/src/bad-components/ColoredBox.tsx b/src/bad-components/ColoredBox.tsx index 5e2a9f7ac8..0a5bb83d96 100644 --- a/src/bad-components/ColoredBox.tsx +++ b/src/bad-components/ColoredBox.tsx @@ -31,6 +31,7 @@ function ColorPreview(): JSX.Element { export function ColoredBox(): JSX.Element { return (
    +

    Colored Box

    The current color is: {COLORS[DEFAULT_COLOR_INDEX]}
    diff --git a/src/bad-components/DoubleHalf.tsx b/src/bad-components/DoubleHalf.tsx index a8376dbea2..f3871eeec6 100644 --- a/src/bad-components/DoubleHalf.tsx +++ b/src/bad-components/DoubleHalf.tsx @@ -13,6 +13,7 @@ function Halver(): JSX.Element { export function DoubleHalf(): JSX.Element { return (
    +

    Double Half

    The current value is: {dhValue} diff --git a/src/bad-components/ShoveBox.tsx b/src/bad-components/ShoveBox.tsx index d0b4ec0561..910aca490b 100644 --- a/src/bad-components/ShoveBox.tsx +++ b/src/bad-components/ShoveBox.tsx @@ -35,6 +35,7 @@ export function ShoveBox(): JSX.Element { return (
    +

    Shove Box

    {/* The box is at: {box.position}
    +

    Tracking Numbers

    {/*
      {trackedNumbers.map((trackedNumber: number) => (
    1. From cf7c212a6631e9ef7c9f9c4b4dfd5d3cac72acb5 Mon Sep 17 00:00:00 2001 From: Austin Cory Bart Date: Thu, 24 Feb 2022 13:00:45 -0500 Subject: [PATCH 5/8] Make testing easier for these components --- src/bad-components/ColoredBox.tsx | 1 + src/bad-components/DoubleHalf.tsx | 4 +++- src/bad-components/ShoveBox.tsx | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/bad-components/ColoredBox.tsx b/src/bad-components/ColoredBox.tsx index 0a5bb83d96..a3c3c3f077 100644 --- a/src/bad-components/ColoredBox.tsx +++ b/src/bad-components/ColoredBox.tsx @@ -16,6 +16,7 @@ function ChangeColor(): JSX.Element { function ColorPreview(): JSX.Element { return (

      Double Half

      - The current value is: {dhValue} +
      + The current value is: {dhValue} +
      diff --git a/src/bad-components/ShoveBox.tsx b/src/bad-components/ShoveBox.tsx index 910aca490b..7c55142636 100644 --- a/src/bad-components/ShoveBox.tsx +++ b/src/bad-components/ShoveBox.tsx @@ -17,6 +17,7 @@ function MoveableBox(): JSX.Element { const [position, setPosition] = useState(10); return (
      Date: Thu, 24 Feb 2022 13:01:04 -0500 Subject: [PATCH 6/8] Ugh this component is stupid, let's just forget about it for now --- src/App.tsx | 3 -- src/bad-components/TrackingNumbers.tsx | 39 -------------------------- 2 files changed, 42 deletions(-) delete mode 100644 src/bad-components/TrackingNumbers.tsx diff --git a/src/App.tsx b/src/App.tsx index d4ec176137..e09c26ec76 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,6 @@ import { Counter } from "./components/Counter"; import { DoubleHalf } from "./bad-components/DoubleHalf"; import { ColoredBox } from "./bad-components/ColoredBox"; import { ShoveBox } from "./bad-components/ShoveBox"; -import { TrackingNumbers } from "./bad-components/TrackingNumbers"; import { ChooseTeam } from "./bad-components/ChooseTeam"; function App(): JSX.Element { @@ -27,8 +26,6 @@ function App(): JSX.Element {
      - -
      diff --git a/src/bad-components/TrackingNumbers.tsx b/src/bad-components/TrackingNumbers.tsx deleted file mode 100644 index 70a9a7c7de..0000000000 --- a/src/bad-components/TrackingNumbers.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useState } from "react"; -import { Button } from "react-bootstrap"; - -export function TrackingNumbers(): JSX.Element { - const [latestNumber, setLatestNumber] = useState(0); - const [trackedNumbers, setTrackedNumbers] = useState([]); - - function stopTracking(targetNumber: number) { - const withoutNumber = trackedNumbers.filter( - (aNumber: number) => aNumber !== targetNumber - ); - setTrackedNumbers(withoutNumber); - } - - function trackNumber() { - setLatestNumber(1 + latestNumber); - const withNumber = [...trackedNumbers, latestNumber]; - setTrackedNumbers(withNumber); - } - - // Uncomment the below and fix the error! - return ( -
      -

      Tracking Numbers

      - {/*
        - {trackedNumbers.map((trackedNumber: number) => ( -
      1. - Tracking {trackedNumber} ( - - ) -
        2. - ))} -
      */} - -
      - ); -} From 89053a45855b254fb0363d8f002ac5535524e77f Mon Sep 17 00:00:00 2001 From: Austin Cory Bart Date: Thu, 24 Feb 2022 13:03:58 -0500 Subject: [PATCH 7/8] Provide the tests for the bad components --- src/bad-components/ChooseTeam.test.tsx | 61 ++++++++++++++++++++++++++ src/bad-components/ColoredBox.test.tsx | 31 +++++++++++++ src/bad-components/DoubleHalf.test.tsx | 56 +++++++++++++++++++++++ src/bad-components/ShoveBox.test.tsx | 31 +++++++++++++ 4 files changed, 179 insertions(+) create mode 100644 src/bad-components/ChooseTeam.test.tsx create mode 100644 src/bad-components/ColoredBox.test.tsx create mode 100644 src/bad-components/DoubleHalf.test.tsx create mode 100644 src/bad-components/ShoveBox.test.tsx diff --git a/src/bad-components/ChooseTeam.test.tsx b/src/bad-components/ChooseTeam.test.tsx new file mode 100644 index 0000000000..f11465a2d6 --- /dev/null +++ b/src/bad-components/ChooseTeam.test.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { ChooseTeam } from "./ChooseTeam"; + +describe("ChooseTeam Component tests", () => { + beforeEach(() => { + render(); + }); + test("The initial team is empty", () => { + const currentTeam = screen.queryAllByRole("listitem"); + expect(currentTeam).toHaveLength(0); + }); + test("There are 7 buttons.", () => { + const adders = screen.queryAllByRole("button"); + expect(adders).toHaveLength(7); + }); + test("Clicking first team member works", () => { + const first = screen.queryAllByRole("button")[0]; + first.click(); + const currentTeam = screen.queryAllByRole("listitem"); + expect(currentTeam).toHaveLength(1); + expect(currentTeam[0].textContent).toEqual(first.textContent); + }); + test("Clicking the third team member works", () => { + const third = screen.queryAllByRole("button")[2]; + third.click(); + const currentTeam = screen.queryAllByRole("listitem"); + expect(currentTeam).toHaveLength(1); + expect(currentTeam[0].textContent).toEqual(third.textContent); + }); + test("Clicking three team members works", () => { + const [, second, third, , fifth] = screen.queryAllByRole("button"); + third.click(); + second.click(); + fifth.click(); + const currentTeam = screen.queryAllByRole("listitem"); + expect(currentTeam).toHaveLength(3); + expect(currentTeam[0].textContent).toEqual(third.textContent); + expect(currentTeam[1].textContent).toEqual(second.textContent); + expect(currentTeam[2].textContent).toEqual(fifth.textContent); + }); + test("Clearing the team works", () => { + const [, second, third, fourth, fifth, , clear] = + screen.queryAllByRole("button"); + third.click(); + second.click(); + fifth.click(); + let currentTeam = screen.queryAllByRole("listitem"); + expect(currentTeam).toHaveLength(3); + expect(currentTeam[0].textContent).toEqual(third.textContent); + expect(currentTeam[1].textContent).toEqual(second.textContent); + expect(currentTeam[2].textContent).toEqual(fifth.textContent); + clear.click(); + currentTeam = screen.queryAllByRole("listitem"); + expect(currentTeam).toHaveLength(0); + fourth.click(); + currentTeam = screen.queryAllByRole("listitem"); + expect(currentTeam).toHaveLength(1); + expect(currentTeam[0].textContent).toEqual(fourth.textContent); + }); +}); diff --git a/src/bad-components/ColoredBox.test.tsx b/src/bad-components/ColoredBox.test.tsx new file mode 100644 index 0000000000..c17a13f66c --- /dev/null +++ b/src/bad-components/ColoredBox.test.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { ColoredBox } from "./ColoredBox"; + +describe("ColoredBox Component tests", () => { + beforeEach(() => { + render(); + }); + test("The ColoredBox is initially red.", () => { + const box = screen.getByTestId("colored-box"); + expect(box).toHaveStyle({ backgroundColor: "red" }); + }); + test("There is a button", () => { + expect(screen.getByRole("button")).toBeInTheDocument(); + }); + test("Clicking the button advances the color.", () => { + const nextColor = screen.getByRole("button"); + nextColor.click(); + expect(screen.getByTestId("colored-box")).toHaveStyle({ + backgroundColor: "blue" + }); + nextColor.click(); + expect(screen.getByTestId("colored-box")).toHaveStyle({ + backgroundColor: "green" + }); + nextColor.click(); + expect(screen.getByTestId("colored-box")).toHaveStyle({ + backgroundColor: "red" + }); + }); +}); diff --git a/src/bad-components/DoubleHalf.test.tsx b/src/bad-components/DoubleHalf.test.tsx new file mode 100644 index 0000000000..cbae5f68af --- /dev/null +++ b/src/bad-components/DoubleHalf.test.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { DoubleHalf } from "./DoubleHalf"; + +describe("DoubleHalf Component tests", () => { + beforeEach(() => { + render(); + }); + test("The DoubleHalf value is initially 10", () => { + expect(screen.getByText("10")).toBeInTheDocument(); + expect(screen.queryByText("20")).not.toBeInTheDocument(); + expect(screen.queryByText("5")).not.toBeInTheDocument(); + }); + test("There are Double and Halve buttons", () => { + expect( + screen.getByRole("button", { name: /Double/i }) + ).toBeInTheDocument(); + expect( + screen.getByRole("button", { name: /Halve/i }) + ).toBeInTheDocument(); + }); + test("You can double the number.", () => { + const double = screen.getByRole("button", { name: /Double/i }); + double.click(); + expect(screen.getByText("20")).toBeInTheDocument(); + expect(screen.queryByText("10")).not.toBeInTheDocument(); + }); + test("You can halve the number.", () => { + const halve = screen.getByRole("button", { name: /Halve/i }); + halve.click(); + expect(screen.getByText("5")).toBeInTheDocument(); + expect(screen.queryByText("10")).not.toBeInTheDocument(); + }); + test("You can double AND halve the number.", () => { + const double = screen.getByRole("button", { name: /Double/i }); + const halve = screen.getByRole("button", { name: /Halve/i }); + double.click(); + expect(screen.getByText("20")).toBeInTheDocument(); + expect(screen.queryByText("10")).not.toBeInTheDocument(); + double.click(); + expect(screen.getByText("40")).toBeInTheDocument(); + expect(screen.queryByText("20")).not.toBeInTheDocument(); + halve.click(); + expect(screen.getByText("20")).toBeInTheDocument(); + expect(screen.queryByText("10")).not.toBeInTheDocument(); + halve.click(); + expect(screen.getByText("10")).toBeInTheDocument(); + expect(screen.queryByText("20")).not.toBeInTheDocument(); + halve.click(); + expect(screen.getByText("5")).toBeInTheDocument(); + expect(screen.queryByText("10")).not.toBeInTheDocument(); + halve.click(); + expect(screen.getByText("2.5")).toBeInTheDocument(); + expect(screen.queryByText("5")).not.toBeInTheDocument(); + }); +}); diff --git a/src/bad-components/ShoveBox.test.tsx b/src/bad-components/ShoveBox.test.tsx new file mode 100644 index 0000000000..2adec13d4e --- /dev/null +++ b/src/bad-components/ShoveBox.test.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { ShoveBox } from "./ShoveBox"; + +describe("ShoveBox Component tests", () => { + beforeEach(() => { + render(); + }); + test("The MoveableBox is initially nearby.", () => { + const box = screen.getByTestId("moveable-box"); + expect(box).toHaveStyle({ marginLeft: "10px" }); + }); + test("There is a button", () => { + expect(screen.getByRole("button")).toBeInTheDocument(); + }); + test("Clicking the button moves the box.", () => { + const shoveBox = screen.getByRole("button"); + shoveBox.click(); + expect(screen.getByTestId("moveable-box")).toHaveStyle({ + marginLeft: "14px" + }); + shoveBox.click(); + expect(screen.getByTestId("moveable-box")).toHaveStyle({ + marginLeft: "18px" + }); + shoveBox.click(); + expect(screen.getByTestId("moveable-box")).toHaveStyle({ + marginLeft: "22px" + }); + }); +}); From 50a9c85dca9bc60f7dd875355f2c28c3988ca610 Mon Sep 17 00:00:00 2001 From: Austin Cory Bart Date: Sat, 24 Aug 2024 14:47:15 -0400 Subject: [PATCH 8/8] Update for new react --- src/bad-components/ChooseTeam.test.tsx | 54 ++++++++++++++++++-------- src/bad-components/ChooseTeam.tsx | 4 +- src/bad-components/ColoredBox.test.tsx | 26 ++++++++----- src/bad-components/ColoredBox.tsx | 14 ++++--- src/bad-components/DoubleHalf.test.tsx | 48 +++++++++++++++-------- src/bad-components/DoubleHalf.tsx | 26 ++++++++++--- src/bad-components/ShoveBox.test.tsx | 26 ++++++++----- src/bad-components/ShoveBox.tsx | 16 +++++--- 8 files changed, 144 insertions(+), 70 deletions(-) diff --git a/src/bad-components/ChooseTeam.test.tsx b/src/bad-components/ChooseTeam.test.tsx index f11465a2d6..66eee4be70 100644 --- a/src/bad-components/ChooseTeam.test.tsx +++ b/src/bad-components/ChooseTeam.test.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { act } from "react"; import { render, screen } from "@testing-library/react"; import { ChooseTeam } from "./ChooseTeam"; @@ -6,54 +6,74 @@ describe("ChooseTeam Component tests", () => { beforeEach(() => { render(); }); - test("The initial team is empty", () => { + test("(2 pts) The initial team is empty", () => { const currentTeam = screen.queryAllByRole("listitem"); expect(currentTeam).toHaveLength(0); }); - test("There are 7 buttons.", () => { + test("(2 pts) There are 7 buttons.", () => { const adders = screen.queryAllByRole("button"); expect(adders).toHaveLength(7); }); - test("Clicking first team member works", () => { + test("(2 pts) Clicking first team member works", async () => { const first = screen.queryAllByRole("button")[0]; - first.click(); + await act(async () => { + first.click(); + }); const currentTeam = screen.queryAllByRole("listitem"); expect(currentTeam).toHaveLength(1); expect(currentTeam[0].textContent).toEqual(first.textContent); }); - test("Clicking the third team member works", () => { + test("(2 pts) Clicking the third team member works", async () => { const third = screen.queryAllByRole("button")[2]; - third.click(); + await act(async () => { + third.click(); + }); const currentTeam = screen.queryAllByRole("listitem"); expect(currentTeam).toHaveLength(1); expect(currentTeam[0].textContent).toEqual(third.textContent); }); - test("Clicking three team members works", () => { + test("(2 pts) Clicking three team members works", async () => { const [, second, third, , fifth] = screen.queryAllByRole("button"); - third.click(); - second.click(); - fifth.click(); + await act(async () => { + third.click(); + }); + await act(async () => { + second.click(); + }); + await act(async () => { + fifth.click(); + }); const currentTeam = screen.queryAllByRole("listitem"); expect(currentTeam).toHaveLength(3); expect(currentTeam[0].textContent).toEqual(third.textContent); expect(currentTeam[1].textContent).toEqual(second.textContent); expect(currentTeam[2].textContent).toEqual(fifth.textContent); }); - test("Clearing the team works", () => { + test("(2 pts) Clearing the team works", async () => { const [, second, third, fourth, fifth, , clear] = screen.queryAllByRole("button"); - third.click(); - second.click(); - fifth.click(); + await act(async () => { + third.click(); + }); + await act(async () => { + second.click(); + }); + await act(async () => { + fifth.click(); + }); let currentTeam = screen.queryAllByRole("listitem"); expect(currentTeam).toHaveLength(3); expect(currentTeam[0].textContent).toEqual(third.textContent); expect(currentTeam[1].textContent).toEqual(second.textContent); expect(currentTeam[2].textContent).toEqual(fifth.textContent); - clear.click(); + await act(async () => { + clear.click(); + }); currentTeam = screen.queryAllByRole("listitem"); expect(currentTeam).toHaveLength(0); - fourth.click(); + await act(async () => { + fourth.click(); + }); currentTeam = screen.queryAllByRole("listitem"); expect(currentTeam).toHaveLength(1); expect(currentTeam[0].textContent).toEqual(fourth.textContent); diff --git a/src/bad-components/ChooseTeam.tsx b/src/bad-components/ChooseTeam.tsx index c02334e661..e73f600083 100644 --- a/src/bad-components/ChooseTeam.tsx +++ b/src/bad-components/ChooseTeam.tsx @@ -7,10 +7,10 @@ const PEOPLE = [ "Ada Lovelace", "Charles Babbage", "Barbara Liskov", - "Margaret Hamilton" + "Margaret Hamilton", ]; -export function ChooseTeam(): JSX.Element { +export function ChooseTeam(): React.JSX.Element { const [allOptions, setAllOptions] = useState(PEOPLE); const [team, setTeam] = useState([]); diff --git a/src/bad-components/ColoredBox.test.tsx b/src/bad-components/ColoredBox.test.tsx index c17a13f66c..5762afefb6 100644 --- a/src/bad-components/ColoredBox.test.tsx +++ b/src/bad-components/ColoredBox.test.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { act } from "react"; import { render, screen } from "@testing-library/react"; import { ColoredBox } from "./ColoredBox"; @@ -6,26 +6,32 @@ describe("ColoredBox Component tests", () => { beforeEach(() => { render(); }); - test("The ColoredBox is initially red.", () => { + test("(2 pts) The ColoredBox is initially red.", () => { const box = screen.getByTestId("colored-box"); expect(box).toHaveStyle({ backgroundColor: "red" }); }); - test("There is a button", () => { + test("(2 pts) There is a button", () => { expect(screen.getByRole("button")).toBeInTheDocument(); }); - test("Clicking the button advances the color.", () => { + test("(2 pts) Clicking the button advances the color.", async () => { const nextColor = screen.getByRole("button"); - nextColor.click(); + await act(async () => { + nextColor.click(); + }); expect(screen.getByTestId("colored-box")).toHaveStyle({ - backgroundColor: "blue" + backgroundColor: "blue", + }); + await act(async () => { + nextColor.click(); }); - nextColor.click(); expect(screen.getByTestId("colored-box")).toHaveStyle({ - backgroundColor: "green" + backgroundColor: "green", + }); + await act(async () => { + nextColor.click(); }); - nextColor.click(); expect(screen.getByTestId("colored-box")).toHaveStyle({ - backgroundColor: "red" + backgroundColor: "red", }); }); }); diff --git a/src/bad-components/ColoredBox.tsx b/src/bad-components/ColoredBox.tsx index a3c3c3f077..1fa2d770b2 100644 --- a/src/bad-components/ColoredBox.tsx +++ b/src/bad-components/ColoredBox.tsx @@ -4,16 +4,20 @@ import { Button } from "react-bootstrap"; export const COLORS = ["red", "blue", "green"]; const DEFAULT_COLOR_INDEX = 0; -function ChangeColor(): JSX.Element { +function ChangeColor(): React.JSX.Element { const [colorIndex, setColorIndex] = useState(DEFAULT_COLOR_INDEX); return ( - ); } -function ColorPreview(): JSX.Element { +function ColorPreview(): React.JSX.Element { return (
      ); } -export function ColoredBox(): JSX.Element { +export function ColoredBox(): React.JSX.Element { return (

      Colored Box

      diff --git a/src/bad-components/DoubleHalf.test.tsx b/src/bad-components/DoubleHalf.test.tsx index cbae5f68af..9b2a031acf 100644 --- a/src/bad-components/DoubleHalf.test.tsx +++ b/src/bad-components/DoubleHalf.test.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { act } from "react"; import { render, screen } from "@testing-library/react"; import { DoubleHalf } from "./DoubleHalf"; @@ -6,50 +6,66 @@ describe("DoubleHalf Component tests", () => { beforeEach(() => { render(); }); - test("The DoubleHalf value is initially 10", () => { + test("(2 pts) The DoubleHalf value is initially 10", () => { expect(screen.getByText("10")).toBeInTheDocument(); expect(screen.queryByText("20")).not.toBeInTheDocument(); expect(screen.queryByText("5")).not.toBeInTheDocument(); }); - test("There are Double and Halve buttons", () => { + test("(2 pts) There are Double and Halve buttons", () => { expect( - screen.getByRole("button", { name: /Double/i }) + screen.getByRole("button", { name: /Double/i }), ).toBeInTheDocument(); expect( - screen.getByRole("button", { name: /Halve/i }) + screen.getByRole("button", { name: /Halve/i }), ).toBeInTheDocument(); }); - test("You can double the number.", () => { + test("(2 pts) You can double the number.", async () => { const double = screen.getByRole("button", { name: /Double/i }); - double.click(); + await act(async () => { + double.click(); + }); expect(screen.getByText("20")).toBeInTheDocument(); expect(screen.queryByText("10")).not.toBeInTheDocument(); }); - test("You can halve the number.", () => { + test("(2 pts) You can halve the number.", async () => { const halve = screen.getByRole("button", { name: /Halve/i }); - halve.click(); + await act(async () => { + halve.click(); + }); expect(screen.getByText("5")).toBeInTheDocument(); expect(screen.queryByText("10")).not.toBeInTheDocument(); }); - test("You can double AND halve the number.", () => { + test("(2 pts) You can double AND halve the number.", async () => { const double = screen.getByRole("button", { name: /Double/i }); const halve = screen.getByRole("button", { name: /Halve/i }); - double.click(); + await act(async () => { + double.click(); + }); expect(screen.getByText("20")).toBeInTheDocument(); expect(screen.queryByText("10")).not.toBeInTheDocument(); - double.click(); + await act(async () => { + double.click(); + }); expect(screen.getByText("40")).toBeInTheDocument(); expect(screen.queryByText("20")).not.toBeInTheDocument(); - halve.click(); + await act(async () => { + halve.click(); + }); expect(screen.getByText("20")).toBeInTheDocument(); expect(screen.queryByText("10")).not.toBeInTheDocument(); - halve.click(); + await act(async () => { + halve.click(); + }); expect(screen.getByText("10")).toBeInTheDocument(); expect(screen.queryByText("20")).not.toBeInTheDocument(); - halve.click(); + await act(async () => { + halve.click(); + }); expect(screen.getByText("5")).toBeInTheDocument(); expect(screen.queryByText("10")).not.toBeInTheDocument(); - halve.click(); + await act(async () => { + halve.click(); + }); expect(screen.getByText("2.5")).toBeInTheDocument(); expect(screen.queryByText("5")).not.toBeInTheDocument(); }); diff --git a/src/bad-components/DoubleHalf.tsx b/src/bad-components/DoubleHalf.tsx index 5ae9cf4501..8b01352f59 100644 --- a/src/bad-components/DoubleHalf.tsx +++ b/src/bad-components/DoubleHalf.tsx @@ -2,15 +2,31 @@ import React, { useState } from "react"; import { Button } from "react-bootstrap"; import { dhValue, setDhValue } from "./DoubleHalfState"; -function Doubler(): JSX.Element { - return ; +function Doubler(): React.JSX.Element { + return ( + + ); } -function Halver(): JSX.Element { - return ; +function Halver(): React.JSX.Element { + return ( + + ); } -export function DoubleHalf(): JSX.Element { +export function DoubleHalf(): React.JSX.Element { return (

      Double Half

      diff --git a/src/bad-components/ShoveBox.test.tsx b/src/bad-components/ShoveBox.test.tsx index 2adec13d4e..e89abf2751 100644 --- a/src/bad-components/ShoveBox.test.tsx +++ b/src/bad-components/ShoveBox.test.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { act } from "react"; import { render, screen } from "@testing-library/react"; import { ShoveBox } from "./ShoveBox"; @@ -6,26 +6,32 @@ describe("ShoveBox Component tests", () => { beforeEach(() => { render(); }); - test("The MoveableBox is initially nearby.", () => { + test("(2 pts) The MoveableBox is initially nearby.", () => { const box = screen.getByTestId("moveable-box"); expect(box).toHaveStyle({ marginLeft: "10px" }); }); - test("There is a button", () => { + test("(2 pts) There is a button", () => { expect(screen.getByRole("button")).toBeInTheDocument(); }); - test("Clicking the button moves the box.", () => { + test("(2 pts) Clicking the button moves the box.", async () => { const shoveBox = screen.getByRole("button"); - shoveBox.click(); + await act(async () => { + shoveBox.click(); + }); expect(screen.getByTestId("moveable-box")).toHaveStyle({ - marginLeft: "14px" + marginLeft: "14px", + }); + await act(async () => { + shoveBox.click(); }); - shoveBox.click(); expect(screen.getByTestId("moveable-box")).toHaveStyle({ - marginLeft: "18px" + marginLeft: "18px", + }); + await act(async () => { + shoveBox.click(); }); - shoveBox.click(); expect(screen.getByTestId("moveable-box")).toHaveStyle({ - marginLeft: "22px" + marginLeft: "22px", }); }); }); diff --git a/src/bad-components/ShoveBox.tsx b/src/bad-components/ShoveBox.tsx index 7c55142636..45cdcc335d 100644 --- a/src/bad-components/ShoveBox.tsx +++ b/src/bad-components/ShoveBox.tsx @@ -3,17 +3,23 @@ import { Button } from "react-bootstrap"; function ShoveBoxButton({ position, - setPosition + setPosition, }: { position: number; setPosition: (newPosition: number) => void; }) { return ( - + ); } -function MoveableBox(): JSX.Element { +function MoveableBox(): React.JSX.Element { const [position, setPosition] = useState(10); return (
      ); } -export function ShoveBox(): JSX.Element { +export function ShoveBox(): React.JSX.Element { const box = MoveableBox(); return (