Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'README.md')
-rw-r--r--README.md129
1 files changed, 38 insertions, 91 deletions
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