Skip to content

Solved state #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 46 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
986b28a
First stab at questions
acbart Feb 2, 2022
2c852d6
Move Question interface to separate file
acbart Feb 6, 2022
dc3662a
Create answer interface
acbart Feb 8, 2022
51221ee
First stab at nested tasks
acbart Feb 8, 2022
3a793cc
Document Question interface
acbart Feb 9, 2022
5c39a97
Expand questions test data
acbart Feb 9, 2022
6ae0b6f
Add a little hint for a tough one
acbart Feb 9, 2022
b1bbbc8
Nested tests (phew)
acbart Feb 9, 2022
ab9bfb5
Basic starter files for components
acbart Feb 9, 2022
9765863
Another extra paren error
acbart Feb 9, 2022
d6c10cd
Merge branch 'main' of https://github.com/UD-CISC275-S22/react-typesc…
acbart Feb 13, 2022
c0bbc39
Updated, complete tests for all state components
acbart Feb 13, 2022
eb40f3e
Forgot task record for state
acbart Feb 19, 2022
7a20734
Include json test command here
acbart Aug 24, 2024
c2e556d
First stab at questions
acbart Feb 2, 2022
406ffb2
Move Question interface to separate file
acbart Feb 6, 2022
9b9adb6
Fix formatting
acbart Aug 24, 2024
3660252
First stab at questions
acbart Feb 2, 2022
09d3d4f
Move Question interface to separate file
acbart Feb 6, 2022
9a24024
Create answer interface
acbart Feb 8, 2022
879fe17
First stab at nested tasks
acbart Feb 8, 2022
4d29d21
Document Question interface
acbart Feb 9, 2022
d71d9fc
Expand questions test data
acbart Feb 9, 2022
c955718
Add a little hint for a tough one
acbart Feb 9, 2022
c574699
Nested tests (phew)
acbart Feb 9, 2022
a368ad0
Forgot the task record!
acbart Feb 19, 2022
304184e
Fix typo in editOption test, and missing return type for editOption
acbart Mar 1, 2022
1b76b80
Fix formatting
acbart Aug 24, 2024
23314f3
update point values for tests
acbart Aug 24, 2024
82faacc
Fix react return value
acbart Aug 24, 2024
cc7d4db
Update react tests to use async
acbart Aug 24, 2024
c419dc9
Fix linting
acbart Aug 24, 2024
67edb6d
Merge branch 'main' into task-nested
greglnelson Sep 8, 2024
5a7921b
Merge branch 'main' into task-objects
greglnelson Sep 8, 2024
974fb09
Merge so 2024 works
greglnelson Oct 17, 2024
ae19e0f
reduced workload by half
greglnelson Oct 17, 2024
f2cd1ef
remove cycleholiday and startattempt
greglnelson Oct 26, 2024
f9ec33b
Merge branch 'task-nested' into task-state
greglnelson Oct 26, 2024
f4e8bec
Add missing function that was in a removed problem
greglnelson Oct 26, 2024
a179ca9
Remove removed problems from App.tsx
greglnelson Oct 26, 2024
0c840d7
fix a potential bug with toBeCalled, investigate more next year
greglnelson Oct 27, 2024
ff703b5
Update TwoDice.test.tsx
greglnelson Oct 31, 2024
b2ec4fa
Add back in files to match interactive textbook
TSchotter Mar 30, 2025
82eebd6
Merge remote-tracking branch 'upstream/task-state' into solved-state
michaelness1 Apr 13, 2025
577ef56
Completed all state components
michaelness1 Apr 13, 2025
02f0a99
Define holiday type and other changes
michaelness1 Apr 13, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -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"]
}
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 5 additions & 0 deletions public/tasks/task-nested.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Task - Nested

Version: 0.0.1

Implement functions that work with nested arrays and objects immutably.
5 changes: 5 additions & 0 deletions public/tasks/task-objects.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Task - Objects

Version: 0.0.1

Implement functions that work with objects immutably.
5 changes: 5 additions & 0 deletions public/tasks/task-state.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Task - State

Version: 0.0.1

Create some new components that have React State.
24 changes: 18 additions & 6 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,28 @@
import React from "react";
import { Counter } from "./components/Counter";
import { RevealAnswer } from "./components/RevealAnswer";
import { ChangeType } from "./components/ChangeType";
import { StartAttempt } from "./components/StartAttempt";
import { TwoDice } from "./components/TwoDice";
import { CycleHoliday } from "./components/CycleHoliday";
import "./App.css";

function App(): React.JSX.Element {
function App(): JSX.Element {
return (
<div className="App">
<header className="App-header">
UM COS420 with React Hooks and TypeScript
<Counter></Counter>
<hr />
<RevealAnswer></RevealAnswer>
<hr />
<ChangeType></ChangeType>
<hr />
<StartAttempt></StartAttempt>
<hr />
<TwoDice></TwoDice>
<hr />
<CycleHoliday></CycleHoliday>
</header>
<p>
Edit <code>src/App.tsx</code> and save. This page will
automatically reload.
</p>
</div>
);
}
Expand Down
59 changes: 59 additions & 0 deletions src/components/ChangeType.test.tsx
Original file line number Diff line number Diff line change
@@ -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();
});
});
27 changes: 27 additions & 0 deletions src/components/ChangeType.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React, { useState } from "react";
import { QuestionType } from "../interfaces/question";

export function ChangeType(): React.JSX.Element {
const [type, setType] = useState<QuestionType>("short_answer_question");

return (
<div>
<button
onClick={() => {
setType(
type === "multiple_choice_question" ?
"short_answer_question"
: "multiple_choice_question",
);
}}
>
Change Type
</button>
<div>
{type === "multiple_choice_question" ?
"Multiple Choice"
: "Short Answer"}
</div>
</div>
);
}
45 changes: 45 additions & 0 deletions src/components/Counter.test.tsx
Original file line number Diff line number Diff line change
@@ -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();
});
});
18 changes: 18 additions & 0 deletions src/components/Counter.tsx
Original file line number Diff line number Diff line change
@@ -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(value + 1);
}}
>
Add One
</button>
to {value}.
</span>
);
}
55 changes: 55 additions & 0 deletions src/components/CycleHoliday.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import { CycleHoliday } from "./CycleHoliday";

describe("CycleHoliday Component tests", () => {
beforeEach(() => {
render(<CycleHoliday />);
});

test("An initial holiday is displayed", () => {
const initialHoliday = screen.getByText(/Holiday: (.*)/i);
expect(initialHoliday).toBeInTheDocument();
});

test("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("Can cycle through 5 distinct holidays alphabetically", () => {
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 || "");
alphabetButton.click();
}
const uniqueStates = states.filter((x, y) => states.indexOf(x) == y);
expect(uniqueStates).toHaveLength(5);
expect(states[0]).toEqual(states[5]);
});

test("Can cycle through 5 distinct holidays by year", () => {
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 || "");
yearButton.click();
}
const uniqueStates = states.filter((x, y) => states.indexOf(x) == y);
expect(uniqueStates).toHaveLength(5);
expect(states[0]).toEqual(states[5]);
});
});
49 changes: 49 additions & 0 deletions src/components/CycleHoliday.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React, { useState } from "react";
import { Button } from "react-bootstrap";

type Holiday =
| "Christmas"
| "Easter"
| "Halloween"
| "Thanksgiving"
| "New Year";

export function CycleHoliday(): React.JSX.Element {
const [currentHoliday, setCurrentHoliday] = useState<Holiday>("Christmas");

const advanceByAlphabet = () => {
const holidays: Holiday[] = [
"Christmas",
"Easter",
"Halloween",
"New Year",
"Thanksgiving",
];
const currentIndex = holidays.indexOf(currentHoliday);
const nextIndex = (currentIndex + 1) % holidays.length;
setCurrentHoliday(holidays[nextIndex]);
};

const advanceByYear = () => {
const holidaysInOrder: Holiday[] = [
"New Year",
"Easter",
"Halloween",
"Thanksgiving",
"Christmas",
];
const currentIndex = holidaysInOrder.indexOf(currentHoliday);
const nextIndex = (currentIndex + 1) % holidaysInOrder.length;
setCurrentHoliday(holidaysInOrder[nextIndex]);
};

return (
<div>
<p>Holiday: {currentHoliday}</p>
<Button onClick={advanceByAlphabet}>Advance by Alphabet</Button>
<Button onClick={advanceByYear}>Advance by Year</Button>
</div>
);
}

export default CycleHoliday;
Loading