WIP: select counter test

src/modules/gameboard.js

@@ -200,7 +200,8 @@ function endMove() {
 export function start(el) {
   svg = el;
 
-  getUnits(svg).forEach(unit => unit.addEventListener('click', selectOffBoard));
+  const startingLocations = svg.querySelector('.start-locations');
+  startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
 
   getCells(svg).forEach(cell => {
     cell.addEventListener('click', e => {

src/modules/record_sheet.js

@@ -179,7 +179,7 @@ export function start(startLoc, units) {
   for (const affiliation in forces) {
     const container = document.querySelector(`#${affiliation}-record`);
     const records = container.querySelector('.records');
-    const name = startLoc.dataset[`${affiliation}Name`];
+    const name = startLoc?.dataset[`${affiliation}Name`];
 
     if (name) {
       container.querySelector('.name').textContent = name;

test/integration/fixtures/scenario-test.svg

@@ -1,6 +1,6 @@
 <?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"/> -->
+  <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; }
@@ -95,8 +95,26 @@
       <g id="shapes"/>
       <g id="lines"/>
     </g>
-    <g class="grid"/>
+    <g class="grid">
+      <g data-y="0">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+      </g>
+      <g data-y="1">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/>
+          <g class="counter" data-allegiance="attacker" data-number="1"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
+        </g>
+        <g data-x="2"><use href="#hex"/></g>
+      </g>
+      <g data-y="2">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+      </g>
+    </g>
   </g>
 
-  <script data-cols="10" data-rows="10"></script>
+  <script href="../../map.js"></script>
 </svg>

test/integration/page.test.js

@@ -55,107 +55,36 @@ 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);
-
-  // 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.elementLocated(By.css('#dice')), 1000);
+  await driver.switchTo().frame(await driver.findElement(By.css('object')));
 
-  await driver.wait(until.elementIsVisible(driver.findElement(By.css('object'))), 1000);
+  const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
-  // await driver.wait(until.elementLocated(By.css('#dice')), 1000);
+    svg = await driver.findElement(By.css('svg')),
-  takeScreenshot(driver);
+    counter = await driver.findElement(By.css(selector), svg);
-  // await driver.switchTo().frame(await driver.findElement(By.css('object')));
 
-  // console.log(await driver.getPageSource());
+  await counter.click();
 
-  // const testDir = path.dirname(expect.getState().testPath);
+  expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
-  // await writeFile(path.join(testDir, `scenario.svg`), `
+  await driver.switchTo().defaultContent();
-  //   <?xml version="1.0" standalone="no"?>
+  expect(await driver.findElement(By.css('.soldier-record')).getAttribute('class')).toEqual(expect.stringContaining('selected'));
-  //   <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  //   </svg>
-  // `);
 
+  await driver.switchTo().frame(await driver.findElement(By.css('object')));
+  await counter.click();
 
-    // const browser = await puppeteer.launch();
+  expect(await counter.getAttribute('class')).toEqual(expect.not.stringContaining('selected'));
-
+  await driver.switchTo().defaultContent();
-  // // Create a page
+  expect(await driver.findElement(By.css('.soldier-record')).getAttribute('class')).toEqual(expect.not.stringContaining('selected'));
-  // 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);
-
-  // await driver.findElement(By.css('#dice'));
-
-  // await counter.click();
-
-  // expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
-  // await takeScreenshot(driver);
 });
 
 afterEach(async () => {