Fix simulating events on child actors. #326 #348

cypress/integration/events-panel.spec.ts

@@ -96,4 +96,58 @@ createMachine({
       'MY_EVENT',
     );
   });
+
+  it('should process events sent to child actors', () => {
+    // Plant a fake entry in localStorage
+    cy.setLocalStorage(
+      'xstate_viz_raw_source|no_source',
+      JSON.stringify({
+        date: new Date(),
+        sourceRawContent: `
+import { createMachine } from "xstate";
+
+const child = createMachine({
+  id: "child",
+  initial: "a",
+  states: {
+    a: { on: { MY_EVENT: "b" } },
+    b: { on: { OTHER_EVENT: "a" } },
+  },
+});
+
+createMachine({
+  id: "parent",
+  initial: "p",
+  states: {
+    p: { 
+      invoke: {
+        src: child
+      }
+    },
+  },
+});
+
+`,
+      }),
+    );
+
+    cy.visit('/viz');
+
+    cy.getCanvas();
+
+    // Switch to actors tab and select the child actor
+    cy.findByRole('tab', { name: /Actors/ }).click();
+    cy.findByRole('tabpanel', { name: /Actors/ })
+      .findAllByTestId(/actor/)
+      .last()
+      .click()
+
+    cy.getCanvas().findByRole('button', { name: 'MY_EVENT' }).click();
+    cy.getCanvas().findByRole('button', { name: 'OTHER_EVENT' }).click();
+
+    cy.findByRole('tab', { name: 'Events' }).click();
+    cy.findByRole('tabpanel', { name: 'Events' })
+      .should('contain', 'MY_EVENT')
+      .should('contain', 'OTHER_EVENT');
+  });
 });

src/simulationMachine.tsx

@@ -14,6 +14,7 @@ import { devTools } from './devInterface';
 import { notifMachine } from './notificationMachine';
 import { AnyState, AnyStateMachine, ServiceData } from './types';
 import { isOnClientSide } from './isOnClientSide';
+import { findChildService } from './utils';
 
 export interface SimEvent extends SCXML.Event<any> {
   timestamp: number;
@@ -180,7 +181,7 @@ export const simulationMachine = simModel.createMachine(
                   }
                 });
               } else if (event.type === 'xstate.event') {
-                const service = serviceMap.get(event.sessionId);
+                const service = serviceMap.get(event.sessionId) || findChildService(Array.from(serviceMap.values()), event.sessionId);
                 if (service) {
                   try {
                     service.send(event.event);

src/utils.ts

@@ -3,7 +3,9 @@ import * as React from 'react';
 import {
   ActionObject,
   ActionTypes,
+  ActorRef,
   AnyEventObject,
+  AnyInterpreter,
   CancelAction,
   Interpreter,
   SendAction,
@@ -429,3 +431,21 @@ export const isAcceptingSpaceNatively = (
   el.tagName === 'INPUT' ||
   isTextInputLikeElement(el) ||
   getRoles(el).includes('button');
+
+export const findChildService = (services: ActorRef<any>[], sessionId: string, maxDepth = 100): AnyInterpreter | undefined => {
+  return services.reduce<AnyInterpreter | undefined>((prev, child) => {
+    if (maxDepth === 0) {
+      return prev
+    }
+    if (prev) {
+      return prev
+    }
+    if (child instanceof Interpreter) {
+      if (child.sessionId === sessionId) {
+        return child
+      }
+      return findChildService(Array.from(child.children.values()), sessionId, maxDepth - 1)
+    }
+    return undefined
+  }, undefined)
+}