Skip to content

Commit 8917b2e

Browse files
adroitwhizadroitwhiz
committed
Fix file input in tests
1 parent 993df59 commit 8917b2e

File tree

5 files changed

+79
-65
lines changed

5 files changed

+79
-65
lines changed

‎test/helper/page-util.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* global window, VirtualMachine, ScratchStorage, ScratchSVGRenderer */
2+
/* eslint-env browser */
3+
4+
// Wait for all SVG skins to be loaded.
5+
// TODO: this is extremely janky and should be removed once vm.loadProject waits for SVG skins to load
6+
window.waitForSVGSkinLoad = renderer => new Promise(resolve => {
7+
// eslint-disable-next-line prefer-const
8+
let interval;
9+
10+
const waitInner = () => {
11+
let numSVGSkins = 0;
12+
let numLoadedSVGSkins = 0;
13+
for (const skin of renderer._allSkins) {
14+
if (skin.constructor.name !== 'SVGSkin') continue;
15+
numSVGSkins++;
16+
if (skin._svgRenderer.loaded) numLoadedSVGSkins++;
17+
}
18+
19+
if (numSVGSkins === numLoadedSVGSkins) {
20+
clearInterval(interval);
21+
resolve();
22+
}
23+
};
24+
25+
interval = setInterval(waitInner, 1);
26+
});
27+
28+
window.loadFileInputIntoVM = (fileInput, vm, render) => {
29+
const reader = new FileReader();
30+
return new Promise(resolve => {
31+
reader.onload = () => {
32+
vm.start();
33+
vm.loadProject(reader.result)
34+
.then(() => window.waitForSVGSkinLoad(render))
35+
.then(() => {
36+
resolve();
37+
});
38+
};
39+
reader.readAsArrayBuffer(fileInput.files[0]);
40+
});
41+
};
42+
43+
window.initVM = render => {
44+
const vm = new VirtualMachine();
45+
const storage = new ScratchStorage();
46+
47+
vm.attachStorage(storage);
48+
vm.attachRenderer(render);
49+
vm.attachV2SVGAdapter(new ScratchSVGRenderer.SVGRenderer());
50+
vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
51+
52+
return vm;
53+
};

‎test/integration/cpu-render.html‎

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
33
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
44
<script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
5+
<script src="../helper/page-util.js"></script>
56
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
67
<script src="../../dist/web/scratch-render.js"></script>
78

@@ -17,38 +18,18 @@
1718
window.devicePixelRatio = 1;
1819
const gpuCanvas = document.getElementById('test');
1920
var render = new ScratchRender(gpuCanvas);
20-
var vm = new VirtualMachine();
21-
var storage = new ScratchStorage();
21+
var vm = initVM(render);
2222

23-
vm.attachStorage(storage);
24-
vm.attachRenderer(render);
25-
vm.attachV2SVGAdapter(new ScratchSVGRenderer.SVGRenderer());
26-
vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
27-
28-
document.getElementById('file').addEventListener('click', e => {
29-
document.body.removeChild(document.getElementById('loaded'));
30-
});
31-
32-
document.getElementById('file').addEventListener('change', e => {
33-
const reader = new FileReader();
34-
const thisFileInput = e.target;
35-
reader.onload = () => {
36-
vm.start();
37-
vm.loadProject(reader.result)
38-
.then(() => {
39-
// we add a `#loaded` div to our document, the integration suite
40-
// waits for that element to show up to assume the vm is ready
41-
// to play!
42-
const div = document.createElement('div');
43-
div.id='loaded';
44-
document.body.appendChild(div);
45-
vm.greenFlag();
46-
setTimeout(() => {
47-
renderCpu();
48-
}, 1000);
49-
});
50-
};
51-
reader.readAsArrayBuffer(thisFileInput.files[0]);
23+
const fileInput = document.getElementById('file');
24+
const loadFile = loadFileInputIntoVM.bind(null, fileInput, vm, render);
25+
fileInput.addEventListener('change', e => {
26+
loadFile()
27+
.then(() => {
28+
vm.greenFlag();
29+
setTimeout(() => {
30+
renderCpu();
31+
}, 1000);
32+
});
5233
});
5334

5435
const cpuCanvas = document.getElementById('cpu');

‎test/integration/index.html‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
33
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
44
<script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
5+
<script src="../helper/page-util.js"></script>
56
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
67
<script src="../../dist/web/scratch-render.js"></script>
78

@@ -15,39 +16,13 @@
1516

1617
var canvas = document.getElementById('test');
1718
var render = new ScratchRender(canvas);
18-
var vm = new VirtualMachine();
19-
var storage = new ScratchStorage();
19+
var vm = initVM(render);
2020
var mockMouse = data => vm.runtime.postIOData('mouse', {
2121
canvasWidth: canvas.width,
2222
canvasHeight: canvas.height,
2323
...data,
2424
});
2525

26-
vm.attachStorage(storage);
27-
vm.attachRenderer(render);
28-
vm.attachV2SVGAdapter(new ScratchSVGRenderer.SVGRenderer());
29-
vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
30-
31-
document.getElementById('file').addEventListener('click', e => {
32-
document.body.removeChild(document.getElementById('loaded'));
33-
});
34-
35-
document.getElementById('file').addEventListener('change', e => {
36-
const reader = new FileReader();
37-
const thisFileInput = e.target;
38-
reader.onload = () => {
39-
vm.start();
40-
vm.loadProject(reader.result)
41-
.then(() => {
42-
// we add a `#loaded` div to our document, the integration suite
43-
// waits for that element to show up to assume the vm is ready
44-
// to play!
45-
const div = document.createElement('div');
46-
div.id='loaded';
47-
document.body.appendChild(div);
48-
});
49-
};
50-
reader.readAsArrayBuffer(thisFileInput.files[0]);
51-
});
26+
const loadFile = loadFileInputIntoVM.bind(null, document.getElementById('file'), vm, render);
5227
</script>
5328
</body>

‎test/integration/pick-tests.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,12 @@ const runFile = async (file, action, page, script) => {
1313
await page.goto(`file://${indexHTML}`);
1414
const fileInput = await page.$('#file');
1515
await fileInput.uploadFile(testDir(file));
16-
// the index.html handler for file input will add a #loaded element when it
17-
// finishes.
18-
await page.waitForSelector('#loaded');
16+
17+
await page.evaluate(() =>
18+
// `loadFile` is defined on the page itself.
19+
// eslint-disable-next-line no-undef
20+
loadFile()
21+
);
1922
return page.evaluate(`(function () {return (${script})(${action});})()`);
2023
};
2124

‎test/integration/scratch-tests.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@ const testFile = (file, page) => test(file, async t => {
1414
await page.goto(`file://${indexHTML}`);
1515
const fileInput = await page.$('#file');
1616
await fileInput.uploadFile(testDir(file));
17-
// the index.html handler for file input will add a #loaded element when it
18-
// finishes.
19-
await page.waitForSelector('#loaded');
17+
await page.evaluate(() =>
18+
// `loadFile` is defined on the page itself.
19+
// eslint-disable-next-line no-undef
20+
loadFile()
21+
);
2022
const says = await page.evaluate(() => {
2123
// This function is run INSIDE the integration chrome browser via some
2224
// injection and .toString() magic. We can return some "simple data"

0 commit comments

Comments
 (0)