test(trackedfunction): test reexecution of trackedfunction

ember-resources/src/util/function.ts

@@ -1,15 +1,22 @@
 import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
+import { action } from '@ember/object';
 import { waitForPromise } from '@ember/test-waiters';
 
 import { resource } from '../core/function-based';
 
 import type { Hooks } from '../core/function-based';
 
-export type ResourceFn<Return = unknown> = (hooks: Hooks) => Return | Promise<Return>;
+export type ResourceFn<Return = unknown> = (
+  hooks: Hooks
+) => Return | Promise<Return>;
 
 type Vanilla<Return> = [object, ResourceFn<Return>];
-type WithInitialValue<Return> = [object, NotFunction<Return>, ResourceFn<Return>];
+type WithInitialValue<Return> = [
+  object,
+  NotFunction<Return>,
+  ResourceFn<Return>
+];
 
 type NotFunction<T> = T extends Function ? never : T;
 type UseFunctionArgs<Return> = Vanilla<Return> | WithInitialValue<Return>;
@@ -79,7 +86,9 @@ export function trackedFunction<Return>(
  *
  *
  */
-export function trackedFunction<Return>(...passedArgs: UseFunctionArgs<Return>) {
+export function trackedFunction<Return>(
+  ...passedArgs: UseFunctionArgs<Return>
+) {
   let [context] = passedArgs;
   let initialValue: Return | undefined;
   let fn: ResourceFn<Return>;
@@ -99,7 +108,6 @@ export function trackedFunction<Return>(...passedArgs: UseFunctionArgs<Return>)
   return resource<TrackedFunctionProperty<Return>>(context, (hooks) => {
     const getValue = async (state: State<Return>) => {
       try {
-        console.log("GV Started");
         let notQuiteValue = fn(hooks);
         let promise = Promise.resolve(notQuiteValue);
 
@@ -113,7 +121,6 @@ export function trackedFunction<Return>(...passedArgs: UseFunctionArgs<Return>)
         state.error = e;
       } finally {
         state.isResolved = true;
-        console.log("GV Finished");
       }
     };
 
@@ -136,6 +143,7 @@ export class TrackedFunctionProperty<Value> {
     this.state = new State(initialValue);
   }
 
+  @action
   execute() {
     this.state = new State(this.state.initialValue);
     this.getValue(this.state);

testing/ember-app/app/components/util/function.gts

@@ -1,11 +1,8 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { on } from '@ember/modifier';
-import {action} from "@ember/object"
 
-import { trackedFunction, executeTrackedFunction } from 'ember-resources/util/function';
-
-const log = (d) => console.log(d)
+// import { use } from 'ember-resources';
+import { trackedFunction } from 'ember-resources/util/function';
 
 const formatError = (error: unknown) => {
   return `Hey!, ${error}`;
@@ -14,33 +11,10 @@ const formatError = (error: unknown) => {
 export default class GlintTest extends Component {
   @tracked input = 2;
 
-  @tracked aMap = trackedFunction(this, async () => {
-    console.log("FN Started")
-    const input = this.input
-    return Promise.resolve(new Promise(
-      (res) => setTimeout(
-        () => {
-          console.log("FN Finished")
-          res(input * Math.random())
-        },
-        1000
-      )
-    ));
+  aMap = trackedFunction(this, async () => {
+    return Promise.resolve('hi');
   });
 
-  @action
-  increase(){
-    this.input++
-  }
-
-  @action
-  executeTracked(){
-    const state = this.aMap.execute();
-    console.log(state.value, this.aMap.value);
-  }
-
-
-
   // Not yet supported
   // @use bMap = trackedFunction(async () => {
   //   return Promise.resolve('hello');
@@ -53,16 +27,9 @@ export default class GlintTest extends Component {
     isPending: {{if this.aMap.isPending 'true' 'false'}}
     isResolved: {{if this.aMap.isResolved 'true' 'false'}}
 
-    <p>
-    {{#if this.aMap.isResolved}}
+    {{#if this.aMap.value}}
       {{this.aMap.value}}
-    {{else}}
-      Loading...
     {{/if}}
-    </p>
-
-    <button {{on "click" this.increase}}>+</button>
-    <button {{on "click" this.executeTracked}}>Run</button>
 
     {{#if this.aMap.error}}
       {{formatError this.aMap.error}}

testing/ember-app/app/templates/application.hbs

@@ -1,2 +1 @@
-{{outlet}}
-<Util::Function/>
+{{outlet}}

testing/ember-app/tests/utils/function/rendering-test.ts

@@ -81,4 +81,63 @@ module('Utils | trackedFunction | rendering', function (hooks) {
     await settled();
     assert.dom('out').hasText('4');
   });
+
+  test('it can be reexecuted', async function (assert) {
+    const store = {
+      index: 0,
+      data: [[{ id: 1 }], [{ id: 1 }, { id: 2 }], [{ id: 1 }]],
+      fetch(page: Number) {
+        // For some reason the resource prop is triggered again
+        // after the refetch call which causes the array index to be out of bound.
+        // Im not sure if something is not working correctly here
+        // or if i just was overlookging a property trigger somewhere.
+        const value =
+          this.index + 1 <= this.data.length
+            ? this.data[this.index]
+            : this.data[this.data.length - 1];
+        this.index++;
+        return value?.map((v) => ({ ...v, page }));
+      },
+    };
+    class Test extends Component {
+      store = store;
+      @tracked page = 1;
+
+      @tracked data = trackedFunction(this, () => {
+        return this.store.fetch(this.page);
+      });
+      increment = () => {
+        this.page++;
+      };
+      refetch = async () => {
+        await this.data.execute();
+      };
+    }
+
+    const TestComponent = setComponentTemplate(
+      hbs`
+        <out>
+          {{#each this.data.value as |value|}}
+            <span>{{value.id}}-{{value.page}}</span>
+          {{/each}}
+        </out>
+        <button class="increment" type='button' {{on 'click' this.increment}}></button>
+        <button class="reexecute" type='button' {{on 'click' this.refetch}}></button>`,
+      Test
+    );
+
+    this.setProperties({ TestComponent });
+
+    await render(hbs`<this.TestComponent />`);
+
+    assert.dom('out').hasText('1-1');
+
+    await click('button.increment');
+
+    assert.dom('out').hasText('1-2 2-2');
+
+    await click('button.reexecute');
+
+    assert.dom('out').hasText('1-2');
+  });
 });