From ca7f090d5f8693546452ca18f30c042012d18154 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 19 Feb 2024 11:51:30 +0100
Subject: [PATCH] Add a test case related to `@xstate/solid` and after
 transitions (#4468)

* Add a failing test case related to `@xstate/solid`

* add a sleep

* add test title
---
 .../xstate-solid/test/useMachine.test.tsx     | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/packages/xstate-solid/test/useMachine.test.tsx b/packages/xstate-solid/test/useMachine.test.tsx
index 5732e43521..93dea8aa97 100644
--- a/packages/xstate-solid/test/useMachine.test.tsx
+++ b/packages/xstate-solid/test/useMachine.test.tsx
@@ -23,6 +23,10 @@ import {
 import { fromCallback, fromPromise } from 'xstate/actors';
 import { useActor, useMachine } from '../src';
 
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 afterEach(() => {
   jest.useRealTimers();
 });
@@ -1669,4 +1673,78 @@ describe('useMachine (strict mode)', () => {
       jest.useRealTimers();
     }
   });
+
+  it('should work with an after transition scheduled after scheduling and cancelling a delayed transition', async () => {
+    const machine = createMachine({
+      initial: 'NotHeld',
+      states: {
+        NotHeld: {
+          initial: 'Idle',
+          states: {
+            Idle: { on: { increment: { target: 'RecentlyClicked' } } },
+            RecentlyClicked: {
+              on: { increment: { target: 'TripleClicked' } },
+              after: { 40: 'Idle' }
+            },
+            TripleClicked: {
+              on: { increment: { target: 'TripleClicked', reenter: true } },
+              after: { 40: 'Idle' }
+            }
+          },
+          on: { holdIncrement: 'Held.HeldIncrement' }
+        },
+        Held: {
+          initial: 'HeldIncrement',
+          states: { HeldIncrement: { after: { 40: 'HeldIncrement' } } },
+          on: { releasePointer: 'NotHeld.Idle' }
+        }
+      }
+    });
+
+    const Test = () => {
+      const [snapshot, send] = useMachine(machine);
+
+      return (
+        <>
+          <button
+            onclick={() => send({ type: 'increment' })}
+            data-testid="inc_button"
+          />
+          <button
+            onclick={() => send({ type: 'holdIncrement', y: 0 })}
+            data-testid="hold_inc_button"
+          />
+          <button
+            onclick={() => send({ type: 'releasePointer' })}
+            data-testid="release_button"
+          />
+          {JSON.stringify(snapshot.value)}
+        </>
+      );
+    };
+
+    const { container } = render(() => <Test />);
+
+    const incrementButton = screen.getByTestId('inc_button');
+    const holdIncrementButton = screen.getByTestId('hold_inc_button');
+    const releasePointerButton = screen.getByTestId('release_button');
+
+    await sleep(100);
+    fireEvent.click(incrementButton);
+    await sleep(10);
+    fireEvent.click(incrementButton);
+    await sleep(10);
+    fireEvent.click(holdIncrementButton);
+    await sleep(10);
+    fireEvent.click(releasePointerButton);
+    await sleep(10);
+    fireEvent.click(incrementButton);
+    await sleep(10);
+    fireEvent.click(incrementButton);
+    await sleep(50);
+
+    expect(JSON.parse(container.textContent as string)).toEqual({
+      NotHeld: 'Idle'
+    });
+  });
 });