Add integration test-helpers and refactor integration tests

jest.config.integ.cjs

@@ -5,8 +5,9 @@ module.exports = {
   globalTeardown: './test/integration/teardown.cjs',
   setupFiles: ['./test/integration/helpers.cjs'],
   testPathIgnorePatterns: ['/node_modules/', 'test/unit'],
-  testTimeout: 5000,
+  verbose: true,
+  randomize: true,
   globals: {
     testServerUrl: 'http://localhost:3005/'
-  }
+  },
 };

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "start": "node server.cjs",
     "start:esbuildserver": "node esbuild-server.mjs",
-    "test:integ": "node --trace-warnings ./node_modules/.bin/jest --detectOpenHandles --config jest.config.integ.cjs",
+    "test:integ": "node ./node_modules/.bin/jest --detectOpenHandles --config jest.config.integ.cjs",
     "test:integ:debug": "NODE_INSPECT_RESUME_ON_START=1 node inspect ./node_modules/jest/bin/jest.js --config jest.config.integ.cjs --runInBand",
     "test": "jest"
   }

public/index.html

@@ -145,7 +145,7 @@
         Loading...
       </div>
 
-      <object type="image/svg+xml" data="assets/images/scenario_template.svg"></object>
+      <object id="map-resource" type="image/svg+xml" data="assets/images/scenario_template.svg"></object>
 
       <div id="status">
         <span id="hex-counter">Distance: <span id="hex-count">-</span></span>
@@ -246,7 +246,7 @@
     <script>
       const source = new EventSource('/esbuild');
       source.addEventListener('change', () => location.reload());
-      source.addEventListener('message', (e) => console.log(e));
+      // source.addEventListener('message', (e) => console.log(e));
     </script>
     <script src="index.js"></script>
     <script src="soldier_record_block.js"></script>

test/integration/fixtures/scenario.svg

@@ -9,13 +9,7 @@
       </g>
       <g data-y="1">
         <g data-x="0"><use href="#hex"/></g>
-        <g data-x="1"><use href="#hex"/>
+        <g data-x="1"><use href="#hex"/></g>
-          <g class="counter" data-allegiance="attacker" data-number="1">
-            <use class="primary-weapon" href="counters.svg#rifle"/>
-            <use class="troop-number" href="counters.svg#number-1"/>
-            <use class="squad-number" href="counters.svg#number-1"/>
-          </g>
-        </g>
         <g data-x="2"><use href="#hex"/></g>
       </g>
       <g data-y="2">

test/integration/helpers.cjs

@@ -1,5 +1,8 @@
 const { mkdir, writeFile } = require('node:fs/promises')
   , path = require('path')
+  , { By, until } = require('selenium-webdriver')
+  , { JSDOM } = require('jsdom')
+  , { HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor')
   ;
 
 global.takeScreenshot = async (driver) => {
@@ -14,3 +17,72 @@ global.url = (relativeOrAbsolute) => {
   const location = new URL(relativeOrAbsolute, global.testServerUrl);
   return location.href;
 }
+
+global.page = {
+  waitUntilMapLoaded: async function (driver) {
+    const mapPlaceholderEl = await driver.findElement(By.css('.map-placeholder'));
+    await driver.wait(until.elementIsNotVisible(mapPlaceholderEl), 1000);
+  },
+
+  findElInFrame: async function (frame, locator) {
+    const driver = frame.getDriver();
+    await driver.switchTo().frame(frame);
+    return driver.findElement(locator);
+  },
+
+  expectSelected: async function (el) {
+    expect(await el.getAttribute('class')).toEqual(expect.stringContaining('selected'));
+  },
+
+  expectNotSelected: async function (el) {
+    expect(await el.getAttribute('class')).toEqual(expect.not.stringContaining('selected'));
+  },
+
+  troopCounterSelector: function ({ allegiance = 'attacker', troopNumber = 1 } = {}) {
+    return `.counter[data-allegiance="${allegiance}"][data-number="${troopNumber}"]`;
+  },
+
+  findMapResourceEl: function (driver) {
+    return driver.findElement(By.css('object'));
+  },
+
+  findTroopRecordEl: function (driver) {
+    return driver.findElement(By.css('.soldier-record'));
+  }
+};
+
+global.mockResponse = async function mockResponse(driver, urlPath, template, createFn) {
+  const connection = driver.createCDPConnection('page');
+  const dom = new JSDOM(template);
+  const contents = createFn(dom.window.document);
+
+  const httpResponse = new HttpResponse(url(urlPath));
+  httpResponse.body = contents;
+  httpResponse.addHeaders('Content-Type', 'image/svg+xml');
+
+  await driver.onIntercept(await connection, httpResponse, async () => {});
+}
+
+global.createTroopCounter = function (
+  allegiance = 'attacker',
+  troopNumber = 1,
+  squadNumber = 1,
+  weapon = 'rifle'
+) {
+  return JSDOM.fragment(`
+    <g class="counter" data-allegiance="${allegiance}" data-number="${troopNumber}">
+      <use class="primary-weapon" href="counters.svg#${weapon}"></use>
+      <use class="troop-number" href="counters.svg#number-${troopNumber}"></use>
+      <use class="squad-number" href="counters.svg#number-${squadNumber}"></use>
+    </g>
+  `);
+}
+
+global.placeCounter = function (document, counter, { x, y }) {
+  document.querySelector(`g[data-y="${y}"] g[data-x="${x}"]`).append(counter);
+}
+
+global.selectCounter = function (counter) {
+  counter.querySelector('.counter').classList.add('selected');
+  return counter;
+}

test/integration/select.test.js

@@ -1,136 +1,118 @@
-const { Builder, By, until } = require('selenium-webdriver'),
+const { Builder, By } = require('selenium-webdriver'),
   chrome = require('selenium-webdriver/chrome.js'),
   chromeOptions = new chrome.Options(),
-  { readFile, readdir } = require('node:fs/promises'),
+  { readFile, readdir } = require('node:fs/promises');
-  { HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor');
 
 chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
 
 const buildPath = 'build/assets/images';
 const defaultScenario = 'scenario-side_show';
-const fixtureFilePath = './test/integration/fixtures/scenario-test.svg';
+const fixtureFilePath = './test/integration/fixtures/scenario.svg';
 
-const selected = expect.stringContaining('selected');
+let driver, fixture, scenario;
-const notSelected = expect.not.stringContaining('selected');
-
-let driver, httpResponse;
 
 beforeAll(async () => {
-  const filenames = await readdir(buildPath);
+  const dirread = readdir(buildPath);
-  const scenario = filenames.find(filename => filename.includes(defaultScenario));
+  const fileRead = readFile(fixtureFilePath, 'utf8');
-
+  const filenames = await dirread;
-  httpResponse = new HttpResponse(url(`/assets/images/${scenario}`));
+  scenario = filenames.find(filename => filename.includes(defaultScenario));
-  httpResponse.body = await readFile(fixtureFilePath, 'utf8');
+  fixture = await fileRead;
-  httpResponse.addHeaders('Content-Type', 'image/svg+xml');
 });
 
 beforeEach(async () => {
   driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
-  const connection = await driver.createCDPConnection('page')
-  await driver.onIntercept(connection, httpResponse, async () => {});
-  await driver.get(url('/'));
-  const mapPlaceholderEl = await driver.findElement(By.css('.map-placeholder'));
-  await driver.wait(until.elementIsNotVisible(mapPlaceholderEl), 1000);
 });
 
-it('selects and deselects a trooper by clicking on its counter', async () => {
+describe('a trooper', () => {
-  const record = await driver.findElement(By.css('.soldier-record'));
+  beforeEach(async () => {
-  const objectEl = await driver.findElement(By.css('object'));
+    await mockResponse(driver, `/assets/images/${scenario}`, fixture, (document) => {
-  const selector = '.counter[data-allegiance="attacker"][data-number="1"]';
+      placeCounter(document, createTroopCounter(), { x: 1, y: 1 });
+      return `<?xml version="1.0" standalone="yes"?>\n` + document.querySelector('svg').outerHTML;
+    });
+  });
 
-  expect(await record.getAttribute('class')).toEqual(notSelected);
+  it('is selected by clicking on its counter', async () => {
-  await driver.switchTo().frame(objectEl);
+    await driver.get(url('/'));
-  const svg = await driver.findElement(By.css('svg'));
+    await page.waitUntilMapLoaded(driver);
-  const counter = await driver.findElement(By.css(selector), svg);
-  expect(await counter.getAttribute('class')).toEqual(notSelected);
 
-  await counter.click();
+    const record = page.findTroopRecordEl(driver);
+    const mapResource = page.findMapResourceEl(driver);
 
-  expect(await counter.getAttribute('class')).toEqual(selected);
+    await page.expectNotSelected(await record);
-  await driver.switchTo().defaultContent();
+    const counter = await page.findElInFrame(await mapResource, By.css(page.troopCounterSelector()));
-  expect(await record.getAttribute('class')).toEqual(selected);
+    await page.expectNotSelected(counter);
 
-  await driver.switchTo().frame(objectEl);
+    await counter.click();
-  await counter.click();
 
-  expect(await counter.getAttribute('class')).toEqual(notSelected);
+    await page.expectSelected(counter);
-  await driver.switchTo().defaultContent();
+    await driver.switchTo().defaultContent();
-  expect(await record.getAttribute('class')).toEqual(notSelected);
+    await page.expectSelected(await record);
+  });
+
+  it('is selected by clicking on its record', async () => {
+    await driver.get(url('/'));
+    await page.waitUntilMapLoaded(driver);
+
+    const record = page.findTroopRecordEl(driver);
+    const mapResource = page.findMapResourceEl(driver);
+
+    await page.expectNotSelected(await record);
+    const counter = await page.findElInFrame(await mapResource, By.css(page.troopCounterSelector()));
+    await page.expectNotSelected(counter);
+
+    await driver.switchTo().defaultContent();
+    await record.click();
+
+    await page.expectSelected(await record);
+    await driver.switchTo().frame(await mapResource);
+    await page.expectSelected(counter);
+  });
 });
 
-it('selects and deselects trooper by clicking on its record', async () => {
+describe('a selected trooper', () => {
-  const record = await driver.findElement(By.css('.soldier-record'));
+  beforeEach(async () => {
-  const objectEl = await driver.findElement(By.css('object'));
+    await mockResponse(driver, `/assets/images/${scenario}`, fixture, (document) => {
-  const selector = '.counter[data-allegiance="attacker"][data-number="1"]';
+      placeCounter(document, selectCounter(createTroopCounter()), { x: 1, y: 1 });
+      return `<?xml version="1.0" standalone="yes"?>\n` + document.querySelector('svg').outerHTML;
+    });
+  });
 
-  expect(await record.getAttribute('class')).toEqual(notSelected);
+  it('is deselected by clicking on its counter', async () => {
-  await driver.switchTo().frame(objectEl);
+    await driver.get(url('/'));
-  const svg = await driver.findElement(By.css('svg'));
+    await page.waitUntilMapLoaded(driver);
-  const counter = await driver.findElement(By.css(selector), svg);
-  expect(await counter.getAttribute('class')).toEqual(notSelected);
 
-  await driver.switchTo().defaultContent();
+    const record = page.findTroopRecordEl(driver);
-  await record.click();
+    const mapResource = page.findMapResourceEl(driver);
 
-  expect(await record.getAttribute('class')).toEqual(selected);
+    await page.expectSelected(await record);
-  await driver.switchTo().frame(objectEl);
+    const counter = await page.findElInFrame(await mapResource, By.css(page.troopCounterSelector()));
-  expect(await counter.getAttribute('class')).toEqual(selected);
+    await page.expectSelected(counter);
 
-  await driver.switchTo().defaultContent();
+    await counter.click();
-  await record.click();
 
-  expect(await record.getAttribute('class')).toEqual(notSelected);
+    await page.expectNotSelected(counter);
-  await driver.switchTo().frame(objectEl);
+    await driver.switchTo().defaultContent();
-  expect(await counter.getAttribute('class')).toEqual(notSelected);
+    await page.expectNotSelected(await record);
-});
+  });
 
-it('selects a trooper by clicking on its counter and deselects it by clicking on its record', async () => {
+  it('is deselected by clicking on its record', async () => {
-  const record = await driver.findElement(By.css('.soldier-record'));
+    await driver.get(url('/'));
-  const objectEl = await driver.findElement(By.css('object'));
+    await page.waitUntilMapLoaded(driver);
-  const selector = '.counter[data-allegiance="attacker"][data-number="1"]';
 
-  expect(await record.getAttribute('class')).toEqual(notSelected);
+    const record = page.findTroopRecordEl(driver);
-  await driver.switchTo().frame(objectEl);
+    const mapResource = page.findMapResourceEl(driver);
-  const svg = await driver.findElement(By.css('svg'));
-  const counter = await driver.findElement(By.css(selector), svg);
-  expect(await counter.getAttribute('class')).toEqual(notSelected);
 
-  await counter.click();
+    await page.expectSelected(await record);
+    const counter = await page.findElInFrame(await mapResource, By.css(page.troopCounterSelector()));
+    await page.expectSelected(counter);
 
-  expect(await counter.getAttribute('class')).toEqual(selected);
+    await driver.switchTo().defaultContent();
-  await driver.switchTo().defaultContent();
+    await record.click();
-  expect(await record.getAttribute('class')).toEqual(selected);
 
-  await record.click();
+    await page.expectNotSelected(await record);
-
+    await driver.switchTo().frame(await mapResource);
-  expect(await record.getAttribute('class')).toEqual(notSelected);
+    await page.expectNotSelected(counter);
-  await driver.switchTo().frame(objectEl);
+  });
-  expect(await counter.getAttribute('class')).toEqual(notSelected);
-});
-
-it('selects a trooper by clicking on its record and deselects it by clicking on its counter', async () => {
-  const record = await driver.findElement(By.css('.soldier-record'));
-  const objectEl = await driver.findElement(By.css('object'));
-  const selector = '.counter[data-allegiance="attacker"][data-number="1"]';
-
-  expect(await record.getAttribute('class')).toEqual(notSelected);
-  await driver.switchTo().frame(objectEl);
-  const svg = await driver.findElement(By.css('svg'));
-  const counter = await driver.findElement(By.css(selector), svg);
-  expect(await counter.getAttribute('class')).toEqual(notSelected);
-
-  await driver.switchTo().defaultContent();
-  await record.click();
-
-  expect(await record.getAttribute('class')).toEqual(selected);
-  await driver.switchTo().frame(objectEl);
-  expect(await counter.getAttribute('class')).toEqual(selected);
-
-  await counter.click();
-
-  expect(await counter.getAttribute('class')).toEqual(notSelected);
-  await driver.switchTo().defaultContent();
-  expect(await record.getAttribute('class')).toEqual(notSelected);
 });
 
 afterEach(async () => {