Solved arrays

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-arrays.md

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

public/tasks/task-first-branch.md

@@ -0,0 +1,5 @@
+# Task - First Branch
+
+Version: 0.0.1
+
+Pass a short test to have certain text on the page.

public/tasks/task-functions.md

@@ -0,0 +1,5 @@
+# Task - Functions
+
+Version: 0.0.1
+
+Implement a bunch of functions that work on primitives.

public/tasks/task-html-css.md

@@ -0,0 +1,5 @@
+# Task - HTML/CSS
+
+Version: 0.0.1
+
+Add in some HTML and CSS, including a fancy looking button.

src/App.css

@@ -15,7 +15,7 @@
 
 .App-header {
     width: 100%;
-    background-color: #282c34;
+    background-color: #8ACE00;
     min-height: 40vh;
     display: flex;
     flex-direction: column;

src/App.tsx

@@ -1,16 +1,56 @@
 import React from "react";
 import "./App.css";
-
+import rug from "./assets/photos/authentic_persian_rug.jpg";
+import { Container, Row, Col, Button } from "react-bootstrap";
 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>
+            <h1>Goofy Goober</h1>
+            <Container>
+                <Row>
+                    <Col>
+                        <div
+                            style={{
+                                width: "400px",
+                                height: "5px",
+                                backgroundColor: "red",
+                            }}
+                        />
+                        <img
+                            src={rug}
+                            alt='A meme featuring several Persian rugs with the text: "Friend, Girlfriend, Boyfriend, Best friend" (all with "end" underlined). Next to them it says "Only authentic persian rug Has no END," highlighting that unlike friendships or relationships that may end, Persian rugs are timeless.'
+                        />
+                        <ul>
+                            <li>Girlfriend X</li>
+                            <li>Boyfriend X</li>
+                            <li>Bestfriend X</li>
+                            <Button
+                                onClick={() => {
+                                    console.log("Hello World!");
+                                }}
+                            >
+                                Log Hello World
+                            </Button>
+                        </ul>
+                        <header className="App-header">
+                            UM COS420 with React Hooks and TypeScript
+                        </header>
+                    </Col>
+                    <Col>
+                        <div
+                            style={{
+                                width: "400px",
+                                height: "5px",
+                                backgroundColor: "red",
+                            }}
+                        />
+                        <p>
+                            Edit <code>src/App.tsx</code> and save. This page
+                            will automatically reload. Hello World
+                        </p>
+                    </Col>
+                </Row>
+            </Container>
         </div>
     );
 }

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(<App />);
+        const heading = screen.getAllByRole("heading");
+        expect(heading[0]).toBeInTheDocument();
+    });
+
+    test("(2 pts) There is an image with alt text", () => {
+        render(<App />);
+        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(<App />);
+        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(<App />);
+        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(<App />);
+        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(<App />);
+        expect(consoleSpy).not.toHaveBeenCalledWith("Hello World!");
+    });
+
+    test("(2 pts) Clicking the bootstrap button logs 'Hello World!'", () => {
+        const consoleSpy = jest.spyOn(console, "log");
+        render(<App />);
+        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(<App />);
+        // 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);
+    });
+});