Set the image cache when img is loaded (#5778)

* Use THREE.Cache methods instead of accessing directly THREE.Cache.files in tests

* Set the image cache when img is loaded

Author: vincentfretin

src/core/a-assets.js

@@ -41,12 +41,15 @@ class AAssets extends ANode {
       loaded.push(new Promise(function (resolve, reject) {
         // Set in cache because we won't be needing to call three.js loader if we have.
         // a loaded media element.
-        THREE.Cache.add('image:' + imgEls[i].getAttribute('src'), imgEl);
         if (imgEl.complete) {
+          THREE.Cache.add('image:' + imgEls[i].getAttribute('src'), imgEl);
           resolve();
           return;
         }
-        imgEl.onload = resolve;
+        imgEl.onload = function () {
+          THREE.Cache.add('image:' + imgEls[i].getAttribute('src'), imgEl);
+          resolve();
+        };
         imgEl.onerror = reject;
       }));
     }

tests/components/material.test.js

@@ -176,16 +176,20 @@ suite('material', function () {
       THREE.Cache.clear();
       assetsEl.appendChild(img);
       el.sceneEl.appendChild(assetsEl);
-      // Adding the asset will add image:${IMG_SRC} in THREE.Cache.files
-      // without going through THREE.ImageLoader
+      // Adding the asset will add image:${IMG_SRC} in THREE.Cache when the img
+      // loading is complete with img.onload, without going through THREE.ImageLoader
+      assert.notOk(!!THREE.Cache.get(`image:${IMG_SRC}`));
       el.addEventListener('materialtextureloaded', function () {
         assert.notOk(imageLoaderSpy.called);
         assert.notOk(textureLoaderSpy.called);
-        assert.ok(`image:${IMG_SRC}` in THREE.Cache.files);
-        THREE.Cache.clear();
         THREE.ImageLoader.prototype.load.restore();
         THREE.TextureLoader.prototype.load.restore();
-        done();
+        // load event is triggered after this materialtextureloaded callback
+        img.addEventListener('load', function () {
+          assert.equal(THREE.Cache.get(`image:${IMG_SRC}`), img);
+          THREE.Cache.clear();
+          done();
+        }, {once: true});
       });
       el.setAttribute('material', 'src', '#foo');
     });
@@ -194,7 +198,7 @@ suite('material', function () {
       var imageLoaderSpy = this.sinon.spy(THREE.ImageLoader.prototype, 'load');
       el.addEventListener('materialtextureloaded', function () {
         assert.ok(imageLoaderSpy.called);
-        assert.ok(`image:${IMG_SRC}` in THREE.Cache.files);
+        assert.ok(!!THREE.Cache.get(`image:${IMG_SRC}`));
         THREE.ImageLoader.prototype.load.restore();
         done();
       });

tests/components/sound.test.js

@@ -5,7 +5,7 @@ import THREE from 'lib/three.js';
 suite('sound', function () {
   setup(function (done) {
     var el = this.el = entityFactory();
-    THREE.Cache.files = {};
+    THREE.Cache.clear();
     setTimeout(() => {
       el.setAttribute('sound', {
         autoplay: true,

tests/core/a-assets.test.js

@@ -20,7 +20,7 @@ suite('a-assets', function () {
       done();
     });
     document.body.appendChild(scene);
-    THREE.Cache.files = {};
+    THREE.Cache.clear();
   });
 
   test('loads even if one asset fails to load', function (done) {
@@ -81,7 +81,7 @@ suite('a-assets', function () {
     assetsEl.appendChild(img);
 
     img.addEventListener('load', function () {
-      assert.equal(THREE.Cache.files[`image:${IMG_SRC}`], img);
+      assert.equal(THREE.Cache.get(`image:${IMG_SRC}`), img);
       done();
     });