diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 7cb9b6533..8782b68c7 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -1,6 +1,8 @@
 ## February 26, 2024
 - **Task**Add font awesome libraries [DESENG-490](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-490)
     - Added related libraries to the frontend package.json.
+- **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)
diff --git a/met-web/__mocks__/fileMock.ts b/met-web/__mocks__/fileMock.ts
new file mode 100644
index 000000000..da8215b36
--- /dev/null
+++ b/met-web/__mocks__/fileMock.ts
@@ -0,0 +1 @@
+export default 'mock-file-stub';
diff --git a/met-web/jest.config.ts b/met-web/jest.config.ts
index abfab92cd..aa3653754 100644
--- a/met-web/jest.config.ts
+++ b/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
diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Poll/Form.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Poll/Form.tsx
index df4e41de4..dfacc7099 100644
--- a/met-web/src/components/engagement/form/EngagementWidgets/Poll/Form.tsx
+++ b/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>
diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Poll/PolllAnswerItemForm.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Poll/PolllAnswerItemForm.tsx
index a32b2eab9..6d330de77 100644
--- a/met-web/src/components/engagement/form/EngagementWidgets/Poll/PolllAnswerItemForm.tsx
+++ b/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"
diff --git a/met-web/tests/unit/components/FormCAC/FormCAC.test.tsx b/met-web/tests/unit/components/FormCAC/FormCAC.test.tsx
new file mode 100644
index 000000000..6b89cd611
--- /dev/null
+++ b/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: 'john.doe@example.com',
+};
+
+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();
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/factory.ts b/met-web/tests/unit/components/factory.ts
index aec9698e1..c7a117b6b 100644
--- a/met-web/tests/unit/components/factory.ts
+++ b/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,
 };
diff --git a/met-web/tests/unit/components/landingPage/LandingPage.test.tsx b/met-web/tests/unit/components/landingPage/LandingPage.test.tsx
new file mode 100644
index 000000000..d3aff2e1b
--- /dev/null
+++ b/met-web/tests/unit/components/landingPage/LandingPage.test.tsx
@@ -0,0 +1,157 @@
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import LandingComponent from 'components/landing/LandingComponent';
+import { setupEnv } from '../setEnvVars';
+import { LandingContext } from 'components/landing/LandingContext';
+import * as reactRedux from 'react-redux';
+import { openEngagement, closedEngagement } from '../factory';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('axios');
+
+jest.mock('components/common', () => ({
+    ...jest.requireActual('components/common'),
+    PrimaryButton: ({ children, ...rest }: { children: React.ReactNode }) => {
+        return <button {...rest}>{children}</button>;
+    },
+}));
+
+jest.mock('hooks', () => ({
+    useAppTranslation: () => ({
+        t: (key: string) => key, // return the key itself
+    }),
+}));
+
+jest.mock('constants/engagementStatus', () => ({
+    EngagementDisplayStatus: {
+        Draft: 1,
+        Published: 2,
+        Closed: 3,
+        Scheduled: 4,
+        Upcoming: 5,
+        Open: 6,
+        Unpublished: 7,
+    },
+    SubmissionStatus: {
+        Upcoming: 1,
+        Open: 2,
+        Closed: 3,
+        Unpublished: 4,
+    },
+    EngagementStatus: {
+        Draft: 1,
+        Published: 2,
+        Closed: 3,
+        Scheduled: 4,
+        Unpublished: 5,
+    },
+}));
+
+describe('Landing page tests', () => {
+    jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => jest.fn());
+
+    beforeEach(() => {
+        setupEnv();
+    });
+
+    test('LandingComponent is rendered correctly with engagements listed', async () => {
+        render(
+            <LandingContext.Provider
+                value={{
+                    searchFilters: {
+                        name: '',
+                        status: [],
+                    },
+                    setSearchFilters: jest.fn(),
+                    setPage: jest.fn(),
+                    page: 1,
+                    engagements: [openEngagement, closedEngagement],
+                    loadingEngagements: false,
+                    totalEngagements: 0,
+                }}
+            >
+                <LandingComponent />
+            </LandingContext.Provider>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByPlaceholderText("Type engagement's name...")).toBeInTheDocument();
+            expect(screen.getByText('Engagement name')).toBeInTheDocument();
+            expect(screen.getByText('Status')).toBeInTheDocument();
+            expect(screen.getByText('landing.banner.header')).toBeInTheDocument();
+            expect(screen.getByText('landing.banner.description')).toBeInTheDocument();
+            expect(screen.getByText(openEngagement.name)).toBeInTheDocument();
+            expect(screen.getByText(closedEngagement.name)).toBeInTheDocument();
+        });
+    });
+
+    test('Search functionality is triggered on input change', async () => {
+        const setSearchFiltersMock = jest.fn();
+
+        render(
+            <LandingContext.Provider
+                value={{
+                    searchFilters: {
+                        name: '',
+                        status: [],
+                    },
+                    setSearchFilters: setSearchFiltersMock,
+                    setPage: jest.fn(),
+                    page: 1,
+                    engagements: [],
+                    loadingEngagements: false,
+                    totalEngagements: 0,
+                }}
+            >
+                <LandingComponent />
+            </LandingContext.Provider>,
+        );
+
+        const searchInput = screen.getByPlaceholderText("Type engagement's name...");
+        fireEvent.change(searchInput, { target: { value: 'New Search' } });
+
+        await waitFor(() => {
+            expect(setSearchFiltersMock).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    test('Status filter is working', async () => {
+        const setSearchFiltersMock = jest.fn();
+
+        render(
+            <LandingContext.Provider
+                value={{
+                    searchFilters: {
+                        name: '',
+                        status: [],
+                    },
+                    setSearchFilters: setSearchFiltersMock,
+                    setPage: jest.fn(),
+                    page: 1,
+                    engagements: [],
+                    loadingEngagements: false,
+                    totalEngagements: 0,
+                }}
+            >
+                <LandingComponent />
+            </LandingContext.Provider>,
+        );
+
+        // Find all elements with role "button"
+        const allButtons = screen.getAllByRole('button');
+
+        // Find the specific button with id "status"
+        const statusDropdown = allButtons.find((button) => button.id === 'status') as HTMLElement;
+        userEvent.click(statusDropdown);
+        const openItem = await screen.findByText('Open');
+        userEvent.click(openItem);
+
+        await waitFor(() => {
+            expect(setSearchFiltersMock).toHaveBeenCalledWith({
+                name: '',
+                status: [6], // The numeric value corresponding to 'Open'
+            });
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/publicDashboard/ProjectLocation.test.tsx b/met-web/tests/unit/components/publicDashboard/ProjectLocation.test.tsx
new file mode 100644
index 000000000..e4b1d205a
--- /dev/null
+++ b/met-web/tests/unit/components/publicDashboard/ProjectLocation.test.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ProjectLocation from 'components/publicDashboard/KPI/ProjectLocation';
+import * as mapService from 'services/analytics/mapService';
+import { closedEngagement } from '../factory';
+
+jest.mock('@mui/material', () => ({
+    ...jest.requireActual('@mui/material'),
+    useMediaQuery: jest.fn(() => true),
+}));
+
+jest.mock('components/map', () => () => <div>Mocked Map Component</div>);
+
+const mockEngagement = closedEngagement;
+
+const getMapDataMock = jest.spyOn(mapService, 'getMapData');
+
+describe('ProjectLocation Component Tests', () => {
+    const mockHandleProjectMapData = jest.fn();
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    test('displays loading indicator while fetching data', () => {
+        getMapDataMock.mockReturnValue(new Promise(() => { }));
+        render(
+            <ProjectLocation
+                engagement={mockEngagement}
+                engagementIsLoading={true}
+                handleProjectMapData={mockHandleProjectMapData}
+            />,
+        );
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+
+    test('renders map correctly on successful data fetch', async () => {
+
+        const geoJson = {
+            type: 'FeatureCollection',
+            features: [
+                {
+                    type: 'Feature',
+                    properties: {
+                        name: 'Example Point',
+                    },
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [-123.3656, 48.4284],
+                    },
+                },
+            ],
+        };
+
+        const mockData = {
+            latitude: 123,
+            longitude: 456,
+            geojson: JSON.stringify(geoJson),
+            marker_label: 'Test Location',
+        };
+        getMapDataMock.mockResolvedValue(mockData);
+        render(
+            <ProjectLocation
+                engagement={mockEngagement}
+                engagementIsLoading={false}
+                handleProjectMapData={mockHandleProjectMapData}
+            />,
+        );
+        await waitFor(() => {
+            expect(screen.getByText('Mocked Map Component')).toBeInTheDocument();
+        });
+    });
+
+    test('displays error message on fetch failure', async () => {
+        getMapDataMock.mockRejectedValue(new Error('Fetch Error'));
+        render(
+            <ProjectLocation
+                engagement={mockEngagement}
+                engagementIsLoading={false}
+                handleProjectMapData={mockHandleProjectMapData}
+            />,
+        );
+        await waitFor(() => {
+            expect(screen.getByText('Error')).toBeInTheDocument();
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/publicDashboard/PublicDashboard.test.tsx b/met-web/tests/unit/components/publicDashboard/PublicDashboard.test.tsx
new file mode 100644
index 000000000..b64ddd876
--- /dev/null
+++ b/met-web/tests/unit/components/publicDashboard/PublicDashboard.test.tsx
@@ -0,0 +1,84 @@
+import { render, waitFor, screen } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import Dashboard from 'components/publicDashboard/Dashboard';
+import { setupEnv } from '../setEnvVars';
+import { DashboardContext } from 'components/publicDashboard/DashboardContext';
+import * as reactRedux from 'react-redux';
+import { closedEngagement } from '../factory';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+
+jest.mock('axios');
+jest.mock('components/common', () => ({
+    ...jest.requireActual('components/common'),
+    PrimaryButton: ({ children, ...rest }: { children: React.ReactNode }) => {
+        return <button {...rest}>{children}</button>;
+    },
+}));
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useLocation: jest.fn(() => ({ search: '' })),
+    useParams: jest.fn(() => {
+        return { slug: '' };
+    }),
+    useNavigate: () => jest.fn(),
+}));
+
+jest.mock('hooks', () => ({
+    useAppTranslation: () => ({
+        t: (key: string) => key, // return the key itself
+    }),
+    useAppSelector: jest.fn(() => true),
+}));
+
+jest.mock('@mui/material', () => ({
+    ...jest.requireActual('@mui/material'),
+    useMediaQuery: jest.fn(() => true),
+}));
+
+jest.mock('maplibre-gl/dist/maplibre-gl', () => ({
+    Map: () => ({}),
+}));
+
+describe('Public Dashboard page tests', () => {
+    jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => jest.fn());
+    beforeEach(() => {
+        setupEnv();
+        render(
+            <BrowserRouter>
+                <DashboardContext.Provider
+                    value={{
+                        engagement: closedEngagement,
+                        isEngagementLoading: false,
+                        dashboardType: 'public',
+                    }}
+                >
+                    <Dashboard />
+                </DashboardContext.Provider>
+            </BrowserRouter>,
+        );
+    });
+
+    test('Public Dashboard is rendered correctly', async () => {
+        await waitFor(() => {
+            const elements = screen.getAllByText(closedEngagement.name);
+            expect(elements.length).toBeGreaterThan(1);
+        });
+    });
+
+    test('Navigation links work correctly', async () => {
+        const returnLink = screen.getByText(`<< Return to ${closedEngagement.name} Engagement`);
+        expect(returnLink).toBeInTheDocument();
+        userEvent.click(returnLink);
+        expect(window.location.pathname).toBe(`/engagements/${closedEngagement.id}/view`);
+    });
+
+    test('Public Dashboard has sub components', async () => {
+        expect(screen.getByText('Survey Emails Sent')).toBeInTheDocument();
+        expect(screen.getByText('Surveys Completed')).toBeInTheDocument();
+        expect(screen.getByText('Project Location')).toBeInTheDocument();
+        expect(screen.getByText('Live Activity - Engagement')).toBeInTheDocument();
+    });
+});
diff --git a/met-web/tests/unit/components/publicDashboard/SubmissionTrend.test.tsx b/met-web/tests/unit/components/publicDashboard/SubmissionTrend.test.tsx
new file mode 100644
index 000000000..10997c79d
--- /dev/null
+++ b/met-web/tests/unit/components/publicDashboard/SubmissionTrend.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SubmissionTrend from 'components/publicDashboard/SubmissionTrend/SubmissionTrend';
+import * as userResponseDetailService from 'services/analytics/userResponseDetailService';
+import { closedEngagement } from '../factory';
+import { UserResponseDetailByMonth } from 'models/analytics/userResponseDetail';
+
+jest.mock('@mui/material', () => ({
+    ...jest.requireActual('@mui/material'),
+    useMediaQuery: jest.fn(() => false),
+}));
+
+// Setting the mock ResizeObserver on the global window object
+window.ResizeObserver = jest.fn().mockImplementation(() => {
+    return {
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+        disconnect: jest.fn(),
+    };
+});
+
+const mockEngagement = closedEngagement;
+
+const getMonthlyDataMock = jest.spyOn(userResponseDetailService, 'getUserResponseDetailByMonth');
+
+describe('SubmissionTrend Component Tests', () => {
+
+    test('displays loading indicator while fetching data', () => {
+        getMonthlyDataMock.mockReturnValueOnce(
+            Promise.resolve({
+                showdataby: '',
+                responses: 0,
+            }),
+        );
+        render(<SubmissionTrend engagement={mockEngagement} engagementIsLoading={true} />);
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+
+    test('renders correctly on successful monthly data fetch', async () => {
+        const mockData: UserResponseDetailByMonth = { showdataby: 'January', responses: 100 };
+        getMonthlyDataMock.mockResolvedValue(Promise.resolve(mockData));
+        render(<SubmissionTrend engagement={mockEngagement} engagementIsLoading={false} />);
+        await waitFor(() => {
+            expect(screen.getByText('Select Date Range')).toBeInTheDocument();
+            // Check if the "Weekly" toggle button is present
+            const weeklyToggleButton = screen.getByText('Weekly');
+            expect(weeklyToggleButton).toBeInTheDocument();
+
+            // Check if the "Monthly" toggle button is present
+            const monthlyToggleButton = screen.getByText('Monthly');
+            expect(monthlyToggleButton).toBeInTheDocument();
+
+            // Check if the "Reset All Filters" toggle button is present
+            const resetFilterButton = screen.getByText('Reset All Filters');
+            expect(resetFilterButton).toBeInTheDocument();
+        });
+    });
+
+    test('displays error message on fetch failure', async () => {
+        getMonthlyDataMock.mockRejectedValue(new Error('Fetch Error'));
+        render(<SubmissionTrend engagement={mockEngagement} engagementIsLoading={false} />);
+        await waitFor(() => {
+            expect(screen.getByText('No Data Available')).toBeInTheDocument();
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/publicDashboard/SurveyEmailsSent.test.tsx b/met-web/tests/unit/components/publicDashboard/SurveyEmailsSent.test.tsx
new file mode 100644
index 000000000..3749ce912
--- /dev/null
+++ b/met-web/tests/unit/components/publicDashboard/SurveyEmailsSent.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SurveyEmailsSent from 'components/publicDashboard/KPI/SurveyEmailsSent';
+import * as aggregatorService from 'services/analytics/aggregatorService';
+import { closedEngagement } from '../factory';
+
+jest.mock('@mui/material', () => ({
+    ...jest.requireActual('@mui/material'),
+    useMediaQuery: jest.fn(() => true),
+}));
+const mockEngagement = closedEngagement;
+
+const renderComponent = () => {
+    render(<SurveyEmailsSent engagement={mockEngagement} engagementIsLoading={false} />);
+};
+
+describe('SurveyEmailsSent Component Tests', () => {
+    const getAggregatorMock = jest.spyOn(aggregatorService, 'getAggregatorData');
+
+    test('displays loading indicator while fetching data', () => {
+        getAggregatorMock.mockReturnValueOnce(
+            Promise.resolve({
+                key: '',
+                value: 0,
+            }),
+        );
+        render(<SurveyEmailsSent engagement={mockEngagement} engagementIsLoading={true} />);
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+
+    test('displays data correctly on successful fetch', async () => {
+        const mockData = { key: 'email_verification', value: 200 };
+        getAggregatorMock.mockReturnValueOnce(Promise.resolve(mockData));
+        renderComponent();
+        await waitFor(() => {
+            expect(screen.getByText(mockData.value.toString())).toBeInTheDocument();
+        });
+    });
+
+    test('displays error message on fetch failure', async () => {
+        getAggregatorMock.mockRejectedValue(new Error('Fetch Error'));
+        renderComponent();
+        await waitFor(() => {
+            expect(screen.getByText('No Data Available')).toBeInTheDocument();
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/publicDashboard/SurveysCompleted.test.tsx b/met-web/tests/unit/components/publicDashboard/SurveysCompleted.test.tsx
new file mode 100644
index 000000000..f1fea6d88
--- /dev/null
+++ b/met-web/tests/unit/components/publicDashboard/SurveysCompleted.test.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SurveysCompleted from 'components/publicDashboard/KPI/SurveysCompleted';
+import * as aggregatorService from 'services/analytics/aggregatorService';
+import { closedEngagement } from '../factory';
+
+jest.mock('@mui/material', () => ({
+    ...jest.requireActual('@mui/material'),
+    useMediaQuery: jest.fn(() => true),
+}));
+const mockEngagement = closedEngagement;
+
+const renderComponent = () => {
+    render(<SurveysCompleted engagement={mockEngagement} engagementIsLoading={false} />);
+};
+
+describe('SurveysCompleted Component Tests', () => {
+    const getAggregatorMock = jest.spyOn(aggregatorService, 'getAggregatorData');
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    test('displays loading indicator while fetching data', () => {
+        getAggregatorMock.mockReturnValueOnce(
+            Promise.resolve({
+                key: '',
+                value: 0,
+            }),
+        );
+        render(<SurveysCompleted engagement={mockEngagement} engagementIsLoading={true} />);
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+
+    test('displays data correctly on successful fetch', async () => {
+        const mockSurveyData = { key: 'survey_completed', value: 200 };
+        const mockEmailData = { key: 'email_verification', value: 100 };
+
+        getAggregatorMock.mockResolvedValueOnce(mockSurveyData).mockResolvedValueOnce(mockEmailData);
+
+        renderComponent();
+        await waitFor(() => {
+            expect(screen.getByText(mockSurveyData.value.toString())).toBeInTheDocument();
+        });
+    });
+
+    test('displays error message on fetch failure', async () => {
+        getAggregatorMock.mockRejectedValueOnce(new Error('Fetch Error'));
+
+        renderComponent();
+        await waitFor(() => {
+            expect(screen.getByText('No Data Available')).toBeInTheDocument();
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/widgets/PollWidget.test.tsx b/met-web/tests/unit/components/widgets/PollWidget.test.tsx
new file mode 100644
index 000000000..3d86b370d
--- /dev/null
+++ b/met-web/tests/unit/components/widgets/PollWidget.test.tsx
@@ -0,0 +1,137 @@
+import { render, waitFor, screen, fireEvent, within } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import EngagementForm from '../../../../src/components/engagement/form';
+import * as widgetService from 'services/widgetService';
+import * as PollService from 'services/widgetService/PollService';
+import { WidgetType } from 'models/widget';
+import { draftEngagement, mockPoll, pollWidget } from '../factory';
+import { USER_ROLES } from 'services/userService/constants';
+import { setupWidgetTestEnvMock, setupWidgetTestEnvSpy } from './setupWidgetTestEnv';
+
+jest.mock('components/map', () => () => <div></div>);
+jest.mock('axios');
+jest.mock('react-redux', () => ({
+    ...jest.requireActual('react-redux'),
+    useSelector: jest.fn(() => {
+        return {
+            roles: [USER_ROLES.VIEW_PRIVATE_ENGAGEMENTS, USER_ROLES.EDIT_ENGAGEMENT, USER_ROLES.CREATE_ENGAGEMENT],
+            assignedEngagements: [draftEngagement.id],
+        };
+    }),
+}));
+const mockCreateWidget = jest.fn(() => Promise.resolve(pollWidget));
+
+jest.mock('apiManager/apiSlices/widgets', () => ({
+    ...jest.requireActual('apiManager/apiSlices/widgets'),
+    useCreateWidgetMutation: () => [mockCreateWidget],
+    useCreateWidgetItemsMutation: () => [mockCreateWidget],
+    useUpdateWidgetMutation: () => [jest.fn(() => Promise.resolve(pollWidget))],
+    useDeleteWidgetMutation: () => [jest.fn(() => Promise.resolve())],
+    useSortWidgetsMutation: () => [jest.fn(() => Promise.resolve())],
+}));
+
+// Mock the necessary services and contexts
+jest.mock('services/widgetService/PollService', () => ({
+    postPoll: jest.fn(),
+    patchPoll: jest.fn(),
+}));
+
+describe('Poll Widget tests', () => {
+    beforeAll(() => {
+        setupWidgetTestEnvMock();
+        setupWidgetTestEnvSpy();
+        jest.spyOn(widgetService, 'getWidgets').mockReturnValue(Promise.resolve([pollWidget]));
+    });
+
+    async function addPollWidget() {
+        await waitFor(() => expect(screen.getByText('Add Widget')).toBeInTheDocument());
+        fireEvent.click(screen.getByText('Add Widget'));
+        await waitFor(() => expect(screen.getByText('Select Widget')).toBeVisible());
+        fireEvent.click(screen.getByTestId(`widget-drawer-option/${WidgetType.Poll}`));
+        await waitFor(() => {
+            expect(screen.getByText('Poll Answers')).toBeVisible();
+        });
+    }
+
+    async function inputMockPollData() {
+        const titleInput = within(screen.getByTestId('title')).getByRole('textbox') as HTMLInputElement;
+        const descInput = within(screen.getByTestId('description')).getByRole('textbox') as HTMLInputElement;
+        const answerText1 = within(screen.getByTestId('answerText1')).getByRole('textbox') as HTMLInputElement;
+        const statusButton = screen.getByTestId('status') as HTMLInputElement;
+        const addAnswerButton = screen.getByText('Add Answer');
+
+        fireEvent.change(titleInput, { target: { value: mockPoll.title } });
+        fireEvent.change(descInput, { target: { value: mockPoll.description } });
+        fireEvent.change(answerText1, { target: { value: mockPoll.answers[0].answer_text } });
+
+        fireEvent.mouseDown(statusButton);
+        const activeOption = screen.getByText('Active');
+        fireEvent.click(activeOption);
+
+        fireEvent.click(addAnswerButton);
+        const answerText2 = within(screen.getByTestId('answerText2')).getByRole('textbox') as HTMLInputElement;
+        fireEvent.change(answerText2, { target: { value: mockPoll.answers[1].answer_text } });
+
+        // Find the parent element of the Select component using the data-testid
+        const selectParent = screen.getByTestId('status').parentElement;
+
+        // Find the hidden input within this parent element
+        const hiddenInput = selectParent?.querySelector('input[name="status"]') as HTMLInputElement;
+
+
+        await waitFor(() => {
+            expect(titleInput.value).toBe(mockPoll.title);
+            expect(descInput.value).toBe(mockPoll.description);
+            expect(answerText1.value).toBe(mockPoll.answers[0].answer_text);
+            expect(answerText2.value).toBe(mockPoll.answers[1].answer_text);
+            expect(hiddenInput.value).toBe('active');
+        });
+    }
+
+    test('Poll widget is created when option is clicked', async () => {
+        render(<EngagementForm />);
+        const getWidgetsMock = jest.spyOn(widgetService, 'getWidgets').mockReturnValue(Promise.resolve([pollWidget]));
+
+        await addPollWidget();
+
+        expect(getWidgetsMock).toHaveBeenCalledTimes(1);
+
+        expect(screen.getByText('Title')).toBeVisible();
+        expect(screen.getByText('Description')).toBeVisible();
+    });
+
+    test('Multiple answers can be added on Poll widget', async () => {
+        render(<EngagementForm />);
+        await addPollWidget();
+
+        const addAnswerButton = screen.getByText('Add Answer');
+        fireEvent.click(addAnswerButton);
+        fireEvent.click(addAnswerButton);
+
+        await waitFor(() => {
+            expect(screen.getByText('Answer Text 2')).toBeVisible();
+            expect(screen.getByText('Answer Text 3')).toBeVisible();
+        });
+    });
+
+    test('Poll widget handles input correctly', async () => {
+        render(<EngagementForm />);
+        await addPollWidget();
+        await inputMockPollData();
+    });
+
+    test('Poll can be submitted after inputting mock data', async () => {
+        render(<EngagementForm />);
+
+        await addPollWidget();
+        await inputMockPollData();
+
+        const submitButton = screen.getByTestId('save-button');
+        fireEvent.click(submitButton);
+
+        await waitFor(() => {
+            expect(PollService.postPoll).toHaveBeenCalledTimes(1);
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/widgets/PollWidgetView.test.tsx b/met-web/tests/unit/components/widgets/PollWidgetView.test.tsx
new file mode 100644
index 000000000..c9f6a48a0
--- /dev/null
+++ b/met-web/tests/unit/components/widgets/PollWidgetView.test.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { act, render, waitFor, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import PollWidgetView from 'components/engagement/view/widgets/Poll/PollWidgetView';
+import * as widgetService from 'services/widgetService/PollService';
+import * as notificationService from 'services/notificationService/notificationSlice';
+import * as reactRedux from 'react-redux';
+
+// Mock for useDispatch
+jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => jest.fn());
+
+// Mock for useSubmittedPolls
+jest.mock('hooks', () => ({
+    // mock useAppSelector
+    useAppSelector: (callback: any) =>
+        callback({
+            user: {
+                authentication: {
+                    authenticated: false,
+                },
+            },
+        }),
+    useAppDispatch: () => jest.fn(),
+    useSubmittedPolls: () => ({
+        getSubmittedPolls: jest.fn().mockReturnValue([]),
+        addSubmittedPoll: jest.fn(),
+    }),
+}));
+
+jest.mock('services/widgetService/PollService', () => ({
+    fetchPollWidgets: jest.fn(),
+    postPollResponse: jest.fn(),
+}));
+
+jest.mock('services/notificationService/notificationSlice', () => ({
+    openNotification: jest.fn(),
+}));
+
+describe('PollWidgetView Component Tests', () => {
+    const widget = {
+        id: 1,
+        title: 'Sample Poll',
+        widget_type_id: 10,
+        engagement_id: 1,
+        items: [],
+    };
+
+    const mockPoll = {
+        id: 1,
+        widget_id: 1,
+        engagement_id: 1,
+        title: 'Test Poll',
+        description: 'Description',
+        status: 'active',
+        answers: [
+            { id: 1, answer_text: 'Option 1' },
+            { id: 2, answer_text: 'Option 2' },
+        ],
+    };
+
+    beforeEach(() => {
+        jest.spyOn(widgetService, 'fetchPollWidgets').mockReturnValue(Promise.resolve([mockPoll]));
+    });
+
+    test('renders poll details on successful data fetch', async () => {
+        await act(async () => {
+            render(<PollWidgetView widget={widget} />);
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText(mockPoll.title)).toBeInTheDocument();
+            expect(screen.getByText(mockPoll.description)).toBeInTheDocument();
+            expect(screen.getByText(mockPoll.answers[0].answer_text)).toBeInTheDocument();
+            expect(screen.getByText('Submit')).toBeInTheDocument();
+        });
+    });
+
+    test('displays error notification on fetch failure', async () => {
+        jest.spyOn(widgetService, 'fetchPollWidgets').mockRejectedValue(new Error('Fetch Error'));
+        await act(async () => {
+            render(<PollWidgetView widget={widget} />);
+        });
+
+        await waitFor(() => {
+            expect(notificationService.openNotification).toHaveBeenCalledWith({
+                severity: 'error',
+                text: 'Error occurred while fetching Engagement widgets information',
+            });
+        });
+    });
+
+    test('submits poll response and displays success message', async () => {
+        jest.spyOn(widgetService, 'postPollResponse').mockResolvedValue({ selected_answer_id: '1' });
+        await act(async () => {
+            render(<PollWidgetView widget={widget} />);
+        });
+
+        const optionRadioButton = screen.getByLabelText(mockPoll.answers[0].answer_text);
+        fireEvent.click(optionRadioButton);
+
+        expect(optionRadioButton).toBeChecked();
+
+        fireEvent.click(screen.getByText('Submit'));
+        await waitFor(() => {
+            expect(widgetService.postPollResponse).toHaveBeenCalled();
+            expect(screen.getByText('Thank you for the response.')).toBeInTheDocument();
+        });
+    });
+
+    test('displays error message on submission failure', async () => {
+        jest.spyOn(widgetService, 'postPollResponse').mockRejectedValue({
+            response: { status: 400 },
+        });
+        await act(async () => {
+            render(<PollWidgetView widget={widget} />);
+        });
+
+        const optionRadioButton = screen.getByLabelText(mockPoll.answers[0].answer_text);
+        fireEvent.click(optionRadioButton);
+
+        fireEvent.click(screen.getByText('Submit'));
+        await waitFor(() => {
+            expect(screen.getByText('An error occurred.')).toBeInTheDocument();
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/widgets/SubscribeWidget.test.tsx b/met-web/tests/unit/components/widgets/SubscribeWidget.test.tsx
new file mode 100644
index 000000000..b60e13326
--- /dev/null
+++ b/met-web/tests/unit/components/widgets/SubscribeWidget.test.tsx
@@ -0,0 +1,127 @@
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import EngagementForm from '../../../../src/components/engagement/form';
+import * as widgetService from 'services/widgetService';
+import { WidgetType } from 'models/widget';
+import { draftEngagement, subscribeWidget } from '../factory';
+import { USER_ROLES } from 'services/userService/constants';
+import { setupWidgetTestEnvMock, setupWidgetTestEnvSpy } from './setupWidgetTestEnv';
+
+jest.mock('components/map', () => () => <div></div>);
+jest.mock('axios');
+jest.mock('react-redux', () => ({
+    ...jest.requireActual('react-redux'),
+    useSelector: jest.fn(() => {
+        return {
+            roles: [USER_ROLES.VIEW_PRIVATE_ENGAGEMENTS, USER_ROLES.EDIT_ENGAGEMENT, USER_ROLES.CREATE_ENGAGEMENT],
+            assignedEngagements: [draftEngagement.id],
+        };
+    }),
+}));
+
+const mockCreateWidget = jest.fn(() => Promise.resolve(subscribeWidget));
+
+jest.mock('apiManager/apiSlices/widgets', () => ({
+    ...jest.requireActual('apiManager/apiSlices/widgets'),
+    useCreateWidgetMutation: () => [mockCreateWidget],
+    useCreateWidgetItemsMutation: () => [mockCreateWidget],
+    useUpdateWidgetMutation: () => [jest.fn(() => Promise.resolve(subscribeWidget))],
+    useDeleteWidgetMutation: () => [jest.fn(() => Promise.resolve())],
+    useSortWidgetsMutation: () => [jest.fn(() => Promise.resolve())],
+}));
+
+// Mock the necessary services and contexts
+jest.mock('services/subscriptionService', () => ({
+    postSubscribeForm: jest.fn(),
+}));
+
+describe('Subscribe Widget tests', () => {
+    beforeAll(() => {
+        setupWidgetTestEnvMock();
+        setupWidgetTestEnvSpy();
+        jest.spyOn(widgetService, 'getWidgets').mockReturnValue(Promise.resolve([subscribeWidget]));
+    });
+
+    async function addSubscribeWidget() {
+        await waitFor(() => expect(screen.getByText('Add Widget')).toBeInTheDocument());
+        fireEvent.click(screen.getByText('Add Widget'));
+        await waitFor(() => expect(screen.getByText('Select Widget')).toBeVisible());
+        fireEvent.click(screen.getByTestId(`widget-drawer-option/${WidgetType.Subscribe}`));
+        await waitFor(() => {
+            expect(screen.getByText('Email List')).toBeVisible();
+            expect(screen.getByText('Form Sign-up')).toBeVisible();
+        });
+    }
+
+    async function inputMockSubscribeData() {
+        const callToActionText = document.querySelector('input[name="callToActionText"]') as HTMLInputElement;
+        const richTextEditorDesc = document.querySelector('[contenteditable="true"]') as HTMLInputElement;
+
+        const linkRadioButton = screen.getByLabelText('Link');
+        const buttonRadioButton = screen.getByLabelText('Button');
+
+        // Simulate typing into the rich text editor
+        richTextEditorDesc.textContent = 'Your desired text';
+        // Manually dispatch an 'input' event
+        const inputEvent = new Event('input', { bubbles: true });
+        richTextEditorDesc.dispatchEvent(inputEvent);
+
+        fireEvent.change(callToActionText, { target: { value: 'Click here' } });
+        fireEvent.click(linkRadioButton);
+
+        await waitFor(() => {
+            expect(richTextEditorDesc.textContent).toBe('Your desired text');
+            expect(callToActionText.value).toBe('Click here');
+            // Check if the "Link" radio button is selected
+            expect(linkRadioButton).toBeChecked();
+            // Check if the "Button" radio button is not selected
+            expect(buttonRadioButton).not.toBeChecked();
+        });
+    }
+
+    async function selectEmailList() {
+        const emailListButton = screen.getByRole('button', { name: 'Email List' });
+        fireEvent.click(emailListButton);
+        await waitFor(() => {
+            expect(screen.getByText('Description')).toBeVisible();
+            expect(screen.getByText('Call-to-action Type')).toBeVisible();
+        });
+    }
+
+    async function selectFormSignUp() {
+        const formSignUpButton = screen.getByRole('button', { name: 'Form Sign-up' });
+        fireEvent.click(formSignUpButton);
+        await waitFor(() => {
+            expect(screen.getByText('Description')).toBeVisible();
+            expect(screen.getByText('Call-to-action Type')).toBeVisible();
+        });
+    }
+
+    test('Subscribe widget is created when option is clicked', async () => {
+        render(<EngagementForm />);
+        const getWidgetsMock = jest
+            .spyOn(widgetService, 'getWidgets')
+            .mockReturnValue(Promise.resolve([subscribeWidget]));
+
+        await addSubscribeWidget();
+
+        expect(getWidgetsMock).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('Email List')).toBeVisible();
+        expect(screen.getByText('Form Sign-up')).toBeVisible();
+    });
+
+    test('Subscribe widget Email List handles input correctly', async () => {
+        render(<EngagementForm />);
+        await addSubscribeWidget();
+        await selectEmailList();
+        await inputMockSubscribeData();
+    });
+
+    test('Subscribe widget Form sign up handles input correctly', async () => {
+        render(<EngagementForm />);
+        await addSubscribeWidget();
+        await selectFormSignUp();
+        await inputMockSubscribeData();
+    });
+});
diff --git a/met-web/tests/unit/components/widgets/TimeLineWidget.test.tsx b/met-web/tests/unit/components/widgets/TimeLineWidget.test.tsx
new file mode 100644
index 000000000..5aaeb3402
--- /dev/null
+++ b/met-web/tests/unit/components/widgets/TimeLineWidget.test.tsx
@@ -0,0 +1,117 @@
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import EngagementForm from '../../../../src/components/engagement/form';
+import * as widgetService from 'services/widgetService';
+import * as TimeLineService from 'services/widgetService/TimelineService';
+import { WidgetType } from 'models/widget';
+import { draftEngagement, mockTimeLine, timeLineWidget } from '../factory';
+import { USER_ROLES } from 'services/userService/constants';
+
+import { setupWidgetTestEnvMock, setupWidgetTestEnvSpy } from './setupWidgetTestEnv';
+
+jest.mock('components/map', () => () => <div></div>);
+jest.mock('axios');
+jest.mock('react-redux', () => ({
+    ...jest.requireActual('react-redux'),
+    useSelector: jest.fn(() => {
+        return {
+            roles: [USER_ROLES.VIEW_PRIVATE_ENGAGEMENTS, USER_ROLES.EDIT_ENGAGEMENT, USER_ROLES.CREATE_ENGAGEMENT],
+            assignedEngagements: [draftEngagement.id],
+        };
+    }),
+}));
+
+const mockCreateWidget = jest.fn(() => Promise.resolve(timeLineWidget));
+
+jest.mock('apiManager/apiSlices/widgets', () => ({
+    ...jest.requireActual('apiManager/apiSlices/widgets'),
+    useCreateWidgetMutation: () => [mockCreateWidget],
+    useCreateWidgetItemsMutation: () => [mockCreateWidget],
+    useUpdateWidgetMutation: () => [jest.fn(() => Promise.resolve(timeLineWidget))],
+    useDeleteWidgetMutation: () => [jest.fn(() => Promise.resolve())],
+    useSortWidgetsMutation: () => [jest.fn(() => Promise.resolve())],
+}));
+
+// Mock the necessary services and contexts
+jest.mock('services/widgetService/TimelineService', () => ({
+    postTimeline: jest.fn(),
+    patchTimeline: jest.fn(),
+}));
+
+describe('TimeLine Widget tests', () => {
+    beforeAll(() => {
+        setupWidgetTestEnvMock();
+        setupWidgetTestEnvSpy();
+        jest.spyOn(widgetService, 'getWidgets').mockReturnValue(Promise.resolve([timeLineWidget]));
+    });
+
+    async function addTimeLineWidget() {
+        await waitFor(() => expect(screen.getByText('Add Widget')).toBeInTheDocument());
+        fireEvent.click(screen.getByText('Add Widget'));
+        await waitFor(() => expect(screen.getByText('Select Widget')).toBeVisible());
+        fireEvent.click(screen.getByTestId(`widget-drawer-option/${WidgetType.Timeline}`));
+        await waitFor(() => {
+            expect(screen.getByText('Title')).toBeVisible();
+            expect(screen.getByText('Description')).toBeVisible();
+        });
+    }
+
+    async function inputMockTimeLinedata() {
+        const titleInput = document.querySelector('input[name="title"]') as HTMLInputElement;
+        const descInput = document.querySelector('textarea[name="description"]') as HTMLInputElement;
+
+        fireEvent.change(titleInput, { target: { value: mockTimeLine.title } });
+        fireEvent.change(descInput, { target: { value: mockTimeLine.description } });
+
+        // Adding First Event
+        const eventDesc1 = document.querySelector('input[name="eventDescription1"]') as HTMLInputElement;
+        const eventTime1 = document.querySelector('input[name="eventTime1"]') as HTMLInputElement;
+        const selectElement1 = document.querySelector('input[name="eventStatus1"]') as HTMLInputElement;
+        console.log(selectElement1);
+
+        fireEvent.change(eventDesc1, { target: { value: mockTimeLine.events[0].description } });
+        fireEvent.change(eventTime1, { target: { value: mockTimeLine.events[0].time } });
+        fireEvent.mouseDown(selectElement1);
+        fireEvent.click(screen.getByText('Pending'));
+
+        await waitFor(() => {
+            expect(titleInput.value).toBe(mockTimeLine.title);
+            expect(descInput.value).toBe(mockTimeLine.description);
+            expect(selectElement1.value).toBe('1');
+        });
+    }
+
+    test('TimeLine widget is created when option is clicked', async () => {
+        render(<EngagementForm />);
+        const getWidgetsMock = jest
+            .spyOn(widgetService, 'getWidgets')
+            .mockReturnValue(Promise.resolve([timeLineWidget]));
+
+        await addTimeLineWidget();
+
+        expect(getWidgetsMock).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('Description')).toBeVisible();
+        expect(screen.getByText('EVENT 1')).toBeVisible();
+    });
+
+    test('TimeLine widget handles input correctly', async () => {
+        render(<EngagementForm />);
+        await addTimeLineWidget();
+        await inputMockTimeLinedata();
+    });
+
+    test('TimeLine can be submitted after inputting mock data', async () => {
+        render(<EngagementForm />);
+
+        await addTimeLineWidget();
+        await inputMockTimeLinedata();
+
+        const submitButton = screen.getByRole('button', { name: 'Save & Close' });
+        fireEvent.click(submitButton);
+
+        await waitFor(() => {
+            expect(TimeLineService.postTimeline).toHaveBeenCalledTimes(1);
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/widgets/VideoWidget.test.tsx b/met-web/tests/unit/components/widgets/VideoWidget.test.tsx
new file mode 100644
index 000000000..128b7e977
--- /dev/null
+++ b/met-web/tests/unit/components/widgets/VideoWidget.test.tsx
@@ -0,0 +1,103 @@
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import EngagementForm from '../../../../src/components/engagement/form';
+import * as widgetService from 'services/widgetService';
+import * as engagementMetadataService from 'services/engagementMetadataService';
+import * as VideoService from 'services/widgetService/VideoService';
+import { WidgetType } from 'models/widget';
+import { draftEngagement, mockVideo, videoWidget, engagementMetadata } from '../factory';
+import { USER_ROLES } from 'services/userService/constants';
+import { setupWidgetTestEnvMock, setupWidgetTestEnvSpy } from './setupWidgetTestEnv';
+
+jest.mock('components/map', () => () => <div></div>);
+jest.mock('axios');
+jest.mock('react-redux', () => ({
+    ...jest.requireActual('react-redux'),
+    useSelector: jest.fn(() => {
+        return {
+            roles: [USER_ROLES.VIEW_PRIVATE_ENGAGEMENTS, USER_ROLES.EDIT_ENGAGEMENT, USER_ROLES.CREATE_ENGAGEMENT],
+            assignedEngagements: [draftEngagement.id],
+        };
+    }),
+}));
+
+const mockCreateWidget = jest.fn(() => Promise.resolve(videoWidget));
+
+jest.mock('apiManager/apiSlices/widgets', () => ({
+    ...jest.requireActual('apiManager/apiSlices/widgets'),
+    useCreateWidgetMutation: () => [mockCreateWidget],
+    useCreateWidgetItemsMutation: () => [mockCreateWidget],
+    useUpdateWidgetMutation: () => [jest.fn(() => Promise.resolve(videoWidget))],
+    useDeleteWidgetMutation: () => [jest.fn(() => Promise.resolve())],
+    useSortWidgetsMutation: () => [jest.fn(() => Promise.resolve())],
+}));
+jest.spyOn(engagementMetadataService, 'getEngagementMetadata').mockReturnValue(Promise.resolve(engagementMetadata));
+
+// Mock the necessary services and contexts
+jest.mock('services/widgetService/VideoService', () => ({
+    postVideo: jest.fn(),
+    patchVideo: jest.fn(),
+}));
+
+describe('Video Widget tests', () => {
+    beforeAll(() => {
+        setupWidgetTestEnvMock();
+        setupWidgetTestEnvSpy();
+        jest.spyOn(widgetService, 'getWidgets').mockReturnValue(Promise.resolve([videoWidget]));
+    });
+
+    async function addVideoWidget() {
+        await waitFor(() => expect(screen.getByText('Add Widget')).toBeInTheDocument());
+        fireEvent.click(screen.getByText('Add Widget'));
+        await waitFor(() => expect(screen.getByText('Select Widget')).toBeVisible());
+        fireEvent.click(screen.getByTestId(`widget-drawer-option/${WidgetType.Video}`));
+        await waitFor(() => {
+            expect(screen.getByText('Description')).toBeVisible();
+        });
+    }
+
+    async function inputMockVideodata() {
+        const linkInput = document.querySelector('input[name="videoUrl"]') as HTMLInputElement;
+        const descInput = document.querySelector('textarea[name="description"]') as HTMLInputElement;
+
+        fireEvent.change(linkInput, { target: { value: mockVideo.video_url } });
+        fireEvent.change(descInput, { target: { value: mockVideo.description } });
+
+        await waitFor(() => {
+            expect(linkInput.value).toBe(mockVideo.video_url);
+            expect(descInput.value).toBe(mockVideo.description);
+        });
+    }
+
+    test('Video widget is created when option is clicked', async () => {
+        render(<EngagementForm />);
+        const getWidgetsMock = jest.spyOn(widgetService, 'getWidgets').mockReturnValue(Promise.resolve([videoWidget]));
+
+        await addVideoWidget();
+
+        expect(getWidgetsMock).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('Description')).toBeVisible();
+        expect(screen.getByText('Video Link')).toBeVisible();
+    });
+
+    test('Video widget handles input correctly', async () => {
+        render(<EngagementForm />);
+        await addVideoWidget();
+        await inputMockVideodata();
+    });
+
+    test('Video can be submitted after inputting mock data', async () => {
+        render(<EngagementForm />);
+
+        await addVideoWidget();
+        await inputMockVideodata();
+
+        const submitButton = screen.getByRole('button', { name: 'Save & Close' });
+        fireEvent.click(submitButton);
+
+        await waitFor(() => {
+            expect(VideoService.postVideo).toHaveBeenCalledTimes(1);
+        });
+    });
+});
diff --git a/met-web/tests/unit/components/widgets/setupWidgetTestEnv.tsx b/met-web/tests/unit/components/widgets/setupWidgetTestEnv.tsx
new file mode 100644
index 000000000..fc6b1d34d
--- /dev/null
+++ b/met-web/tests/unit/components/widgets/setupWidgetTestEnv.tsx
@@ -0,0 +1,61 @@
+import { setupEnv } from '../setEnvVars';
+import React from 'react';
+import '@testing-library/jest-dom';
+import * as reactRedux from 'react-redux';
+import * as reactRouter from 'react-router';
+import * as engagementService from 'services/engagementService';
+import * as engagementMetadataService from 'services/engagementMetadataService';
+import * as membershipService from 'services/membershipService';
+import * as engagementSettingService from 'services/engagementSettingService';
+import { USER_ROLES } from 'services/userService/constants';
+import { draftEngagement, engagementMetadata } from '../factory';
+import { EngagementSettings, createDefaultEngagementSettings } from 'models/engagement';
+import { Box } from '@mui/material';
+
+const mockEngagementSettings: EngagementSettings = {
+    ...createDefaultEngagementSettings(),
+};
+
+export const setupWidgetTestEnvMock = (): void => {
+    jest.mock('components/common/Dragdrop', () => ({
+        ...jest.requireActual('components/common/Dragdrop'),
+        MetDroppable: ({ children }: { children: React.ReactNode }) => <Box>{children}</Box>,
+        MetDraggable: ({ children }: { children: React.ReactNode }) => <Box>{children}</Box>,
+    }));
+    jest.mock('@hello-pangea/dnd', () => ({
+        ...jest.requireActual('@hello-pangea/dnd'),
+        DragDropContext: ({ children }: { children: React.ReactNode }) => <Box>{children}</Box>,
+    }));
+    jest.mock('@reduxjs/toolkit/query/react', () => ({
+        ...jest.requireActual('@reduxjs/toolkit/query/react'),
+        fetchBaseQuery: jest.fn(),
+    }));
+    jest.mock('react-router-dom', () => ({
+        ...jest.requireActual('react-router-dom'),
+        useLocation: jest.fn(() => ({ search: '' })),
+        useParams: jest.fn(() => {
+            return { projectId: '' };
+        }),
+        useNavigate: () => jest.fn(),
+    }));
+};
+
+export const setupWidgetTestEnvSpy = (): void => {
+    setupEnv();
+
+    jest.spyOn(engagementMetadataService, 'getEngagementMetadata').mockReturnValue(Promise.resolve(engagementMetadata));
+
+    jest.spyOn(reactRedux, 'useSelector').mockImplementation(() => ({
+        roles: [USER_ROLES.VIEW_PRIVATE_ENGAGEMENTS, USER_ROLES.EDIT_ENGAGEMENT, USER_ROLES.CREATE_ENGAGEMENT],
+        assignedEngagements: [draftEngagement.id],
+    }));
+    jest.spyOn(reactRouter, 'useParams').mockReturnValue({ projectId: '' });
+    jest.spyOn(reactRouter, 'useNavigate').mockReturnValue(jest.fn());
+    jest.spyOn(engagementService, 'getEngagement').mockReturnValue(Promise.resolve(draftEngagement));
+    jest.spyOn(engagementMetadataService, 'getEngagementMetadata').mockReturnValue(Promise.resolve(engagementMetadata));
+    jest.spyOn(membershipService, 'getTeamMembers').mockReturnValue(Promise.resolve([]));
+    jest.spyOn(engagementSettingService, 'getEngagementSettings').mockReturnValue(
+        Promise.resolve(mockEngagementSettings),
+    );
+    jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(jest.fn());
+};