Solved state

.eslintrc.json

@@ -0,0 +1,50 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["react", "@typescript-eslint", "prettier"],
+    "rules": {
+        "prettier/prettier": [
+            "error",
+            {
+                "endOfLine": "auto"
+            }
+        ],
+        "no-extra-parens": [
+            "warn",
+            "all",
+            {
+                "nestedBinaryExpressions": false,
+                "returnAssign": false,
+                "enforceForArrowConditionals": false,
+                "ignoreJSX": "all"
+            }
+        ],
+        "brace-style": ["error", "1tbs"],
+        "indent": ["error", 4],
+        "quotes": ["error", "double"],
+        "semi": ["error", "always"]
+    }
+}

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-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,30 @@
 import React from "react";
 import "./App.css";
+import { ChangeType } from "./components/ChangeType";
+import { RevealAnswer } from "./components/RevealAnswer";
+import { StartAttempt } from "./components/StartAttempt";
+import { TwoDice } from "./components/TwoDice";
+import { CycleHoliday } from "./components/CycleHoliday";
+import { Counter } from "./components/Counter";
 
 function App(): React.JSX.Element {
     return (
         <div className="App">
             <header className="App-header">
                 UD CISC275 with React Hooks and TypeScript
             </header>
-            <p>
-                Edit <code>src/App.tsx</code> and save. This page will
-                automatically reload.
-            </p>
+            <hr></hr>
+            <Counter></Counter>
+            <hr />
+            <RevealAnswer></RevealAnswer>
+            <hr />
+            <StartAttempt></StartAttempt>
+            <hr />
+            <TwoDice></TwoDice>
+            <hr />
+            <ChangeType></ChangeType>
+            <hr />
+            <CycleHoliday></CycleHoliday>
         </div>
     );
 }

src/components/ChangeType.test.tsx

@@ -0,0 +1,59 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ChangeType } from "./ChangeType";
+
+describe("ChangeType Component tests", () => {
+    beforeEach(() => {
+        render(<ChangeType />);
+    });
+    test("(1 pts) The initial type is Short Answer", () => {
+        // We use `getByText` because the text MUST be there
+        const typeText = screen.getByText(/Short Answer/i);
+        expect(typeText).toBeInTheDocument();
+    });
+    test("(1 pts) The initial type is not Multiple Choice", () => {
+        // We use `queryByText` because the text might not be there
+        const typeText = screen.queryByText(/Multiple Choice/i);
+        expect(typeText).toBeNull();
+    });
+
+    test("(1 pts) There is a button labeled Change Type", () => {
+        const changeTypeButton = screen.getByRole("button", {
+            name: /Change Type/i
+        });
+        expect(changeTypeButton).toBeInTheDocument();
+    });
+
+    test("(1 pts) Clicking the button changes the type.", async () => {
+        const changeTypeButton = screen.getByRole("button", {
+            name: /Change Type/i
+        });
+        await act(async () => {
+            changeTypeButton.click();
+        });
+        // Should be Multiple Choice
+        const typeTextMC = screen.getByText(/Multiple Choice/i);
+        expect(typeTextMC).toBeInTheDocument();
+        // Should NOT be Short Answer
+        const typeTextSA = screen.queryByText(/Short Answer/i);
+        expect(typeTextSA).toBeNull();
+    });
+
+    test("(1 pts) Clicking the button twice keeps the type the same.", async () => {
+        const changeTypeButton = screen.getByRole("button", {
+            name: /Change Type/i
+        });
+        await act(async () => {
+            changeTypeButton.click();
+        });
+        await act(async () => {
+            changeTypeButton.click();
+        });
+        // Should be Short Answer
+        const typeTextSA = screen.getByText(/Short Answer/i);
+        expect(typeTextSA).toBeInTheDocument();
+        // Should NOT be Multiple Choice
+        const typeTextMC = screen.queryByText(/Multiple Choice/i);
+        expect(typeTextMC).toBeNull();
+    });
+});

src/components/ChangeType.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import { QuestionType } from "../interfaces/question";
+
+export function ChangeType(): React.JSX.Element {
+    const [type, setType] = useState<QuestionType>("short_answer_question");
+
+    function changeType(): void {
+        if (type === "short_answer_question") {
+            setType("multiple_choice_question");
+        } else {
+            setType("short_answer_question");
+        }
+    }
+
+    return (
+        <div>
+            <Button onClick={changeType}>Change Type</Button>
+
+            {type === "short_answer_question" && <div>Short Answer</div>}
+            {type === "multiple_choice_question" && <div>Multiple Choice</div>}
+        </div>
+    );
+}

src/components/Counter.test.tsx

@@ -0,0 +1,45 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { Counter } from "./Counter";
+
+describe("Counter Component tests", () => {
+    beforeEach(() => {
+        render(<Counter />);
+    });
+    test("(1 pts) The initial value is 0", () => {
+        // We use `getByText` because the text MUST be there
+        const valueText = screen.getByText(/0/i);
+        expect(valueText).toBeInTheDocument();
+    });
+    test("(1 pts) The initial value is not 1", () => {
+        // We use `queryByText` because the text might not be there
+        const valueText = screen.queryByText(/1/i);
+        expect(valueText).toBeNull();
+    });
+
+    test("(1 pts) There is a button named Add One", () => {
+        const addOneButton = screen.getByRole("button", { name: /Add One/i });
+        expect(addOneButton).toBeInTheDocument();
+    });
+
+    test("(1 pts) Clicking the button once adds one", async () => {
+        const addOneButton = screen.getByRole("button", { name: /Add One/i });
+        await act(async () => {
+            addOneButton.click();
+        });
+        const valueText = screen.getByText(/1/i);
+        expect(valueText).toBeInTheDocument();
+    });
+
+    test("(1 pts) Clicking the button twice adds two", async () => {
+        const addOneButton = screen.getByRole("button", { name: /Add One/i });
+        await act(async () => {
+            addOneButton.click();
+        });
+        await act(async () => {
+            addOneButton.click();
+        });
+        const valueText = screen.getByText(/2/i);
+        expect(valueText).toBeInTheDocument();
+    });
+});

src/components/Counter.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+export function Counter(): React.JSX.Element {
+    const [value, setValue] = useState<number>(0);
+    return (
+        <span>
+            <Button
+                onClick={() => {
+                    setValue(1 + value);
+                }}
+            >
+                Add One
+            </Button>
+            to {value}.
+        </span>
+    );
+}

src/components/CycleHoliday.test.tsx

@@ -0,0 +1,59 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { CycleHoliday } from "./CycleHoliday";
+
+describe("CycleHoliday Component tests", () => {
+    beforeEach(() => {
+        render(<CycleHoliday />);
+    });
+
+    test("(1 pts) An initial holiday is displayed", () => {
+        const initialHoliday = screen.getByText(/Holiday: (.*)/i);
+        expect(initialHoliday).toBeInTheDocument();
+    });
+
+    test("(1 pts) There are two buttons", () => {
+        const alphabetButton = screen.getByRole("button", {
+            name: /Alphabet/i
+        });
+        const yearButton = screen.getByRole("button", {
+            name: /Year/i
+        });
+        expect(alphabetButton).toBeInTheDocument();
+        expect(yearButton).toBeInTheDocument();
+    });
+
+    test("(1 pts) Can cycle through 5 distinct holidays alphabetically", async () => {
+        const alphabetButton = screen.getByRole("button", {
+            name: /Alphabet/i
+        });
+        const initialHoliday = screen.getByText(/Holiday ?[:)-](.*)/i);
+        const states: string[] = [];
+        for (let i = 0; i < 6; i++) {
+            states.push(initialHoliday.textContent || "");
+            await act(async () => {
+                alphabetButton.click();
+            });
+        }
+        const uniqueStates = states.filter((x, y) => states.indexOf(x) == y);
+        expect(uniqueStates).toHaveLength(5);
+        expect(states[0]).toEqual(states[5]);
+    });
+
+    test("(1 pts) Can cycle through 5 distinct holidays by year", async () => {
+        const yearButton = screen.getByRole("button", {
+            name: /Year/i
+        });
+        const initialHoliday = screen.getByText(/Holiday ?[:)-](.*)/i);
+        const states: string[] = [];
+        for (let i = 0; i < 6; i++) {
+            states.push(initialHoliday.textContent || "");
+            await act(async () => {
+                yearButton.click();
+            });
+        }
+        const uniqueStates = states.filter((x, y) => states.indexOf(x) == y);
+        expect(uniqueStates).toHaveLength(5);
+        expect(states[0]).toEqual(states[5]);
+    });
+});

src/components/CycleHoliday.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+type Holiday = { name: string; year: number };
+
+export function CycleHoliday(): React.JSX.Element {
+    const holidays: Holiday[] = [
+        { name: "April Fools", year: 2020 },
+        { name: "Boxing Day", year: 2021 },
+        { name: "Christmas", year: 2022 },
+        { name: "Diwali", year: 2023 },
+        { name: "Easter", year: 2024 },
+    ];
+
+    const [index, setIndex] = useState<number>(0);
+
+    function cycleAlphabet(): void {
+        setIndex((index + 1) % holidays.length);
+    }
+
+    function cycleYear(): void {
+        setIndex((index + 1) % holidays.length);
+    }
+
+    return (
+        <div>
+            <div>Holiday: {holidays[index].name}</div>
+            <Button onClick={cycleAlphabet}>Alphabet</Button>
+            <Button onClick={cycleYear}>Year</Button>
+        </div>
+    );
+}

src/components/RevealAnswer.test.tsx

@@ -0,0 +1,42 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { RevealAnswer } from "./RevealAnswer";
+
+describe("RevealAnswer Component tests", () => {
+    beforeEach(() => {
+        render(<RevealAnswer />);
+    });
+    test("(1 pts) The answer '42' is not visible initially", () => {
+        const answerText = screen.queryByText(/42/);
+        expect(answerText).toBeNull();
+    });
+    test("(1 pts) There is a Reveal Answer button", () => {
+        const revealButton = screen.getByRole("button", {
+            name: /Reveal Answer/i
+        });
+        expect(revealButton).toBeInTheDocument();
+    });
+    test("(1 pts) Clicking Reveal Answer button reveals the '42'", async () => {
+        const revealButton = screen.getByRole("button", {
+            name: /Reveal Answer/i
+        });
+        await act(async () => {
+            revealButton.click();
+        });
+        const answerText = screen.getByText(/42/);
+        expect(answerText).toBeInTheDocument();
+    });
+    test("(1 pts) Clicking Reveal Answer button twice hides the '42'", async () => {
+        const revealButton = screen.getByRole("button", {
+            name: /Reveal Answer/i
+        });
+        await act(async () => {
+            revealButton.click();
+        });
+        await act(async () => {
+            revealButton.click();
+        });
+        const answerText = screen.queryByText(/42/);
+        expect(answerText).toBeNull();
+    });
+});