ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: recreate object element when loading maps to avoid node warnings about dangling file handles

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-05-01 22:53:18 -07:00
parent b008407808
commit cb76c9c68a
6 changed files with 147 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -3,3 +3,4 @@
dist
node_modules
build
test/screenshots

2
npm
View File

@ -1,3 +1,3 @@
#!/usr/bin/env bash
docker run --rm --init -it -v $PWD:/usr/src/app btroops npm $@
docker run --rm --init -it -v $PWD:/usr/src/app -u $(id -u):$(id -u) -p 8080:8080 --name btroops-test btroops npm $@

3
package.json
View File

@ -11,7 +11,8 @@
},
"scripts": {
"start": "node dev-server.cjs",
"test:integ": "node --trace-warnings ./node_modules/.bin/jest --detectOpenHandles --config jest.config.integ.cjs",
"test:integ": "DBUS_SESSION_BUS_ADDRESS=/dev/null node --trace-warnings ./node_modules/.bin/jest --detectOpenHandles --config jest.config.integ.cjs",
"test:integ:debug": "NODE_INSPECT_RESUME_ON_START=1 DBUS_SESSION_BUS_ADDRESS=/dev/null node inspect ./node_modules/jest/bin/jest.js --config jest.config.integ.cjs --runInBand test/integration/page.test.js",
"test": "jest"
}
}

4
run-test
View File

@ -1,5 +1,3 @@
#!/usr/bin/env bash
NPM_COMMAND="npm run test:integ"
docker run --rm --init -it -v $PWD:/usr/src/app btroops $NPM_COMMAND
docker run --rm --init -it -v $PWD:/usr/src/app -p 8080:8080 --name btroops-test btroops bash

77
src/index.js
View File

@ -8,7 +8,6 @@ globalThis.svgns = "http://www.w3.org/2000/svg";
const mapPlaceholder = document.querySelector('.map-placeholder'),
distanceOutput = document.getElementById('status'),
proneToggle = document.getElementById('toggle-prone-counter'),
object = document.querySelector('object'),
contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
toggleContentVis = (function () {
@ -90,17 +89,17 @@ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click'
gameboard.endMove();
}));
object.addEventListener('load', function () {
mapPlaceholder.remove();
this.style.opacity = 1;
// object.addEventListener('load', function () {
// mapPlaceholder.remove();
// this.style.opacity = 1;
const svg = this.contentDocument.querySelector('svg'),
startLocs = svg.querySelector('.start-locations');
// const svg = this.contentDocument.querySelector('svg'),
// startLocs = svg.querySelector('.start-locations');
panzoom.start(svg);
gameboard.start(svg);
recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
});
// panzoom.start(svg);
// gameboard.start(svg);
// recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
// });
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis();
@ -112,4 +111,60 @@ mapSelectDialog
.updateValueOnSelection()
.changeMapOnConfirm();
object.data = `${localStorage.getItem('map') || 'map1'}.svg`;
// const xhr = new XMLHttpRequest();
// xhr.onload = () => {
// console.log(xhr);
// const oldObj = document.querySelector('object');
// const object = document.createElement('object');
// object.setAttribute('type', 'image/svg+xml');
// object.style.opacity = 0;
// mapPlaceholder.after(object);
// object.addEventListener('load', function () {
// oldObj.remove();
// mapPlaceholder.remove();
// this.style.opacity = 1;
// const svg = this.contentDocument.querySelector('svg'),
// startLocs = svg.querySelector('.start-locations');
// panzoom.start(svg);
// gameboard.start(svg);
// recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
// });
// object.data = fileName;
// };
// xhr.open('GET', fileName);
// xhr.responseType = 'document';
// xhr.send();
const fileName = `${localStorage.getItem('map') || 'map1'}.svg`;
const oldObj = document.querySelector('object');
console.log('old data', oldObj.getAttribute('data'), 'new data', fileName);
const object = document.createElement('object');
object.setAttribute('type', 'image/svg+xml');
object.style.opacity = 0;
mapPlaceholder.after(object);
object.addEventListener('load', function () {
oldObj.remove();
mapPlaceholder.remove();
this.style.opacity = 1;
const svg = this.contentDocument.querySelector('svg'),
startLocs = svg.querySelector('.start-locations');
panzoom.start(svg);
gameboard.start(svg);
recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
});
if (oldObj.getAttribute('data') !== fileName) {
console.log('object data changed');
object.data = fileName;
}

91
test/integration/page.test.js
View File

@ -1,31 +1,92 @@
const { Builder, By } = require('selenium-webdriver'),
chrome = require('selenium-webdriver/chrome.js'),
{ Command } = require('selenium-webdriver/lib/command.js'),
{ expect, it } = require('@jest/globals'),
{ mkdir, writeFile } = require('node:fs/promises'),
path = require('path'),
chromeOptions = new chrome.Options();
let driver;
chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
let driver;
// beforeAll(async () => {
// });
beforeEach(async () => {
// console.log('setup');
// driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
await driver.get("http://localhost:3005");
});
it('loads the page', async () => {
expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
it.each(Array(100).fill(null))('looper', async () => {
// it('looper', async () => {
// console.log('test');
// const driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
// await driver.get("http://localhost:3005").catch(e => console.log(e));;
// await driver.quit();
await driver.get("http://localhost:3005").catch(e => console.log(e));
const title = await driver.getTitle();
expect(title).toEqual('Infantry Combat Solo Basic');
// await driver.switchTo().defaultContent();
});
it('selects an off-board soldier', async () => {
await driver.switchTo().frame(driver.findElement(By.css('object')));
it('debugger', async () => {
// it.only('loads the page', async () => {
// console.log('test');
// const driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
// await driver.get("http://localhost:3005").catch(e => console.log(e));;
// await driver.quit();
await driver.get("http://localhost:3005").catch(e => console.log(e));
const title = await driver.getTitle();
const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
svg = await driver.findElement(By.css('svg')),
counter = await driver.findElement(By.css(selector), svg);
await counter.click();
expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
expect(title).toEqual('Infantry Combat Solo Basic');
// await driver.switchTo().defaultContent();
debugger;
});
afterEach(async () => await driver.quit());
// it.only.each(Array(10).fill(null))('selects an off-board soldier', async () => {
// it('selects an off-board soldier', async () => {
// await driver.switchTo().frame(await driver.findElement(By.css('object')));
// const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
// svg = await driver.findElement(By.css('svg')),
// counter = await driver.findElement(By.css(selector), svg);
// await counter.click();
// // await takeScreenshot(driver);
// expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
// // await driver.switchTo().defaultContent();
// });
afterEach(async () => {
// console.log('teardown');
// const session = await this.driver.getSession();
// const sessionId = session.getId();
// const executor = await this.driver.getExecutor();
// await executor.execute(new Command('close').setParameter('sessionId', sessionId));
await driver.quit();
});
// afterAll(async () => {
// // console.log('executor', driver.getExecutor());
// const session = await driver.getSession();
// const sessionId = session.getId();
// const executor = await driver.getExecutor();
// await executor.execute(new Command('close').setParameter('sessionId', sessionId));
// await driver.quit();
// });
async function takeScreenshot(driver) {
const dir = './test/screenshots';
const fileName = '"' + path.relative(process.cwd(), __filename) + ' ' + expect.getState().currentTestName + ` ${new Date()}".png`;
// console.log(fileName.replaceAll('/', '-'));
const image = await driver.takeScreenshot();
await mkdir(dir, { recursive: true });
await writeFile(`${dir}/${fileName.replaceAll('/', '-')}`, image, 'base64');
}