Add tests for duplicate onload callbacks from calling setImage before…

… initial setImage finished resolving.

site/examples/graphics/webimage/setimage/setimage.js

@@ -3,6 +3,4 @@ img.setAnchor({ vertical: 0.5, horizontal: 0.5 });
 img.setPosition(getWidth() / 2, getHeight() / 2);
 add(img);
 
-mouseClickMethod(e => {
-    img.setImage('https://codehs.com/uploads/1e38851d76e7691d923a3d3f3f7eae1d');
-});
+img.setImage('https://codehs.com/uploads/1e38851d76e7691d923a3d3f3f7eae1d');

src/graphics/webimage.js

@@ -72,7 +72,6 @@ class WebImage extends Thing {
         this._hiddenCanvas = document.createElement('canvas');
         this._hiddenCanvas.width = 1;
         this._hiddenCanvas.height = 1;
-
         if (this.image) {
             // if this WebImage had an existing image, it may have an unresolved onload callback.
             // dont allow original callback to resolve, since it might attempt to load pixel data

test/webimage.test.js

@@ -182,6 +182,32 @@ describe('WebImage', () => {
             expect(topLeftPixel).toEqual([0, 0, 255, 255]);
         });
     });
+    describe('setImage', () => {
+        it('Allows replacing the image of the WebImage', () => {
+            const g = new Graphics({ shouldUpdate: false });
+            const img = new WebImage('www.codehs.com/doesnt-matter.gif');
+            img.setImage(RGBURL);
+            g.add(img);
+            img.loaded(() => {
+                g.redraw();
+                expect(g.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+            });
+        });
+        it('Cancels the original onload of the image', () => {
+            const g = new Graphics({ shouldUpdate: false });
+            const img = new WebImage('www.codehs.com/doesnt-matter.gif');
+            const firstLoadedSpy = jasmine.createSpy();
+            // we have to inspect here to get the actual onload event
+            img.image.onload = firstLoadedSpy;
+            img.setImage(RGBURL);
+            g.add(img);
+            img.loaded(() => {
+                g.redraw();
+                expect(g.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+                expect(firstLoadedSpy).not.toHaveBeenCalled();
+            });
+        });
+    });
     describe('setRed/Blue/Green/Alpha', () => {
         it('Updates the underlying data', () => {
             const img = new WebImage(RGBURL);