maplibre-gl 3.3.0 → 3.4.0

package/src/source/image_source.test.ts

@@ -2,7 +2,7 @@ import {ImageSource} from './image_source';
 import {Evented} from '../util/evented';
 import {Transform} from '../geo/transform';
 import {extend} from '../util/util';
-import {fakeXhr} from 'nise';
+import {type FakeServer, fakeServer} from 'nise';
 import {RequestManager} from '../util/request_manager';
 import {Dispatcher} from '../util/dispatcher';
 import {stubAjaxGetImage} from '../util/test/util';
@@ -44,20 +44,15 @@ class StubMap extends Evented {
 }
 
 describe('ImageSource', () => {
-    const requests = [];
-    fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
     stubAjaxGetImage(undefined);
+    let server: FakeServer;
+
     beforeEach(() => {
         global.fetch = null;
+        server = fakeServer.create();
+        server.respondWith(new ArrayBuffer(1));
     });
 
-    const respond = () => {
-        const req = requests.shift();
-        req.setStatus(200);
-        req.response = new ArrayBuffer(1);
-        req.onload();
-    };
-
     test('constructor', () => {
         const source = createSource({url: '/image.png'});
 
@@ -72,7 +67,7 @@ describe('ImageSource', () => {
             expect(e.dataType).toBe('source');
         });
         source.onAdd(new StubMap() as any);
-        respond();
+        server.respond();
         expect(source.image).toBeTruthy();
     });
 
@@ -81,7 +76,7 @@ describe('ImageSource', () => {
         const map = new StubMap() as any;
         const spy = jest.spyOn(map._requestManager, 'transformRequest');
         source.onAdd(map);
-        respond();
+        server.respond();
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy.mock.calls[0][0]).toBe('/image.png');
         expect(spy.mock.calls[0][1]).toBe('Image');
@@ -92,12 +87,12 @@ describe('ImageSource', () => {
         const map = new StubMap() as any;
         const spy = jest.spyOn(map._requestManager, 'transformRequest');
         source.onAdd(map);
-        respond();
+        server.respond();
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy.mock.calls[0][0]).toBe('/image.png');
         expect(spy.mock.calls[0][1]).toBe('Image');
         source.updateImage({url: '/image2.png'});
-        respond();
+        server.respond();
         expect(spy).toHaveBeenCalledTimes(2);
         expect(spy.mock.calls[1][0]).toBe('/image2.png');
         expect(spy.mock.calls[1][1]).toBe('Image');
@@ -107,7 +102,7 @@ describe('ImageSource', () => {
         const source = createSource({url: '/image.png'});
         const map = new StubMap() as any;
         source.onAdd(map);
-        respond();
+        server.respond();
         const beforeSerialized = source.serialize();
         expect(beforeSerialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);
         source.setCoordinates([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
@@ -119,14 +114,14 @@ describe('ImageSource', () => {
         const source = createSource({url: '/image.png'});
         const map = new StubMap() as any;
         source.onAdd(map);
-        respond();
+        server.respond();
         const beforeSerialized = source.serialize();
         expect(beforeSerialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);
         source.updateImage({
             url: '/image2.png',
             coordinates: [[0, 0], [-1, 0], [-1, -1], [0, -1]]
         });
-        respond();
+        server.respond();
         const afterSerialized = source.serialize();
         expect(afterSerialized.coordinates).toEqual([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
     });
@@ -140,7 +135,7 @@ describe('ImageSource', () => {
             }
         });
         source.onAdd(new StubMap() as any);
-        respond();
+        server.respond();
     });
 
     test('fires data event when metadata is loaded', done => {
@@ -151,7 +146,7 @@ describe('ImageSource', () => {
             }
         });
         source.onAdd(new StubMap() as any);
-        respond();
+        server.respond();
     });
 
     test('fires idle event on prepare call when there is at least one not loaded tile', done => {
@@ -164,7 +159,7 @@ describe('ImageSource', () => {
             }
         });
         source.onAdd(new StubMap() as any);
-        respond();
+        server.respond();
 
         source.tiles[String(tile.tileID.wrap)] = tile;
         source.image = new ImageBitmap();
@@ -190,10 +185,9 @@ describe('ImageSource', () => {
 
         source.onAdd(map);
 
-        requests.shift();
         expect(source.image).toBeUndefined();
         source.updateImage({url: '/image2.png'});
-        respond();
+        server.respond();
         expect(source.image).toBeTruthy();
     });
 
@@ -203,8 +197,7 @@ describe('ImageSource', () => {
 
         source.onAdd(map);
 
-        const request = requests.shift() as any;
-        const spy = jest.spyOn(request, 'abort');
+        const spy = jest.spyOn(server.requests[0] as any, 'abort');
 
         source.updateImage({url: '/image2.png'});
         expect(spy).toHaveBeenCalled();

package/src/source/raster_dem_tile_source.ts

@@ -8,6 +8,7 @@ import {OverscaledTileID} from './tile_id';
 import {RasterTileSource} from './raster_tile_source';
 // ensure DEMData is registered for worker transfer on main thread:
 import '../data/dem_data';
+import type {DEMEncoding} from '../data/dem_data';
 
 import type {Source} from './source';
 import type {Dispatcher} from '../util/dispatcher';
@@ -33,7 +34,11 @@ import type {ExpiryData} from '../util/ajax';
  * @see [3D Terrain](https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/)
  */
 export class RasterDEMTileSource extends RasterTileSource implements Source {
-    encoding: 'mapbox' | 'terrarium';
+    encoding: DEMEncoding;
+    redFactor?: number;
+    greenFactor?: number;
+    blueFactor?: number;
+    baseShift?: number;
 
     constructor(id: string, options: RasterDEMSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
         super(id, options, dispatcher, eventedParent);
@@ -41,6 +46,10 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
         this.maxzoom = 22;
         this._options = extend({type: 'raster-dem'}, options);
         this.encoding = options.encoding || 'mapbox';
+        this.redFactor = options.redFactor;
+        this.greenFactor = options.greenFactor;
+        this.blueFactor = options.blueFactor;
+        this.baseShift = options.baseShift;
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
@@ -67,7 +76,11 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
                     coord: tile.tileID,
                     source: this.id,
                     rawImageData,
-                    encoding: this.encoding
+                    encoding: this.encoding,
+                    redFactor: this.redFactor,
+                    greenFactor: this.greenFactor,
+                    blueFactor: this.blueFactor,
+                    baseShift: this.baseShift
                 };
 
                 if (!tile.actor || tile.state === 'expired') {

package/src/source/raster_dem_tile_worker_source.ts

@@ -19,10 +19,10 @@ export class RasterDEMTileWorkerSource {
     }
 
     loadTile(params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
-        const {uid, encoding, rawImageData} = params;
+        const {uid, encoding, rawImageData, redFactor, greenFactor, blueFactor, baseShift} = params;
         // Main thread will transfer ImageBitmap if offscreen decode with OffscreenCanvas is supported, else it will transfer an already decoded image.
         const imagePixels = isImageBitmap(rawImageData) ? this.getImageData(rawImageData) : rawImageData as RGBAImage;
-        const dem = new DEMData(uid, imagePixels, encoding);
+        const dem = new DEMData(uid, imagePixels, encoding, redFactor, greenFactor, blueFactor, baseShift);
         this.loaded = this.loaded || {};
         this.loaded[uid] = dem;
         callback(null, dem);

package/src/source/raster_tile_source.test.ts

@@ -2,7 +2,7 @@ import {RasterTileSource} from './raster_tile_source';
 import {OverscaledTileID} from './tile_id';
 import {RequestManager} from '../util/request_manager';
 import {Dispatcher} from '../util/dispatcher';
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {Tile} from './tile';
 import {stubAjaxGetImage} from '../util/test/util';
 

package/src/source/raster_tile_source.ts

@@ -29,7 +29,7 @@ import type {
  * ```ts
  * map.addSource('raster-source', {
  *     'type': 'raster',
- *     'tiles': ['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'],
+ *     'tiles': ['https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg'],
  *     'tileSize': 256,
  * });
  * ```

package/src/source/terrain_source_cache.test.ts

@@ -2,7 +2,7 @@ import {TerrainSourceCache} from './terrain_source_cache';
 import {Style} from '../style/style';
 import {RequestManager} from '../util/request_manager';
 import {Dispatcher} from '../util/dispatcher';
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {Transform} from '../geo/transform';
 import {Evented} from '../util/evented';
 import {Painter} from '../render/painter';

package/src/source/vector_tile_source.test.ts

@@ -1,4 +1,4 @@
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {Source} from './source';
 import {VectorTileSource} from './vector_tile_source';
 import {Tile} from './tile';

package/src/source/vector_tile_source.ts

@@ -52,7 +52,6 @@ export type VectorTileSourceOptions = VectorSourceSpecification & {
  * map.getSource('some id').setTiles(['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt']);
  * ```
  * @see [Add a vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/vector-source/)
- * @see [Add a third party vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/third-party/)
  */
 export class VectorTileSource extends Evented implements Source {
     type: 'vector';

package/src/source/vector_tile_worker_source.test.ts

@@ -4,7 +4,7 @@ import vt from '@mapbox/vector-tile';
 import Protobuf from 'pbf';
 import {VectorTileWorkerSource} from '../source/vector_tile_worker_source';
 import {StyleLayerIndex} from '../style/style_layer_index';
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {Actor} from '../util/actor';
 import {TileParameters, WorkerTileParameters, WorkerTileResult} from './worker_source';
 import {WorkerTile} from './worker_tile';
@@ -234,6 +234,50 @@ describe('vector tile worker source', () => {
 
     });
 
+    test('VectorTileWorkerSource#returns a good error message when failing to parse a tile', () => {
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+        const parse = jest.fn();
+        const callback = jest.fn();
+
+        server.respondWith(request => {
+            request.respond(200, {'Content-Type': 'application/pbf'}, 'something...');
+        });
+
+        source.loadTile({
+            source: 'source',
+            uid: 0,
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+            request: {url: 'http://localhost:2900/faketile.pbf'}
+        } as any as WorkerTileParameters, callback);
+
+        server.respond();
+
+        expect(parse).not.toHaveBeenCalled();
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback.mock.calls[0][0].message).toContain('Unable to parse the tile at');
+    });
+
+    test('VectorTileWorkerSource#returns a good error message when failing to parse a gzipped tile', () => {
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+        const parse = jest.fn();
+        const callback = jest.fn();
+
+        server.respondWith(new Uint8Array([0x1f, 0x8b]).buffer);
+
+        source.loadTile({
+            source: 'source',
+            uid: 0,
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+            request: {url: 'http://localhost:2900/faketile.pbf'}
+        } as any as WorkerTileParameters, callback);
+
+        server.respond();
+
+        expect(parse).not.toHaveBeenCalled();
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback.mock.calls[0][0].message).toContain('gzipped');
+    });
+
     test('VectorTileWorkerSource provides resource timing information', done => {
         const rawTileData = fs.readFileSync(path.join(__dirname, '/../../test/unit/assets/mbsv5-6-18-23.vector.pbf'));
 

package/src/source/vector_tile_worker_source.ts

@@ -46,12 +46,25 @@ function loadVectorTile(params: WorkerTileParameters, callback: LoadVectorDataCa
         if (err) {
             callback(err);
         } else if (data) {
-            callback(null, {
-                vectorTile: new vt.VectorTile(new Protobuf(data)),
-                rawData: data,
-                cacheControl,
-                expires
-            });
+            try {
+                const vectorTile = new vt.VectorTile(new Protobuf(data));
+                callback(null, {
+                    vectorTile,
+                    rawData: data,
+                    cacheControl,
+                    expires
+                });
+            } catch (ex) {
+                const bytes = new Uint8Array(data);
+                const isGzipped = bytes[0] === 0x1f && bytes[1] === 0x8b;
+                let errorMessage = `Unable to parse the tile at ${params.request.url}, `;
+                if (isGzipped) {
+                    errorMessage += 'please make sure the data is not gzipped and that you have configured the relevant header in the server';
+                } else {
+                    errorMessage += `got error: ${ex.messge}`;
+                }
+                callback(new Error(errorMessage));
+            }
         }
     });
     return () => {

package/src/source/video_source.ts

@@ -48,6 +48,10 @@ import type {VideoSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
  * map.removeSource('some id');  // remove
  * ```
  * @see [Add a video](https://maplibre.org/maplibre-gl-js/docs/examples/video-on-a-map/)
+ *
+ * Note that when rendered as a raster layer, the layer's `raster-fade-duration` property will cause the video to fade in.
+ * This happens when playback is started, paused and resumed, or when the video's coordinates are updated. To avoid this behavior,
+ * set the layer's `raster-fade-duration` property to `0`.
  */
 export class VideoSource extends ImageSource {
     options: VideoSourceSpecification;

package/src/source/worker_source.ts

@@ -6,7 +6,7 @@ import type {OverscaledTileID} from './tile_id';
 import type {Bucket} from '../data/bucket';
 import type {FeatureIndex} from '../data/feature_index';
 import type {CollisionBoxArray} from '../data/array_types.g';
-import type {DEMData} from '../data/dem_data';
+import type {DEMData, DEMEncoding} from '../data/dem_data';
 import type {StyleGlyph} from '../style/style_glyph';
 import type {StyleImage} from '../style/style_image';
 import type {PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
@@ -37,7 +37,11 @@ export type WorkerDEMTileParameters = TileParameters & {
         w: number;
     };
     rawImageData: RGBAImage | ImageBitmap;
-    encoding: 'mapbox' | 'terrarium';
+    encoding: DEMEncoding;
+    redFactor: number;
+    greenFactor: number;
+    blueFactor: number;
+    baseShift: number;
 };
 
 /**

package/src/style/load_glyph_range.test.ts

@@ -2,7 +2,8 @@ import fs from 'fs';
 import path from 'path';
 import {RequestManager} from '../util/request_manager';
 import {loadGlyphRange} from './load_glyph_range';
-import {fakeXhr} from 'nise';
+import {fakeServer} from 'nise';
+import {bufferToArrayBuffer} from '../util/test/util';
 
 test('loadGlyphRange', done => {
     global.fetch = null;
@@ -13,8 +14,8 @@ test('loadGlyphRange', done => {
 
     const manager = new RequestManager(transform);
 
-    let request;
-    fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { request = req; };
+    const server = fakeServer.create();
+    server.respondWith(bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/0-255.pbf'))));
 
     loadGlyphRange('Arial Unicode MS', 0, 'https://localhost/fonts/v1/{fontstack}/{range}.pbf', manager, (err, result) => {
         expect(err).toBeFalsy();
@@ -35,9 +36,6 @@ test('loadGlyphRange', done => {
         }
         done();
     });
-
-    expect(request.url).toBe('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf');
-    request.setStatus(200);
-    request.response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/0-255.pbf'));
-    request.onload();
+    server.respond();
+    expect(server.requests[0].url).toBe('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf');
 });

package/src/style/load_sprite.test.ts

@@ -2,18 +2,25 @@ import fs from 'fs';
 import path from 'path';
 import {RequestManager} from '../util/request_manager';
 import {loadSprite} from './load_sprite';
-import {fakeXhr} from 'nise';
+import {type FakeServer, fakeServer} from 'nise';
 import * as util from '../util/util';
+import {bufferToArrayBuffer} from '../util/test/util';
 
 describe('loadSprite', () => {
-    jest.spyOn(util, 'arrayBufferToImageBitmap').mockImplementation((data: ArrayBuffer, callback: (err?: Error | null, image?: ImageBitmap | null) => void) => {
-        createImageBitmap(new ImageData(1024, 824)).then((imgBitmap) => {
-            callback(null, imgBitmap);
-        }).catch((e) => {
-            callback(new Error(`Could not load image because of ${e.message}. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.`));
+
+    let server: FakeServer;
+
+    beforeEach(() => {
+        jest.spyOn(util, 'arrayBufferToImageBitmap').mockImplementation((data: ArrayBuffer, callback: (err?: Error | null, image?: ImageBitmap | null) => void) => {
+            createImageBitmap(new ImageData(1024, 824)).then((imgBitmap) => {
+                callback(null, imgBitmap);
+            }).catch((e) => {
+                callback(new Error(`Could not load image because of ${e.message}. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.`));
+            });
         });
+        global.fetch = null;
+        server = fakeServer.create();
     });
-    global.fetch = null;
 
     test('backwards compatibility: single string is treated as a URL for the default sprite', done => {
         const transform = jest.fn().mockImplementation((url, type) => {
@@ -22,8 +29,8 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
 
         loadSprite('http://localhost:9966/test/unit/assets/sprite1', manager, 1, (err, result) => {
             expect(err).toBeFalsy();
@@ -43,15 +50,10 @@ describe('loadSprite', () => {
             done();
         });
 
-        expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
-        requests[0].setStatus(200);
-        requests[0].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json'));
-        requests[0].onload();
+        server.respond();
 
-        expect(requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
-        requests[1].setStatus(200);
-        requests[1].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png')).buffer;
-        requests[1].onload();
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
     });
 
     test('array of objects support', done => {
@@ -61,8 +63,10 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite2.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite2.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.png'))));
 
         loadSprite([{id: 'sprite1', url: 'http://localhost:9966/test/unit/assets/sprite1'}, {id: 'sprite2', url: 'http://localhost:9966/test/unit/assets/sprite2'}], manager, 1, (err, result) => {
             expect(err).toBeFalsy();
@@ -90,25 +94,11 @@ describe('loadSprite', () => {
             done();
         });
 
-        expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
-        requests[0].setStatus(200);
-        requests[0].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json'));
-        requests[0].onload();
-
-        expect(requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
-        requests[1].setStatus(200);
-        requests[1].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png')).buffer;
-        requests[1].onload();
-
-        expect(requests[2].url).toBe('http://localhost:9966/test/unit/assets/sprite2.json');
-        requests[2].setStatus(200);
-        requests[2].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.json'));
-        requests[2].onload();
-
-        expect(requests[3].url).toBe('http://localhost:9966/test/unit/assets/sprite2.png');
-        requests[3].setStatus(200);
-        requests[3].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.png')).buffer;
-        requests[3].onload();
+        server.respond();
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
+        expect(server.requests[2].url).toBe('http://localhost:9966/test/unit/assets/sprite2.json');
+        expect(server.requests[3].url).toBe('http://localhost:9966/test/unit/assets/sprite2.png');
     });
 
     test('error in callback', done => {
@@ -118,20 +108,19 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
-
+        server.respondWith((xhr) => xhr.respond(500));
+        let last = false;
         loadSprite([{id: 'sprite1', url: 'http://localhost:9966/test/unit/assets/sprite1'}], manager, 1, (err, result) => {
             expect(err).toBeTruthy();
             expect(result).toBeUndefined();
-
-            done();
+            if (!last) {
+                done();
+                last = true;
+            }
         });
 
-        expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
-        requests[0].setStatus(500);
-        requests[0].response = undefined;
-        requests[0].onload();
+        server.respond();
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
     });
 
     test('request canceling', done => {
@@ -141,30 +130,24 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
 
         const cancelable = loadSprite([{id: 'sprite1', url: 'http://localhost:9966/test/unit/assets/sprite1'}], manager, 1, () => {});
 
         setTimeout(() => {
             cancelable.cancel();
 
-            expect(requests[0].aborted).toBeTruthy();
-            expect(requests[1].aborted).toBeTruthy();
+            expect((server.requests[0] as any).aborted).toBeTruthy();
+            expect((server.requests[1] as any).aborted).toBeTruthy();
 
             done();
         });
 
         setTimeout(() => {
-            expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
-            requests[0].setStatus(200);
-            requests[0].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json'));
-            requests[0].onload();
-
-            expect(requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
-            requests[1].setStatus(200);
-            requests[1].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png')).buffer;
-            requests[1].onload();
+            server.respond();
+            expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+            expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
         }, 10);
     });
 
@@ -175,8 +158,8 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1@2x.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1@2x.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
 
         loadSprite('http://localhost:9966/test/unit/assets/sprite1', manager, 2, (err, result) => {
             expect(err).toBeFalsy();
@@ -196,14 +179,8 @@ describe('loadSprite', () => {
             done();
         });
 
-        expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.json');
-        requests[0].setStatus(200);
-        requests[0].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json'));
-        requests[0].onload();
-
-        expect(requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.png');
-        requests[1].setStatus(200);
-        requests[1].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png')).buffer;
-        requests[1].onload();
+        server.respond();
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.png');
     });
 });