have mixinUpdate wait for entity to load first (#3859)

Author: ngokevin

src/core/a-entity.js

@@ -10,6 +10,7 @@ var warn = utils.debug('core:a-entity:warn');
 
 var MULTIPLE_COMPONENT_DELIMITER = '__';
 var OBJECT3D_COMPONENTS = ['position', 'rotation', 'scale', 'visible'];
+var ONCE = {once: true};
 
 /**
  * Entity is a container object that components are plugged into to comprise everything in
@@ -599,6 +600,14 @@ var proto = Object.create(ANode.prototype, {
         var mixinEl;
         var mixinIds;
         var i;
+        var self = this;
+
+        if (!this.hasLoaded) {
+          this.addEventListener('loaded', function () {
+            self.mixinUpdate(newMixins, oldMixins);
+          }, ONCE);
+          return;
+        }
 
         oldMixins = oldMixins || this.getAttribute('mixin');
         mixinIds = this.updateMixins(newMixins, oldMixins);
@@ -627,7 +636,7 @@ var proto = Object.create(ANode.prototype, {
           for (component in mixinEl.componentCache) {
             if (componentsUpdated.indexOf(component) === -1) {
               if (this.components[component]) {
-                // Compoennt removed. Rebuild data if not yet rebuilt.
+                // Component removed. Rebuild data if not yet rebuilt.
                 this.components[component].handleMixinUpdate();
               }
             }

tests/components/scene/pool.test.js

@@ -11,12 +11,15 @@ suite('pool', function () {
     sceneEl.addEventListener('loaded', function () { done(); });
   });
 
-  test('pool is initialized', function () {
+  test('pool is initialized', function (done) {
     var sceneEl = this.sceneEl;
     var poolComponent = sceneEl.components.pool;
     assert.equal(poolComponent.availableEls.length, 1);
     assert.equal(poolComponent.usedEls.length, 0);
-    assert.equal(sceneEl.querySelectorAll('a-entity[material]').length, 1);
+    setTimeout(() => {
+      assert.equal(sceneEl.querySelectorAll('a-entity[material]').length, 1);
+      done();
+    });
   });
 
   test('can specify container', function (done) {

tests/core/a-entity.test.js

@@ -1311,6 +1311,40 @@ suite('a-entity', function () {
       assert.shallowDeepEqual(el.getAttribute('position'), {x: 0, y: 0, z: 0});
       assert.equal(el.mixinEls.length, 0);
     });
+
+    /**
+     * Fixed a weird case where attributeChangedCallback on mixin was fired during scene init.
+     * That fired mixinUpdate before the entity was loaded (and el.sceneEl was undefined).
+     * And tried to update components before the entity was ready.
+     * This test mimics that state where mixinUpdate called when entity not fully loaded but
+     * component is still initializing.
+     */
+    test('wait for entity to load on mixin update', function (done) {
+      const TestComponent = AFRAME.registerComponent('test', {
+        update: function () {
+          assert.ok(this.el.sceneEl);
+          done();
+        }
+      });
+
+      elFactory().then(someEl => {
+        const sceneEl = someEl.sceneEl;
+
+        const mixin = document.createElement('a-mixin');
+        mixin.setAttribute('id', 'foo');
+        mixin.setAttribute('test', '');
+        sceneEl.appendChild(mixin);
+
+        setTimeout(() => {
+          const el = document.createElement('a-entity');
+          el.setAttribute('mixin', 'foo');
+          el.components.test = new TestComponent(el, {}, '');
+          el.components.test.oldData = 'foo';
+          el.mixinUpdate('foo');
+          sceneEl.appendChild(el);
+        });
+      });
+    });
   });
 });