[PR to main] DESENG-483 - Adding missing unit test

CHANGELOG.MD

@@ -1,3 +1,7 @@
+## February 26, 2024
+- **Task**Adding missing unit test [DESENG-483](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-483)
+    - Added missing unit test for components.
+
 ## February 20, 2024
 - **Task**Upgrade the version of flask [DESENG-502](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-502)
     - Performed a Flask version upgrade to version 2.2.5.

met-web/__mocks__/fileMock.ts

@@ -0,0 +1 @@
+export default 'mock-file-stub';

met-web/jest.config.ts

@@ -82,6 +82,7 @@ const config: Config.InitialOptions = {
         'react-dnd-html5-backend': 'react-dnd-html5-backend-cjs',
         'dnd-core': 'dnd-core-cjs',
         '\\.(css|scss)$': '<rootDir>/tests/unit/components/styleMock.tsx',
+        "\\.(jpg|jpeg|png|gif|webp|svg)$": "<rootDir>/__mocks__/fileMock.ts",
     },
 
     // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

met-web/src/components/engagement/form/EngagementWidgets/Poll/Form.tsx

@@ -163,6 +163,7 @@ const Form = () => {
             <MetDescription>The title must be less than 255 characters.</MetDescription>
             <TextField
                 id="title"
+                data-testid="title"
                 name="title"
                 variant="outlined"
                 label=" "
@@ -183,6 +184,7 @@ const Form = () => {
             <MetLabel>Description</MetLabel>
             <TextField
                 id="description"
+                data-testid="description"
                 name="description"
                 variant="outlined"
                 label=" "
@@ -215,6 +217,7 @@ const Form = () => {
             <MetLabel>Status</MetLabel>
             <Select
                 name="status"
+                data-testid="status"
                 value={pollWidgetState?.status}
                 fullWidth
                 size="small"
@@ -253,7 +256,7 @@ const Form = () => {
             mt={'1em'}
         >
             <Grid item>
-                <PrimaryButton type="submit" disabled={isCreating}>
+                <PrimaryButton type="submit" disabled={isCreating} data-testid="save-button">
                     Save & Close
                 </PrimaryButton>
             </Grid>

met-web/src/components/engagement/form/EngagementWidgets/Poll/PolllAnswerItemForm.tsx

@@ -18,6 +18,7 @@ const PollAnswerItemForm: React.FC<PollAnswerItemProps> = React.memo(
                 <Grid item xs={12}>
                     <MetLabel>{'Answer Text ' + (index + 1)}</MetLabel>
                     <TextField
+                        data-testid={'answerText' + (index + 1)}
                         name={'answerText' + (index + 1)}
                         id={'answerText' + (index + 1)}
                         variant="outlined"

met-web/tests/unit/components/FormCAC/FormCAC.test.tsx

@@ -0,0 +1,105 @@
+import React, { ReactNode } from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Form } from 'components/FormCAC/Form';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { FormContext } from 'components/FormCAC/FormContext';
+
+jest.mock('@mui/lab/TabContext/TabContext', () => {
+    // Create a mock component
+    return {
+        __esModule: true,
+        default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    };
+});
+
+jest.mock('@mui/lab/TabPanel/TabPanel', () => {
+    // Create a mock component
+    return {
+        __esModule: true,
+        default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    };
+});
+
+jest.mock('@mui/material', () => ({
+    ...jest.requireActual('@mui/material'),
+    Link: ({ children }: { children: ReactNode }) => {
+        return <a>{children}</a>;
+    },
+}));
+// Mock hooks and services
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useNavigate: () => jest.fn(),
+    useParams: () => ({
+        widgetId: '1',
+        engagementId: '1',
+    }),
+}));
+
+jest.mock('react-redux', () => ({
+    useDispatch: () => jest.fn(),
+}));
+
+const mockFormSubmissionData = {
+    understand: true,
+    termsOfReference: true,
+    firstName: 'John',
+    lastName: 'Doe',
+    city: 'New York',
+    email: '[email protected]',
+};
+
+const mockFormSubmission = {
+    tabValue: 1,
+    loading: false,
+    setTabValue: jest.fn(),
+    formSubmission: mockFormSubmissionData,
+    setFormSubmission: jest.fn(),
+    submitting: false,
+    setSubmitting: jest.fn(),
+    consentMessage: '',
+};
+
+describe('FormContextProvider Component Tests', () => {
+    const renderForm = () => {
+        render(
+            <Router>
+                <FormContext.Provider value={mockFormSubmission}>
+                    <Form />
+                </FormContext.Provider>
+            </Router>,
+        );
+    };
+
+    test('loads and displays data correctly', async () => {
+        renderForm();
+
+        await waitFor(() => {
+            expect(screen.getByText('Community Advisory Committee')).toBeInTheDocument();
+            expect(screen.getByText('Learn about and sign up for a Community Advisory Committee')).toBeInTheDocument();
+        });
+    });
+
+    test('loads and displays two tabs correctly', async () => {
+        renderForm();
+
+        await waitFor(() => {
+            expect(screen.getByText('Information')).toBeInTheDocument();
+            expect(screen.getByText('You and Your Community')).toBeInTheDocument();
+        });
+    });
+
+    test('loads and displays form fields for tabs correctly', async () => {
+        renderForm();
+
+        await waitFor(() => {
+            expect(screen.getByText('First Name')).toBeInTheDocument();
+            expect(screen.getByText('Last Name')).toBeInTheDocument();
+            expect(screen.getByText('City')).toBeInTheDocument();
+            expect(screen.getByText('Email')).toBeInTheDocument();
+            expect(screen.getByText('Next')).toBeInTheDocument();
+            expect(screen.getByText('Submit')).toBeInTheDocument();
+        });
+    });
+});

met-web/tests/unit/components/factory.ts

@@ -12,6 +12,9 @@ import { EngagementStatus } from 'constants/engagementStatus';
 import { WidgetType, Widget, WidgetItem } from 'models/widget';
 import { Event, EventItem } from 'models/event';
 import { WidgetMap } from 'models/widgetMap';
+import { PollWidget, PollAnswer } from 'models/pollWidget';
+import { VideoWidget } from 'models/videoWidget';
+import { TimelineWidget, TimelineEvent, EventStatus } from 'models/timelineWidget';
 import { Tenant } from 'models/tenant';
 
 const tenant: Tenant = {
@@ -162,6 +165,92 @@ const mockMap: WidgetMap = {
     file_name: 'test.zip',
 };
 
+const pollWidgetItem: WidgetItem = {
+    id: 1,
+    widget_id: 1,
+    widget_data_id: 1,
+    sort_index: 1,
+};
+
+const pollWidget: Widget = {
+    id: 1,
+    title: 'Poll',
+    widget_type_id: WidgetType.Poll,
+    engagement_id: 1,
+    items: [],
+};
+
+const videoWidget: Widget = {
+    id: 1,
+    title: 'Video',
+    widget_type_id: WidgetType.Video,
+    engagement_id: 1,
+    items: [],
+};
+
+const subscribeWidget: Widget = {
+    id: 1,
+    title: 'Subscribe',
+    widget_type_id: WidgetType.Subscribe,
+    engagement_id: 1,
+    items: [],
+};
+
+const timeLineWidget: Widget = {
+    id: 1,
+    title: 'Timeline',
+    widget_type_id: WidgetType.Timeline,
+    engagement_id: 1,
+    items: [],
+};
+
+const mockPollAnswer1: PollAnswer = {
+    id: 0,
+    answer_text: 'answer 1',
+};
+
+const mockPollAnswer2: PollAnswer = {
+    id: 1,
+    answer_text: 'answer 2',
+};
+
+const mockPoll: PollWidget = {
+    id: 1,
+    widget_id: 1,
+    engagement_id: 1,
+    title: 'Poll',
+    description: 'Test description',
+    status: 'active',
+    answers: [mockPollAnswer1, mockPollAnswer2],
+};
+
+const mockVideo: VideoWidget = {
+    id: 1,
+    widget_id: 1,
+    engagement_id: 1,
+    video_url: 'https://youtube.url',
+    description: 'Video description',
+};
+
+const mockTimeLineEvent1: TimelineEvent = {
+    id: 1,
+    engagement_id: 1,
+    widget_id: 1,
+    timeline_id: 1,
+    description: 'Time Line Event One Description',
+    time: '2022-09-14 20:16:29.846877',
+    status: EventStatus.Pending,
+    position: 1,
+};
+
+const mockTimeLine: TimelineWidget = {
+    id: 1,
+    widget_id: 1,
+    engagement_id: 1,
+    title: 'Time Line Title',
+    description: 'Time Line Description',
+    events: [mockTimeLineEvent1],
+};
 const engagementMetadata: EngagementMetadata = {
     ...createDefaultEngagementMetadata(),
     engagement_id: 1,
@@ -191,4 +280,11 @@ export {
     engagementMetadata,
     engagementSlugData,
     engagementSetting,
+    mockPoll,
+    pollWidget,
+    videoWidget,
+    mockVideo,
+    timeLineWidget,
+    mockTimeLine,
+    subscribeWidget,
 };