Addon-interactions: Fix using dates in expect statements

code/addons/interactions/src/components/MethodCall.stories.tsx

@@ -68,6 +68,7 @@ export const Args = () => (
     />
     <Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
     <Node value={{ __date__: { value: new Date(1600000000123).toISOString() } }} />
+    <Node value={{ __date__: { value: new Date(1600000000123) } }} />
     <Node value={{ __error__: { name: 'EvalError', message: '' } }} />
     <Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
     <Node

code/addons/interactions/src/components/MethodCall.tsx

@@ -340,16 +340,32 @@ export const ElementNode = ({
   );
 };
 
-export const DateNode = ({ value }: { value: string }) => {
-  const [date, time, ms] = value.split(/[T.Z]/);
+export const DateNode = ({ value }: { value: string | Date }) => {
+  let dateSplit: string[] = [];
+  if (value instanceof Date) {
+    try {
+      dateSplit = value.toISOString().split(/[T.Z]/);
+    } catch (error) {
+      console.error('Invalid date value provided to DateNode:', value);
+      dateSplit = ['Invalid date', '', ''];
+    }
+  } else {
+    dateSplit = value.split(/[T.Z]/);
+  }
+  const [date, time, ms] = dateSplit;
+
   const colors = useThemeColors();
   return (
     <span style={{ whiteSpace: 'nowrap', color: colors.date }}>
       {date}
-      <span style={{ opacity: 0.7 }}>T</span>
-      {time === '00:00:00' ? <span style={{ opacity: 0.7 }}>{time}</span> : time}
-      {ms === '000' ? <span style={{ opacity: 0.7 }}>.{ms}</span> : `.${ms}`}
-      <span style={{ opacity: 0.7 }}>Z</span>
+      { date !== 'Invalid date' && (
+        <>
+          <span style={{ opacity: 0.7 }}>T</span>
+          {time === '00:00:00' ? <span style={{ opacity: 0.7 }}>{time}</span> : time}
+          {ms === '000' ? <span style={{ opacity: 0.7 }}>.{ms}</span> : `.${ms}`}
+          <span style={{ opacity: 0.7 }}>Z</span>
+        </>
+      )}
     </span>
   );
 };