[APP-917] Automated typescript check

.github/workflows/verify-modernization-ui.yaml

@@ -39,6 +39,10 @@ jobs:
         working-directory: ./apps/modernization-ui
         run: npm run format:check
 
+      - name: Type Check
+        working-directory: ./apps/modernization-ui
+        run: npm run typecheck
+
       - name: Unit Test
         working-directory: ./apps/modernization-ui
         run: npm run test:all

apps/modernization-ui/package.json

@@ -65,6 +65,7 @@
         "@types/react-dom": "^18",
         "@typescript-eslint/eslint-plugin": "^8.34.0",
         "@typescript-eslint/parser": "^8.34.0",
+        "@vitejs/plugin-legacy": "^8.2.3",
         "@vitejs/plugin-react": "^6.0.1",
         "@vitest/coverage-v8": "^4.1.0",
         "eslint": "9.31.0",
@@ -93,6 +94,8 @@
     "scripts": {
         "start": "vite",
         "build": "vite build",
+        "typecheck": "tsc -b --noEmit",
+        "typecheck:watch": "tsc -b --noEmit --watch",
         "preview": "vite preview",
         "test": "vitest --changed",
         "test:all": "vitest run",

apps/modernization-ui/src/apps/deduplication/configuration/match-configuration/notification-cards/SelectPass.spec.tsx

@@ -31,7 +31,7 @@ describe('SelectPass', () => {
         const { getAllByText } = render(<SelectPass passCount={0} />);
         expect(
             getAllByText(
-                (content, element) =>
+                (_content, element) =>
                     element?.textContent === 'To get started, select "Add pass configuration" from the left panel.'
             )[0]
         ).toBeInTheDocument();

apps/modernization-ui/src/apps/deduplication/configuration/match-configuration/pass-configuration/pass-form/blocking-criteria/panel/BlockingCriteriaSidePanel.spec.tsx

@@ -162,7 +162,7 @@ describe('BlockingCriteriaSidePanel', () => {
         expect(cancel).toHaveTextContent('Cancel');
         await user.click(cancel);
 
-        expect(onCancel).toBeCalledTimes(1);
+        expect(onCancel).toHaveBeenCalledTimes(1);
     });
 
     it('should trigger onAccept when Add attribute(s) is clicked', async () => {
@@ -177,6 +177,6 @@ describe('BlockingCriteriaSidePanel', () => {
 
         await user.click(add);
 
-        expect(onAccept).toBeCalledTimes(1);
+        expect(onAccept).toHaveBeenCalledTimes(1);
     });
 });

apps/modernization-ui/src/apps/deduplication/configuration/match-configuration/pass-configuration/pass-form/matching-criteria/panel/MatchingCriteriaSidePanel.spec.tsx

@@ -240,7 +240,7 @@ describe('MatchingCriteriaSidePanel', () => {
 
         await user.click(cancel);
 
-        expect(onCancel).toBeCalledTimes(1);
+        expect(onCancel).toHaveBeenCalledTimes(1);
     });
 
     it('should trigger onAccept when Add attribute(s) is clicked', async () => {
@@ -255,6 +255,6 @@ describe('MatchingCriteriaSidePanel', () => {
 
         await user.click(add);
 
-        expect(onAccept).toBeCalledWith([]);
+        expect(onAccept).toHaveBeenCalledWith([]);
     });
 });

apps/modernization-ui/src/apps/deduplication/patient-merge/details/merge-review/patient-form/general/GeneralSelection.spec.tsx

@@ -3,8 +3,6 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import { MergeCandidate } from 'apps/deduplication/api/model/MergeCandidate';
 
-import { SexAndBirthSelection } from '../sex-and-birth/SexAndBirthSelection';
-
 import { GeneralSelection } from './GeneralSelection';
 
 const mergeCandidates: Partial<MergeCandidate>[] = [

apps/modernization-ui/src/apps/deduplication/patient-merge/landing/matches-requiring-review-table/MatchesRequiringReviewTable.spec.tsx

@@ -113,41 +113,41 @@ describe('MatchesRequiringReviewTable', () => {
 
         // default sort
         await waitFor(() => {
-            expect(mockFetch).lastCalledWith(0, 20, 'identified,desc');
+            expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'identified,desc');
         });
 
         await user.click(getByText('Patient ID').children[0]); // sort on patient Id asc
-        expect(mockFetch).lastCalledWith(0, 20, 'patient-id,asc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'patient-id,asc');
 
         await user.click(getByText('Patient ID').children[0]); // sort on patient Id desc
-        expect(mockFetch).lastCalledWith(0, 20, 'patient-id,desc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'patient-id,desc');
 
         await user.click(getByText('Person name').children[0]); // sort on Person name
-        expect(mockFetch).lastCalledWith(0, 20, 'name,asc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'name,asc');
 
         await user.click(getByText('Person name').children[0]); // sort on Person name desc
-        expect(mockFetch).lastCalledWith(0, 20, 'name,desc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'name,desc');
 
         await user.click(getByText('Date created').children[0]); // sort on Date created
-        expect(mockFetch).lastCalledWith(0, 20, 'created,asc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'created,asc');
 
         await user.click(getByText('Date created').children[0]); // sort on Date created desc
-        expect(mockFetch).lastCalledWith(0, 20, 'created,desc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'created,desc');
 
         await user.click(getByText('Date identified').children[0]); // sort on Date identified
-        expect(mockFetch).lastCalledWith(0, 20, 'identified,asc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'identified,asc');
 
         await user.click(getByText('Date identified').children[0]); // sort on Date identified desc
-        expect(mockFetch).lastCalledWith(0, 20, 'identified,desc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'identified,desc');
 
         await user.click(getByText('Number of matching records').children[0]); // sort on Number of matching records
-        expect(mockFetch).lastCalledWith(0, 20, 'count,asc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'count,asc');
 
         await user.click(getByText('Number of matching records').children[0]); // sort on Number of matching records desc
-        expect(mockFetch).lastCalledWith(0, 20, 'count,desc');
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'count,desc');
 
         await user.click(getByText('Number of matching records').children[0]); // clear sort on Number
-        expect(mockFetch).lastCalledWith(0, 20, 'identified,desc'); // back to default
+        expect(mockFetch).toHaveBeenLastCalledWith(0, 20, 'identified,desc'); // back to default
     });
 
     it('should display the proper match data', () => {

apps/modernization-ui/src/apps/page-builder/components/AddQuestion/fields/BasicInformationFields.spec.tsx

@@ -1,18 +1,11 @@
-import { render, renderHook } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { CreateQuestionForm } from '../QuestionForm';
 
 import { BasicInformationFields } from './BasicInformationFields';
 
-const { result } = renderHook(() =>
-    useForm<CreateQuestionForm>({
-        mode: 'onBlur',
-        defaultValues: { uniqueId: 'duplicateUniqueId', uniqueName: 'duplicateUniqueName' },
-    })
-);
-
 const setError = vi.fn();
 const validate = vi.fn();
 const mockUseQuestionValidation = {

apps/modernization-ui/src/apps/page-builder/components/AddQuestion/fields/DataMartFields.spec.tsx

@@ -1,23 +1,10 @@
-import { render, renderHook } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { CreateQuestionForm } from '../QuestionForm';
 
 import { DataMartFields } from './DataMartFields';
 
-const { result } = renderHook(() =>
-    useForm<CreateQuestionForm>({
-        mode: 'onBlur',
-        defaultValues: {
-            subgroup: 'RSK',
-            dataMartInfo: {
-                dataMartColumnName: 'duplicateDataMartColumnName',
-                rdbColumnName: 'duplicateRdbColumnName',
-            },
-        },
-    })
-);
-
 const setError = vi.fn();
 const validate = vi.fn();
 const mockUseQuestionValidation = {

apps/modernization-ui/src/apps/page-builder/components/SaveTemplate/SaveTemplate.spec.tsx

@@ -1,16 +1,20 @@
+import { createRef } from 'react';
+
 import { render } from '@testing-library/react';
 import { BrowserRouter } from 'react-router';
 
 import { SaveTemplates } from './SaveTemplate';
 
 describe('When SaveTemplates component loads', () => {
     it('Save button should be disabled', () => {
+        const mockModalRef = createRef<any>();
+
         const { container } = render(
             <BrowserRouter>
-                <SaveTemplates />
+                <SaveTemplates modalRef={mockModalRef} />
             </BrowserRouter>
         );
         const btn = container.getElementsByClassName('usa-button')[0];
-        expect(btn.hasAttribute('disabled'));
+        expect(btn).toBeDisabled();
     });
 });

apps/modernization-ui/src/apps/page-builder/components/TabbedButtonBar/TabbedButtonBar.spec.tsx

@@ -18,7 +18,7 @@ describe('Tabbed button bar', () => {
         await waitFor(() => {
             fireEvent.click(buttons[1]);
         });
-        expect(mockFn).toBeCalledWith('2');
+        expect(mockFn).toHaveBeenCalledWith('2');
     });
 
     it('should set active class on click', async () => {

apps/modernization-ui/src/apps/page-builder/condition/search/ConditionSearch.tsx

@@ -11,7 +11,7 @@ import styles from './condition-search.module.scss';
 
 type Props = {
     id: string;
-    onConditionSelect: (ids: number[]) => void;
+    onConditionSelect: (ids: string[]) => void;
     onCancel: () => void;
     onCreateNew: () => void;
 };
@@ -32,7 +32,7 @@ const ConditionSearchContent = ({ id, onConditionSelect, onCancel, onCreateNew }
     const { search, response, isLoading, keyword, reset } = useConditionSearch();
     const { page, ready, request } = usePagination();
     const [sort, setSort] = useState<ConditionSort | undefined>();
-    const [selected, setSelected] = useState<number[]>([]);
+    const [selected, setSelected] = useState<string[]>([]);
     const [resetTable, setResetTable] = useState<boolean>(false);
 
     useEffect(() => {

apps/modernization-ui/src/apps/page-builder/condition/search/ConditionTable.tsx

@@ -55,7 +55,6 @@ const asTableRow = (condition: Condition): TableBody => ({
             title: condition.conditionFamily,
         },
         { id: 5, title: condition.coinfectionGroup },
-
         { id: 6, title: condition.nndInd },
         { id: 7, title: condition.page },
         { id: 8, title: condition.status === 'A' ? 'Active' : 'Inactive' },
@@ -65,13 +64,14 @@ const asTableRow = (condition: Condition): TableBody => ({
 type Props = {
     conditions: Condition[];
     isLoading: boolean;
-    onSelectionChange: (selection: number[]) => void;
+    onSelectionChange: (selection: string[]) => void;
     onSort?: (sort?: ConditionSort) => void;
 };
+
 export const ConditionTable = ({ conditions, isLoading, onSelectionChange, onSort }: Props) => {
     const { page, request } = usePagination();
     const [tableRows, setTableRows] = useState<TableBody[]>([]);
-    const [selected, setSelected] = useState<number[]>([]);
+    const [selected, setSelected] = useState<string[]>([]);
 
     useEffect(() => {
         setSelected([]);
@@ -82,11 +82,15 @@ export const ConditionTable = ({ conditions, isLoading, onSelectionChange, onSor
         onSelectionChange(selected);
     }, [selected]);
 
-    const handleSelect = (event: ChangeEvent<HTMLInputElement>, item: { id: number }) => {
+    const handleSelect = (event: ChangeEvent<HTMLInputElement>, item: TableBody) => {
+        if (item.id === undefined || item.id === null) return;
+
+        const itemId = String(item.id);
+
         if (event.target.checked) {
-            setSelected((current) => [...current, item.id]);
+            setSelected((current) => [...current, itemId]);
         } else {
-            setSelected((current) => current.filter((id) => id !== item.id));
+            setSelected((current) => current.filter((id) => id !== itemId));
         }
     };
 

apps/modernization-ui/src/apps/page-builder/page/library/usePageSummaryAPI.ts

@@ -1,7 +1,7 @@
 import { PagePageSummary, PageSummaryService } from 'apps/page-builder/generated';
 
 export const fetchPageSummaries = async (
-    token: string,
+    _token: string,
     search?: string,
     sort?: string,
     currentPage?: number,

apps/modernization-ui/src/apps/page-builder/page/management/edit/question/GroupQuestion/RepeatingBlock.tsx

@@ -72,7 +72,7 @@ export const RepeatingBlock = ({ questions, valid, setValid }: Props) => {
                     </tr>
                 </thead>
                 <tbody data-testid="group-questions-tbody">
-                    {fields.map((item: Batch, index: number) => (
+                    {fields.map((_item: Batch, index: number) => (
                         <tr className={styles.row} key={index}>
                             <td className={styles.number}>
                                 <p>{index + 1}</p>

apps/modernization-ui/src/apps/page-builder/page/management/edit/reorder/ReorderQuestion/ReorderQuestion.tsx

@@ -24,9 +24,9 @@ export const ReorderQuestion = ({ question, index, visible }: Props) => {
                 >
                     <div className={styles.tile}>
                         <div className={styles.handle} {...prov.dragHandleProps}>
-                            <Icon name="drag" size="m" />
+                            <Icon name="drag" size="m" alt="Drag handle to reorder question" />
                         </div>
-                        <Icon name="question" size="m" />
+                        <Icon name="question" size="m" alt="Question icon" />
                         {question.displayComponent === 1003 ? (
                             <p> &#60; Hyperlink &#62;</p>
                         ) : question.displayComponent === 1012 ? (

apps/modernization-ui/src/apps/page-builder/page/management/edit/reorder/ReorderSection/ReorderSection.tsx

@@ -46,15 +46,15 @@ export const ReorderSection = ({ section, index, visible }: Props) => {
                     <div className={styles.tile}>
                         <div className={styles.toggle} onClick={() => setSubsectionsOpen(!subsectionsOpen)}>
                             {subsectionsOpen ? (
-                                <Icon name="expand-more" size="s" />
+                                <Icon name="expand-more" size="s" alt="Collapse section" />
                             ) : (
-                                <Icon name="navigate-next" size="s" />
+                                <Icon name="navigate-next" size="s" alt="Expand section" />
                             )}
                         </div>
                         <div className={styles.handle} {...provided.dragHandleProps}>
-                            <Icon name="drag" size="m" />
+                            <Icon name="drag" size="m" alt="Drag handle to reorder section" />
                         </div>
-                        <Icon name="group" size="m" />
+                        <Icon name="group" size="m" alt="Section icon" />
                         <p>{section.name}</p>
                     </div>
                     <div className={`${styles.subsections} ${subsectionsOpen ? '' : styles.closed}`}>

apps/modernization-ui/src/apps/page-builder/page/management/edit/reorder/ReorderSubsection/ReorderSubsection.tsx

@@ -45,15 +45,15 @@ export const ReorderSubsection = ({ subsection, index, visible }: Props) => {
                     <div className={styles.tile}>
                         <div className={styles.toggle} onClick={() => setQuestionsOpen(!questionsOpen)}>
                             {!questionsOpen ? (
-                                <Icon name="navigate-next" size="s" />
+                                <Icon name="navigate-next" size="s" alt="Expand subsection" />
                             ) : (
-                                <Icon name="expand-more" size="s" />
+                                <Icon name="expand-more" size="s" alt="Collapse subsection" />
                             )}
                         </div>
                         <div className={styles.handle} {...provided.dragHandleProps}>
-                            <Icon name="drag" size="m" />
+                            <Icon name="drag" size="m" alt="Drag handle to reorder subsection" />
                         </div>
-                        <Icon name="subsection" size="m" />
+                        <Icon name="subsection" size="m" alt="Subsection icon" />
                         {subsection.name}
                     </div>
                     <div className={`${styles.questions} ${!questionsOpen ? styles.closed : ''}`}>

apps/modernization-ui/src/apps/page-builder/page/management/edit/reorder/ReorderTab/ReorderTab.tsx

@@ -45,15 +45,15 @@ export const ReorderTab = ({ tab, index, visible }: Props) => {
                     <div className={styles.tile}>
                         <div className={styles.toggle} onClick={() => setSectionsOpen(!sectionsOpen)}>
                             {sectionsOpen ? (
-                                <Icon name="expand-more" size="s" />
+                                <Icon name="expand-more" size="s" alt="Collapse sections" />
                             ) : (
-                                <Icon name="navigate-next" size="s" />
+                                <Icon name="navigate-next" size="s" alt="Expand sections" />
                             )}
                         </div>
                         <div className={styles.handle} {...provided.dragHandleProps}>
-                            <Icon name="drag" size="m" />
+                            <Icon name="drag" size="m" alt="Drag to reorder" />
                         </div>
-                        <Icon name="folder" size="m" />
+                        <Icon name="folder" size="m" alt="Tab folder" />
                         <p>{tab.name}</p>
                     </div>
                     <div className={`${styles.sections} ${sectionsOpen ? '' : styles.closed}`}>

apps/modernization-ui/src/apps/page-builder/page/management/edit/section/manage/ManageSection.spec.tsx

@@ -61,7 +61,14 @@ describe('when ManageSection renders', () => {
     it('should show the heading', () => {
         const { getByTestId } = render(
             <DragDropProvider pageData={content}>
-                <ManageSection pageId={1} tab={tabData} key={1} onContentChange={vi.fn()} onCancel={vi.fn()} />
+                <ManageSection
+                    id="test"
+                    pageId={1}
+                    tab={tabData}
+                    key={1}
+                    onContentChange={vi.fn()}
+                    onCancel={vi.fn()}
+                />
             </DragDropProvider>
         );
         const header = getByTestId('header');
@@ -71,7 +78,14 @@ describe('when ManageSection renders', () => {
     it('should display two buttons', () => {
         const { container } = render(
             <DragDropProvider pageData={content}>
-                <ManageSection pageId={1} tab={tabData} key={1} onContentChange={vi.fn()} onCancel={vi.fn()} />
+                <ManageSection
+                    id="test"
+                    pageId={1}
+                    tab={tabData}
+                    key={1}
+                    onContentChange={vi.fn()}
+                    onCancel={vi.fn()}
+                />
             </DragDropProvider>
         );
         const buttons = container.getElementsByTagName('button');