Merge pull request #3 from saracrz/feature/add-test-cases

Feature/add test cases

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
 	testEnvironment: "jsdom",
 	setupFilesAfterEnv: ["<rootDir>/tests/setupTests.ts"],
-	testMatch: ["<rootDir>/tests/**/*.(test).(ts|tsx)"],
+	testMatch: ["<rootDir>/src/**/*.(test).(ts|tsx)"],
 	testPathIgnorePatterns: ["<rootDir>/tests/e2e/"],
 	transform: {
 		"^.+\\.(js|jsx|ts|tsx)$": [

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "version": "1.0.0",
   "dependencies": {
+    "jest-fetch-mock": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.0"
@@ -56,6 +57,12 @@
       }
     ]
   },
+  "jest": {
+    "automock": false,
+    "setupFiles": [
+      "./setupJest.js"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",

tests/App.test.tsx → src/App.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { App } from "../src/App";
+import { App } from "./App";
 
 test("App component display header", () => {
 	render(<App />);

src/pages/DashboardPage.test.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable jest/no-mocks-import */
+import { render, screen } from "@testing-library/react";
+
+import { mockedDashboards } from "../../tests/fixtures/index";
+import {
+	mockUseGetDashboards,
+	mockUseGetDashboardsLoadingData,
+} from "../../tests/fixtures/useGetDashboards";
+import { DashboardPage } from "./DashboardPage";
+
+jest.mock("../hooks/useGetDashboards", () => ({
+	useGetDashboards: jest.fn(),
+}));
+
+test("Dashboard component displays dashboards titles", () => {
+	mockUseGetDashboards(mockedDashboards);
+	render(<DashboardPage />);
+
+	expect(screen.getByText("Antenatal Care")).toBeInTheDocument();
+	expect(screen.getByText("Cases Malaria")).toBeInTheDocument();
+	expect(screen.getByText("Delivery")).toBeInTheDocument();
+	expect(screen.getByText("Disease Surveillance")).toBeInTheDocument();
+	expect(screen.getByText("Immunization")).toBeInTheDocument();
+});
+
+test("Dashboard component when loading data should not display", () => {
+	mockUseGetDashboardsLoadingData([]);
+	render(<DashboardPage />);
+
+	expect(screen.queryByText("Antenatal Care")).not.toBeInTheDocument();
+	expect(screen.queryByText("Cases Malaria")).not.toBeInTheDocument();
+	expect(screen.queryByText("Delivery")).not.toBeInTheDocument();
+	expect(screen.queryByText("Disease Surveillance")).not.toBeInTheDocument();
+	expect(screen.queryByText("Immunization")).not.toBeInTheDocument();
+
+	expect(screen.getByText("Loading")).toBeInTheDocument();
+});

tests/fixtures/index.ts

@@ -0,0 +1,24 @@
+import { IDashboards } from "../../src/types";
+
+export const mockedDashboards: IDashboards[] = [
+	{
+		displayName: "Antenatal Care",
+		id: "nghVC4wtyzi",
+	},
+	{
+		displayName: "Cases Malaria",
+		id: "JW7RlN5xafN",
+	},
+	{
+		displayName: "Delivery",
+		id: "iMnYyBfSxmM",
+	},
+	{
+		displayName: "Disease Surveillance",
+		id: "vqh4MBWOTi4",
+	},
+	{
+		displayName: "Immunization",
+		id: "TAMlzYkstb7",
+	},
+];

tests/fixtures/useGetDashboards.ts

@@ -0,0 +1,16 @@
+import { useGetDashboards } from "../../src/hooks/useGetDashboards";
+import { IDashboards } from "../../src/types";
+
+export const mockUseGetDashboards = (mockedDashboards: IDashboards[]): void => {
+	(useGetDashboards as jest.Mock).mockReturnValue({
+		dashboards: mockedDashboards,
+		loading: false,
+	});
+};
+
+export const mockUseGetDashboardsLoadingData = (mockedDashboards: IDashboards[]): void => {
+	(useGetDashboards as jest.Mock).mockReturnValue({
+		dashboards: [],
+		loading: true,
+	});
+};

tests/setupTests.ts

@@ -1 +1,2 @@
 import "@testing-library/jest-dom";
+import "jest-fetch-mock";