test: silva 447 add unit tests

frontend/package.json

@@ -10,8 +10,6 @@
     "@carbon/react": "^1.27.0",
     "@redux-devtools/extension": "^3.3.0",
     "@types/node": "^20.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "amazon-cognito-identity-js": "^6.3.13",
@@ -54,10 +52,13 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.2.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "@vitest/coverage-v8": "^1.0.0",

frontend/src/__test__/components/BCHeader.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import BCHeader from '../../components/BCHeader';
+import { ThemePreference } from '../../utils/ThemePreference';
+import { BrowserRouter } from 'react-router-dom';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // Deprecated
+    removeListener: vi.fn(), // Deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn()
+  }))
+});
+
+describe('BC Header component tests', () => {
+  it('should have a Header with proper class name', () => {
+    const { getByTestId, getByText } = render(
+      <BrowserRouter>
+        <ThemePreference>
+          <BCHeader />
+        </ThemePreference>
+      </BrowserRouter>
+    );
+
+    const element: HTMLElement | null = getByTestId('bc-header__header');
+    expect(element).toBeDefined();
+    expect(element).not.toBeNull();
+    expect(element?.classList.contains('spar-header')).toBe(true);
+  });
+});

frontend/src/__test__/components/MyRecentActions.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import MyRecentActions from '../../components/MyRecentActions';
+
+describe('My Recent Actions component tests', () => {
+  it('should render the recent action component', () => {
+    const { getByTestId, getByText } = render(
+      <MyRecentActions />
+    );
+    const text = 'Recent';
+
+    const element: HTMLElement | null = getByTestId('my-recent-actions__recent-tab-header');
+    expect(element).toBeDefined();
+    expect(element).not.toBeNull();
+    expect(element?.classList.contains('tab-header-recent')).toBe(true);
+    const elementText: HTMLElement = getByText(text);
+    expect(elementText.textContent).toEqual(text);
+  });
+
+  it('should render the files and tabs action component', () => {
+    const { getByTestId, getByText } = render(
+      <MyRecentActions />
+    );
+    const text = 'Files and Docs';
+
+    const element: HTMLElement | null = getByTestId('my-recent-actions__files-tab-header');
+    expect(element).toBeDefined();
+    expect(element).not.toBeNull();
+    expect(element?.classList.contains('tab-header-recent')).toBe(true);
+    const elementText: HTMLElement = getByText(text);
+    expect(elementText.textContent).toEqual(text);
+  });
+});

frontend/src/__test__/components/OpeningScreenDataTable.test.tsx

@@ -3,20 +3,20 @@ import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import OpeningScreenDataTable from '../../components/OpeningScreenDataTable';
 import PaginationContext from '../../contexts/PaginationContext';
+import { RecentOpening } from '../../types/RecentOpening';
 
-const rows = [{
-  id: '1',
+const rows: RecentOpening[] = [{
   openingId: '123',
   fileId: '1',
   cuttingPermit: '1',
   timberMark: '1',
   cutBlock: '1',
-  grossAreaHa: '1',
-  status: '1',
-  category: '1',
+  grossAreaHa: 1,
+  statusDesc: 'Approved',
+  categoryDesc: 'Another',
   disturbanceStart: '1',
-  createdAt: '1',
-  lastViewed: '1',
+  entryTimestamp: '1',
+  updateTimestamp: '1',
 }];
 
 const headers = [{ key: 'openingId', header: 'Opening Id', },

frontend/src/__test__/components/StatusTag.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import StatusTag from '../../components/StatusTag';
+
+describe('Status Tag component tests', () => {
+  it('should have completed color status tag rendered', () => {
+    const colorKey = 'Completed';
+
+    const { getByTestId } = render(
+      <StatusTag code={colorKey} />
+    );
+
+    const element: HTMLElement | null = getByTestId(`tag__status_colored_tag_${colorKey}`);
+    expect(element).toBeDefined();
+  });
+});

frontend/src/components/BCHeader/index.tsx

@@ -30,8 +30,8 @@ const BCHeader: React.FC = () => {
         <HeaderContainer
           render={({ isSideNavExpanded, onClickSideNavExpand }: HeaderContainerProps) => (
             <Header aria-label="React TS Carbon QuickStart"
-            className="spar-header"
-            data-testid="header">
+              className="spar-header"
+              data-testid="bc-header__header">
               <SkipToContent />
               <HeaderMenuButton
                 aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'}

frontend/src/components/MyRecentActions/index.tsx

@@ -29,9 +29,9 @@ const MyRecentActions: React.FC = () => {
   ];
 
   useEffect(() => {
-    async function fetchData() {
+    function fetchData() {
       try {
-        const actions: RecentAction[] = await fetchRecentActions();
+        const actions: RecentAction[] = fetchRecentActions();
         setRecentActions(actions);
       } catch (error) {
         console.error('Error fetching recent actions:', error);
@@ -43,8 +43,22 @@ const MyRecentActions: React.FC = () => {
   return (
     <Tabs>
       <TabList activation="manual" aria-label="List of tabs">
-        <Tab><div className="tab-header-recent">Recent</div></Tab>
-        <Tab><div className="tab-header-recent">Files and Docs</div></Tab>
+        <Tab>
+          <div
+            className="tab-header-recent"
+            data-testid={"my-recent-actions__recent-tab-header"}
+          >
+            Recent
+          </div>
+        </Tab>
+        <Tab>
+          <div
+            className="tab-header-recent"
+            data-testid={"my-recent-actions__files-tab-header"}
+          >
+            Files and Docs
+          </div>
+        </Tab>
       </TabList>
       <TabPanels>
         <TabPanel className="tab-content">

frontend/src/components/StatusTag/index.tsx

@@ -13,7 +13,11 @@ const StatusTag: React.FC<IStatusTag> = (props) => {
   const typeColor: string = StatusColourMap[colorKey as keyof typeof StatusColourMap];
 
   return (
-    <Tag className="status-tag" type={typeColor}>
+    <Tag
+      className="status-tag"
+      type={typeColor}
+      data-testid={`tag__status_colored_tag_${colorKey}`}
+    >
       { props.code }
     </Tag>
   );

frontend/src/services/OpeningService.ts

@@ -7,6 +7,20 @@ import { RecentOpening } from '../types/RecentOpening';
 
 const backendUrl = env.VITE_BACKEND_URL;
 
+interface IOpeningReq {
+  openingId: string;
+  fileId: string;
+  cuttingPermit: string | null;
+  timberMark: string | null;
+  cutBlock: string | null;
+  grossAreaHa: number | null;
+  status: { code: string, description: string } | null;
+  category: { code: string, description: string } | null;
+  disturbanceStart: string | null;
+  entryTimestamp: string | null;
+  updateTimestamp: string | null;
+}
+
 /**
  * Fetch recent openings data from backend.
  *
@@ -26,16 +40,16 @@ export async function fetchRecentOpenings(): Promise<RecentOpening[]> {
 
       if (data.data) {
         // Extracting row information from the fetched data
-        const rows: RecentOpening[] = data.data.map((opening: RecentOpening) => ({
+        const rows: RecentOpening[] = data.data.map((opening: IOpeningReq) => ({
           id: opening.openingId.toString(),
           openingId: opening.openingId.toString(),
           fileId: opening.fileId ? opening.fileId : '-',
           cuttingPermit: opening.cuttingPermit ? opening.cuttingPermit : '-',
           timberMark: opening.timberMark ? opening.timberMark : '-',
           cutBlock: opening.cutBlock ? opening.cutBlock : '-',
           grossAreaHa: opening.grossAreaHa ? opening.grossAreaHa.toString() : '-',
-          status: opening.status ? opening.status.description : '-',
-          category: opening.category ? opening.category.code : '-',
+          statusDesc: opening.status ? opening.status.description : '-',
+          categoryDesc: opening.category ? opening.category.code : '-',
           disturbanceStart: opening.disturbanceStart ? opening.disturbanceStart : '-',
           entryTimestamp: opening.entryTimestamp ? opening.entryTimestamp.split('T')[0] : '-',
           updateTimestamp: opening.updateTimestamp ? opening.updateTimestamp.split('T')[0] : '-'

frontend/src/types/RecentOpening.ts

@@ -5,8 +5,8 @@ export interface RecentOpening {
   timberMark: string | null;
   cutBlock: string | null;
   grossAreaHa: number | null;
-  status: {code: string, description: string} | null;
-  category: {code: string, description: string} | null;
+  statusDesc: string | null;
+  categoryDesc: string | null;
   disturbanceStart: string | null;
   entryTimestamp: string | null;
   updateTimestamp: string | null;