Karma + Mocha + Chai tests.
pnpm i
pnpm test
Coverage is saved to coverage/html/index.html
.
pnpm test-dev
In this mode Karma server is being run in background.
You can modify tests and library sources, and tests would be executed on the fly.
pnpm test --filter Validation Serialize
# pnpm test-dev --filter Validation Serialize
Or alternatively edit testsFilter
in karma.tests.js:
const testsFilter = [
"InteractionsVanilla"
];
Edit testsFilter
and specFilter
in karma.tests.js:
const testsFilter = [
"InteractionsVanilla"
];
const specFilter = [
"change field",
"change op"
];
pnpm test-debug
This will run Karma in watch mode and start the Chromium browser with opened devtools (don't close it).
To debug a test, add debug: true
in options of with_qb()
(last arg), see test example.
Then write debugger;
somewhere in your test code to pause test and debug in Chrome DevTools or VSCode.
In the browser's console you can use global window.dbg
object for debugging.
See known issue #1.
- Open
Run and Debug
in VS Code (Shift-Command-D in Mac) - Run
Run Karma tests in debug mode
- Run
Attach to Karma
- Wait for opening new Chromium browser with
http://localhost:9876/
(port can change)
Now you can put breakpoints on your test code in VSCode (and library code too!).
Here is a useful setup for writing new tests.
- Add empty test. See example test
- Add its file name to
testsFilter
, spec name tospecFilter
in karma.tests.js - Run Karma tests in debug mode (with terminal or VSCode)
- Click
DEBUG
in top-right corner of window, this will open newKarma DEBUG RUNNER
page (http://localhost:9876/debug.html
) in another tab - Close original Karma tab (
http://localhost:9876/
) - In your test code use
await pauseTest();
to pause test execution. It's likedebugger;
but better for writing tests. You can inspect and interact with web page, use browser console etc. - Type
continueTest()
in browser console to continue test execution.
If you update test code, Karma won't reload the DEBUG RUNNER
page automatically. It's fine. Just reload the page (F5
) manually. You should see these messages in terminal when tests are recompiled after your changes and ready to be executed:
webpack 5.91.0 compiled successfully in xxxx ms
WARN [karma]: No captured browser, open http://localhost:9877/
.
Why await pauseTest();
is better that debugger;
for writing tests?
You can interact with UI!
You can just type something like this in browser console and see/debug results:
// get current tree in SpEL format
Utils.spelFormat((onChange.lastCall || onInit.lastCall).args[0], config);
// clear tree
qb.setProps({value: null});
You can write your test code completely in the browser console, then copy it to your test file.
You can also use debugger;
Note that await pauseTest();
works ONLY on Karma debug page.
Issue: After modifying test code, Karma doesn't rerun tests anymore. You see in terminal:
[karma]: Delaying execution, these browsers are not ready: Chrome
Reason: Probably you've put debugger
in your test code, and test script execution was paused for more than 30 seconds.
Solution: Reload (F5
) Karma page in Chromium.
Issue: Process "Attach to Karma" has stopped.
Solution: Just start "Attach to Karma" in VSCode again.
import { Utils, ImmutableTree } from "@react-awesome-query-builder/core";
import * as configs from "../support/configs";
import * as inits from "../support/inits";
import { with_qb } from "../support/utils";
import { expect } from "chai";
describe("my first tests", () => {
it("change value from 2 to 200", async () => {
await with_qb(
[ configs.with_all_types, configs.with_show_error ],
inits.with_number,
null,
async (qb, {
config, onInit, onChange, pauseTest,
expect_jlogic,
}) => {
await pauseTest(); // pause execution to debug initial state
const initialTree = onInit.getCall(0).args[0] as ImmutableTree;
const initialSpel = Utils.spelFormat(initialTree, config);
expect(initialSpel).to.eq("num == 2");
qb
.find(".rule .rule--value .widget--widget input")
.simulate("change", { target: { value: "200" } });
expect_jlogic([null,
{ "and": [{ "==": [ { "var": "num" }, 200 ] }] }
]);
await pauseTest(); // pause execution to debug changed state
const changedTree = onChange.lastCall.args[0];
const changedSpel = Utils.spelFormat(changedTree, config);
expect(changedSpel).to.eq("num == 200");
},
{
debug: true,
}
);
});
});