From accb633ec8b6469f77abc940efc25708bd2ef2f8 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 17 Jun 2022 09:22:26 +0200
Subject: [PATCH 1/2] Fix callsById for Node in an array

---
 .../AccountForm/addon-interactions.stories.tsx   |  3 +++
 .../interactions/src/components/MethodCall.tsx   | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
index d3df3f635f2f..d7f81dacd007 100644
--- a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
+++ b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
@@ -35,6 +35,9 @@ export const Demo: CSF2Story = (args) => (
 Demo.play = async ({ args, canvasElement }) => {
   await userEvent.click(within(canvasElement).getByRole('button'));
   await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
+  await expect([{ name: 'John', age: 42 }]).toEqual(
+    expect.arrayContaining([expect.objectContaining({ name: 'John' })])
+  );
 };
 
 export const FindBy: CSF2Story = (args) => {
diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx
index fa792dce56aa..824a16cf88e7 100644
--- a/addons/interactions/src/components/MethodCall.tsx
+++ b/addons/interactions/src/components/MethodCall.tsx
@@ -112,7 +112,7 @@ export const Node = ({
     case value === undefined:
       return <UndefinedNode {...props} />;
     case Array.isArray(value):
-      return <ArrayNode {...props} value={value} />;
+      return <ArrayNode {...props} value={value} callsById={callsById} />;
     case typeof value === 'string':
       return <StringNode {...props} value={value} />;
     case typeof value === 'number':
@@ -191,12 +191,22 @@ export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
   );
 };
 
-export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: boolean }) => {
+export const ArrayNode = ({
+  value,
+  nested = false,
+  callsById,
+}: {
+  value: any[];
+  nested?: boolean;
+  callsById?: Map<Call['id'], Call>;
+}) => {
   const colors = useThemeColors();
   if (nested) {
     return <span style={{ color: colors.base }}>[…]</span>;
   }
-  const nodes = value.slice(0, 3).map((v) => <Node key={v} value={v} nested />);
+  const nodes = value
+    .slice(0, 3)
+    .map((v) => <Node key={v} value={v} nested callsById={callsById} />);
   const nodelist = interleave(nodes, <span>, </span>);
   if (value.length <= 3) {
     return <span style={{ color: colors.base }}>[{nodelist}]</span>;

From 5a7d04c78e71153027ece59b974068666ff0c4b8 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 17 Jun 2022 09:30:29 +0200
Subject: [PATCH 2/2] Address key prop warning

---
 .../components/AccountForm/addon-interactions.stories.tsx    | 5 ++++-
 addons/interactions/src/components/MethodCall.tsx            | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
index d7f81dacd007..f1d8aace3951 100644
--- a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
+++ b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
@@ -36,7 +36,10 @@ Demo.play = async ({ args, canvasElement }) => {
   await userEvent.click(within(canvasElement).getByRole('button'));
   await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
   await expect([{ name: 'John', age: 42 }]).toEqual(
-    expect.arrayContaining([expect.objectContaining({ name: 'John' })])
+    expect.arrayContaining([
+      expect.objectContaining({ name: 'John' }),
+      expect.objectContaining({ age: 42 }),
+    ])
   );
 };
 
diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx
index 824a16cf88e7..871068cea0ef 100644
--- a/addons/interactions/src/components/MethodCall.tsx
+++ b/addons/interactions/src/components/MethodCall.tsx
@@ -206,7 +206,7 @@ export const ArrayNode = ({
   }
   const nodes = value
     .slice(0, 3)
-    .map((v) => <Node key={v} value={v} nested callsById={callsById} />);
+    .map((v) => <Node key={JSON.stringify(v)} value={v} nested callsById={callsById} />);
   const nodelist = interleave(nodes, <span>, </span>);
   if (value.length <= 3) {
     return <span style={{ color: colors.base }}>[{nodelist}]</span>;