Implement TrackedArray

packages/@glimmer-workspace/integration-tests/lib/render-test.ts

@@ -27,6 +27,7 @@ import { CURLY_TEST_COMPONENT, GLIMMER_TEST_COMPONENT } from './components';
 import { assertElementShape, assertEmberishElement } from './dom/assertions';
 import { assertingElement, toInnerHTML } from './dom/simple-utils';
 import { equalTokens, isServerMarker, normalizeSnapshot } from './snapshot';
+import { defineComponent } from './test-helpers/define';
 
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 type Present<T> = Exclude<T, null | undefined>;
@@ -430,6 +431,151 @@ export class RenderTest implements IRenderTest {
     inTransaction(result.env, () => destroy(result));
   }
 
+  private assertEachCompareResults(items) {
+    [...(this.element as unknown as HTMLElement).querySelectorAll('.test-item')].forEach(
+      (el, index) => {
+        let key = Array.isArray(items[index]) ? items[index][0] : index;
+        let value = Array.isArray(items[index]) ? items[index][1] : items[index];
+
+        QUnit.assert.equal(el.innerText, `${key}.${value}`);
+      }
+    );
+  }
+
+  protected assertReactivity<T>(
+    Klass: new (...args: any[]) => { get value(): T; update: () => void },
+    shouldUpdate = true,
+    message?: string
+  ) {
+    let instance;
+    let count = 0;
+
+    class TestComponent extends Klass {
+      constructor(...args: unknown[]) {
+        super(...args);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        instance = this;
+      }
+
+      override get value() {
+        count++;
+
+        return super.value;
+      }
+    }
+
+    if (message) {
+      QUnit.assert.ok(true, message);
+    }
+
+    let comp = defineComponent({}, `<div class="test">{{this.value}}</div>`, {
+      strictMode: true,
+      definition: TestComponent,
+    });
+
+    this.renderComponent(comp);
+
+    QUnit.assert.equal(count, 1, `The count is 1`);
+
+    instance.update();
+
+    this.rerender();
+
+    QUnit.assert.equal(
+      count,
+      shouldUpdate ? 2 : 1,
+      shouldUpdate ? `The count is updated` : `The could should not update`
+    );
+
+    this.assertStableRerender();
+  }
+
+  protected assertEachInReactivity(
+    Klass: new (...args: any[]) => { collection: number[]; update: () => void }
+  ) {
+    let instance: TestComponent;
+
+    class TestComponent extends Klass {
+      constructor(...args) {
+        super(...args);
+        // eslint-disable-next-line
+        instance = this;
+      }
+    }
+
+    let comp = defineComponent(
+      {},
+      `
+        <ul>
+          {{#each-in this.collection as |lhs rhs|}}
+            <li class="test-item">{{lhs}}.{{rhs}}</li>
+          {{/each-in}}
+        </ul>
+`,
+      {
+        strictMode: true,
+        definition: TestComponent,
+      }
+    );
+
+    this.renderComponent(comp);
+
+    let { collection } = instance;
+
+    this.assertEachCompareResults(
+      Symbol.iterator in collection ? Array.from(collection) : Object.entries(collection)
+    );
+
+    instance.update();
+
+    this.rerender();
+
+    this.assertEachCompareResults(
+      Symbol.iterator in collection ? Array.from(collection) : Object.entries(collection)
+    );
+  }
+
+  protected assertEachReactivity(
+    Klass: new (...args: any[]) => { collection: number[]; update: () => void }
+  ) {
+    let instance: TestComponent;
+
+    class TestComponent extends Klass {
+      constructor(...args: any[]) {
+        super(...args);
+        // eslint-disable-next-line
+        instance = this;
+      }
+    }
+
+    let comp = defineComponent(
+      {},
+      `
+        <ul>
+          {{#each this.collection as |value index|}}
+            <li class="test-item">{{index}}.{{value}}</li>
+          {{/each}}
+        </ul>
+`,
+      {
+        strictMode: true,
+        definition: TestComponent,
+      }
+    );
+
+    this.renderComponent(comp);
+
+    this.assertEachCompareResults(Array.from(instance.collection).map((v, i) => [i, v]));
+
+    instance.update();
+
+    this.rerender();
+
+    this.assertEachCompareResults(Array.from(instance.collection).map((v, i) => [i, v]));
+
+    this.assertStableRerender();
+  }
+
   protected set(key: string, value: unknown): void {
     this.context[key] = value;
     dirtyTagFor(this.context, key);