6 files changed, 144 insertions, 28 deletions
diff --git a/.gitignore b/.gitignore
index da607e2..47a4fce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 dist
 node_modules
 build
+test/screenshots
diff --git a/npm b/npm
index 3f0936f..a97de73 100755
--- a/npm
+++ b/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 $@
diff --git a/package.json b/package.json
index 63b3fba..2cdee63 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/run-test b/run-test
index 0430cf7..1722c8f 100755
--- a/run-test
+++ b/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 btroops $NPM_COMMAND
+docker run --rm --init -it -v $PWD:/usr/src/app -p 8080:8080 --name btroops-test btroops bash
diff --git a/src/index.js b/src/index.js
index 5c20a8e..d4c74e9 100644
--- a/src/index.js
+++ b/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 () {
-  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;
+}
diff --git a/test/integration/page.test.js b/test/integration/page.test.js
index c18beb9..1e69db1 100644
--- a/test/integration/page.test.js
+++ b/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();
 
+chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
+
 let driver;
 
-chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
+
+// 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('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();
+
+  expect(title).toEqual('Infantry Combat Solo Basic');
+  // await driver.switchTo().defaultContent();
+  debugger;
 });
 
-it('selects an off-board soldier', async () => {
-  await driver.switchTo().frame(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();
+// 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);
 
-  expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
+//   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();
 });
 
-afterEach(async () => 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');
+}