test: derivation reactivity (#8952)

emberjs · Oct 3, 2023 · d0c234c · d0c234c
1 parent d3b3a23
commit d0c234c
Showing 1 changed file with 62 additions and 7 deletions.
diff --git a/tests/schema-record/tests/reactivity/derivation-test.ts b/tests/schema-record/tests/reactivity/derivation-test.ts
@@ -1,11 +1,15 @@
+import { rerender } from '@ember/test-helpers';
+
 import { SchemaRecord } from '@warp-drive/schema-record/record';
-import { SchemaService } from '@warp-drive/schema-record/schema';
-import { module, skip as test } from 'qunit';
+import { FieldSchema, SchemaService } from '@warp-drive/schema-record/schema';
+import { module, test } from 'qunit';
 
-import { setupTest } from 'ember-qunit';
+import { setupRenderingTest } from 'ember-qunit';
 
 import type Store from '@ember-data/store';
 
+import { reactiveContext } from '../-utils/reactive-context';
+
 interface User {
   id: string | null;
   $type: 'user';
@@ -15,9 +19,9 @@ interface User {
 }
 
 module('Reactivity | derivation', function (hooks) {
-  setupTest(hooks);
+  setupRenderingTest(hooks);
 
-  test('we can use simple fields with no `type`', function (assert) {
+  test('we can derive from simple fields', async function (assert) {
     const store = this.owner.lookup('service:store') as Store;
     const schema = new SchemaService();
     store.registerSchema(schema);
@@ -53,13 +57,64 @@ module('Reactivity | derivation', function (hooks) {
       },
     ]);
 
-    const record = store.createRecord('user', { firstName: 'Rey', lastName: 'Skybarker' }) as User;
+    const fieldsMap = schema.schemas.get('user')!.fields;
+    const fields: FieldSchema[] = [...fieldsMap.values()];
+
+    const record = store.push({
+      data: {
+        id: '1',
+        type: 'user',
+        attributes: {
+          firstName: 'Rey',
+          lastName: 'Pupatine',
+        },
+      },
+    }) as User;
 
-    assert.strictEqual(record.id, null, 'id is accessible');
+    assert.strictEqual(record.id, '1', 'id is accessible');
     assert.strictEqual(record.$type, 'user', '$type is accessible');
+    assert.strictEqual(record.firstName, 'Rey', 'firstName is accessible');
+    assert.strictEqual(record.lastName, 'Pupatine', 'lastName is accessible');
+    assert.strictEqual(record.fullName, 'Rey Pupatine', 'fullName is accessible');
+
+    const { counters, fieldOrder } = await reactiveContext.call(this, record, fields);
+    const nameIndex = fieldOrder.indexOf('firstName');
+
+    assert.strictEqual(counters.id, 1, 'id Count is 1');
+    assert.strictEqual(counters.$type, 1, '$type Count is 1');
+    assert.strictEqual(counters.firstName, 1, 'firstName Count is 1');
+    assert.strictEqual(counters.lastName, 1, 'lastName Count is 1');
+    assert.strictEqual(counters.fullName, 1, 'fullName Count is 1');
+
+    assert.dom(`li:nth-child(${nameIndex + 1})`).hasText('firstName: Rey', 'firstName is rendered');
+    assert.dom(`li:nth-child(${nameIndex + 3})`).hasText('lastName: Pupatine', 'lastName is rendered');
+    assert.dom(`li:nth-child(${nameIndex + 5})`).hasText('fullName: Rey Pupatine', 'fullName is rendered');
+
+    store.push({
+      data: {
+        id: '1',
+        type: 'user',
+        attributes: {
+          firstName: 'Rey',
+          lastName: 'Skybarker',
+        },
+      },
+    });
 
     assert.strictEqual(record.firstName, 'Rey', 'firstName is accessible');
     assert.strictEqual(record.lastName, 'Skybarker', 'lastName is accessible');
     assert.strictEqual(record.fullName, 'Rey Skybarker', 'fullName is accessible');
+
+    await rerender();
+
+    assert.strictEqual(counters.id, 1, 'id Count is 1');
+    assert.strictEqual(counters.$type, 1, '$type Count is 1');
+    assert.strictEqual(counters.firstName, 1, 'firstName Count is 2');
+    assert.strictEqual(counters.lastName, 2, 'lastName Count is 2');
+    assert.strictEqual(counters.fullName, 2, 'fullName Count is 2');
+
+    assert.dom(`li:nth-child(${nameIndex + 1})`).hasText('firstName: Rey', 'firstName is rendered');
+    assert.dom(`li:nth-child(${nameIndex + 3})`).hasText('lastName: Skybarker', 'lastName is rendered');
+    assert.dom(`li:nth-child(${nameIndex + 5})`).hasText('fullName: Rey Skybarker', 'fullName is rendered');
   });
 });