Add another integration test; document debugging integration tests

This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:29 -07:00
parent 07d6d58699
commit a0c724992e
2 changed files with 125 additions and 4 deletions

108
README.md
View File

@ -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();

View File

@ -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());