3 files changed, 164 insertions, 17 deletions
diff --git a/test/integration/fixtures/index.html b/test/integration/fixtures/index.html
deleted file mode 100644
index 11e23c0..0000000
--- a/test/integration/fixtures/index.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Infantry Combat Solo Basic</title>
-  </head>
-  <body>
-  </body>
-</html>
diff --git a/test/integration/fixtures/scenario-test.svg b/test/integration/fixtures/scenario-test.svg
new file mode 100644
index 0000000..0e12afb
--- /dev/null
+++ b/test/integration/fixtures/scenario-test.svg
@@ -0,0 +1,102 @@
+<?xml version="1.0" standalone="no"?>
+<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
+  <!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css"/> -->
+  <style>
+    g[data-edge="north"] { --i: -2; }
+    g[data-edge="south"] { --i: 52; }
+
+    #background {
+      stroke: #304b75;
+      fill: #bacae3;
+    }
+
+    pattern use {
+      stroke: black;
+      stroke-width: 0.3px;
+    }
+
+    .cw-60-deg {
+      transform: rotate(60deg);
+    }
+
+    .ccw-60-deg {
+      transform: rotate(-60deg);
+    }
+  </style>
+  <defs>
+    <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+    <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+    <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
+
+    <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
+      <use y="-15" href="#ast-line"/>
+      <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/>
+      <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/>
+      <use y="15" href="#ast-line"/>
+      <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/>
+      <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/>
+
+      <use x="8.66" href="#ast-line"/>
+      <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/>
+      <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
+      <use x="-8.66" href="#ast-line"/>
+      <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/>
+      <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
+    </pattern>
+
+    <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+    <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+    <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+    <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+    <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+    <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+    <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
+
+    <g id="semi-auto">
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="auto">
+      <line x1="-2" y1="0" x2="2" y2="0"/>
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="rifle" class="weapon-symbol">
+      <use href="#semi-auto"/>
+      <line x1="0" y1="-5" x2="0" y2="5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
+
+    <g id="smg" class="weapon-symbol">
+      <use href="#auto"/>
+      <line x1="0" y1="-5" x2="0" y2="4.5"/>
+      <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
+    </g>
+
+    <g id="blazer" class="weapon-symbol">
+      <use href="#auto"/>
+      <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
+
+    <image id="counter-prone" href="counter_prone.jpg" width="10"/>
+    <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+  </defs>
+
+  <rect id="background"/>
+
+  <g class="gameboard">
+    <rect id="dots" fill="url(#asterisk)"/>
+
+    <g id="firing-arcs">
+      <g id="shapes"/>
+      <g id="lines"/>
+    </g>
+    <g class="grid"/>
+  </g>
+
+  <script data-cols="10" data-rows="10"></script>
+</svg>
diff --git a/test/integration/page.test.js b/test/integration/page.test.js
index e4739b0..f708c4f 100644
--- a/test/integration/page.test.js
+++ b/test/integration/page.test.js
@@ -1,4 +1,6 @@
-const { Builder, By } = require('selenium-webdriver'),
+const { ProvideResponseParameters } = require('selenium-webdriver/bidi/provideResponseParameters');
+
+const { Builder, By, until } = require('selenium-webdriver'),
   chrome = require('selenium-webdriver/chrome.js'),
   getNetworkInstance = require('selenium-webdriver/bidi/network.js'),
   { AddInterceptParameters } = require('selenium-webdriver/bidi/addInterceptParameters'),
@@ -10,8 +12,10 @@ const { Builder, By } = require('selenium-webdriver'),
   { tmpdir } = require('os'),
   puppeteer = require('puppeteer');
 
-const DIR = path.resolve(tmpdir(), 'test-dir');
+const { HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor');
 
+const fs = require('node:fs/promises');
+const DIR = path.resolve(tmpdir(), 'test-dir');
 
 chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
 chromeOptions.enableBidi();
@@ -53,17 +57,66 @@ it('loads the page', async () => {
 it.only('selects an off-board soldier', async () => {
 // it.only.each(Array(10).fill(null))('selects an off-board soldier', async () => {
 
-  const id = await driver.getWindowHandle();
-  const network = await getNetworkInstance(driver, id);
-  await network.beforeRequestSent(function (event) {
-    console.log('request url', event.request.url);
-  });
+  // const id = await driver.getWindowHandle();
+  // const network = await getNetworkInstance(driver, id);
 
   // const intercept = await network.addIntercept(new AddInterceptParameters(InterceptPhase.BEFORE_REQUEST_SENT));
 
+  // await network.beforeRequestSent(async event => {
+  //   console.log('request url', event.request.url);
+    // await network.provideResponse(new ProvideResponseParameters(event.request));
+  // });
+
+  // await network.responseStarted(async event => {
+  //   if (event.response.url.includes('scenario'))
+  //     console.log('response', event.response);
+  // });
+
+  // await network.responseStarted(async (event) => {
+  //   if (event.response.url.includes('scenario')) {
+  //     console.log('event', event);
+  //     console.log('request', event.request);
+  //     console.log('response', event.response.result);
+  //   }
+  // });
+
+  // await network.beforeRequestSent(async (event) => {
+  //   if (event.request.url.includes('scenario')) {
+  //     console.log('event', event);
+  //     console.log('request', event.request.request);
+  //     await network.provideResponse(new ProvideResponseParameters(event.request.request));
+  //     // await network.failRequest(event.request.request);
+  //   }
+  // });
+
+  const connection = await driver.createCDPConnection('page')
+  const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
+  const httpResponse = new HttpResponse(url);
+
+  // httpResponse.body = `<?xml version="1.0" standalone="no"?>
+  //   <svg viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg">
+  //     <circle cx="0" cy="0" r="50" fill="violet" />
+  //   </svg>`;
+
+  httpResponse.body = await fs.readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
+  httpResponse.addHeaders('Content-Type', 'image/svg+xml');
+
+  await driver.onIntercept(connection, httpResponse, async function () {
+    console.log('intercepted');
+    // await driver.switchTo().frame(await driver.findElement(By.css('object')));
+    // console.log(await driver.getPageSource());
+  });
+
   await driver.get('http://localhost:3005');
+  // expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
+
+  await driver.wait(until.elementIsVisible(driver.findElement(By.css('object'))), 1000);
+  // await driver.wait(until.elementLocated(By.css('#dice')), 1000);
+  takeScreenshot(driver);
   // await driver.switchTo().frame(await driver.findElement(By.css('object')));
 
+  // console.log(await driver.getPageSource());
+
   // const testDir = path.dirname(expect.getState().testPath);
   // await writeFile(path.join(testDir, `scenario.svg`), `
   //   <?xml version="1.0" standalone="no"?>
@@ -91,18 +144,18 @@ it.only('selects an off-board soldier', async () => {
   // await browser.close();
 
 
-
   // console.log('test dir', testDir);
 
   // const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
   //   svg = await driver.findElement(By.css('svg')),
   //   counter = await driver.findElement(By.css(selector), svg);
 
-  // takeScreenshot(driver);
+  // await driver.findElement(By.css('#dice'));
 
   // await counter.click();
 
   // expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
+  // await takeScreenshot(driver);
 });
 
 afterEach(async () => {