Custom event with value, add test for online/offline

Author: RoyalIcing

src/index.test.ts

@@ -13,10 +13,21 @@ import {
   send,
   start,
   accumulate,
+  onceStateChangesTo,
 } from "./index";
 
 test("node version " + process.version, () => {});
 
+function useEach(work: () => () => void) {
+  let cleanup: null | (() => void) = null;
+  beforeEach(() => {
+    cleanup = work();
+  })
+  afterEach(() => {
+    cleanup?.call(null);
+  });
+}
+
 const fetch = jest.fn();
 beforeEach(fetch.mockClear);
 
@@ -449,18 +460,35 @@ describe("Switch", () => {
     machine.next("FLICK");
     expect(machine.current).toEqual("ON");
     expect(eventListener).toHaveBeenCalledTimes(1);
-    expect(eventListener).toHaveBeenLastCalledWith(expect.objectContaining({ type: "StateChanged" }));
+    expect(eventListener).toHaveBeenLastCalledWith(expect.objectContaining({ type: "StateChanged", value: "ON" }));
 
     machine.next("FLICK");
     expect(machine.current).toEqual("OFF");
     expect(eventListener).toHaveBeenCalledTimes(2);
+    expect(eventListener).toHaveBeenLastCalledWith(expect.objectContaining({ type: "StateChanged", value: "OFF" }));
 
     machine.signal.removeEventListener("StateChanged", eventListener);
 
     machine.next("FLICK");
     expect(machine.current).toEqual("ON");
     expect(eventListener).toHaveBeenCalledTimes(2);
   });
+
+  it("can produce a promise that resolves when state changes to ON", async () => {
+    const machine = start(Switch);
+
+    const whenPromiseResolves = jest.fn();
+    const aborter = new AbortController();
+    const onPromise = onceStateChangesTo(machine, "ON", aborter.signal)
+    onPromise.then(whenPromiseResolves)
+
+    await null;
+    expect(whenPromiseResolves).toHaveBeenCalledTimes(0);
+
+    machine.next("FLICK");
+    await null;
+    expect(whenPromiseResolves).toHaveBeenCalledTimes(1);
+  })
 });
 
 describe("Switch with symbol messages", () => {
@@ -496,6 +524,71 @@ describe("Switch with symbol messages", () => {
   });
 });
 
+describe("Wrapping navigator online as a state machine", () => {
+  function* OfflineStatus() {
+    yield listenTo(window, "online");
+    yield listenTo(window, "offline");
+    yield on("online", compound(Online));
+    yield on("offline", compound(Offline));
+  
+    function* Online() {}
+    function* Offline() {}
+  
+    return function* Pending() {
+      yield cond(navigator.onLine, Online);
+      yield always(Offline);
+    }
+  }
+
+  describe("when online", () => {
+    useEach(() => {
+      const spy = jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(true);
+      return () => spy.mockRestore();
+    });
+
+    it("is immediately in Online state", () => {
+      const machine = start(OfflineStatus);
+      expect(machine.current).toEqual("Online");
+      expect(machine.changeCount).toEqual(0);
+    });
+
+    it("reacts to offline & online events", () => {
+      const machine = start(OfflineStatus);
+      window.dispatchEvent(new Event('offline'))
+      expect(machine.current).toEqual("Offline");
+      expect(machine.changeCount).toEqual(1);
+
+      window.dispatchEvent(new Event('online'))
+      expect(machine.current).toEqual("Online");
+      expect(machine.changeCount).toEqual(2);
+    });
+  });
+
+  describe("when offline", () => {
+    useEach(() => {
+      const spy = jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(false);
+      return () => spy.mockRestore();
+    });
+
+    it("is immediately in Offline state", () => {
+      const machine = start(OfflineStatus);
+      expect(machine.current).toEqual("Offline");
+      expect(machine.changeCount).toEqual(0);
+    });
+
+    it("reacts to online & offline events", () => {
+      const machine = start(OfflineStatus);
+      window.dispatchEvent(new Event('online'))
+      expect(machine.current).toEqual("Online");
+      expect(machine.changeCount).toEqual(1);
+
+      window.dispatchEvent(new Event('offline'))
+      expect(machine.current).toEqual("Offline");
+      expect(machine.changeCount).toEqual(2);
+    });
+  });
+});
+
 describe("Wrapping AbortController as a state machine", () => {
   function AbortSender(controller: AbortController) {
     function* initial() {

src/index.ts

@@ -444,6 +444,15 @@ class InternalInstance {
   }
 }
 
+class MachineStateChangedEvent extends Event {
+  readonly value: string;
+
+  constructor(type: string, value: string) {
+    super(type)
+    this.value = value;
+  }
+}
+
 export function start(
   machine: (() => StateDefinition) | (() => Generator<Yielded, StateDefinition, never>)
 ): MachineInstance {
@@ -474,7 +483,7 @@ export function start(
         _changeCount += 1;
       },
       didChangeState() {
-        _aborter?.signal.dispatchEvent(new Event('StateChanged'));
+        _aborter?.signal.dispatchEvent(new MachineStateChangedEvent('StateChanged', getCurrent() as string));
       },
       didChangeAccumulations() {
         _aborter?.signal.dispatchEvent(new Event('AccumulationsChanged'));
@@ -487,6 +496,11 @@ export function start(
       }
     }
   );
+
+  function getCurrent() {
+    const current = instance.current;
+    return current !== null ? current[rootName] : null;
+  }
 
   _changeCount = 0;
 
@@ -495,7 +509,7 @@ export function start(
       return _changeCount;
     },
     get current() {
-      return instance.current !== null ? instance.current[rootName] : null;
+      return getCurrent();
     },
     get signal() {
       return ensureAborter().signal;
@@ -524,3 +538,13 @@ export function start(
     },
   };
 }
+
+export function onceStateChangesTo(machineInstance: MachineInstance, state: string, signal: AbortSignal): Promise<void> {
+  return new Promise((resolve) => {
+    machineInstance.signal.addEventListener("StateChanged", (event: MachineStateChangedEvent) => {
+      if (event.value === state) {
+        resolve();
+      }
+    }, { signal });
+  })
+}