frontend-fun · tahamou1 · Jan 31, 2022 · Jan 31, 2022 · Jan 31, 2022 · Jan 31, 2022
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -61,6 +61,7 @@ jobs:
           echo "<html><head>\
           <meta http-equiv='refresh' content='0; URL=${{github.server_url}}/${{github.repository}}' />\
           </head><body>Redirecting to repository</body></html>" > ./dist/repo.html
+
           mkdir -p docs
           cp README.md docs/index.md
           echo "# Quick Links" > docs/quick-links.md

diff --git a/git b/git
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/public/tasks/task-first-branch.md b/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.
diff --git a/public/tasks/task-html-css.md b/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.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./App.css";
+import { Button, Col, Container, Row } from "react-bootstrap";
 
 function App(): React.JSX.Element {
     return (
@@ -11,6 +12,88 @@ function App(): React.JSX.Element {
                 Edit <code>src/App.tsx</code> and save. This page will
                 automatically reload.
             </p>
+
+            <h1>
+                This is{" "}
+                <span style={{ color: "red" }}>colored header text</span>.
+            </h1>
+            <div>
+                <Button
+                    onClick={() => {
+                        console.log("Hello World!");
+                    }}
+                >
+                    Log Hello World
+                </Button>
+            </div>
+            <div>
+                <Container>
+                    <Row>
+                        <Col>
+                            <div
+                                style={{
+                                    display: "inline-block",
+                                    width: "9px",
+                                    height: "12px",
+                                    backgroundColor: "red",
+                                    margin: "13px",
+                                }}
+                            ></div>
+                        </Col>
+                        <Col>
+                            <div
+                                style={{
+                                    display: "inline-block",
+                                    width: "30px",
+                                    height: "80px",
+                                    backgroundColor: "red",
+                                    margin: "13px",
+                                }}
+                            ></div>
+                        </Col>
+                        <Col>
+                            <div
+                                style={{
+                                    display: "inline-block",
+                                    width: "80px",
+                                    height: "220px",
+                                    backgroundColor: "red",
+                                    margin: "13px",
+                                }}
+                            ></div>
+                        </Col>
+                    </Row>
+                </Container>
+            </div>
+            <p>Paragraph Example</p>
+            <p>Mohamed Mouhoud</p>
+            <p>Hello World</p>
+
+            <div style={{ border: "45px solid #3c6ed1", padding: "2px" }}>
+                <p>How are you?</p>
+            </div>
+            <div>
+                <ol>
+                    <li>Item</li>
+                    <li>Item2</li>
+                    <li>Item3</li>
+                </ol>
+            </div>
+            <div></div>
+            <div>
+                <Container>
+                    <Row>
+                        <Col>First column.</Col>
+                        <Col>
+                            Second column.
+                            <img
+                                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRW7an8OUx1gtjGpdEzwn3SMCDWFIGR9sdcXw&s"
+                                alt="An image"
+                            />
+                        </Col>
+                    </Row>
+                </Container>
+            </div>
         </div>
     );
 }

diff --git a/src/HtmlCss.test.tsx 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 header", () => {
+        render(<App />);
+        const header = screen.getByRole("heading");
+        expect(header).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);
+    });
+});
diff --git a/src/text.test.tsx 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(<App />);
+    const texts = screen.getAllByText(/Hello World/);
+    expect(texts.length).toBeGreaterThanOrEqual(1);
+});