9021d3f5e1
In #37957, parts of the testing guide were broken out into separate guides. As part of that work, the `<live-example>` tags were also copied to the new guides. These `<live-example>` tags did not specify the targeted example project via the `name` attribute, thus they were implicitly targeting the example with the same name as the guide they were in. See the [Docs style guide][1] for more info. However, there is only one example project (`testing/`) and all `<live-example>` tags were supposed to target that. This worked fine on the `testing.md` guide, but it broke on other guides (which tried to target non-existing example projects based on their names). This commit fixes it by explicitly specifying which example is targeted by the `<live-example>` tags. It also removes the `embedded-style` attribute that has no effect. [1]: https://angular.io/guide/docs-style-guide#live-examples Fixes #38036 PR Close #38038
29 lines
1.1 KiB
Markdown
29 lines
1.1 KiB
Markdown
# Debugging tests
|
|
|
|
If your tests aren't working as you expect them to, you can inspect and debug them in the browser.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
For the sample app that the testing guides describe, see the <live-example name="testing" embedded-style noDownload>sample app</live-example>.
|
|
|
|
For the tests features in the testing guides, see <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>.
|
|
|
|
</div>
|
|
|
|
|
|
Debug specs in the browser in the same way that you debug an application.
|
|
|
|
1. Reveal the Karma browser window. See [Set up testing](guide/testing#set-up-testing) if you need help with this step.
|
|
1. Click the **DEBUG** button; it opens a new browser tab and re-runs the tests.
|
|
1. Open the browser's “Developer Tools” (`Ctrl-Shift-I` on Windows; `Command-Option-I` in macOS).
|
|
1. Pick the "sources" section.
|
|
1. Open the `1st.spec.ts` test file (Control/Command-P, then start typing the name of the file).
|
|
1. Set a breakpoint in the test.
|
|
1. Refresh the browser, and it stops at the breakpoint.
|
|
|
|
<div class="lightbox">
|
|
<img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">
|
|
</div>
|
|
|
|
<hr>
|