From f1616a2d18083122b1c0e1b93f3ea4aa41da28b1 Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 21 Aug 2021 00:37:14 +0800
Subject: [PATCH] test: cover TracingCaseContactDetail

Co-authored-by: Resi Respati <resir014@gmail.com>
---
 .../[caseId]/[contactId]/index.test.tsx       | 22 ++++++++++++++++
 .../[caseId]/[contactId]/monitor.test.tsx     | 22 ++++++++++++++++
 .../dashboard/tracing/[caseId]/index.test.tsx |  9 +++++++
 .../tracing/[caseId]/[contactId]/index.tsx    |  7 +++--
 .../tracing/[caseId]/[contactId]/monitor.tsx  | 26 ++++++++++++++++---
 pages/dashboard/tracing/[caseId]/index.tsx    |  7 +++--
 6 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 __tests__/pages/dashboard/tracing/[caseId]/[contactId]/index.test.tsx
 create mode 100644 __tests__/pages/dashboard/tracing/[caseId]/[contactId]/monitor.test.tsx

diff --git a/__tests__/pages/dashboard/tracing/[caseId]/[contactId]/index.test.tsx b/__tests__/pages/dashboard/tracing/[caseId]/[contactId]/index.test.tsx
new file mode 100644
index 0000000..d7c6cf7
--- /dev/null
+++ b/__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"
+    );
+  });
+});
diff --git a/__tests__/pages/dashboard/tracing/[caseId]/[contactId]/monitor.test.tsx b/__tests__/pages/dashboard/tracing/[caseId]/[contactId]/monitor.test.tsx
new file mode 100644
index 0000000..048f7cb
--- /dev/null
+++ b/__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"
+    );
+  });
+});
diff --git a/__tests__/pages/dashboard/tracing/[caseId]/index.test.tsx b/__tests__/pages/dashboard/tracing/[caseId]/index.test.tsx
index 2fe94fc..9afbef7 100644
--- a/__tests__/pages/dashboard/tracing/[caseId]/index.test.tsx
+++ b/__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"
+    );
+  });
 });
diff --git a/pages/dashboard/tracing/[caseId]/[contactId]/index.tsx b/pages/dashboard/tracing/[caseId]/[contactId]/index.tsx
index de091d5..e2818a6 100644
--- a/pages/dashboard/tracing/[caseId]/[contactId]/index.tsx
+++ b/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>
diff --git a/pages/dashboard/tracing/[caseId]/[contactId]/monitor.tsx b/pages/dashboard/tracing/[caseId]/[contactId]/monitor.tsx
index aa316ad..f899dc8 100644
--- a/pages/dashboard/tracing/[caseId]/[contactId]/monitor.tsx
+++ b/pages/dashboard/tracing/[caseId]/[contactId]/monitor.tsx
@@ -1,3 +1,5 @@
+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";
@@ -5,11 +7,29 @@ import { ConfirmedCasesHeader } from "~/components/tracing/confirmed-cases-heade
 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>
   );
diff --git a/pages/dashboard/tracing/[caseId]/index.tsx b/pages/dashboard/tracing/[caseId]/index.tsx
index e54e871..bb2c45e 100644
--- a/pages/dashboard/tracing/[caseId]/index.tsx
+++ b/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>