From 62cd51b64d534c0eee4560c029916360656c73f0 Mon Sep 17 00:00:00 2001
From: anjula-sack <anjulashanaka@gmail.com>
Date: Fri, 7 Jul 2023 16:52:18 +0530
Subject: [PATCH 1/2] EQA-1: Update the jest configuration

---
 jest.config.js                              | 53 +++++++++++++--------
 src/components/lazy-cell/lazy-cell.test.tsx | 14 ++++++
 src/views/error-state/error-state.test.tsx  | 25 ++++++++++
 3 files changed, 72 insertions(+), 20 deletions(-)
 create mode 100644 src/components/lazy-cell/lazy-cell.test.tsx
 create mode 100644 src/views/error-state/error-state.test.tsx

diff --git a/jest.config.js b/jest.config.js
index 204da674..41e840f9 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,28 +1,41 @@
-// Sync object
-/** @type {import('@jest/types').Config.InitialOptions} */
-const config = {
-  verbose: true,
-  collectCoverage: true,
-  coverageThreshold: {
-    global: {
-      branches: 10,
-      functions: 10,
-      lines: 10,
-    },
-  },
-  coverageReporters: ["json-summary", "lcov"],
-  collectCoverageFrom: ["./src/forms/**", "!./src/components/**/*.snap"],
+/**
+ * @returns {Promise<import('jest').Config>}
+ */
+module.exports = {
   transform: {
-    "^.+\\.tsx?$": "@swc/jest",
+    "^.+\\.(j|t)sx?$": "@swc/jest",
   },
   transformIgnorePatterns: ["/node_modules/(?!@openmrs)"],
   moduleNameMapper: {
     "\\.(s?css)$": "identity-obj-proxy",
     "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
-    "react-i18next": "<rootDir>/__mocks__/react-i18next.js",
-    "lodash-es": "lodash",
-    "react-markdown": "<rootDir>/__mocks__/react-markdown.tsx",
+    "^lodash-es/(.*)$": "lodash/$1",
+    "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
+    "^dexie$": require.resolve("dexie"),
+  },
+  collectCoverageFrom: [
+    "**/src/**/*.component.tsx",
+    "!**/node_modules/**",
+    "!**/vendor/**",
+    "!**/src/**/*.test.*",
+    "!**/src/declarations.d.tsx",
+    "!**/e2e/**",
+  ],
+  coverageThreshold: {
+    global: {
+      statements: 80,
+      branches: 80,
+      functions: 80,
+      lines: 80,
+    },
+  },
+  setupFilesAfterEnv: ["<rootDir>/src/setup-tests.ts"],
+  testPathIgnorePatterns: [
+    "<rootDir>/packages/esm-form-entry-app",
+    "<rootDir>/e2e",
+  ],
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    url: "http://localhost/",
   },
 };
-
-module.exports = config;
diff --git a/src/components/lazy-cell/lazy-cell.test.tsx b/src/components/lazy-cell/lazy-cell.test.tsx
new file mode 100644
index 00000000..f48d04a1
--- /dev/null
+++ b/src/components/lazy-cell/lazy-cell.test.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import { LazyCell } from "./lazy-cell.component";
+
+describe("LazyCell", () => {
+  test("renders the resolved value after the promise is resolved", async () => {
+    const { container } = render(
+      <LazyCell lazyValue={Promise.resolve("Lazy cell")} />
+    );
+    await waitFor(() =>
+      expect(container.firstChild).toHaveTextContent("Lazy cell")
+    );
+  });
+});
diff --git a/src/views/error-state/error-state.test.tsx b/src/views/error-state/error-state.test.tsx
new file mode 100644
index 00000000..173d5188
--- /dev/null
+++ b/src/views/error-state/error-state.test.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ErrorState } from "./error-state.component";
+
+describe("ErrorState component", () => {
+  test("renders error message and header title", () => {
+    const error = {
+      response: {
+        status: 404,
+        statusText: "Not Found",
+      },
+    };
+    const headerTitle = "Error State";
+
+    render(<ErrorState error={error} headerTitle={headerTitle} />);
+
+    const errorMessage = screen.getByText("Error 404: Not Found");
+    const errorCopy = screen.getByText(
+      "Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above."
+    );
+
+    expect(errorMessage).toBeInTheDocument();
+    expect(errorCopy).toBeInTheDocument();
+  });
+});

From 9818dd9bbd846044809b3adeadeaccce8ab7e3ae Mon Sep 17 00:00:00 2001
From: anjula-sack <anjulashanaka@gmail.com>
Date: Wed, 12 Jul 2023 14:59:08 +0530
Subject: [PATCH 2/2] Add empty state component unit tests

---
 src/views/empty-state/empty-state.test.tsx    | 22 +++++++++++++++++++
 .../error-state/error-state.component.tsx     |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/views/empty-state/empty-state.test.tsx

diff --git a/src/views/empty-state/empty-state.test.tsx b/src/views/empty-state/empty-state.test.tsx
new file mode 100644
index 00000000..8d87dc74
--- /dev/null
+++ b/src/views/empty-state/empty-state.test.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { EmptyState } from "./empty-state.component";
+
+describe("EmptyState Component", () => {
+  const headerTitle = "This is a header";
+  const displayText = "example display text";
+
+  test("renders header title", () => {
+    render(<EmptyState headerTitle={headerTitle} displayText={displayText} />);
+    const headerElement = screen.getByText(headerTitle);
+    expect(headerElement).toBeInTheDocument();
+  });
+
+  test("renders display text", () => {
+    render(<EmptyState headerTitle={headerTitle} displayText={displayText} />);
+    const displayTextElement = screen.getByText(
+      `There are no ${displayText} to display for this patient`
+    );
+    expect(displayTextElement).toBeInTheDocument();
+  });
+});
diff --git a/src/views/error-state/error-state.component.tsx b/src/views/error-state/error-state.component.tsx
index f13835cd..848425d9 100644
--- a/src/views/error-state/error-state.component.tsx
+++ b/src/views/error-state/error-state.component.tsx
@@ -15,7 +15,7 @@ export const ErrorState: React.FC<ErrorStateProps> = ({
   const { t } = useTranslation();
 
   return (
-    <Tile light className={styles.tile}>
+    <Tile className={styles.tile}>
       <h1 className={styles.heading}>{headerTitle}</h1>
       <p className={styles.errorMessage}>
         {t("error", "Error")} {`${error?.response?.status}: `}