Build Transaction UI Tests

stellar · Nov 19, 2024 · 29d6951 · 29d6951
1 parent a3d1a3c
commit 29d6951
Show file tree

Hide file tree

Showing 9 changed files with 646 additions and 19 deletions.
diff --git a/src/app/(sidebar)/transaction/build/components/Operations.tsx b/src/app/(sidebar)/transaction/build/components/Operations.tsx
@@ -934,7 +934,12 @@ export const Operations = () => {
           {/* Operations */}
           <>
             {txnOperations.map((op, idx) => (
-              <Box key={`op-${idx}`} gap="lg" addlClassName="PageBody__content">
+              <Box
+                key={`op-${idx}`}
+                gap="lg"
+                addlClassName="PageBody__content"
+                data-testid={`build-transaction-operation-${idx}`}
+              >
                 {/* Operation label and action buttons */}
                 <Box
                   gap="lg"

diff --git a/src/app/(sidebar)/transaction/build/components/TransactionXdr.tsx b/src/app/(sidebar)/transaction/build/components/TransactionXdr.tsx
@@ -544,7 +544,7 @@ export const TransactionXdr = () => {
           variant="success"
           title="Success! Transaction Envelope XDR:"
           response={
-            <Box gap="xs">
+            <Box gap="xs" data-testid="build-transaction-envelope-xdr">
               <div>
                 <div>Network Passphrase:</div>
                 <div>{network.passphrase}</div>

diff --git a/src/app/(sidebar)/transaction/build/page.tsx b/src/app/(sidebar)/transaction/build/page.tsx
@@ -28,7 +28,7 @@ export default function BuildTransaction() {
                   <Box gap="sm">
                     <>
                       <div>Params</div>
-                      <ul>
+                      <ul data-testid="build-transaction-params-errors">
                         {paramsError.map((e, i) => (
                           <li key={`e-${i}`}>{e}</li>
                         ))}
@@ -38,7 +38,10 @@ export default function BuildTransaction() {
                 ) : null}
 
                 {operationsError.length > 0 ? (
-                  <Box gap="sm">
+                  <Box
+                    gap="sm"
+                    data-testid="build-transaction-operations-errors"
+                  >
                     {operationsError.map((e, i) => (
                       <Box gap="sm" key={`e-${i}`}>
                         <>

diff --git a/src/components/FormElements/AssetMultiPicker.tsx b/src/components/FormElements/AssetMultiPicker.tsx
@@ -106,6 +106,7 @@ export const AssetMultiPicker = ({
                 <div className="RadioPicker__inset" key={`${id}-${index}`}>
                   <RadioPicker
                     id={`${id}-${index}`}
+                    data-testid={`asset-multipicker-${index}`}
                     selectedOption={value.type}
                     label={`#${index + 1}`}
                     onChange={(optionId) => {

diff --git a/src/components/FormElements/AssetPicker.tsx b/src/components/FormElements/AssetPicker.tsx
@@ -200,6 +200,7 @@ export const AssetPicker = ({
     <div className="RadioPicker__inset">
       <RadioPicker
         id={id}
+        data-testid="asset-picker"
         selectedOption={value.type}
         label={label}
         labelSuffix={labelSuffix}

diff --git a/src/components/FormElements/MemoPicker.tsx b/src/components/FormElements/MemoPicker.tsx
@@ -56,6 +56,7 @@ export const MemoPicker = ({
     <div className="RadioPicker__inset">
       <RadioPicker
         id={id}
+        data-testid="memo-picker"
         selectedOption={value?.type}
         label="Memo"
         labelSuffix={labelSuffix}

diff --git a/src/components/RadioPicker/index.tsx b/src/components/RadioPicker/index.tsx
@@ -30,13 +30,14 @@ export const RadioPicker = <TOptionValue,>({
   infoLink,
   infoText,
   disabledOptions,
+  ...props
 }: RadioPickerProps<TOptionValue>) => {
   const customStyle = {
     ...(fitContent ? { "--RadioPicker-width": "fit-content" } : {}),
   } as React.CSSProperties;
 
   return (
-    <div className="RadioPicker" style={customStyle}>
+    <div className="RadioPicker" style={customStyle} {...props}>
       {label ? (
         <LabelHeading
           size="md"

diff --git a/src/helpers/formatEpochToDate.ts b/src/helpers/formatEpochToDate.ts
@@ -1,17 +1,21 @@
 export const formatEpochToDate = (epoch: number) => {
-  const date = new Date(epoch * 1000);
-  const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-    hourCycle: "h24",
-    timeZone: "utc",
-    timeZoneName: "short",
-  });
+  try {
+    const date = new Date(epoch * 1000);
+    const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      hourCycle: "h24",
+      timeZone: "utc",
+      timeZoneName: "short",
+    });
 
-  return dateTimeFormatter.format(date);
+    return dateTimeFormatter.format(date);
+  } catch (e) {
+    return null;
+  }
 };