[Bug]: MutableArray/EmberArray changes is not tracked

emberjs · Oct 1, 2020 · a17afd0 · a17afd0
1 parent 66fb044
commit a17afd0
Showing 1 changed file with 85 additions and 1 deletion.
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/tracked-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/tracked-test.js
@@ -1,4 +1,10 @@
-import { Object as EmberObject, A, ArrayProxy, PromiseProxyMixin } from '@ember/-internals/runtime';
+import {
+  Object as EmberObject,
+  A,
+  ArrayProxy,
+  MutableArray,
+  PromiseProxyMixin
+} from '@ember/-internals/runtime';
 import {
   computed,
   get,
@@ -580,6 +586,84 @@ moduleFor(
 
       this.assertText('1');
     }
+
+    '@test getters update when native array is updated'() {
+      class ChildrenComponent extends GlimmerishComponent {
+        get countAlias() {
+          return get(this, 'args.children.length');
+        }
+
+        addChild() {
+          this.args.children.pushObject({ id: '1' });
+        }
+      }
+
+      this.registerComponent('child-count', {
+        ComponentClass: ChildrenComponent,
+        template: '<button {{action this.addChild}}>{{this.countAlias}}</button>',
+      });
+
+      this.render('<ChildCount @children={{this.children}} />', {
+        children: A(),
+      });
+
+      this.assertText('0');
+
+      runTask(() => this.$('button').click());
+
+      this.assertText('1');
+    }
+
+    '@test getters update when MutableArray is updated'() {
+      let ArrayOfChildren = EmberObject.extend(MutableArray, {
+        _content: null,
+
+        init() {
+          this._content = A();
+          this._length = 0;
+        },
+
+        addObject(obj) {
+          this._content.pushObject(obj);
+        },
+
+        objectAt(idx) {
+          return this._content[idx];
+        },
+
+        get length() {
+          return this._length;
+        },
+        set length(value) {
+          this._length = value;
+        },
+      });
+
+      class ChildrenComponent extends GlimmerishComponent {
+        get countAlias() {
+          return get(this, 'args.children.length');
+        }
+
+        addChild() {
+          this.args.children.addObject({ id: '1' });
+        }
+      }
+
+      this.registerComponent('child-count', {
+        ComponentClass: ChildrenComponent,
+        template: '<button {{action this.addChild}}>{{this.countAlias}}</button>',
+      });
+
+      this.render('<ChildCount @children={{this.children}} />', {
+        children: ArrayOfChildren.create(),
+      });
+
+      this.assertText('0');
+
+      runTask(() => this.$('button').click());
+
+      this.assertText('1');
+    }
   }
 );