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();
+
+ 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 (
-
+
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(
-
+
Dashboard Header
);
@@ -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(
+
+ Dashboard Header
+
+ );
+
+ 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();
+
+ 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 (