Add some select tests

test/integration/page.test.js

@@ -1,100 +1,28 @@
-const { ProvideResponseParameters } = require('selenium-webdriver/bidi/provideResponseParameters');
+const { Builder } = require('selenium-webdriver'),
-
-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'),
-  { InterceptPhase } = require('selenium-webdriver/bidi/interceptPhase'),
-  { expect, it } = require('@jest/globals'),
   chromeOptions = new chrome.Options(),
-  { mkdir, writeFile, symlink, unlink } = require('node:fs/promises'),
+  { expect, it } = require('@jest/globals'),
-  path = require('path'),
+  { mkdir, writeFile } = require('node:fs/promises'),
-  { tmpdir } = require('os'),
+  path = require('path');
-  puppeteer = require('puppeteer');
-
-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();
 
 let driver;
 
-// beforeAll(async () => {
-//   await symlink('../../../test/map1.svg', 'public/assets/images/test_map.svg');
-// });
-
 beforeEach(async () => {
   driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
-
-  // console.log('manage', await driver.manage());
-
 });
 
 it('loads the page', async () => {
-  expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
-
-  // console.log('window', window);
-
-  // takeScreenshot(driver);
-
-  // var start = new Date().getTime();
-  // await driver.executeAsyncScript(
-  //     'window.setTimeout(arguments[arguments.length - 1], 500);').
-  //     then(function() {
-  //       console.log(
-  //           'Elapsed time: ' + (new Date().getTime() - start) + ' ms');
-  //     });
-
-  // await driver.executeScript(`return __dirname`).then(function (e) {
-  //   console.log('e', e);
-  // });
-  // console.log('client', await driver.executeScript(`return document.querySelect('object');`));
-});
-
-it.only('selects an off-board soldier', async () => {
-  const connection = await driver.createCDPConnection('page')
-  const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
-  const httpResponse = new HttpResponse(url);
-  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.get('http://localhost:3005');
-  await driver.wait(until.elementLocated(By.css('#dice')), 1000);
+  expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
-  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();
-
-  expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
-  await driver.switchTo().defaultContent();
-  expect(await driver.findElement(By.css('.soldier-record')).getAttribute('class')).toEqual(expect.stringContaining('selected'));
-
-  await driver.switchTo().frame(await driver.findElement(By.css('object')));
-  await counter.click();
-
-  expect(await counter.getAttribute('class')).toEqual(expect.not.stringContaining('selected'));
-  await driver.switchTo().defaultContent();
-  expect(await driver.findElement(By.css('.soldier-record')).getAttribute('class')).toEqual(expect.not.stringContaining('selected'));
 });
 
 afterEach(async () => {
   await driver.quit();
 });
 
-// afterAll(async () => {
-//   await unlink('public/assets/images/test_map.svg');
-// });
-
 async function takeScreenshot(driver) {
   const dir = './test/screenshots';
   const fileName = path.relative(process.cwd(), __filename) + ' "' + expect.getState().currentTestName + `" ${new Date().toISOString()}.png`;

test/integration/scenario.svg

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

test/integration/select.test.js

@@ -0,0 +1,192 @@
+const { Builder, By, until } = require('selenium-webdriver'),
+  chrome = require('selenium-webdriver/chrome.js'),
+  chromeOptions = new chrome.Options(),
+  { expect, it } = require('@jest/globals'),
+  { mkdir, writeFile, readFile } = require('node:fs/promises'),
+  path = require('path'),
+  { HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor');
+
+chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
+chromeOptions.enableBidi();
+
+let driver;
+
+beforeEach(async () => {
+  driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
+});
+
+it('selects and deselects a trooper by clicking on its counter', async () => {
+  const connection = await driver.createCDPConnection('page')
+  const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
+  const httpResponse = new HttpResponse(url);
+  httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
+  httpResponse.addHeaders('Content-Type', 'image/svg+xml');
+
+  await driver.onIntercept(connection, httpResponse, async () => {});
+  await driver.get('http://localhost:3005');
+  await driver.wait(until.elementLocated(By.css('#dice')), 1000);
+
+  const record = await driver.findElement(By.css('.soldier-record'));
+  const notSelected = expect.not.stringContaining('selected');
+
+  expect(await record.getAttribute('class')).toEqual(notSelected);
+
+  const objectEl = await driver.findElement(By.css('object'));
+  await driver.switchTo().frame(objectEl);
+
+  const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
+    svg = await driver.findElement(By.css('svg')),
+    counter = await driver.findElement(By.css(selector), svg),
+    selected = expect.stringContaining('selected');
+
+  expect(await counter.getAttribute('class')).toEqual(notSelected);
+  await counter.click();
+
+  expect(await counter.getAttribute('class')).toEqual(selected);
+  await driver.switchTo().defaultContent();
+  expect(await record.getAttribute('class')).toEqual(selected);
+
+  await driver.switchTo().frame(objectEl);
+  await counter.click();
+
+  expect(await counter.getAttribute('class')).toEqual(notSelected);
+  await driver.switchTo().defaultContent();
+  expect(await record.getAttribute('class')).toEqual(notSelected);
+});
+
+it('selects and deselects trooper by clicking on its record', async () => {
+  const connection = await driver.createCDPConnection('page')
+  const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
+  const httpResponse = new HttpResponse(url);
+  httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
+  httpResponse.addHeaders('Content-Type', 'image/svg+xml');
+
+  await driver.onIntercept(connection, httpResponse, async () => {});
+  await driver.get('http://localhost:3005');
+  await driver.wait(until.elementLocated(By.css('#dice')), 1000);
+
+  const record = await driver.findElement(By.css('.soldier-record'));
+  const notSelected = expect.not.stringContaining('selected');
+
+  expect(await record.getAttribute('class')).toEqual(notSelected);
+
+  const objectEl = await driver.findElement(By.css('object'));
+  await driver.switchTo().frame(objectEl);
+
+  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(notSelected);
+
+  await driver.switchTo().defaultContent();
+  await record.click();
+
+  const selected = expect.stringContaining('selected');
+
+  expect(await record.getAttribute('class')).toEqual(selected);
+
+  await driver.switchTo().frame(objectEl);
+  expect(await counter.getAttribute('class')).toEqual(selected);
+
+  await driver.switchTo().defaultContent();
+  await record.click();
+
+  expect(await record.getAttribute('class')).toEqual(notSelected);
+
+  await driver.switchTo().frame(objectEl);
+  expect(await counter.getAttribute('class')).toEqual(notSelected);
+});
+
+it('selects a trooper by clicking on its counter and deselects it by clicking on its record', async () => {
+  const connection = await driver.createCDPConnection('page')
+  const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
+  const httpResponse = new HttpResponse(url);
+  httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
+  httpResponse.addHeaders('Content-Type', 'image/svg+xml');
+
+  await driver.onIntercept(connection, httpResponse, async () => {});
+  await driver.get('http://localhost:3005');
+  await driver.wait(until.elementLocated(By.css('#dice')), 1000);
+
+  const record = await driver.findElement(By.css('.soldier-record'));
+  const notSelected = expect.not.stringContaining('selected');
+
+  expect(await record.getAttribute('class')).toEqual(notSelected);
+
+  const objectEl = await driver.findElement(By.css('object'));
+  await driver.switchTo().frame(objectEl);
+
+  const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
+    svg = await driver.findElement(By.css('svg')),
+    counter = await driver.findElement(By.css(selector), svg),
+    selected = expect.stringContaining('selected');
+
+  expect(await counter.getAttribute('class')).toEqual(notSelected);
+  await counter.click();
+
+  expect(await counter.getAttribute('class')).toEqual(selected);
+  await driver.switchTo().defaultContent();
+  expect(await record.getAttribute('class')).toEqual(selected);
+
+  await record.click();
+
+  expect(await record.getAttribute('class')).toEqual(notSelected);
+
+  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 connection = await driver.createCDPConnection('page')
+  const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
+  const httpResponse = new HttpResponse(url);
+  httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
+  httpResponse.addHeaders('Content-Type', 'image/svg+xml');
+
+  await driver.onIntercept(connection, httpResponse, async () => {});
+  await driver.get('http://localhost:3005');
+  await driver.wait(until.elementLocated(By.css('#dice')), 1000);
+
+  const record = await driver.findElement(By.css('.soldier-record'));
+  const notSelected = expect.not.stringContaining('selected');
+
+  expect(await record.getAttribute('class')).toEqual(notSelected);
+
+  const objectEl = await driver.findElement(By.css('object'));
+  await driver.switchTo().frame(objectEl);
+
+  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(notSelected);
+
+  await driver.switchTo().defaultContent();
+  await record.click();
+
+  const selected = expect.stringContaining('selected');
+
+  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 () => {
+  await driver.quit();
+});
+
+async function takeScreenshot(driver) {
+  const dir = './test/screenshots';
+  const fileName = path.relative(process.cwd(), __filename) + ' "' + expect.getState().currentTestName + `" ${new Date().toISOString()}.png`;
+  const image = await driver.takeScreenshot();
+  await mkdir(dir, { recursive: true });
+  await writeFile(`${dir}/${fileName.replaceAll('/', '-')}`, image, 'base64');
+}

test/map1.svg

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