WIP: intercept request in test

Dockerfile

@@ -8,12 +8,12 @@ RUN apt-get update -qq -y && \
         libnss3 \
         xdg-utils \
         wget && \
-    wget -q -O chrome-linux64.zip https://storage.googleapis.com/chrome-for-testing-public/123.0.6312.122/linux64/chrome-linux64.zip && \
+    wget -q -O chrome-linux64.zip https://storage.googleapis.com/chrome-for-testing-public/125.0.6422.60/linux64/chrome-linux64.zip && \
     unzip chrome-linux64.zip && \
     rm chrome-linux64.zip && \
     mv chrome-linux64 /opt/chrome/ && \
     ln -s /opt/chrome/chrome /usr/local/bin/ && \
-    wget -q -O chromedriver-linux64.zip https://storage.googleapis.com/chrome-for-testing-public/123.0.6312.122/linux64/chromedriver-linux64.zip && \
+    wget -q -O chromedriver-linux64.zip https://storage.googleapis.com/chrome-for-testing-public/125.0.6422.60/linux64/chromedriver-linux64.zip && \
     unzip -j chromedriver-linux64.zip chromedriver-linux64/chromedriver && \
     rm chromedriver-linux64.zip && \
     mv chromedriver /usr/local/bin/

package.json

@@ -7,6 +7,7 @@
     "esbuild": "^0.20.2",
     "esbuild-server": "^0.3.0",
     "jest": "^29.7.0",
+    "puppeteer": "^22.9.0",
     "selenium-webdriver": "^4.19.0"
   },
   "scripts": {

server.cjs

@@ -1,4 +1,44 @@
 const { createServer } = require('esbuild-server');
+// const { IncomingMessage } = require('node:http');
+// const { URL } = require('node:url');
+// const path = require('node:path');
+
+// class Request extends IncomingMessage {
+//   constructor(socket) {
+//     super(socket);
+//   }
+
+//   get url() {
+//     console.log('getter called', this._url);
+//     return this._url;
+//   }
+
+//   set url(val) {
+//     console.log('setter called', val);
+//     this._url = val;
+//   }
+// }
+
+// const propDesc = Object.getOwnPropertyDescriptor(URL.prototype, 'pathname');
+
+// // console.log('propDesc before', propDesc);
+
+// Object.defineProperty(URL.prototype, 'pathname', {
+//   __proto__: null,
+//   get: function() {
+//     const pathname = propDesc.get.call(this);
+//     console.log('get pathname', path.normalize(path.join('public', pathname)));
+
+//     return pathname;
+//   },
+//   // set: function(val) {
+//   //   console.log('set pathname', val);
+//   //   propDesc.set.call(this, val);
+//   //   // this._pathname = val;
+//   // },
+// });
+
+// console.log('path', path.normalize(path.join('public', 'assets/css/damage_block.css')))
 
 const server = createServer(
   {
@@ -12,6 +52,7 @@ const server = createServer(
     }
   },
   {
+    // http: { IncomingMessage: Request },
     static: 'public',
     ...(process.env.NODE_ENV === 'test') && {
       port: 3005,
@@ -24,7 +65,7 @@ const server = createServer(
 const buildStart = Date.now();
 server
   .start()
-  .then(() => {
+  .then((d) => {
     console.log(`Build completed in ${Date.now() - buildStart}ms`);
   })
   .catch(() => {

src/modules/game/soldier.js

@@ -67,6 +67,7 @@ export function createCounter(selected) {
   const use = document.createElementNS(svgns, 'use');
   const g = document.createElementNS(svgns, 'g');
   use.setAttributeNS(null, 'href', `#t-${selected.dataset.number}`);
+  // use.setAttributeNS(null, 'href', `counters.svg#rifle`);
   g.classList.add('counter');
   g.dataset.allegiance = selected.dataset.allegiance;
   g.dataset.number = selected.dataset.number;

src/modules/gameboard.js

@@ -175,14 +175,12 @@ function selectOffBoard() {
 }
 
 function select(data) {
-  if (!data) return;
+  const counter = data && (soldier.getCounter(svg, data) || soldier.createCounter(data));
-
+  const isSelected = counter?.classList.contains(soldier.getSelectedClass());
-  const counter = soldier.getCounter(svg, data) || soldier.createCounter(data);
-  const isSelected = counter.classList.contains(soldier.getSelectedClass());
 
   deselect();
 
-  if (isSelected) return;
+  if (isSelected || !data) return;
 
   counter.classList.add(soldier.getSelectedClass());
   firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
@@ -223,7 +221,8 @@ export function start(el) {
             placing.push(toPlace);
             getLockedSightLine(svg) ? updateSightLine(toPlace.parentElement) : drawSightLine(toPlace.parentElement, cell);
           } else {
-            deselect();
+            // deselect();
+            Observable.notify('select');
           }
         } else if (!occupant.classList.contains('clone')) {
           Observable.notify('select', occupant);

test/integration/fixtures/index.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Infantry Combat Solo Basic</title>
+  </head>
+  <body>
+  </body>
+</html>

test/integration/page.test.js

@@ -1,11 +1,20 @@
 const { Builder, By } = require('selenium-webdriver'),
   chrome = require('selenium-webdriver/chrome.js'),
+  getNetworkInstance = require('selenium-webdriver/bidi/network.js'),
+  { AddInterceptParameters } = require('selenium-webdriver/bidi/addInterceptParameters'),
+  { InterceptPhase } = require('selenium-webdriver/bidi/interceptPhase'),
   { expect, it } = require('@jest/globals'),
   chromeOptions = new chrome.Options(),
   { mkdir, writeFile, symlink, unlink } = require('node:fs/promises'),
-  path = require('path');
+  path = require('path'),
+  { tmpdir } = require('os'),
+  puppeteer = require('puppeteer');
+
+const DIR = path.resolve(tmpdir(), 'test-dir');
+
 
 chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
+chromeOptions.enableBidi();
 
 let driver;
 
@@ -18,7 +27,6 @@ beforeEach(async () => {
 
   // console.log('manage', await driver.manage());
 
-  await driver.get('http://localhost:3005');
 });
 
 it('loads the page', async () => {
@@ -42,17 +50,59 @@ it('loads the page', async () => {
   // console.log('client', await driver.executeScript(`return document.querySelect('object');`));
 });
 
-it('selects an off-board soldier', async () => {
+it.only('selects an off-board soldier', async () => {
 // it.only.each(Array(10).fill(null))('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"]',
+  const id = await driver.getWindowHandle();
-    svg = await driver.findElement(By.css('svg')),
+  const network = await getNetworkInstance(driver, id);
-    counter = await driver.findElement(By.css(selector), svg);
+  await network.beforeRequestSent(function (event) {
+    console.log('request url', event.request.url);
+  });
 
-  await counter.click();
+  // const intercept = await network.addIntercept(new AddInterceptParameters(InterceptPhase.BEFORE_REQUEST_SENT));
 
-  expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
+  await driver.get('http://localhost:3005');
+  // await driver.switchTo().frame(await driver.findElement(By.css('object')));
+
+  // const testDir = path.dirname(expect.getState().testPath);
+  // await writeFile(path.join(testDir, `scenario.svg`), `
+  //   <?xml version="1.0" standalone="no"?>
+  //   <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  //   </svg>
+  // `);
+
+
+    // const browser = await puppeteer.launch();
+
+  // // Create a page
+  // const page = await browser.newPage();
+
+  // await page.setRequestInterception(true);
+
+  // page.on('request', interceptedRequest => {
+  //   console.log('intercept req url', interceptedRequest.url());
+  //   interceptedRequest.continue();
+  // });
+
+  // // Go to your site
+  // await page.goto('http://localhost:3005');
+
+
+  // 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 counter.click();
+
+  // expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
 });
 
 afterEach(async () => {

test/integration/scenario.svg

@@ -0,0 +1,5 @@
+
+    <?xml version="1.0" standalone="no"?>
+    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    </svg>
+