name: Browser JS can use convenience selectors
steps:
- step: I have a "my_test.toolproof.yml" file with the content {yaml}
yaml: |-
name: Inner passing test
steps:
- I have a "public/index.html" file with the content "<p>Hello World</p>"
- I serve the directory "public"
- In my browser, I load "/"
- step: In my browser, I evaluate {js}
js: |-
setTimeout(() => {
let p = document.querySelector("p");
p.insertAdjacentHTML("beforeEnd", "<span>added</span>");
}, 300);
let span = await toolproof.querySelector("span");
toolproof.assert_eq(span.innerText, "added");
- I run "%toolproof_path% --timeout 60"
- step: "stdout should contain 'Total passing tests: 1'"
- step: "stdout should contain 'Failing tests: 0'"
- step: "stdout should contain 'All tests passed'"
- stderr should be empty
- step: I have a "my_test.toolproof.yml" file with the content {yaml}
yaml: |-
name: Inner passing test
steps:
- I have a "public/index.html" file with the content "<p>Hello World</p>"
- I serve the directory "public"
- In my browser, I load "/"
- step: In my browser, I evaluate {js}
js: |-
setTimeout(() => {
let p = document.querySelector("p");
p.insertAdjacentHTML("beforeEnd", "<span>added</span>");
p.insertAdjacentHTML("beforeEnd", "<span>added</span>");
p.insertAdjacentHTML("beforeEnd", "<span>added</span>");
}, 300);
let spans = await toolproof.querySelectorAll("span");
toolproof.assert_eq(spans.length, 3);
- I run "%toolproof_path% --timeout 60"
- step: "stdout should contain 'Total passing tests: 1'"
- step: "stdout should contain 'Failing tests: 0'"
- step: "stdout should contain 'All tests passed'"
- stderr should be empty
- step: I have a "my_test.toolproof.yml" file with the content {yaml}
yaml: |-
name: Inner failing test
steps:
- I have a "public/index.html" file with the content "<p>Hello World</p>"
- I serve the directory "public"
- In my browser, I load "/"
- step: In my browser, I evaluate {js}
js: |-
setTimeout(() => {
let p = document.querySelector("p");
p.insertAdjacentHTML("beforeEnd", "<span>added</span>");
}, 500);
let span = await toolproof.querySelector("span", 250);
toolproof.assert_eq(span.innerText, "added");
- I run "%toolproof_path% --timeout 60 --porcelain" and expect it to fail
- step: "stdout should contain 'Total passing tests: 0'"
- step: "stdout should contain 'Failing tests: 1'"
- step: "stdout should contain 'Some tests failed'"
- stderr should be empty
- snapshot: stdout
snapshot_content: |-
╎
╎Running tests
╎
╎✘ Inner failing test
╎--- STEPS ---
╎✓ I have a "public/index.html" file with the content "<p>Hello World</p>"
╎✓ I serve the directory "public"
╎✓ In my browser, I load "/"
╎✘ In my browser, I evaluate {js}
╎--- ERROR ---
╎Error in step "In my browser, I evaluate {js}":
╎js: |-
╎ setTimeout(() => {
╎ let p = document.querySelector("p");
╎ p.insertAdjacentHTML("beforeEnd", "<span>added</span>");
╎ }, 500);
╎
╎ let span = await toolproof.querySelector("span", 250);
╎ toolproof.assert_eq(span.innerText, "added");
╎--
╎Failed assertion: Error: querySelector timed out at 250ms, no elements matching "span"
╎browser console:
╎
╎
╎Finished running tests
╎
╎Total passing tests: 0
╎Passed after retry: 0
╎Failing tests: 1
╎Changed snapshots: 0
╎Skipped tests: 0
╎
╎Failing tests:
╎ ✘ Inner failing test
╎
╎Rerun the failing tests with:
╎ toolproof --name 'Inner failing test'
╎
╎Some tests failed