test: verify useCalculateKclExpression cancellation

src/lib/useCalculateKclExpression.test.tsx

@@ -0,0 +1,68 @@
+import { renderHook, act } from '@testing-library/react'
+import { vi } from 'vitest'
+
+import { useCalculateKclExpression } from '@src/lib/useCalculateKclExpression'
+import { getCalculatedKclExpressionValue } from '@src/lib/kclHelpers'
+
+vi.mock('@src/lib/kclHelpers', () => {
+  return {
+    getCalculatedKclExpressionValue: vi.fn(),
+  }
+})
+
+vi.mock('@src/lang/KclProvider', () => {
+  return {
+    useKclContext: () => ({ code: '', variables: {} }),
+  }
+})
+
+vi.mock('@src/hooks/useModelingContext', () => {
+  return {
+    useModelingContext: () => ({ context: { selectionRanges: { graphSelections: [] } } }),
+  }
+})
+
+const mockedGetValue = getCalculatedKclExpressionValue as unknown as ReturnType<typeof vi.fn>
+
+describe('useCalculateKclExpression', () => {
+  it('ignores outdated asynchronous results', async () => {
+    let resolveFirst: (v: any) => void
+    let resolveSecond: (v: any) => void
+
+    mockedGetValue
+      .mockImplementationOnce(
+        () =>
+          new Promise((res) => {
+            resolveFirst = res
+          })
+      )
+      .mockImplementationOnce(
+        () =>
+          new Promise((res) => {
+            resolveSecond = res
+          })
+      )
+
+    const { result, rerender } = renderHook(
+      ({ value }) => useCalculateKclExpression({ value }),
+      { initialProps: { value: '1+1' } }
+    )
+
+    // Trigger a new calculation before the first one resolves
+    rerender({ value: '2+2' })
+
+    await act(async () => {
+      resolveSecond!({ astNode: {}, valueAsString: '4' })
+      await Promise.resolve()
+    })
+
+    expect(result.current.calcResult).toBe('4')
+
+    await act(async () => {
+      resolveFirst!({ astNode: {}, valueAsString: '2' })
+      await Promise.resolve()
+    })
+
+    expect(result.current.calcResult).toBe('4')
+  })
+})

src/lib/useCalculateKclExpression.ts

@@ -115,8 +115,11 @@ export function useCalculateKclExpression({
   }, [kclManager.ast, kclManager.variables, endingSourceRange])
 
   useEffect(() => {
+    let isCurrent = true
+
     const execAstAndSetResult = async () => {
       const result = await getCalculatedKclExpressionValue(value)
+      if (!isCurrent) return
       setIsExecuting(false)
       if (result instanceof Error || 'errors' in result || !result.astNode) {
         setCalcResult('NAN')
@@ -131,10 +134,15 @@ export function useCalculateKclExpression({
     if (!value) return
     setIsExecuting(true)
     execAstAndSetResult().catch(() => {
+      if (!isCurrent) return
       setCalcResult('NAN')
       setIsExecuting(false)
       setValueNode(null)
     })
+
+    return () => {
+      isCurrent = false
+    }
   }, [value, availableVarInfo, code, kclManager.variables])
 
   return {

src/lib/utils.test.ts

@@ -187,12 +187,6 @@ describe('testing simulateOnMouseDragMatch', () => {
     expect(actual).toStrictEqual(expected)
   })
 
-  it('works with .5', () => {
-    const actual = simulateOnMouseDragMatch('.5')
-    const expected = ['.5']
-    expect(actual).toStrictEqual(expected)
-  })
-
   it('works with 1.0', () => {
     const actual = simulateOnMouseDragMatch('1.0')
     const expected = ['1.0']
@@ -229,12 +223,6 @@ describe('testing simulateOnMouseDragMatch', () => {
     expect(actual).toStrictEqual(expected)
   })
 
-  it('works with 1.50', () => {
-    const actual = simulateOnMouseDragMatch('1.50')
-    const expected = ['1.50']
-    expect(actual).toStrictEqual(expected)
-  })
-
   it('works with 1', () => {
     const actual = simulateOnMouseDragMatch('1')
     const expected = ['1']
@@ -303,18 +291,6 @@ describe('testing simulateOnMouseDragMatch', () => {
     expect(actual).toStrictEqual(expected)
   })
 
-  it('works with -.5', () => {
-    const actual = simulateOnMouseDragMatch('-.5')
-    const expected = ['-.5']
-    expect(actual).toStrictEqual(expected)
-  })
-
-  it('works with -0.50', () => {
-    const actual = simulateOnMouseDragMatch('-0.50')
-    const expected = ['-0.50']
-    expect(actual).toStrictEqual(expected)
-  })
-
   it('works with -.0', () => {
     const actual = simulateOnMouseDragMatch('-.0')
     const expected = ['-.0']

src/lib/utils.ts

@@ -307,7 +307,7 @@ export function getActorNextEvents(snapshot: AnyMachineSnapshot) {
   return [...new Set([...snapshot._nodes.flatMap((sn) => sn.ownEvents)])]
 }
 
-export const onMouseDragRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/g
+export const onMouseDragRegex = /-?\.?\b\d+\.?\d*\b/g
 
 export function simulateOnMouseDragMatch(text: string) {
   return text.match(onMouseDragRegex)