fix(inff): Solved components

.github/workflows/deploy.yml

@@ -30,7 +30,7 @@ jobs:
               with:
                   fetch-depth: 0
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: ${{ matrix.node-version }}
             - id: get-repo-values
@@ -39,7 +39,7 @@ jobs:
                   url=https://$(echo "${{github.repository}}" | sed "s/\//.github.io\//")
                   echo "url=$url" >> $GITHUB_OUTPUT
             - name: Update package.json homepage
-              uses: jossef/action-set-json-field@v1
+              uses: jossef/action-set-json-field@v2.1
               with:
                   file: package.json
                   field: homepage
@@ -134,14 +134,14 @@ jobs:
             #      echo "</body></html>" >> ./dist/index.html
             # Deploy
             - name: Setup Pages
-              uses: actions/configure-pages@v3
+              uses: actions/configure-pages@v5
               if: ${{ !cancelled() }}
             - name: Upload artifact
-              uses: actions/upload-pages-artifact@v2
+              uses: actions/upload-pages-artifact@v3
               if: ${{ !cancelled() }}
               with:
                   path: "dist/"
             - name: Deploy to GitHub Pages
               id: deployment
-              uses: actions/deploy-pages@v2
+              uses: actions/deploy-pages@v4
               if: ${{ !cancelled() }}

package.json

@@ -20,6 +20,7 @@
         "build": "react-scripts build",
         "test": "react-scripts test",
         "test:cov": "react-scripts test --coverage --watchAll",
+        "test:json": "react-scripts test --json --watchAll=false --outputFile jest-output.json --coverage",
         "eject": "react-scripts eject",
         "lint": "eslint ./src --ext .tsx --ext .ts --max-warnings 0",
         "eslint-output": "eslint-output ./src --ext .tsx --ext .ts --max-warnings 0",

public/tasks/task-components.md

@@ -0,0 +1,5 @@
+# Task - Components
+
+Version: 0.0.1
+
+Fix some components that are using state incorrectly.

public/tasks/task-nested.md

@@ -0,0 +1,5 @@
+# Task - Nested
+
+Version: 0.0.1
+
+Implement functions that work with nested arrays and objects immutably.

public/tasks/task-objects.md

@@ -0,0 +1,5 @@
+# Task - Objects
+
+Version: 0.0.1
+
+Implement functions that work with objects immutably.

public/tasks/task-state.md

@@ -0,0 +1,5 @@
+# Task - State
+
+Version: 0.0.1
+
+Create some new components that have React State.

src/App.tsx

@@ -1,16 +1,33 @@
 import React from "react";
 import "./App.css";
+import { ChangeType } from "./components/ChangeType";
+import { RevealAnswer } from "./components/RevealAnswer";
+import { TwoDice } from "./components/TwoDice";
+import { Counter } from "./components/Counter";
+import { DoubleHalf } from "./bad-components/DoubleHalf";
+import { ColoredBox } from "./bad-components/ColoredBox";
+import { ChooseTeam } from "./bad-components/ChooseTeam";
 
 function App(): React.JSX.Element {
     return (
         <div className="App">
             <header className="App-header">
                 UM COS420 with React Hooks and TypeScript
             </header>
-            <p>
-                Edit <code>src/App.tsx</code> and save. This page will
-                automatically reload.
-            </p>
+            <hr></hr>
+            {/* <DoubleHalf></DoubleHalf> */}
+            <hr></hr>
+            <ChooseTeam></ChooseTeam>
+            <hr></hr>
+            <ColoredBox></ColoredBox>
+            <hr></hr>
+            <Counter></Counter>
+            <hr />
+            <RevealAnswer></RevealAnswer>
+            <hr />
+            <TwoDice></TwoDice>
+            <hr />
+            <ChangeType></ChangeType>
         </div>
     );
 }

src/bad-components/ChooseTeam.test.tsx

@@ -0,0 +1,81 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ChooseTeam } from "./ChooseTeam";
+
+describe("ChooseTeam Component tests", () => {
+    beforeEach(() => {
+        render(<ChooseTeam />);
+    });
+    test("(2 pts) The initial team is empty", () => {
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(0);
+    });
+    test("(2 pts) There are 7 buttons.", () => {
+        const adders = screen.queryAllByRole("button");
+        expect(adders).toHaveLength(7);
+    });
+    test("(2 pts) Clicking first team member works", async () => {
+        const first = screen.queryAllByRole("button")[0];
+        await act(async () => {
+            first.click();
+        });
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(1);
+        expect(currentTeam[0].textContent).toEqual(first.textContent);
+    });
+    test("(2 pts) Clicking the third team member works", async () => {
+        const third = screen.queryAllByRole("button")[2];
+        await act(async () => {
+            third.click();
+        });
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(1);
+        expect(currentTeam[0].textContent).toEqual(third.textContent);
+    });
+    test("(2 pts) Clicking three team members works", async () => {
+        const [, second, third, , fifth] = screen.queryAllByRole("button");
+        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("(2 pts) Clearing the team works", async () => {
+        const [, second, third, fourth, fifth, , clear] =
+            screen.queryAllByRole("button");
+        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);
+        await act(async () => {
+            clear.click();
+        });
+        currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(0);
+        await act(async () => {
+            fourth.click();
+        });
+        currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(1);
+        expect(currentTeam[0].textContent).toEqual(fourth.textContent);
+    });
+});

src/bad-components/ChooseTeam.tsx

@@ -0,0 +1,56 @@
+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(): React.JSX.Element {
+    const [allOptions] = useState<string[]>(PEOPLE);
+    const [team, setTeam] = useState<string[]>([]);
+
+    function chooseMember(newMember: string) {
+        if (!team.includes(newMember)) {
+            setTeam([...team, newMember]);
+        }
+    }
+
+    function clearTeam() {
+        setTeam([]);
+    }
+
+    return (
+        <div>
+            <h3>Choose Team</h3>
+            <Row>
+                <Col>
+                    {allOptions.map((option: string) => (
+                        <div key={option} style={{ marginBottom: "4px" }}>
+                            Add{" "}
+                            <Button
+                                onClick={() => { chooseMember(option); }}
+                                size="sm"
+                            >
+                                {option}
+                            </Button>
+                        </div>
+                    ))}
+                </Col>
+                <Col>
+                    <strong>Team:</strong>
+                    <ul>
+                        {team.map((member: string) => (
+                            <li key={member}>{member}</li>
+                        ))}
+                    </ul>
+                    <Button onClick={clearTeam}>Clear Team</Button>
+                </Col>
+            </Row>
+        </div>
+    );
+}

src/bad-components/ColoredBox.test.tsx

@@ -0,0 +1,37 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ColoredBox } from "./ColoredBox";
+
+describe("ColoredBox Component tests", () => {
+    beforeEach(() => {
+        render(<ColoredBox />);
+    });
+    test("(2 pts) The ColoredBox is initially red.", () => {
+        const box = screen.getByTestId("colored-box");
+        expect(box).toHaveStyle({ backgroundColor: "red" });
+    });
+    test("(2 pts) There is a button", () => {
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    test("(2 pts) Clicking the button advances the color.", async () => {
+        const nextColor = screen.getByRole("button");
+        await act(async () => {
+            nextColor.click();
+        });
+        expect(screen.getByTestId("colored-box")).toHaveStyle({
+            backgroundColor: "blue",
+        });
+        await act(async () => {
+            nextColor.click();
+        });
+        expect(screen.getByTestId("colored-box")).toHaveStyle({
+            backgroundColor: "green",
+        });
+        await act(async () => {
+            nextColor.click();
+        });
+        expect(screen.getByTestId("colored-box")).toHaveStyle({
+            backgroundColor: "red",
+        });
+    });
+});

src/bad-components/ColoredBox.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+export const COLORS = ["red", "blue", "green"];
+const DEFAULT_COLOR_INDEX = 0;
+
+function ChangeColor({
+    colorIndex,
+    setColorIndex,
+}: {
+    colorIndex: number;
+    setColorIndex: (index: number) => void;
+}): React.JSX.Element {
+    return (
+        <Button
+            onClick={() => {
+                setColorIndex((colorIndex + 1) % COLORS.length);
+            }}
+        >
+            Next Color
+        </Button>
+    );
+}
+
+function ColorPreview({
+    colorIndex,
+}: {
+    colorIndex: number;
+}): React.JSX.Element {
+    return (
+        <div
+            data-testid="colored-box"
+            style={{
+                width: "50px",
+                height: "50px",
+                backgroundColor: COLORS[colorIndex],
+                display: "inline-block",
+                verticalAlign: "bottom",
+                marginLeft: "5px",
+            }}
+        ></div>
+    );
+}
+
+export function ColoredBox(): React.JSX.Element {
+    const [colorIndex, setColorIndex] = useState<number>(DEFAULT_COLOR_INDEX);
+
+    return (
+        <div>
+            <h3>Colored Box</h3>
+            <span>The current color is: {COLORS[colorIndex]}</span>
+            <div>
+                <ChangeColor
+                    colorIndex={colorIndex}
+                    setColorIndex={setColorIndex}
+                />
+                <ColorPreview colorIndex={colorIndex} />
+            </div>
+        </div>
+    );
+}