5 lines
19 KiB
JSON
5 lines
19 KiB
JSON
|
{
|
||
|
|
"id": "guide/testing",
|
||
|
|
"title": "Testing",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/testing.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <a id=\"top\"></a>\n<h1 id=\"testing\">Testing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing#testing\"><i class=\"material-icons\">link</i></a></h1>\n<p>Testing your Angular application helps you check that your app is working as you expect.</p>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>Before writing tests for your Angular app, you should have a basic understanding of the following concepts:</p>\n<ul>\n<li>Angular fundamentals</li>\n<li>JavaScript</li>\n<li>HTML</li>\n<li>CSS</li>\n<li><a href=\"/cli\">Angular CLI</a></li>\n</ul>\n<hr>\n<p>The testing documentation offers tips and techniques for unit and integration testing Angular applications through a sample application created with the <a href=\"cli\">Angular CLI</a>.\nThis sample application is much like the one in the <a href=\"tutorial\"><em>Tour of Heroes</em> tutorial</a>.</p>\n<div class=\"alert is-helpful\">\n<p> For the sample app that the testing guides describe, see the <live-example nodownload=\"\">sample app</live-example>.</p>\n<p> For the tests features in the testing guides, see <live-example stackblitz=\"specs\" nodownload=\"\">tests</live-example>.</p>\n</div>\n<a id=\"setup\"></a>\n<h2 id=\"set-up-testing\">Set up testing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing#set-up-testing\"><i class=\"material-icons\">link</i></a></h2>\n<p>The Angular CLI downloads and installs everything you need to test an Angular application with the <a href=\"https://jasmine.github.io/\">Jasmine test framework</a>.</p>\n<p>The project you create with the CLI is immediately ready to test.\nJust run the <a href=\"cli/test\"><code>ng test</code></a> CLI command:</p>\n<code-example language=\"sh\" class=\"code-shell\">\n ng test\n</code-example>\n<p>The <code>ng test</code> command builds the app in <em>watch mode</em>,\nand launches the <a href=\"https://karma-runner.github.io\">Karma test runner</a>.</p>\n<p>The console output looks a bit like this:</p>\n<code-example language=\"sh\" class=\"code-shell\">\n10% building modules 1/1 modules 0 active\n...INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/\n...INFO [launcher]: Launching browser Chrome ...\n...INFO [launcher]: Starting browser Chrome\n...INFO [Chrome ...]: Connected on socket ...\nChrome ...: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)\n</code-example>\n<p>The last line of the log is the most important.\nIt shows that Karma ran three tests that all passed.</p>\n<p>A Chrome browser also opens and displays the test output in the \"Jasmine HTML Reporter\" like this.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/testing/initial-jasmine-html-reporter.png\" alt=\"Jasmine HTML Reporter in the browser\" width=\"502\" height=\"306\">\n</div>\n<p>Most people find this browser output easier to read than the console log.\nYou can click on a test row to re-run just that test or click on a description to re-run the tests in the selected test group (\"test suite\").</p>\n<p>Meanwhile, the <code>ng test</code> command is watching for changes.</p>\n<p>To see this in action, make a small change to <code>app.component.ts</code> and save.\nThe tests run again, the browser refreshes, and the new test results appear.</p>\n<h2 id=\"configuration\">Configuration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing#configuration\"><i class=\"material-icons\">link</i></a></h2>\n<p>The CLI takes care of Jasmine and Karma configuration f
|
||
|
|
}
|