MDS-6206 Added FE tests + bugfixes

bcgov · Nov 25, 2024 · abc5212 · abc5212
1 parent b42a4aa
commit abc5212
Show file tree

Hide file tree

Showing 46 changed files with 1,154 additions and 402 deletions.
diff --git a/cypress/realm-export.json b/cypress/realm-export.json
diff --git a/services/common/jest.config.js b/services/common/jest.config.js
@@ -8,7 +8,7 @@ module.exports = {
       },
     ],
   },
-  maxWorkers: 4,
+  maxWorkers: '50%',
   verbose: true,
   testEnvironmentOptions: {
     customExportConditions: [""],

diff --git a/services/common/src/components/common/ScrollSidePageWrapper.tsx b/services/common/src/components/common/ScrollSidePageWrapper.tsx
@@ -8,21 +8,14 @@ interface ScrollSidePageWrapperProps {
   content: ReactNode;
   menuProps?: ScrollSideMenuProps;
   header: ReactNode;
+  extraItems?: ReactNode;
   headerHeight?: number;
   view?: "default" | "steps" | "anchor";
 }
 
 export const coreHeaderHeight = 62; // match scss variable $header-height
 const msHeaderHeight = 80;
 
-interface ExtraMenuItemProps {
-  children: ReactNode;
-}
-
-interface ScrollSidePageWrapperSubcomponents {
-  ExtraMenuItem: React.FC<ExtraMenuItemProps>;
-}
-
 /**
  * A wrapper component that provides a side menu and a content area. The side menu can be fixed to the top of the page.
  * The menu links will act as an achor to sections in the content area scroll to the section when clicked, and highlight the active section.
@@ -35,12 +28,12 @@ interface ScrollSidePageWrapperSubcomponents {
  *  </ScrollSidePageWrapper.ExtraMenuItem>
  * </ScrollSidePageWrapper>
  */
-const ScrollSidePageWrapper: FC<ScrollSidePageWrapperProps> & ScrollSidePageWrapperSubcomponents = ({
+const ScrollSidePageWrapper: FC<ScrollSidePageWrapperProps> = ({
   menuProps,
   content,
   header,
+  extraItems,
   view = "anchor",
-  children,
   headerHeight = 170,
 }) => {
   const [isFixedTop, setIsFixedTop] = useState(false);
@@ -81,8 +74,6 @@ const ScrollSidePageWrapper: FC<ScrollSidePageWrapperProps> & ScrollSidePageWrap
   const menuTopOffset = hasHeader || isFixedTop ? topOffset : 0;
   const contentTopOffset = hasHeader && isFixedTop ? headerHeight : 0;
 
-  const extraItems = React.Children.map(children, child => (child as ReactElement).type?.displayName === 'ExtraMenuItem' ? child : null);
-
   return (
     <div className={`scroll-side-menu-wrapper scroll-side-menu-view--${view}`}>
       {hasHeader && (
@@ -101,7 +92,7 @@ const ScrollSidePageWrapper: FC<ScrollSidePageWrapperProps> & ScrollSidePageWrap
           {/* the 24 matches the margin/padding on the menu/content. Looks nicer */}
           <ScrollSideMenu offsetTop={topOffset + contentPaddingY} {...menuProps} view={view} />
 
-          {extraItems}
+          {extraItems ? extraItems : ''}
         </div>
       )}
       <div className={contentClass} style={{ top: contentTopOffset }}>
@@ -111,11 +102,4 @@ const ScrollSidePageWrapper: FC<ScrollSidePageWrapperProps> & ScrollSidePageWrap
   );
 };
 
-const ExtraMenuItem: FC<ExtraMenuItemProps> = ({ children }) => (
-  <div className="side-menu--extra-item">{children}</div>
-);
-
-ExtraMenuItem.displayName = 'ExtraMenuItem';
-ScrollSidePageWrapper.ExtraMenuItem = ExtraMenuItem;
-
 export default ScrollSidePageWrapper;
diff --git a/services/common/src/components/forms/FormWrapper.tsx b/services/common/src/components/forms/FormWrapper.tsx
@@ -66,13 +66,15 @@ export interface FormWrapperProps {
   loading?: boolean;
   isEditMode?: boolean;
   scrollOnToggleEdit?: boolean;
+  layout?: "inline" | "horizontal" | "vertical";
 }
 
 const FormWrapper: FC<FormWrapperProps & InjectedFormProps<any>> = ({
   isEditMode = true,
   isModal = false,
   scrollOnToggleEdit = true,
   children,
+  layout,
   ...props
 }) => {
   const providerValues = {
@@ -102,7 +104,7 @@ const FormWrapper: FC<FormWrapperProps & InjectedFormProps<any>> = ({
   return (
     <FormProvider value={providerValues}>
       <Form
-        layout="vertical"
+        layout={layout ?? "vertical"}
         onFinish={handleSubmit}
         name={props.name}
         className={formClassName}

diff --git a/services/common/src/components/forms/RenderAutoComplete.tsx b/services/common/src/components/forms/RenderAutoComplete.tsx
@@ -48,9 +48,12 @@ const RenderAutoComplete = (props) => {
         if (!value.isEditMode) {
           return <BaseViewInput value={props.input.value} label={props.input.label} />;
         }
+
+        const ariaLabel = props.label || props.input.name;
+
         return (
           <Form.Item
-            label={JSON.stringify(props.selected)}
+            label={props.label}
             validateStatus={
               props.meta.touched ? (props.meta.error && "error") || (props.meta.warning && "warning") : ""
             }
@@ -61,9 +64,11 @@ const RenderAutoComplete = (props) => {
             }
           >
             <Select
+              aria-label={ariaLabel}
               showSearch
               virtual={false}
               defaultActiveFirstOption={false}
+              aria-busy={props.loading}
               notFoundContent={props.loading ? <Spin size="small" /> : "Not found"}
               allowClear
               dropdownMatchSelectWidth

diff --git a/services/common/src/components/forms/RenderField.tsx b/services/common/src/components/forms/RenderField.tsx
@@ -26,6 +26,7 @@ const RenderField: FC<BaseInputProps> = ({
         if (!value.isEditMode) {
           return <BaseViewInput label={label} value={input?.value} />;
         }
+        const labelString = (label || input.name) instanceof String ? (String)(label || input.name) : input.name;
         return (
           <Form.Item
             name={input.name}
@@ -45,6 +46,7 @@ const RenderField: FC<BaseInputProps> = ({
                 disabled={disabled}
                 defaultValue={defaultValue}
                 id={id}
+                aria-label={labelString}
                 placeholder={placeholder}
                 allowClear={allowClear}
                 {...input}

diff --git a/services/common/src/components/projectSummary/__snapshots__/Applicant.spec.tsx.snap b/services/common/src/components/projectSummary/__snapshots__/Applicant.spec.tsx.snap
@@ -265,6 +265,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="company_alias"
                         class="ant-input"
                         id="company_alias"
                         name="company_alias"
@@ -325,6 +326,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="incorporation_number"
                         class="ant-input"
                         id="incorporation_number"
                         name="incorporation_number"
@@ -391,6 +393,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.phone_no"
                       class="ant-input"
                       name="applicant.phone_no"
                       type="text"
@@ -454,6 +457,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.phone_ext"
                       class="ant-input"
                       name="applicant.phone_ext"
                       type="text"
@@ -513,6 +517,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.email"
                       class="ant-input"
                       name="applicant.email"
                       type="text"
@@ -582,6 +587,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[0].address_line_1"
                       class="ant-input"
                       name="applicant.address[0].address_line_1"
                       type="text"
@@ -645,6 +651,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[0].suite_no"
                       class="ant-input"
                       name="applicant.address[0].suite_no"
                       type="text"
@@ -938,6 +945,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[0].city"
                       class="ant-input"
                       name="applicant.address[0].city"
                       type="text"
@@ -997,6 +1005,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[0].post_code"
                       class="ant-input"
                       name="applicant.address[0].post_code"
                       type="text"
@@ -1120,6 +1129,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[1].address_line_1"
                       class="ant-input"
                       name="applicant.address[1].address_line_1"
                       type="text"
@@ -1183,6 +1193,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[1].suite_no"
                       class="ant-input"
                       name="applicant.address[1].suite_no"
                       type="text"
@@ -1476,6 +1487,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[1].city"
                       class="ant-input"
                       name="applicant.address[1].city"
                       type="text"
@@ -1535,6 +1547,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[1].post_code"
                       class="ant-input"
                       name="applicant.address[1].post_code"
                       type="text"
@@ -1727,6 +1740,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[2].address_line_1"
                       class="ant-input"
                       name="applicant.address[2].address_line_1"
                       type="text"
@@ -1790,6 +1804,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[2].suite_no"
                       class="ant-input"
                       name="applicant.address[2].suite_no"
                       type="text"
@@ -2083,6 +2098,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[2].city"
                       class="ant-input"
                       name="applicant.address[2].city"
                       type="text"
@@ -2142,6 +2158,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                     class="ant-form-item-control-input-content"
                   >
                     <input
+                      aria-label="applicant.address[2].post_code"
                       class="ant-input"
                       name="applicant.address[2].post_code"
                       type="text"
@@ -2219,6 +2236,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="payment_contact.first_name"
                         class="ant-input"
                         name="payment_contact.first_name"
                         type="text"
@@ -2278,6 +2296,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="payment_contact.party_name"
                         class="ant-input"
                         name="payment_contact.party_name"
                         type="text"
@@ -2342,6 +2361,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="payment_contact.phone_no"
                         class="ant-input"
                         name="payment_contact.phone_no"
                         type="text"
@@ -2405,6 +2425,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="payment_contact.phone_ext"
                         class="ant-input"
                         name="payment_contact.phone_ext"
                         type="text"
@@ -2464,6 +2485,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="payment_contact.email"
                         class="ant-input"
                         name="payment_contact.email"
                         type="text"
@@ -2537,6 +2559,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="payment_contact.address[0].address_line_1"
                         class="ant-input"
                         name="payment_contact.address[0].address_line_1"
                         type="text"
@@ -2600,6 +2623,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="payment_contact.address[0].suite_no"
                         class="ant-input"
                         name="payment_contact.address[0].suite_no"
                         type="text"
@@ -2901,6 +2925,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="payment_contact.address[0].city"
                         class="ant-input"
                         name="payment_contact.address[0].city"
                         type="text"
@@ -2964,6 +2989,7 @@ exports[`Applicant Component should render the component with expected fields 1`
                       class="ant-form-item-control-input-content"
                     >
                       <input
+                        aria-label="payment_contact.address[0].post_code"
                         class="ant-input"
                         name="payment_contact.address[0].post_code"
                         type="text"

diff --git a/...s/common/src/components/projectSummary/__snapshots__/AuthorizationsInvolved.spec.tsx.snap b/...s/common/src/components/projectSummary/__snapshots__/AuthorizationsInvolved.spec.tsx.snap
@@ -1053,6 +1053,7 @@ exports[`AuthorizationsInvolved renders properly 1`] = `
                                           class="ant-form-item-control-input-content"
                                         >
                                           <input
+                                            aria-label="authorizations.WATER_LICENCE[0].existing_permits_authorizations"
                                             class="ant-input"
                                             name="authorizations.WATER_LICENCE[0].existing_permits_authorizations"
                                             type="text"
@@ -1322,6 +1323,7 @@ exports[`AuthorizationsInvolved renders properly 1`] = `
                                           class="ant-form-item-control-input-content"
                                         >
                                           <input
+                                            aria-label="authorizations.OCCUPANT_CUT_LICENCE[0].existing_permits_authorizations"
                                             class="ant-input"
                                             name="authorizations.OCCUPANT_CUT_LICENCE[0].existing_permits_authorizations"
                                             type="text"

diff --git a/services/common/src/components/projectSummary/__snapshots__/BasicInformation.spec.tsx.snap b/services/common/src/components/projectSummary/__snapshots__/BasicInformation.spec.tsx.snap
@@ -42,6 +42,7 @@ exports[`BasicInformation renders properly 1`] = `
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-label="project_summary_title"
                 class="ant-input"
                 id="project_summary_title"
                 name="project_summary_title"
@@ -107,6 +108,7 @@ exports[`BasicInformation renders properly 1`] = `
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-label="proponent_project_id"
                 class="ant-input"
                 id="proponent_project_id"
                 name="proponent_project_id"