5 lines
29 KiB
JSON
5 lines
29 KiB
JSON
|
{
|
||
|
|
"id": "guide/testing-components-basics",
|
||
|
|
"title": "Basics of testing components",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/testing-components-basics.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 <h1 id=\"basics-of-testing-components\">Basics of testing components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-components-basics#basics-of-testing-components\"><i class=\"material-icons\">link</i></a></h1>\n<p>A component, unlike all other parts of an Angular application,\ncombines an HTML template and a TypeScript class.\nThe component truly is the template and the class <em>working together</em>. To adequately test a component, you should test that they work together\nas intended.</p>\n<p>Such tests require creating the component's host element in the browser DOM,\nas Angular does, and investigating the component class's interaction with\nthe DOM as described by its template.</p>\n<p>The Angular <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> facilitates this kind of testing as you'll see in the sections below.\nBut in many cases, <em>testing the component class alone</em>, without DOM involvement,\ncan validate much of the component's behavior in an easier, more obvious way.</p>\n<div class=\"alert is-helpful\">\n<p> For the sample app that the testing guides describe, see the <live-example name=\"testing\" embedded-style=\"\" nodownload=\"\">sample app</live-example>.</p>\n<p> For the tests features in the testing guides, see <live-example name=\"testing\" stackblitz=\"specs\" nodownload=\"\">tests</live-example>.</p>\n</div>\n<a id=\"component-class-testing\"></a>\n<h2 id=\"component-class-testing\">Component class testing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-components-basics#component-class-testing\"><i class=\"material-icons\">link</i></a></h2>\n<p>Test a component class on its own as you would test a service class.</p>\n<p>Component class testing should be kept very clean and simple.\nIt should test only a single unit.\nAt first glance, you should be able to understand\nwhat the test is testing.</p>\n<p>Consider this <code>LightswitchComponent</code> which toggles a light on and off\n(represented by an on-screen message) when the user clicks the button.</p>\n<code-example path=\"testing/src/app/demo/demo.ts\" region=\"LightswitchComp\" header=\"app/demo/demo.ts (LightswitchComp)\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'lightswitch-comp',\n template: `\n <button (click)=\"clicked()\">Click me!</button>\n <span>{{message}}</span>`\n})\nexport class LightswitchComponent {\n isOn = false;\n clicked() { this.isOn = !this.isOn; }\n get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }\n}\n\n</code-example>\n<p>You might decide only to test that the <code>clicked()</code> method\ntoggles the light's <em>on/off</em> state and sets the message appropriately.</p>\n<p>This component class has no dependencies. To test these types of classes, follow the same steps as you would for a service that has no dependencies:</p>\n<ol>\n<li>Create a component using the new keyword.</li>\n<li>Poke at its API.</li>\n<li>Assert expectations on its public state.</li>\n</ol>\n<code-example path=\"testing/src/app/demo/demo.spec.ts\" region=\"Lightswitch\" header=\"app/demo/demo.spec.ts (Lightswitch tests)\">\ndescribe('LightswitchComp', () => {\n it('#clicked() should toggle #isOn', () => {\n const comp = new LightswitchComponent();\n expect(comp.isOn).toBe(false, 'off at first');\n comp.clicked();\n expect(comp.isOn).toBe(true, 'on after click');\n comp.clicked();\n expect(comp.isOn).toBe(false, 'off after second click');\n });\n\n it('#clicked() should set #message to \"is on\"', () => {\n const comp =
|
||
|
|
}
|