[3.13+] ArrayProxy not rerendering

[jlami]

Since Ember 3.13 we have a problem with our addon ember-cli-pagination. An ArrayProxy we use to generated arrays for the current page is not rerendered when the current page changes.

This is a minimal reproduction: https://github.com/jlami/bug-array-proxy
Travis output here: https://travis-ci.org/jlami/bug-array-proxy/builds/638368641

The code of the controller is here: https://github.com/jlami/bug-array-proxy/blob/master/tests/dummy/app/controllers/application.js
The test that fails is here: https://github.com/jlami/bug-array-proxy/blob/6766c754d713c5df2dc0b964acfbcd0f8ab36425/tests/acceptance/pages-work-test.js#L8

I have included an alternative property on the controller that does work, but has fewer functionalities. It is based on createClassComputed (https://github.com/kellyselden/ember-macro-helpers#createclasscomputed)

I have tried to look into the dependencies myself, but I'm not familiar enough with it to find the problem. Maybe @kellyselden could explain why the createClassComputed variant does rerender and our computed ArrayProxy does not?

[NullVoxPopuli]

Cc @pzuraq? This could be related to the changes in tracked vs not tracked that were introduced in 3.13

[theroncross]

We're experienceing an almost identical issue when bumping an app from 3.12 to 3.13.

We have a utility function which returns a CP which returns an ObjectProxy which proxies the object passed to the utility (e.g. myUtil('model')). We've been using this primarily to store updates to form values locally.

let myUtil = function (contentKey) {
  return computed(
    contentKey,
    function () {
      return MyProxyObject.create({ content: this.get(contentKey) });
    }
  );
}

We have a unit test (this is very abbreviated):

let foo = { bar: false };
let myController = Controller.extend({
  wrappedFoo: myUtil('foo'),
  computedBar: computed(
    'wrappedFoo.bar',
    function () { return this.get('wrappedFoo.bar'); }
  ),
  booledBar: bool('wrappedFoo.bar')
}).create({ foo });

assert.notOk(myController.get('aliasedBar'));
myController.set('wrappedFoo.bar', true);
assert.ok(myController.get('computedBar')); // was passing, now failing
assert.ok(myController.get('booledBar')); // was passing, now failing

[pzuraq]

@theroncross object proxies and array proxies are actually quite different, so these issues could be unrelated. I added a test based on your code, and couldn't reproduce:

    '@test it should work when returned from a computed property'(assert) {
      function myUtil(contentKey) {
        return computed(contentKey, function() {
          return ObjectProxy.create({ content: this.get(contentKey) });
        });
      }

      let foo = { bar: false };
      let myController = EmberObject.extend({
        wrappedFoo: myUtil('foo'),
        computedBar: computed('wrappedFoo.bar', function() {
          return this.get('wrappedFoo.bar');
        }),
        booledBar: bool('wrappedFoo.bar'),
      }).create({ foo });

      assert.notOk(myController.get('aliasedBar'));
      myController.set('wrappedFoo.bar', true);
      assert.ok(myController.get('computedBar'));
      assert.ok(myController.get('booledBar'));
    }

Is there anything special about your controller/proxy classes that could be affecting it?

[pzuraq]

I've figured out the array proxy issue and have submitted a fix. I believe the object proxy issue is a separate bug, so I'm going to open another issue with it. Thanks a ton for the thorough reproduction @jlami, it helped massively!

[jlami]

Great to hear and thank you for the work on the fix! We will check if our canary test is fixed when this lands in master.