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

.gitignore

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

npm

@@ -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 $@

package.json

@@ -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"
   }
 }

run-test

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

src/index.js

@@ -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 () {
+// object.addEventListener('load', function () {
-  mapPlaceholder.remove();
+//   mapPlaceholder.remove();
-  this.style.opacity = 1;
+//   this.style.opacity = 1;
 
-  const svg = this.contentDocument.querySelector('svg'),
+//   const svg = this.contentDocument.querySelector('svg'),
-    startLocs = svg.querySelector('.start-locations');
+//     startLocs = svg.querySelector('.start-locations');
 
-  panzoom.start(svg);
+//   panzoom.start(svg);
-  gameboard.start(svg);
+//   gameboard.start(svg);
-  recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
+//   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;
+}

test/integration/page.test.js

@@ -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 () => {
+it.each(Array(100).fill(null))('looper', async () => {
-  expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
+// 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 () => {
+it('debugger', async () => {
-  await driver.switchTo().frame(driver.findElement(By.css('object')));
+// 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"]',
+  expect(title).toEqual('Infantry Combat Solo Basic');
-    svg = await driver.findElement(By.css('svg')),
+  // await driver.switchTo().defaultContent();
-    counter = await driver.findElement(By.css(selector), svg);
+  debugger;
-
-  await counter.click();
-
-  expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
 });
 
-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');
+}