From 10cfe6715223c3f3e1d64e775d4f76cb3acfa2ae Mon Sep 17 00:00:00 2001
From: Tran Manh <manh@nimblehq.co>
Date: Tue, 27 Jun 2023 17:27:13 +0700
Subject: [PATCH] [#10] Update unittest for components

---
 .../Dashboard/Content/index.test.tsx          | 16 ++++++++++
 src/components/Dashboard/Content/index.tsx    |  8 +++--
 .../Dashboard/Header/index.test.tsx           | 30 ++++++++++++++++---
 src/components/Shimmer/index.test.tsx         | 18 +++++++++++
 src/components/Shimmer/index.tsx              |  4 ++-
 5 files changed, 69 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Dashboard/Content/index.test.tsx
 create mode 100644 src/components/Shimmer/index.test.tsx

diff --git a/src/components/Dashboard/Content/index.test.tsx b/src/components/Dashboard/Content/index.test.tsx
new file mode 100644
index 0000000..a33e771
--- /dev/null
+++ b/src/components/Dashboard/Content/index.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import DashboardContent from '.';
+
+describe('DashboardContent', () => {
+  const dataTestId = 'dashboard-content';
+  it('renders DashboardContent and its components', () => {
+    render(<DashboardContent data-test-id={dataTestId} />);
+
+    const dashboardContent = screen.getByTestId(dataTestId);
+
+    expect(dashboardContent).toBeVisible();
+  });
+});
diff --git a/src/components/Dashboard/Content/index.tsx b/src/components/Dashboard/Content/index.tsx
index e929ee4..97f91c3 100644
--- a/src/components/Dashboard/Content/index.tsx
+++ b/src/components/Dashboard/Content/index.tsx
@@ -2,9 +2,13 @@ import React from 'react';
 
 import Shimmer from 'components/Shimmer';
 
-const DashboardContent = (): JSX.Element => {
+interface DashboardContentProps {
+  'data-test-id'?: string;
+}
+
+const DashboardContent = ({ ...attributes }: DashboardContentProps): JSX.Element => {
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex flex-col w-full" {...attributes}>
       <Shimmer classAttributes="h-[302px] rounded-[12px]" />
       <div className="flex flex-row justify-between mt-[38px]">
         <div className="flex flex-col justify-between">
diff --git a/src/components/Dashboard/Header/index.test.tsx b/src/components/Dashboard/Header/index.test.tsx
index ee05ac2..b1b7fce 100644
--- a/src/components/Dashboard/Header/index.test.tsx
+++ b/src/components/Dashboard/Header/index.test.tsx
@@ -6,12 +6,18 @@ import DashboardHeader from '.';
 
 describe('DashboardHeader', () => {
   const dataTestId = 'dashboard-header';
-  it('renders DashboardHeader and its components', () => {
+  it('renders DashboardHeader and its components without shimmers', () => {
     const dateTime = 'Monday, JUNE 15';
     const daysAgo = 'Today';
     const profileUrl = 'test url';
     render(
-      <DashboardHeader dateTime={dateTime} daysAgo={daysAgo} profileUrl={profileUrl} data-test-id={dataTestId}>
+      <DashboardHeader
+        dateTime={dateTime}
+        daysAgo={daysAgo}
+        profileUrl={profileUrl}
+        data-test-id={dataTestId}
+        shouldShowShimmer={false}
+      >
         Dashboard Header
       </DashboardHeader>
     );
@@ -21,10 +27,26 @@ describe('DashboardHeader', () => {
 
     expect(dashboardHeader).toBeVisible();
     expect(dashboardHeader).toHaveTextContent(dateTime);
-    expect(dashboardHeader).toHaveTextContent(dateTime);
-    expect(dashboardHeader).toHaveTextContent(dateTime);
+    expect(dashboardHeader).toHaveTextContent(daysAgo);
 
     expect(avatar).toBeVisible();
     expect(avatar).toHaveAttribute('src', profileUrl);
   });
+
+  it('does NOT renders text components', () => {
+    const dateTime = 'Monday, JUNE 15';
+    const daysAgo = 'Today';
+    const profileUrl = 'test url';
+    render(
+      <DashboardHeader dateTime={dateTime} daysAgo={daysAgo} profileUrl={profileUrl} data-test-id={dataTestId}>
+        Dashboard Header
+      </DashboardHeader>
+    );
+
+    const dashboardHeader = screen.getByTestId(dataTestId);
+
+    expect(dashboardHeader).toBeVisible();
+    expect(dashboardHeader).not.toHaveTextContent(dateTime);
+    expect(dashboardHeader).not.toHaveTextContent(daysAgo);
+  });
 });
diff --git a/src/components/Shimmer/index.test.tsx b/src/components/Shimmer/index.test.tsx
new file mode 100644
index 0000000..ae4dc70
--- /dev/null
+++ b/src/components/Shimmer/index.test.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import Shimmer from '.';
+
+describe('Shimmer', () => {
+  const dataTestId = 'shimmer';
+  it('renders Shimmer and its components', () => {
+    const testClass = 'test-class';
+    render(<Shimmer classAttributes={testClass} data-test-id={dataTestId} />);
+
+    const shimmer = screen.getByTestId(dataTestId);
+
+    expect(shimmer).toBeVisible();
+    expect(shimmer).toHaveClass(testClass);
+  });
+});
diff --git a/src/components/Shimmer/index.tsx b/src/components/Shimmer/index.tsx
index e3ad5ce..7dbe178 100644
--- a/src/components/Shimmer/index.tsx
+++ b/src/components/Shimmer/index.tsx
@@ -2,13 +2,15 @@ import React from 'react';
 
 interface ShimmerProps {
   classAttributes: string;
+  'data-test-id'?: string;
 }
 
 // Ref: https://delba.dev/blog/animated-loading-skeletons-with-tailwind
-const Shimmer = ({ classAttributes }: ShimmerProps): JSX.Element => {
+const Shimmer = ({ classAttributes, ...attributes }: ShimmerProps): JSX.Element => {
   return (
     <div
       className={`relative before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:from-30% before:via-white/50 before:to-transparent before:to-70% isolate overflow-hidden shadow-xl shadow-black/5 ${classAttributes}`}
+      {...attributes}
     >
       <div className={`bg-white bg-opacity-[.12] ${classAttributes}`}></div>
     </div>