update tests

package.json

@@ -19,7 +19,8 @@
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "dependencies": {
     "@nextui-org/react": "^2.4.2",

src/__tests__/page.test.tsx

@@ -2,12 +2,28 @@ import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import Page from "../app/page";
 
-describe("Page", () => {
-  it("renders a heading", () => {
+describe("Main Page", () => {
+  it("Renders the proper title and content text", () => {
     render(<Page />);
 
+    const timeRegEx = /([0-9]+(:[0-9]+)+)\s[AP]M/i;
+
+    const logo = screen.getByTestId("logo");
     const heading = screen.getByRole("heading", { level: 1 });
+    const subheader = screen.getByTestId("subheader");
+    const location = screen.getByTestId("location");
+    const time = screen.getByTestId("time");
+    const content = screen.getByTestId("content");
 
-    expect(heading).toBeInTheDocument();
+    expect(logo.innerHTML).toEqual("KGM");
+    expect(heading.innerHTML).toEqual("Kaj Grant-Mathiasen");
+    expect(subheader.innerHTML).toEqual(
+      "Computer Engineer / Cloud Engineer / Full-Stack Developer"
+    );
+    expect(location.innerHTML).toContain("Vancouver, BC. Canada");
+    expect(time.innerHTML).toMatch(timeRegEx);
+    expect(content.innerHTML).toEqual(
+      "Currently an Associate Cloud Support Engineer @ <b>Canonical</b>"
+    );
   });
 });

src/components/content.tsx

@@ -30,7 +30,10 @@ export function Content() {
       </div>
       <div className="flex desktop:opacity-0 group-hover:opacity-100 transition-opacity duration-1000 ease-in-out">
         <div className="mx-auto">
-          <p className="ml-5 mr-5 desktop:ml-0 desktop:mr-0 font-medium text-light-content-text-color dark:text-dark-content-text-color transition duration-500">
+          <p
+            className="ml-5 mr-5 desktop:ml-0 desktop:mr-0 font-medium text-light-content-text-color dark:text-dark-content-text-color transition duration-500"
+            data-testid="content"
+          >
             Currently an Associate Cloud Support Engineer @ <b>Canonical</b>
           </p>
         </div>

src/components/header.tsx

@@ -3,14 +3,12 @@ import { Location } from "./location";
 import { Time } from "./time";
 import { brushData } from "@/data/svg/brush";
 
-export function Header(props: { text?: string; subheader?: string }) {
-  const text = props.text ? props.text : "Kaj Grant-Mathiasen";
-
+export function Header() {
   return (
     <div>
       <Link href="/">
         <h1 className="z-10 relative peer text-7xl desktop:text-8xl font-bold pb-2 text-light-text-color hover:[text-shadow:_8px_6px_12px_rgb(0_0_0_/_40%)] dark:text-dark-text-color desktop:dark:hover:scale-[101%] transition-all duration-500">
-          {text}
+          Kaj Grant-Mathiasen
         </h1>
         <svg
           className="z-0 absolute -mt-36 ml-24 rotate-3 transition-all duration-700 opacity-0 dark:desktop:peer-hover:opacity-100 dark:fill-red-900 w-[700px] h-[200px]"
@@ -20,7 +18,10 @@ export function Header(props: { text?: string; subheader?: string }) {
         </svg>
       </Link>
       <div className="pl-1">
-        <p className="z-10 relative text-md font-medium pb-1 text-light-sub-text-color dark:text-dark-sub-text-color transition duration-500">
+        <p
+          className="z-10 relative text-md font-medium pb-1 text-light-sub-text-color dark:text-dark-sub-text-color transition duration-500"
+          data-testid="subheader"
+        >
           Computer Engineer / Cloud Engineer / Full-Stack Developer
         </p>
         <div className="flex flex-wrap">

src/components/location.tsx

@@ -8,7 +8,10 @@ export function Location(props: { location: string; locLink: string }) {
       >
         <path d="M197.849 0C122.131 0 60.531 61.609 60.531 137.329c0 72.887 124.591 243.177 129.896 250.388l4.951 6.738a3.064 3.064 0 0 0 2.471 1.255 3.08 3.08 0 0 0 2.486-1.255l4.948-6.738c5.308-7.211 129.896-177.501 129.896-250.388C335.179 61.609 273.569 0 197.849 0zm0 88.138c27.13 0 49.191 22.062 49.191 49.191 0 27.115-22.062 49.191-49.191 49.191-27.114 0-49.191-22.076-49.191-49.191 0-27.129 22.076-49.191 49.191-49.191z" />
       </svg>
-      <p className="m-0 text-md font-medium pl-1 text-light-sub-text-color dark:text-dark-sub-text-color transform transition duration-500">
+      <p
+        className="m-0 text-md font-medium pl-1 text-light-sub-text-color dark:text-dark-sub-text-color transform transition duration-500"
+        data-testid="location"
+      >
         {location}
       </p>
     </a>

src/components/logo.tsx

@@ -6,7 +6,10 @@ export function Logo(props: { children: React.ReactNode }) {
     <div className="pt-1">
       <Link href="/">
         <div className="w-24 h-14 relative rounded-xl bg-gradient-to-tr from-red-950 to-red-700">
-          <p className="pl-2 pt-2 text-white [text-shadow:_6px_4px_8px_rgb(0_0_0_/_60%)] absolute text-3xl font-pmarker tracking-wider">
+          <p
+            className="pl-2 pt-2 text-white [text-shadow:_6px_4px_8px_rgb(0_0_0_/_60%)] absolute text-3xl font-pmarker tracking-wider"
+            data-testid="logo"
+          >
             {props.children}
           </p>
         </div>

src/components/time.tsx

@@ -14,11 +14,12 @@ export function Time(props: { timeZone: string }) {
 
   return (
     <div>
-      <p className="text-md font-medium text-light-sub-text-color dark:text-dark-sub-text-color transition duration-500">
+      <p
+        className="text-md font-medium text-light-sub-text-color dark:text-dark-sub-text-color transition duration-500"
+        data-testid="time"
+      >
         {date.toLocaleTimeString("en-US", {
-          timeZone: props.timeZone
-            ? props.timeZone
-            : Intl.DateTimeFormat().resolvedOptions().timeZone,
+          timeZone: props.timeZone,
         })}
       </p>
     </div>