谁能帮我测试以下功能
function onload(cb){
const image = 'http://placehold.it/350x150'
const img = new Image()
img.src = image
img.onload = () => {
cb()
}
}
在我的测试文件中
Imagecb使用
resources: 'usable'v10+const jsdom = new JSDOM('<!doctype html><html><body></body></html>',{
resources: 'usable'
});
const { window } = jsdom;
它需要
canvas使用最新的
canvaswindow.Imageload首先为
window.Imageimport CanvasImage from 'canvas/lib/image';
import fs from 'fs';
import path from 'path';
import { URL } from 'url';
import request from 'request';
// Where to fetch assets on the file system when path are provided.
const ASSETS_DIRECTORY = path.join(__dirname,'.');
const WindowImage = function() {
// Reimplemented the following class:
// https://github.com/tmpvar/jsdom/blob/master/lib/jsdom/living/nodes/HTMLImageElement-impl.js
// https://github.com/Automattic/node-canvas#imagesrcbuffer
let source;
let image;
let onload;
let onerror;
return {
set src (value) {
// TODO Throw errors to the Image.onerror handler.
const onDataLoaded = function (data) {
image = new CanvasImage();
image.onload = () => {
if (onload) {
onload(image);
}
};
image.onerror = err => {
if (onerror) {
onerror(err);
}
};
image.src = data;
source = value;
};
// URL or path?
let url;
try {
url = new URL(value);
} catch (e) {}
// Fetch the data.
if (url) {
request(url.href, (error, response, body) => {
if (response && response.statusCode !== undefined && response.statusCode !== 200) {
throw new Error("Status code: " + response.statusCode);
}
onDataLoaded(body);
});
} else {
// Assume it is a file path: try a local file read.
fs.readFile(path.join(ASSETS_DIRECTORY,value),function (err,data) {
if (err) {
throw err;
}
onDataLoaded(data);
});
}
},
set onload (handler) {
onload = handler;
},
set onerror (handler) {
onerror = handler;
},
get src () {
return source;
},
// TODO Should allows to modify height and width
// + add natural height and width
// Cf. https://github.com/tmpvar/jsdom/blob/master/lib/jsdom/living/nodes/HTMLImageElement-impl.js#L51
get width () {
return image && image.width;
},
get height () {
return image && image.height;
}
};
};
然后你可以在测试中通过重新定义 JSDOM 使用的来模拟
window.Imagewindow.Image = WindowImage;
canvas.Image.srconload.ts：
export function onload(cb: CallableFunction) {
const image = 'http://placehold.it/350x150';
const img = new Image();
img.src = image;
img.onload = () => {
cb();
};
}
onload.test.ts：
// @vitest-environment jsdom
import { describe, expect, it, vi, afterEach, beforeEach } from 'vitest';
import { onload } from './onload.ts';
describe(`fn onload`, () => {
const event = {} as Event;
let img: HTMLImageElement;
beforeEach(() => {
vi.spyOn(window, 'Image').mockImplementation(() => {
img = {} as HTMLImageElement;
return img;
});
});
afterEach(() => {
vi.restoreAllMocks();
});
it('should call the callback function once on image load', () => {
expect.assertions(1);
const cb = vi.fn();
onload(cb);
img.onload?.(event);
expect(cb).toHaveBeenCalledOnce();
});
});