btroops/test/integration/select.test.js

const { Builder, By, until } = require('selenium-webdriver'),
  chrome = require('selenium-webdriver/chrome.js'),
  chromeOptions = new chrome.Options(),
  { expect, it } = require('@jest/globals'),
  { readFile } = require('node:fs/promises'),
  { 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();
});