Merge pull request #39 from NullVoxPopuli/add-template-test-for-async-functions

fix: when an async function resolves, auto-tracking should do stuff

Author: NullVoxPopuli

addon/-private/resources/function-runner.ts

@@ -1,4 +1,5 @@
 import { isDestroyed, isDestroying } from '@ember/destroyable';
+import { get as consume, notifyPropertyChange as dirty } from '@ember/object';
 import { waitForPromise } from '@ember/test-waiters';
 
 import { LifecycleResource } from './lifecycle';
@@ -7,6 +8,8 @@ import type { ArgsWrapper } from '../types';
 
 export const FUNCTION_TO_RUN = Symbol('FUNCTION TO RUN');
 
+const SECRET_VALUE = '___ Secret Value ___';
+
 // type UnwrapAsync<T> = T extends Promise<infer U> ? U : T;
 // type GetReturn<T extends () => unknown> = UnwrapAsync<ReturnType<T>>;
 export type ResourceFn<Return = unknown, Args extends unknown[] = unknown[]> = (
@@ -24,9 +27,15 @@ export class FunctionRunner<
   Fn extends ResourceFn<Return, Args> = ResourceFn<Return, Args>
 > extends LifecycleResource<BaseArgs<Args>> {
   // Set when using useResource
-  declare [FUNCTION_TO_RUN]: Fn;
+  protected declare [FUNCTION_TO_RUN]: Fn;
+  private declare [SECRET_VALUE]: Return | undefined;
+
+  get value(): Return | undefined {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    consume(this, SECRET_VALUE as any);
 
-  declare value: Return | undefined;
+    return this[SECRET_VALUE];
+  }
 
   get funArgs() {
     return this.args.positional;
@@ -49,7 +58,8 @@ export class FunctionRunner<
             return;
           }
 
-          this.value = value;
+          this[SECRET_VALUE] = value;
+          dirty(this, SECRET_VALUE);
         };
 
         waitForPromise(result);
@@ -60,6 +70,6 @@ export class FunctionRunner<
       }
     }
 
-    this.value = result;
+    this[SECRET_VALUE] = result;
   }
 }

tests/unit/use-resource-test.ts

@@ -7,6 +7,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 import { setupRenderingTest, setupTest } from 'ember-qunit';
 
+import { timeout } from 'ember-concurrency';
 import { LifecycleResource, useResource } from 'ember-resources';
 
 module('useResource', function () {
@@ -297,6 +298,35 @@ module('useResource', function () {
         assert.dom('out').hasText('2');
       });
 
+      test('async functions update when the promise resolves', async function (assert) {
+        class Test extends Component {
+          data = useResource(this, async () => {
+            await new Promise((resolve) => setTimeout(resolve, 50));
+
+            return 2;
+          });
+        }
+
+        const TestComponent = setComponentTemplate(
+          hbs`
+            <out>{{this.data.value}}</out>
+          `,
+          Test
+        );
+
+        this.setProperties({ TestComponent });
+
+        render(hbs`<this.TestComponent />`);
+
+        await timeout(25);
+
+        assert.dom('out').hasText('');
+
+        await timeout(30);
+
+        assert.dom('out').hasText('2');
+      });
+
       test('it works without a thunk', async function (assert) {
         class Test extends Component {
           @tracked count = 1;