Ensure changing arrays are notified. (#472)

Author: deanmarano

addon/record-data.js

@@ -1,5 +1,6 @@
 // eslint-disable-next-line ember/use-ember-data-rfc-395-imports
 import { RecordData } from 'ember-data/-private';
+import { diffArray } from '@ember-data/model/-private';
 import { recordDataFor } from '@ember-data/store/-private';
 import { assert } from '@ember/debug';
 import { typeOf } from '@ember/utils';
@@ -692,7 +693,11 @@ export default class FragmentRecordData extends RecordData {
       if (this._fragments[key]) {
         continue;
       }
-      if ((updates[key] === null) !== (original[key] === null)) {
+      const eitherIsNull = original[key] === null || updates[key] === null;
+      if (
+        eitherIsNull ||
+        diffArray(original[key], updates[key]).firstChangeIndex !== null
+      ) {
         changedKeys.push(key);
       }
     }
@@ -727,7 +732,7 @@ export default class FragmentRecordData extends RecordData {
 
       Object.assign(this._fragmentData, newCanonicalFragments);
       // update fragment arrays
-      Object.keys(newCanonicalFragments).forEach((key) =>
+      changedFragmentKeys?.forEach((key) =>
         this._fragmentArrayCache[key]?.notify()
       );
     }

tests/integration/render_test.js

@@ -103,4 +103,95 @@ module('Integration | Rendering', function (hooks) {
     assert.dom('[data-product="0"]').hasText('The Strangler: 299.99');
     assert.dom('[data-product="1"]').hasText('Tears of Lys: 499.99');
   });
+
+  test('fragment array data pushed', async function (assert) {
+    this.order = store.createRecord('order', { id: 'an-id' });
+
+    await render(
+      hbs`
+        Orders
+        <ul>
+          {{#each this.order.products as |product idx|}}
+            <li data-product="{{idx}}">{{product.name}}: {{product.price}}</li>
+          {{/each}}
+        </ul>
+      `
+    );
+
+    assert.dom('[data-product]').doesNotExist();
+
+    store.push({
+      data: [
+        {
+          id: this.order.id,
+          type: 'order',
+          attributes: {
+            products: [
+              {
+                name: 'Tears of Lys',
+                price: '499.99',
+              },
+            ],
+          },
+          relationships: {},
+        },
+      ],
+    });
+
+    await settled();
+
+    assert.dom('[data-product]').exists({ count: 1 });
+    assert.dom('[data-product="0"]').hasText('Tears of Lys: 499.99');
+
+    store.push({
+      data: [
+        {
+          id: this.order.id,
+          type: 'order',
+          attributes: {
+            products: [
+              {
+                name: 'The Strangler',
+                price: '299.99',
+              },
+              {
+                name: 'Tears of Lys',
+                price: '499.99',
+              },
+            ],
+          },
+          relationships: {},
+        },
+      ],
+    });
+
+    await settled();
+
+    assert.dom('[data-product]').exists({ count: 2 });
+    assert.dom('[data-product="0"]').hasText('The Strangler: 299.99');
+    assert.dom('[data-product="1"]').hasText('Tears of Lys: 499.99');
+
+    store.push({
+      data: [
+        {
+          id: this.order.id,
+          type: 'order',
+          attributes: {
+            products: [
+              {
+                name: 'The Strangler',
+                price: '299.99',
+              },
+            ],
+          },
+          relationships: {},
+        },
+      ],
+    });
+
+    await settled();
+
+    assert.dom('[data-product]').exists({ count: 1 });
+    assert.dom('[data-product="0"]').hasText('The Strangler: 299.99');
+  });
 });