- UM COS420 with React Hooks and TypeScript
+ Paige Doucette- UM COS420 with React Hooks and TypeScript
+
+
+
+ {/*Button */}
+
+
+
+
+ {/* Red boxes*/}
+
+
+
+ {/* Heading */}
+
Hello World
+
+ {/* Image */}
+
+
+
+
+ {/* Paragraph*/}
- Edit src/App.tsx and save. This page will
- automatically reload.
+ Edit src/App.tsx and save. This page will
+ automatically reload. Paige Doucette
+ Hello World
+
+
+ {/*List*/}
+
+
Apple
+
Pear
+
Orange
+
);
}
export default App;
+
+
diff --git a/src/HtmlCss.test.tsx b/src/HtmlCss.test.tsx
new file mode 100644
index 0000000000..84d76db400
--- /dev/null
+++ b/src/HtmlCss.test.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+import userEvent from "@testing-library/user-event";
+
+describe("Some HTML Elements are added.", () => {
+ test("(2 pts) There is a heading", () => {
+ render();
+ const heading = screen.getAllByRole("heading");
+ expect(heading[0]).toBeInTheDocument();
+ });
+
+ test("(2 pts) There is an image with alt text", () => {
+ render();
+ const image = screen.getByRole("img");
+ expect(image).toBeInTheDocument();
+ expect(image).toHaveAttribute("alt");
+ });
+
+ test("(2 pts) There is a list with at least three elements", () => {
+ render();
+ const list = screen.getByRole("list");
+ expect(list).toBeInTheDocument();
+ expect(list.children.length).toBeGreaterThanOrEqual(3);
+ });
+});
+
+describe("(2 pts) Some basic CSS is added.", () => {
+ test("The background color of the header area is different", () => {
+ render();
+ const banner = screen.getByRole("banner");
+ expect(banner).not.toHaveStyle({
+ "background-color": "rgb(40, 44, 52)",
+ });
+ });
+});
+
+describe("(2 pts) Some Bootstrap Elements are added", () => {
+ test("There is one bootstrap button with the text 'Log Hello World'", () => {
+ render();
+ const button = screen.getByRole("button", { name: /Log Hello World/i });
+ expect(button).toBeInTheDocument();
+ expect(button).toHaveClass("btn");
+ expect(button).toHaveClass("btn-primary");
+ });
+
+ test("(2 pts) Not clicking the bootstrap button does not logs 'Hello World!'", () => {
+ const consoleSpy = jest.spyOn(console, "log");
+ render();
+ expect(consoleSpy).not.toHaveBeenCalledWith("Hello World!");
+ });
+
+ test("(2 pts) Clicking the bootstrap button logs 'Hello World!'", () => {
+ const consoleSpy = jest.spyOn(console, "log");
+ render();
+ const button = screen.getByRole("button", { name: /Log Hello World/i });
+ userEvent.click(button);
+ expect(consoleSpy).toHaveBeenCalledWith("Hello World!");
+ });
+});
+
+describe("Some additional CSS was added", () => {
+ test("(2 pts) checks if any element has a background color of red", () => {
+ const { container } = render();
+ // Get all elements in the rendered container
+ const elements = container.querySelectorAll("*");
+
+ // Check if any element has a background color of red
+ let foundRedBackground = false;
+
+ elements.forEach((element) => {
+ const style = getComputedStyle(element);
+ if (
+ style.backgroundColor === "red" ||
+ style.backgroundColor === "rgb(255, 0, 0)"
+ ) {
+ foundRedBackground = true;
+ }
+ });
+
+ expect(foundRedBackground).toBe(true);
+ });
+});
diff --git a/src/text.test.tsx b/src/text.test.tsx
new file mode 100644
index 0000000000..f99a063e76
--- /dev/null
+++ b/src/text.test.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+test("renders the text 'Hello World' somewhere", () => {
+ render();
+ const texts = screen.getAllByText(/Hello World/);
+ expect(texts.length).toBeGreaterThanOrEqual(1);
+});