O3-2501:Write unit tests to test the components

jest.config.js

@@ -1,15 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require("path");
+
 module.exports = {
   transform: {
-    "^.+\\.tsx?$": ["@swc/jest"],
+    "^.+\\.tsx?$": "@swc/jest",
   },
   transformIgnorePatterns: ["/node_modules/(?!@openmrs)"],
   moduleNameMapper: {
-    "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
     "\\.(s?css)$": "identity-obj-proxy",
+    "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
     "^lodash-es/(.*)$": "lodash/$1",
+    "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
     "^dexie$": require.resolve("dexie"),
   },
-  setupFilesAfterEnv: ["<rootDir>/src/setup-tests.ts"],
+  setupFilesAfterEnv: [path.resolve(__dirname, "tools", "setup-tests.ts")],
   testEnvironment: "jsdom",
   testEnvironmentOptions: {
     url: "http://localhost/",

package.json

@@ -14,7 +14,7 @@
     "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx",
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "typescript": "tsc",
-    "test": "jest --config jest.config.js --passWithNoTests",
+    "test": "jest --config jest.config.js --verbose",
     "verify": "turbo lint typescript coverage ",
     "coverage": "yarn test -- --coverage",
     "prepare": "husky install",
@@ -67,10 +67,10 @@
     "@swc/core": "^1.3.68",
     "@swc/jest": "^0.2.26",
     "@testing-library/dom": "^8.20.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.8",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.6",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-router": "^5.1.20",
@@ -86,7 +86,7 @@
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^4.0.1",
-    "jest": "^28.1.3",
+    "jest": "^29.7.0",
     "jest-cli": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "openmrs": "next",
@@ -99,8 +99,9 @@
     "react-router-dom": "^6.14.1",
     "rxjs": "^6.6.7",
     "swc-loader": "^0.2.3",
+    "ts-jest": "^29.1.1",
     "turbo": "^1.10.7",
-    "typescript": "^4.9.5",
+    "typescript": "latest",
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.4"
   },

src/components/custom-annotate.component.tsx

@@ -363,9 +363,10 @@ const SvgEditor = () => {
           accept={[".jpg", ".jpeg", ".png", ".gif"]}
           buttonLabel="Upload Image"
           filenameStatus="edit"
-          labelText="Upload Image"
+          labeltext="Upload Image"
           onChange={(event) => handleImageUpload(event)}
           className="file-uploader"
+          iconDescription="uploader"
           style={{
             margin: "15px",
           }}

src/components/custom-annotate.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import "@testing-library/jest-dom";
+import SvgEditor from './custom-annotate.component';
+import { isElementInDocument } from '../test-utils';
+
+describe('SvgEditor Component', () => {
+  it('renders the SvgEditor component', () => {
+    const { container } = render(<SvgEditor />);
+    const canvasContainer = container.querySelector('.canvas-container');
+    expect(isElementInDocument(canvasContainer)).toBe(true);
+  });
+
+  it('can add a shape to the canvas', () => {
+    const { getByText } = render(<SvgEditor />);
+    const addShapeButton = getByText('Add Shape');
+    fireEvent.click(addShapeButton);
+  });
+
+  it('can select drawing mode', () => {
+    const { getByText } = render(<SvgEditor />);
+    const freehandButton = getByText('Freehand');
+    fireEvent.click(freehandButton);
+  });
+
+  it('can add text to the canvas', () => {
+    const { getByText } = render(<SvgEditor />);
+    const addTextButton = getByText('Add Text');
+    fireEvent.click(addTextButton);
+  });
+
+  it('can change the color of an object on the canvas', () => {
+    const { getByText, container } = render(<SvgEditor />);
+    const addShapeButton = getByText('Add Shape');
+    fireEvent.click(addShapeButton);
+
+    const colorPicker = container.querySelector('input[type="color"]');
+    fireEvent.change(colorPicker, { target: { value: '#ff0000' } });
+
+  });
+
+  it('can undo and redo actions', () => {
+    const { getByText } = render(<SvgEditor />);
+    const addShapeButton = getByText('Add Shape');
+    fireEvent.click(addShapeButton);
+
+    const undoButton = getByText('Undo');
+    const redoButton = getByText('Redo');
+
+    // Perform actions that can be undone and redone
+    fireEvent.click(undoButton);
+    // You can add assertions to check if the action is undone.
+
+    fireEvent.click(redoButton);
+    // You can add assertions to check if the action is redone.
+  });
+
+  it('can upload an image', () => {
+    const { getByLabelText } = render(<SvgEditor />);
+    const fileInput = getByLabelText('Upload Image');
+
+    // You can simulate uploading an image using fireEvent.change
+    // and then add assertions to check if the image is loaded and displayed.
+  });
+
+  it('can save an annotated image', () => {
+    const { getByText } = render(<SvgEditor />);
+    const addShapeButton = getByText('Add Shape');
+    fireEvent.click(addShapeButton);
+
+    const saveButton = getByText('Save');
+
+    // Perform actions to create an annotated image
+    // Then, click the "Save" button and add assertions to check if the image is saved.
+  });
+});

src/draw-page.scss

@@ -1,8 +1,11 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@import 'carbon-components/css/carbon-components.css';
 @import '~@openmrs/esm-styleguide/src/vars';
 
-.text {
-  font-size: 0.9rem;
-  padding: 0.5rem;
- }
+.container {
+  padding: 1.5rem;
+  background: $ui-01;
+}
+
+div.bx--tab-content {
+  padding: 0 !important;
+}

src/draw-page.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { isElementInDocument } from './test-utils'; 
+import DrawPage from './draw-page.component';
+
+jest.mock('./components/custom-annotate.component', () => {
+  return () => <div data-testid="mock-svg-editor" />;
+});
+
+describe('DrawPage Component', () => {
+  it('renders the DrawPage component', () => {
+    const { container } = render(<DrawPage />);
+    const editorContainer = container.querySelector('.editor-container');
+
+    expect(isElementInDocument(editorContainer as HTMLElement)).toBe(true);
+  });
+
+  it('renders the SvgEditor component within the DrawPage', () => {
+    const { getByTestId } = render(<DrawPage />);
+    const svgEditor = getByTestId('mock-svg-editor');
+
+    expect(isElementInDocument(svgEditor as HTMLElement)).toBe(true);
+  });
+});

src/test-utils.ts

@@ -0,0 +1,3 @@
+export function isElementInDocument(element: Element): boolean {
+  return document.body.contains(element);
+}

tools/setup-tests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

tsconfig.json

@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
-    "esModuleInterop": true,
-    "module": "esnext",
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "jsx": "react",
-    "skipLibCheck": true,
-    "moduleResolution": "node",
     "lib": [
       "dom",
       "es5",
@@ -16,8 +13,15 @@
       "es2018",
       "es2020"
     ],
-    "resolveJsonModule": true,
+    "module": "esnext",
+    "moduleResolution": "node",
     "noEmit": true,
-    "target": "esnext"
-  }
+    "paths": {
+      "@openmrs/*": ["./node_modules/@openmrs/*"]
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "esnext",
+    "typeRoots": ["./node_modules/@types"],
+  },
 }