Fix flaky test for multi profiles and alerts for props (#3847)

* add test id for close button * close alert before moving on * fix all alerts to use taost props * update test to wait after each profile creation * remove alert in console * wait for interface to be ready * correctly wait before query creation * fix check after comment creation * update verifiactions tests + increase timeout for proposed changes * increase timeout for proposed change * update objects in test to avoid concurrent testing on the same objects * update locators for hover
opsmill · Jul 17, 2024 · 7dd1773 · 7dd1773
1 parent 5f5e402
commit 7dd1773
Show file tree

Hide file tree

Showing 41 changed files with 94 additions and 107 deletions.
diff --git a/frontend/app/src/Root.tsx b/frontend/app/src/Root.tsx
@@ -21,9 +21,9 @@ export const Root = ({ children }: { children?: ReactNode }) => {
     try {
       return fetchUrl(CONFIG.CONFIG_URL);
     } catch (err) {
-      toast(() => (
+      toast(
         <Alert type={ALERT_TYPES.ERROR} message="Something went wrong when fetching the config" />
-      ));
+      );
       console.error("Error while fetching the config: ", err);
       return undefined;
     }
@@ -42,9 +42,9 @@ export const Root = ({ children }: { children?: ReactNode }) => {
         return;
       }
 
-      toast(() => (
+      toast(
         <Alert type={ALERT_TYPES.ERROR} message="Something went wrong when fetching the config" />
-      ));
+      );
       console.error("Error while fetching the config: ", error);
     }
   };

diff --git a/frontend/app/src/components/account-menu.tsx b/frontend/app/src/components/account-menu.tsx
@@ -51,7 +51,7 @@ export const AccountMenu = () => {
   const profile = data?.AccountProfile;
 
   if (error) {
-    toast(() => <Alert type={ALERT_TYPES.ERROR} message="Error while loading profile data" />, {
+    toast(<Alert type={ALERT_TYPES.ERROR} message="Error while loading profile data" />, {
       toastId: customId,
     });
 

diff --git a/frontend/app/src/components/buttons/clipboard.tsx b/frontend/app/src/components/buttons/clipboard.tsx
@@ -22,7 +22,7 @@ export const Clipboard = (props: tClipboard) => {
 
     await navigator.clipboard.writeText(value);
 
-    toast(() => <Alert message={alert} type={ALERT_TYPES.INFO} />);
+    toast(<Alert message={alert} type={ALERT_TYPES.INFO} />);
 
     setTimeout(() => {
       setIsCopied(false);

diff --git a/frontend/app/src/components/conversations/thread.tsx b/frontend/app/src/components/conversations/thread.tsx
@@ -168,7 +168,7 @@ export const Thread = (props: tThread) => {
       setDisplayAddComment(false);
     }
 
-    toast(() => <Alert type={ALERT_TYPES.SUCCESS} message={"Thread resolved"} />);
+    toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Thread resolved"} />);
   };
 
   const comments = thread?.comments?.edges?.map((comment: any) => comment.node) ?? [];

diff --git a/frontend/app/src/components/editor/code-editor.tsx b/frontend/app/src/components/editor/code-editor.tsx
@@ -22,7 +22,7 @@ export const CodeEditor = (props: any) => {
 
     await navigator.clipboard.writeText(value);
 
-    toast(() => <Alert message="Content copied" type={ALERT_TYPES.INFO} />);
+    toast(<Alert message="Content copied" type={ALERT_TYPES.INFO} />);
 
     setTimeout(() => {
       setIsCopied(false);

diff --git a/frontend/app/src/components/file.tsx b/frontend/app/src/components/file.tsx
@@ -28,7 +28,7 @@ export const File = (props: tFile) => {
       setFileContent(fileResult);
     } catch (err) {
       console.error("err: ", err);
-      toast(() => <Alert type={ALERT_TYPES.ERROR} message="Error while loading file content" />);
+      toast(<Alert type={ALERT_TYPES.ERROR} message="Error while loading file content" />);
     }
 
     setIsLoading(false);

diff --git a/frontend/app/src/components/form/object-form.tsx b/frontend/app/src/components/form/object-form.tsx
@@ -206,7 +206,7 @@ const NodeForm = ({
         },
       });
 
-      toast(() => <Alert type={ALERT_TYPES.SUCCESS} message={`${schema?.name} created`} />, {
+      toast(<Alert type={ALERT_TYPES.SUCCESS} message={`${schema?.name} created`} />, {
         toastId: `alert-success-${schema?.name}-created`,
       });
 

diff --git a/frontend/app/src/components/list.tsx b/frontend/app/src/components/list.tsx
@@ -40,7 +40,7 @@ const List = forwardRef<HTMLInputElement, OpsListProps>((props, ref) => {
       sertInputValue("");
 
       if (newArray.length === value.length) {
-        toast(() => <Alert message="Item already in the list" type={ALERT_TYPES.INFO} />);
+        toast(<Alert message="Item already in the list" type={ALERT_TYPES.INFO} />);
       }
     }
   };

diff --git a/frontend/app/src/components/ui/alert.tsx b/frontend/app/src/components/ui/alert.tsx
@@ -27,7 +27,7 @@ type AlertProps = {
 };
 
 export const Alert = (props: AlertProps) => {
-  const { closeToast, message, details, onDismiss, type, ...otherProps } = props;
+  const { closeToast, message, details, onDismiss, type } = props;
 
   const getIcon = () => {
     switch (type) {
@@ -113,7 +113,7 @@ export const Alert = (props: AlertProps) => {
   const alertDetails = <p className={classNames("text-sm", alertClasses.text)}>{details}</p>;
 
   return (
-    <div className={classNames("rounded-m p-4", alertClasses.container)} {...otherProps}>
+    <div className={classNames("rounded-m p-4", alertClasses.container)}>
       <div className="flex items-center">
         <div className="flex-shrink-0 flex items-start">{getIcon()}</div>
         <div className="ml-3">
@@ -127,7 +127,8 @@ export const Alert = (props: AlertProps) => {
                 "inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2",
                 alertClasses?.button
               )}
-              onClick={handleDismiss}>
+              onClick={handleDismiss}
+              data-testid="close-alert">
               <XMarkIcon className="w-4 h-4" aria-hidden="true" />
             </button>
           </div>

diff --git a/frontend/app/src/decorators/withSchemaContext.tsx b/frontend/app/src/decorators/withSchemaContext.tsx
@@ -98,9 +98,9 @@ export const withSchemaContext = (AppComponent: any) => (props: any) => {
       setProfiles(profiles);
       setState({ isReady: true });
     } catch (error) {
-      toast(() => (
+      toast(
         <Alert type={ALERT_TYPES.ERROR} message="Something went wrong when fetching the schema" />
-      ));
+      );
 
       console.error("Error while fetching the schema: ", error);
     }

diff --git a/frontend/app/src/graphql/graphqlClientApollo.tsx b/frontend/app/src/graphql/graphqlClientApollo.tsx
@@ -126,7 +126,7 @@ export const errorLink = onError(({ graphQLErrors, operation, forward }) => {
         }
         default:
           if (graphQLError.message) {
-            toast(() => <Alert type={ALERT_TYPES.ERROR} message={graphQLError.message} />, {
+            toast(<Alert type={ALERT_TYPES.ERROR} message={graphQLError.message} />, {
               toastId: "alert-error",
             });
           }

diff --git a/frontend/app/src/hooks/useAuth.tsx b/frontend/app/src/hooks/useAuth.tsx
@@ -108,7 +108,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setIsLoading(false);
 
     if (!result?.access_token) {
-      toast(() => <Alert type={ALERT_TYPES.ERROR} message="Invalid username and password" />, {
+      toast(<Alert type={ALERT_TYPES.ERROR} message="Invalid username and password" />, {
         toastId: "alert-error-sign-in",
       });
 

diff --git a/frontend/app/src/screens/artifacts/generate.tsx b/frontend/app/src/screens/artifacts/generate.tsx
@@ -50,9 +50,9 @@ export const Generate = (props: tGenerateProps) => {
       });
 
       if (artifactid) {
-        toast(() => <Alert message="Artifact re-generated" type={ALERT_TYPES.SUCCESS} />);
+        toast(<Alert message="Artifact re-generated" type={ALERT_TYPES.SUCCESS} />);
       } else {
-        toast(() => <Alert message="Artifacts generated" type={ALERT_TYPES.SUCCESS} />);
+        toast(<Alert message="Artifacts generated" type={ALERT_TYPES.SUCCESS} />);
       }
 
       setIsLoading(false);

diff --git a/frontend/app/src/screens/branches/branch-details.tsx b/frontend/app/src/screens/branches/branch-details.tsx
@@ -77,7 +77,7 @@ export const BranchDetails = () => {
       console.log("error: ", error);
       setDetailsContent(error);
 
-      toast(() => <Alert type={ALERT_TYPES.SUCCESS} message={errorMessage} />);
+      toast(<Alert type={ALERT_TYPES.SUCCESS} message={errorMessage} />);
     }
 
     setIsLoadingRequest(false);

diff --git a/frontend/app/src/screens/diff/artifact-diff/artifact-content-diff.tsx b/frontend/app/src/screens/diff/artifact-diff/artifact-content-diff.tsx
@@ -141,7 +141,7 @@ export const ArtifactContentDiff = (props: any) => {
       setState(fileResult || "");
     } catch (err) {
       console.error("Error while loading files diff: ", err);
-      toast(() => <Alert type={ALERT_TYPES.ERROR} message="Error while loading files diff" />);
+      toast(<Alert type={ALERT_TYPES.ERROR} message="Error while loading files diff" />);
     }
 
     setIsLoading(false);
@@ -244,7 +244,7 @@ export const ArtifactContentDiff = (props: any) => {
         },
       });
 
-      toast(() => <Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
+      toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
 
       if (refetch) {
         refetch();
@@ -275,13 +275,13 @@ export const ArtifactContentDiff = (props: any) => {
 
       console.error("An error occurred while creating the comment: ", error);
 
-      toast(() => (
+      toast(
         <Alert
           type={ALERT_TYPES.ERROR}
           message={"An error occurred while creating the comment"}
           details={error.message}
         />
-      ));
+      );
 
       setIsLoading(false);
     }

diff --git a/frontend/app/src/screens/diff/artifact-diff/artifacts-diff.tsx b/frontend/app/src/screens/diff/artifact-diff/artifacts-diff.tsx
@@ -45,7 +45,7 @@ export const ArtifactsDiff = forwardRef((props, ref) => {
       setArtifactsDiff(filesResult);
     } catch (err) {
       console.error("Error while loading artifacts diff: ", err);
-      toast(() => <Alert type={ALERT_TYPES.ERROR} message="Error while loading artifacts diff" />);
+      toast(<Alert type={ALERT_TYPES.ERROR} message="Error while loading artifacts diff" />);
     }
 
     setIsLoading(false);

diff --git a/frontend/app/src/screens/diff/checks/checks-summary.tsx b/frontend/app/src/screens/diff/checks/checks-summary.tsx
@@ -64,7 +64,7 @@ export const ChecksSummary = (props: tChecksSummaryProps) => {
     refetch();
 
     if (result?.data?.CoreProposedChangeRunCheck?.ok) {
-      toast(() => <Alert type={ALERT_TYPES.SUCCESS} message="Checks are running" />);
+      toast(<Alert type={ALERT_TYPES.SUCCESS} message="Checks are running" />);
     }
   };
 

diff --git a/frontend/app/src/screens/diff/checks/conflict.tsx b/frontend/app/src/screens/diff/checks/conflict.tsx
@@ -92,7 +92,7 @@ export const Conflict = (props: any) => {
         },
       });
 
-      toast(() => <Alert type={ALERT_TYPES.SUCCESS} message="Conflict marked as resovled" />);
+      toast(<Alert type={ALERT_TYPES.SUCCESS} message="Conflict marked as resovled" />);
 
       setIsLoading(false);
 

diff --git a/frontend/app/src/screens/diff/data-diff.tsx b/frontend/app/src/screens/diff/data-diff.tsx
@@ -135,7 +135,7 @@ export const DataDiff = forwardRef((props, ref) => {
     } catch (err) {
       console.error("Error when fethcing branches: ", err);
 
-      toast(() => <Alert type={ALERT_TYPES.ERROR} message="Error while loading branch diff" />);
+      toast(<Alert type={ALERT_TYPES.ERROR} message="Error while loading branch diff" />);
     }
 
     setIsLoading(false);

diff --git a/frontend/app/src/screens/diff/diff-comments.tsx b/frontend/app/src/screens/diff/diff-comments.tsx
@@ -153,7 +153,7 @@ export const DataDiffComments = (props: tDataDiffComments) => {
         },
       });
 
-      toast(() => <Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
+      toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
 
       handleRefetch();
     } catch (error: any) {

diff --git a/frontend/app/src/screens/diff/file-diff/file-content-diff.tsx b/frontend/app/src/screens/diff/file-diff/file-content-diff.tsx
@@ -160,7 +160,7 @@ export const FileContentDiff = (props: any) => {
       setState(fileResult);
     } catch (err) {
       console.error("Error while loading files diff: ", err);
-      toast(() => <Alert type={ALERT_TYPES.ERROR} message="Error while loading files diff" />);
+      toast(<Alert type={ALERT_TYPES.ERROR} message="Error while loading files diff" />);
     }
 
     setIsLoading(false);
@@ -274,7 +274,7 @@ export const FileContentDiff = (props: any) => {
         },
       });
 
-      toast(() => <Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
+      toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
 
       if (refetch) {
         refetch();
@@ -305,13 +305,13 @@ export const FileContentDiff = (props: any) => {
 
       console.error("An error occurred while creating the comment: ", error);
 
-      toast(() => (
+      toast(
         <Alert
           type={ALERT_TYPES.ERROR}
           message={"An error occurred while creating the comment"}
           details={error.message}
         />
-      ));
+      );
 
       setIsLoading(false);
     }

diff --git a/frontend/app/src/screens/diff/schema-diff.tsx b/frontend/app/src/screens/diff/schema-diff.tsx
@@ -45,7 +45,7 @@ export const SchemaDiff = forwardRef((props, ref) => {
       setDiff(diffDetails?.diffs ?? []);
     } catch (err) {
       console.error("Error when loading branch diff: ", err);
-      toast(() => <Alert type={ALERT_TYPES.ERROR} message="Error while loading branch diff" />);
+      toast(<Alert type={ALERT_TYPES.ERROR} message="Error while loading branch diff" />);
     }
 
     setIsLoading(false);

diff --git a/frontend/app/src/screens/groups/add-group-form.tsx b/frontend/app/src/screens/groups/add-group-form.tsx
@@ -35,12 +35,12 @@ export default function AddGroupForm({
     try {
       await addObjectToGroups({ variables: { objectId, relationshipIds: groupIds } });
 
-      toast(() => (
+      toast(
         <Alert
           type={ALERT_TYPES.SUCCESS}
           message={`${pluralize(groupIds.length, "group")} added`}
         />
-      ));
+      );
 
       if (onUpdateCompleted) onUpdateCompleted();
     } catch (e) {

diff --git a/frontend/app/src/screens/ipam/ip-addresses/ipam-ip-address-list.tsx b/frontend/app/src/screens/ipam/ip-addresses/ipam-ip-address-list.tsx
@@ -127,12 +127,12 @@ const IpamIPAddressesList = forwardRef((props, ref) => {
 
       setRelatedRowToDelete(undefined);
 
-      toast(() => (
+      toast(
         <Alert
           type={ALERT_TYPES.SUCCESS}
           message={`Address ${relatedRowToDelete?.values?.address} deleted`}
         />
-      ));
+      );
     } catch (error) {
       console.error("Error while deleting address: ", error);
     }

diff --git a/frontend/app/src/screens/ipam/prefixes/ipam-prefix-details.tsx b/frontend/app/src/screens/ipam/prefixes/ipam-prefix-details.tsx
@@ -136,13 +136,13 @@ const IpamIPPrefixDetails = forwardRef((props, ref) => {
 
       setRelatedRowToDelete(undefined);
 
-      toast(() => (
+      toast(
         <Alert
           type={ALERT_TYPES.SUCCESS}
           data-testid="alert-prefix-deleted"
           message={`Prefix ${relatedRowToDelete?.values?.prefix} deleted`}
         />
-      ));
+      );
     } catch (error) {
       console.error("Error while deleting address: ", error);
     }

diff --git a/frontend/app/src/screens/ipam/prefixes/ipam-prefixes-summary-list.tsx b/frontend/app/src/screens/ipam/prefixes/ipam-prefixes-summary-list.tsx
@@ -123,12 +123,12 @@ const IpamIPPrefixesSummaryList = forwardRef((props, ref) => {
 
       setRelatedRowToDelete(undefined);
 
-      toast(() => (
+      toast(
         <Alert
           type={ALERT_TYPES.SUCCESS}
           message={`Prefix ${relatedRowToDelete?.values?.prefix} deleted`}
         />
-      ));
+      );
     } catch (error) {
       console.error("Error while deleting address: ", error);
     }

diff --git a/frontend/app/src/screens/layout/sidebar/desktop-menu.tsx b/frontend/app/src/screens/layout/sidebar/desktop-menu.tsx
@@ -43,7 +43,7 @@ export function DesktopMenu({ className = "" }: MenuProps) {
       setIsLoading(false);
     } catch (error) {
       console.error("error: ", error);
-      toast(() => <Alert type={ALERT_TYPES.ERROR} message="Error while fetching the menu" />);
+      toast(<Alert type={ALERT_TYPES.ERROR} message="Error while fetching the menu" />);
       setIsLoading(false);
     }
   };

diff --git a/frontend/app/src/screens/object-item-details/relationship-details-paginated.tsx b/frontend/app/src/screens/object-item-details/relationship-details-paginated.tsx
@@ -156,12 +156,12 @@ export default function RelationshipDetails(props: iRelationDetailsProps) {
       refetch();
     }
 
-    toast(() => (
+    toast(
       <Alert
         type={ALERT_TYPES.SUCCESS}
         message={`Association with ${relationshipSchema.peer} removed`}
       />
-    ));
+    );
   };
 
   const handleSubmit = async (data: any) => {
@@ -180,12 +180,12 @@ export default function RelationshipDetails(props: iRelationDetailsProps) {
         refetch();
       }
 
-      toast(() => (
+      toast(
         <Alert
           type={ALERT_TYPES.SUCCESS}
           message={`Association with ${relationshipSchema.peer} added`}
         />
-      ));
+      );
 
       setShowAddDrawer(false);
     }

diff --git a/frontend/app/src/screens/object-item-details/relationships-details-paginated.tsx b/frontend/app/src/screens/object-item-details/relationships-details-paginated.tsx
@@ -103,7 +103,7 @@ export const RelationshipsDetails = forwardRef((props: RelationshipsDetailsProps
 
     updatePageData();
 
-    toast(() => <Alert type={ALERT_TYPES.SUCCESS} message={"Item removed from the group"} />);
+    toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Item removed from the group"} />);
   };
 
   // const count = data[schemaData?.kind].count;