test: cover TracingCaseContactDetail

Co-authored-by: Resi Respati <resir014@gmail.com>

__tests__/pages/dashboard/tracing/[caseId]/[contactId]/index.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import TracingCaseContactDetail from "~/pages/dashboard/tracing/[caseId]/[contactId]";
+
+jest.mock("next/router", () => require("next-router-mock"));
+
+describe("TracingCaseContactDetail", () => {
+  it("renders page title correctly", () => {
+    render(<TracingCaseContactDetail />);
+
+    expect(screen.getByRole("heading", { name: /detail kontak erat/i })).toBeVisible();
+  });
+
+  it("renders the `Kembali` button correctly", () => {
+    render(<TracingCaseContactDetail />);
+
+    expect(screen.getByRole("link", { name: /kembali/i })).toHaveAttribute(
+      "href",
+      "/dashboard/tracing/undefined"
+    );
+  });
+});

__tests__/pages/dashboard/tracing/[caseId]/[contactId]/monitor.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import Monitor from "~/pages/dashboard/tracing/[caseId]/[contactId]/monitor";
+
+jest.mock("next/router", () => require("next-router-mock"));
+
+describe("Monitor", () => {
+  it("renders page title correctly", () => {
+    render(<Monitor />);
+
+    expect(screen.getByRole("heading", { name: /tambah pemantauan/i })).toBeVisible();
+  });
+
+  it("renders the `Kembali` button correctly", () => {
+    render(<Monitor />);
+
+    expect(screen.getByRole("link", { name: /kembali/i })).toHaveAttribute(
+      "href",
+      "/dashboard/tracing/undefined/undefined"
+    );
+  });
+});

__tests__/pages/dashboard/tracing/[caseId]/index.test.tsx

@@ -10,4 +10,13 @@ describe("TracingCaseDetail", () => {
 
     expect(screen.getByRole("heading", { name: /detail kasus konfirmasi/i })).toBeVisible();
   });
+
+  it("renders the `Kembali` button correctly", () => {
+    render(<TracingCaseDetail />);
+
+    expect(screen.getByRole("link", { name: /kembali/i })).toHaveAttribute(
+      "href",
+      "/dashboard/tracing"
+    );
+  });
 });

pages/dashboard/tracing/[caseId]/[contactId]/index.tsx

@@ -22,8 +22,11 @@ export default function TracingCaseContactDetail() {
               as={`/dashboard/tracing/${router.query.caseId}`}
               href="/dashboard/tracing/[caseId]"
             >
-              <a className="text-silacak-500 hover:text-silacak-700" title="Kembali">
-                <span className="sr-only">Kembali</span>
+              <a
+                aria-label="Kembali"
+                className="text-silacak-500 hover:text-silacak-700"
+                title="Kembali"
+              >
                 <ArrowCircleLeftIcon aria-hidden className="w-8 h-8" />
               </a>
             </Link>

pages/dashboard/tracing/[caseId]/[contactId]/monitor.tsx

@@ -1,15 +1,35 @@
+import { ArrowCircleLeftIcon } from "@heroicons/react/outline";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { DashboardPage, DashboardPageContent } from "~/components/layout/dashboard";
 import { ConfirmedCasesHeader } from "~/components/tracing/confirmed-cases-header";
 
 export default function Monitor() {
   const router = useRouter();
 
-  console.log("caseId", router.query.caseId);
-
   return (
     <DashboardPage>
-      <ConfirmedCasesHeader>Header</ConfirmedCasesHeader>
+      <ConfirmedCasesHeader>
+        <div className="flex flex-row space-x-4">
+          <div className="flex w-8 h-8 items-center justify-center">
+            <Link
+              as={`/dashboard/tracing/${router.query.caseId}/${router.query.contactId}`}
+              href="/dashboard/tracing/[caseId]/[contactId]"
+            >
+              <a
+                aria-label="Kembali"
+                className="text-silacak-500 hover:text-silacak-700"
+                title="Kembali"
+              >
+                <ArrowCircleLeftIcon aria-hidden className="w-8 h-8" />
+              </a>
+            </Link>
+          </div>
+          <div>
+            <h1 className="text-2xl font-semibold">Tambah Pemantauan</h1>
+          </div>
+        </div>
+      </ConfirmedCasesHeader>
       <DashboardPageContent>Content</DashboardPageContent>
     </DashboardPage>
   );

pages/dashboard/tracing/[caseId]/index.tsx

@@ -19,8 +19,11 @@ export default function TracingCaseDetail() {
           <div className="flex flex-row space-x-4">
             <div className="flex w-8 h-8 items-center justify-center">
               <Link href="/dashboard/tracing">
-                <a className="text-silacak-500 hover:text-silacak-700" title="Kembali">
-                  <span className="sr-only">Kembali</span>
+                <a
+                  aria-label="Kembali"
+                  className="text-silacak-500 hover:text-silacak-700"
+                  title="Kembali"
+                >
                   <ArrowCircleLeftIcon aria-hidden className="w-8 h-8" />
                 </a>
               </Link>