[Refactor] Updates tests to use tracked utility.

packages/@glimmer/core/test/interactive/fn-test.ts

@@ -1,6 +1,5 @@
-import { module, test, render, settled } from '../utils';
+import { module, test, render, settled, tracked } from '../utils';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { fn } from '@glimmer/helper';
 import { on, action } from '@glimmer/modifier';
 
@@ -13,10 +12,8 @@ module('[@glimmer/core] interactive - {{fn}}', () => {
     let helloWorldComponent: HelloWorld;
     let passedMsg1, passedMsg2, passedEvent: MouseEvent | undefined;
 
+    const args = tracked({ name: 'world' });
     class HelloWorld extends Component {
-      @tracked
-      name = 'world';
-
       constructor(owner: unknown, args: {}) {
         super(owner, args);
         helloWorldComponent = this;
@@ -34,12 +31,12 @@ module('[@glimmer/core] interactive - {{fn}}', () => {
     setComponentTemplate(
       createTemplate(
         { on, fn },
-        '<button {{on "click" (fn this.userDidClick "hello" this.name)}}>Hello World</button>'
+        '<button {{on "click" (fn this.userDidClick "hello" @name)}}>Hello World</button>'
       ),
       HelloWorld
     );
 
-    const output = await render(HelloWorld);
+    const output = await render(HelloWorld, { args });
 
     assert.strictEqual(output, '<button>Hello World</button>');
 
@@ -52,7 +49,7 @@ module('[@glimmer/core] interactive - {{fn}}', () => {
     assert.ok(passedEvent instanceof MouseEvent);
     passedEvent = undefined;
 
-    helloWorldComponent!.name = 'cruel world';
+    args.name = 'cruel world';
 
     await settled();
 

packages/@glimmer/core/test/interactive/helper-test.ts

@@ -1,4 +1,4 @@
-import { module, test, render, settled } from '../utils';
+import { module, test, render, settled, tracked as trackedObj } from '../utils';
 
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
@@ -19,28 +19,19 @@ module('[@glimmer/core] interactive - helper', () => {
       return `helper ${greeting} ${name}`;
     }
 
-    let component: MyComponent;
+    const args = trackedObj({ name: 'Rob' });
 
-    class MyComponent extends Component {
-      constructor(owner: unknown, args: {}) {
-        super(owner, args);
-        component = this;
-      }
-
-      @tracked name = 'Rob';
-    }
-
-    setComponentTemplate(
-      createTemplate({ myHelper }, '<h1>{{myHelper this.name "Hello"}}</h1>'),
-      MyComponent
+    const MyComponent = setComponentTemplate(
+      createTemplate({ myHelper }, '<h1>{{myHelper @name "Hello"}}</h1>'),
+      templateOnlyComponent()
     );
 
-    let html = await render(MyComponent);
+    let html = await render(MyComponent, { args });
 
     assert.strictEqual(html, '<h1>helper Hello Rob</h1>', 'the template was rendered');
     assert.equal(count, 1, 'helper rendered once');
 
-    component!.name = 'Tom';
+    args.name = 'Tom';
 
     html = await settled();
 

packages/@glimmer/core/test/interactive/modifier-test.ts

@@ -53,25 +53,25 @@ setModifierManager((owner) => new CustomModifierManager(owner), CustomModifier);
 
 module('Modifier Tests', () => {
   test('Supports the on modifier', async (assert) => {
-    class MyComponent extends Component {
-      @tracked count = 0;
+    const args = tracked({ count: 0 });
 
+    class MyComponent extends Component {
       @action
       incrementCounter(): void {
-        this.count++;
+        args.count++;
       }
     }
 
     setComponentTemplate(
       createTemplate(
         { on },
-        `<button {{on "click" this.incrementCounter}}>Count: {{this.count}}</button>`
+        `<button {{on "click" this.incrementCounter}}>Count: {{@count}}</button>`
       ),
       MyComponent
     );
 
     assert.strictEqual(
-      await render(MyComponent),
+      await render(MyComponent, { args }),
       `<button>Count: 0</button>`,
       'the component was rendered'
     );