Merge partially branch 'main' of github.com:bcgov/nr-silva into fix/o…

…peningDesignReview

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/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/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;