Build Transaction UI Tests

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"

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>

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}`}>
                         <>

src/components/ExpandBox/styles.scss

@@ -53,6 +53,13 @@
       .ExpandBox__inset {
         overflow: visible;
       }
+
+      // Don't affect nested closed ExpandBox
+      [data-is-expanded="false"] {
+        .ExpandBox__inset {
+          overflow: hidden;
+        }
+      }
     }
   }
 }

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) => {

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}

src/components/FormElements/ClaimantsPicker.tsx

@@ -39,7 +39,7 @@ export const ClaimantsPicker = ({
                 const clId = `${id}-claimant-${idx}`;
 
                 return (
-                  <Box gap="sm" key={clId}>
+                  <Box gap="sm" key={clId} data-testid="claimants-picker">
                     <Box
                       gap="lg"
                       direction="row"
@@ -261,6 +261,7 @@ const Predicate = ({
 
       <RadioPicker
         id={`${parentId}-${index}-${parentPath}-predicate`}
+        data-testid="predicate-picker"
         selectedOption={type}
         onChange={(val) => {
           onUpdate({
@@ -315,6 +316,7 @@ const PredicateType = ({
     <Box gap="sm" addlClassName="PredicateTypeWrapper">
       <RadioPicker
         id={`${parentId}-${index}-${parentPath}-predicate-type`}
+        data-testid="predicate-type-picker"
         selectedOption={type}
         label="Predicate Type"
         onChange={(val) => {
@@ -384,6 +386,7 @@ const PredicateTimeType = ({
     <>
       <RadioPicker
         id={`${parentId}-${index}-${parentPath}-time-type`}
+        data-testid="predicate-time-picker"
         selectedOption={type}
         label="Time Type"
         onChange={(val) => {

src/components/FormElements/FlagFieldPicker.tsx

@@ -33,7 +33,7 @@ export const FlagFieldPicker = ({
   const details = optionsFlagDetails(options, selectedOptions);
 
   return (
-    <div className="RadioPicker">
+    <div className="RadioPicker" data-testid="flag-field-picker">
       {label ? (
         <LabelHeading
           size="md"

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}

src/components/FormElements/NumberFractionPicker.tsx

@@ -104,7 +104,7 @@ export const NumberFractionPicker = ({
   };
 
   return (
-    <Box gap="sm">
+    <Box gap="sm" data-testid="number-fraction-picker">
       <LabelHeading size="md" labelSuffix={labelSuffix}>
         {label}
       </LabelHeading>

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"

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;
+  }
 };