Add another integration test; document debugging integration tests

README.md

@@ -30,6 +30,114 @@ or, run the test script
 
     ./run-test
 
+### Debugging a Jest integration test
+
+`page.test.js`
+
+```javascript
+// webdriver setup here
+
+it('loads the page', async () => {
+  await driver.get("http://localhost:3005");
+
+  expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
+
+  // where you want your breakpoint
+  debugger;
+
+  // necessary for restarting from the debugger to work
+  driver.quit();
+});
+```
+
+Start the container with a bash prompt.
+
+    docker run --rm --init -it -v $PWD:/usr/src/app btroops bash
+
+Start the debugger with Jest integration test setup
+
+    NODE_INSPECT_RESUME_ON_START=1 node inspect ./node_modules/jest/bin/jest.js --config jest.config.integ.cjs --runInBand test/integration/page.test.js
+
+You can do the whole thing in one command like this.
+
+    docker run --rm --init -it -v $PWD:/usr/src/app -e NODE_INSPECT_RESUME_ON_START=1 btroops node inspect ./node_modules/jest/bin/jest.js --config jest.config.integ.cjs --runInBand test/integration/page.test.js
+
+```
+< Debugger listening on ws://127.0.0.1:9229/bcaf4c18-b204-49c6-8ccf-600fe8be0506
+< For help, see: https://nodejs.org/en/docs/inspector
+<
+connecting to 127.0.0.1:9229 ... ok
+< Debugger attached.
+<
+< Jest config file read.
+<
+<
+< Spawning server process...
+<
+< Development server running at http://localhost:3005
+< Build completed in 10ms
+<
+<
+break in test/integration/page.test.js:26
+ 24   await counter.click();
+ 25   expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
+>26   debugger;
+ 27 });
+ 28 afterAll(() => driver.quit());
+debug>
+```
+
+To run the test again without having to quit the debugger, use `c` to continue past the breakpoint and then `r` to restart.
+
+```
+debug> c
+< PASS test/integration/page.test.js (141.892 s)
+<
+<   ✓ loads the page (8 ms)
+<
+<   ✓ selects a trooper by clicking on their counter (140792 ms)
+<
+<
+< Test Suites: 1 passed, 1 total
+< Tests:       2 passed, 2 total
+< Snapshots:   0 total
+< Time:        141.925 s
+< Ran all test suites matching /test\/integration\/page.test.js/i.
+<
+< Stopping server.
+<
+< Waiting for the debugger to disconnect...
+<
+debug> r
+< Debugger listening on ws://127.0.0.1:9229/9ba4c56c-03ff-46c4-92d1-3b519374d1be
+< For help, see: https://nodejs.org/en/docs/inspector
+<
+connecting to 127.0.0.1:9229 ... ok
+< Debugger attached.
+<
+< Jest config file read.
+<
+<
+< Spawning server process...
+<
+< Development server running at http://localhost:3005
+< Build completed in 11ms
+<
+<
+break in test/integration/page.test.js:26
+ 24   await counter.click();
+ 25   expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
+>26   debugger;
+ 27 });
+ 28 afterAll(() => driver.quit());
+debug>
+```
+
+### References
+
+https://nodejs.org/en/learn/getting-started/debugging
+https://nodejs.org/api/debugger.html
+
 ## Rough way to save the SVG map generated by JavaScript client-side
 
     const XMLS = new XMLSerializer();

test/integration/page.test.js

@@ -1,4 +1,4 @@
-const { Builder } = require('selenium-webdriver'),
+const { Builder, By } = require('selenium-webdriver'),
   chrome = require('selenium-webdriver/chrome.js'),
   { expect, it } = require('@jest/globals'),
   chromeOptions = new chrome.Options();
@@ -7,12 +7,25 @@ let driver;
 
 chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
 
-beforeAll(async () => {
+beforeEach(async () => {
   driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
+  await driver.get("http://localhost:3005");
 });
 
 it('loads the page', async () => {
-  await driver.get("http://localhost:3005");
-
   expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
 });
+
+it('selects a trooper by clicking on their counter', async () => {
+  await driver.switchTo().frame(driver.findElement(By.css('object')));
+
+  const selector = 'use.counter[data-allegiance="liao"][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'));
+});
+
+afterEach(async () => await driver.quit());