Web Dev Solutions

Catalin Mititiuc

From 686b05350d474e3545b01783005ba0fd8e4dc545 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Thu, 2 May 2024 11:43:00 -0700 Subject: Update README --- README.md | 129 ++++++++++++++++++-------------------------------------------- 1 file changed, 38 insertions(+), 91 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 36d1fed..353a47b 100644 --- a/README.md +++ b/README.md @@ -1,69 +1,36 @@ -## Install dev server packages +## Build the Docker image - docker run --rm -w /app -v $PWD:/app -u $(id -u):$(id -u) node npm install + docker build -t btroops . -## Start the dev server +## Install packages - docker run --rm --init -it -v $PWD:/usr/src/app -p 8080:8080 btroops + ./npm install -or, run the start script +## Start the dev server - ./run-start + ./npm run start Visit `localhost:8080` to view. -## Run a test - -You need chrome and chromedriver installed to run the integration tests. The Dockerfile builds an image that does that. Then run the test with that image. - -`--network host` gives the container internet access. Necessary if tests make outside requests. - - docker run --rm -it -v $PWD:/usr/src/app --network host btroops node google_test - -TODO add firefox and geckodriver - -The container can access the outside without setting a port or a network. The network or port is only necessary when wanting to connect the host machine to the docker container. You can run a test that spawns a test server and uses the webdriver to load the page like this: +## Run integration tests - docker run --rm -it -v $PWD:/usr/src/app btroops npm run test:integ + ./npm run test:integ -or, run the test script +### Debugging an integration test - ./run-test +1. Put `debugger` in whatever test you want to debug. -### Debugging a Jest integration test +2. Add `only` to the test's `it` function call. -`page.test.js` + From `it(...` to `it.only(...`. -```javascript -// webdriver setup here +3. Then run `./npm run test:integ:debug` to start start the debugger. -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(); -}); ``` +> test:integ:debug +> 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 -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 +< Debugger listening on ws://127.0.0.1:9229/7150f5fc-339a-4171-af42-b8902d0d3e31 < For help, see: https://nodejs.org/en/docs/inspector < connecting to 127.0.0.1:9229 ... ok @@ -74,42 +41,34 @@ connecting to 127.0.0.1:9229 ... ok < < Spawning server process... < -< Development server running at http://localhost:3005 -< Build completed in 10ms +< Test 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()); +break in test/integration/page.test.js:31 + 29 counter = await driver.findElement(By.css(selector), svg); + 30 await counter.click(); +>31 debugger; + 32 expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected')); + 33 }); debug> ``` -To run the test again without having to quit the debugger, use `c` to continue past the breakpoint and then `r` to restart. +4. 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 +< Debugger listening on ws://127.0.0.1:9229/1cda953e-c9ae-41d8-9d4a-e41a567e0826 < For help, see: https://nodejs.org/en/docs/inspector < connecting to 127.0.0.1:9229 ... ok @@ -120,33 +79,21 @@ connecting to 127.0.0.1:9229 ... ok < < Spawning server process... < -< Development server running at http://localhost:3005 +< Test 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()); +break in test/integration/page.test.js:31 + 29 counter = await driver.findElement(By.css(selector), svg); + 30 await counter.click(); +>31 debugger; + 32 expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected')); + 33 }); 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(); - const svg_xmls = XMLS.serializeToString(svg); - let bl = new Blob([svg_xmls], {type: "text/html" }); - let a = document.createElement("a"); - a.href = URL.createObjectURL(bl); - a.download = "map.svg"; - a.hidden = true; - document.body.appendChild(a); - a.innerHTML = "something random - nobody will see this, it doesn't matter what you put here"; - a.click() +https://nodejs.org/api/debugger.html -- cgit v1.2.3