Add storybook tests

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

@@ -121,7 +121,7 @@ export const Exception = ({ exception }: { exception: Call['exception'] }) => {
     return (
       <RowMessage>
         <MatcherResult
-          message={`${exception.message}\n${exception.diff ? exception.diff : ''}`}
+          message={`${exception.message}${exception.diff ? `\n\n${exception.diff}` : ''}`}
           style={{ padding: 0 }}
         />
         <p>See the full stack trace in the browser console.</p>

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

@@ -29,53 +29,81 @@ export default {
 export const Expected = {
   args: {
     message: dedent`
-      expect(jest.fn()).lastCalledWith(...expected)
-
-      Expected: {"email": "[email protected]", "password": "testpasswordthatwontfail"}
-
-      Number of calls: 0
+      expected last "spy" call to have been called with [ { …(2) } ]
+      
+      - Expected: 
+      Array [
+        Object {
+          "email": "[email protected]",
+          "password": "testpasswordthatwontfail",
+        },
+      ]
+      
+      + Received: 
+      undefined
     `,
   },
 };
 
 export const ExpectedReceived = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledWith(...expected)
-
-      Expected: called with 0 arguments
-      Received: {"email": "[email protected]", "password": "testpasswordthatwontfail"}
-
-      Number of calls: 1
+      expected last "spy" call to have been called with []
+      
+      - Expected
+      + Received
+      
+      - Array []
+      + Array [
+      +   Object {
+      +     "email": "[email protected]",
+      +     "password": "testpasswordthatwontfail",
+      +   },
+      + ]
     `,
   },
 };
 
 export const ExpectedNumberOfCalls = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledTimes(expected)
-
-      Expected number of calls: 1
-      Received number of calls: 0
+      expected "spy" to not be called at all, but actually been called 1 times
+      
+      Received: 
+      
+        1st spy call:
+      
+          Array [
+            Object {
+              "email": "[email protected]",
+              "password": "testpasswordthatwontfail",
+            },
+          ]
+      
+      
+      Number of calls: 1
     `,
   },
 };
 
 export const Diff = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledWith(...expected)
-
-      - Expected
-      + Received
-
-        Object {
-      -   "email": "[email protected]",
-      +   "email": "[email protected]",
-          "password": "testpasswordthatwontfail",
-        },
-
+      expected "spy" to be called with arguments: [ { …(2) } ]
+      
+      Received: 
+      
+        1st spy call:
+      
+        Array [
+          Object {
+      -     "email": "[email protected]",
+      +     "email": "[email protected]",
+            "password": "testpasswordthatwontfail",
+          },
+        ]
+      
+      
       Number of calls: 1
     `,
   },

code/ui/.storybook/main.ts

@@ -30,6 +30,10 @@ const allStories = [
     directory: '../../addons/onboarding/src',
     titlePrefix: '@addons/onboarding',
   },
+  {
+    directory: '../../addons/interactions/src',
+    titlePrefix: '@addons/interactions',
+  },
 ];
 
 /**