5 lines
156 KiB
JSON
5 lines
156 KiB
JSON
|
{
|
||
|
|
"id": "guide/testing-components-scenarios",
|
||
|
|
"title": "Component testing scenarios",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/testing-components-scenarios.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=\"component-testing-scenarios\">Component testing scenarios<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-components-scenarios#component-testing-scenarios\"><i class=\"material-icons\">link</i></a></h1>\n<p>This guide explores common component testing use cases.</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<h2 id=\"component-binding\">Component binding<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-components-scenarios#component-binding\"><i class=\"material-icons\">link</i></a></h2>\n<p>In the example app, the <code>BannerComponent</code> presents static title text in the HTML template.</p>\n<p>After a few changes, the <code>BannerComponent</code> presents a dynamic title by binding to\nthe component's <code>title</code> property like this.</p>\n<code-example path=\"testing/src/app/banner/banner.component.ts\" region=\"component\" header=\"app/banner/banner.component.ts\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-banner',\n template: '<h1>{{title}}</h1>',\n styles: ['h1 { color: green; font-size: 350%}']\n})\nexport class BannerComponent {\n title = 'Test Tour of Heroes';\n}\n\n</code-example>\n<p>As minimal as this is, you decide to add a test to confirm that component\nactually displays the right content where you think it should.</p>\n<h4 id=\"query-for-the-h1\">Query for the <em><h1></em><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-components-scenarios#query-for-the-h1\"><i class=\"material-icons\">link</i></a></h4>\n<p>You'll write a sequence of tests that inspect the value of the <code><h1></code> element\nthat wraps the <em>title</em> property interpolation binding.</p>\n<p>You update the <code>beforeEach</code> to find that element with a standard HTML <code>querySelector</code>\nand assign it to the <code>h1</code> variable.</p>\n<code-example path=\"testing/src/app/banner/banner.component.spec.ts\" region=\"setup\" header=\"app/banner/banner.component.spec.ts (setup)\">\nlet component: BannerComponent;\nlet fixture: <a href=\"api/core/testing/ComponentFixture\" class=\"code-anchor\">ComponentFixture</a><BannerComponent>;\nlet h1: HTMLElement;\n\nbeforeEach(() => {\n TestBed.configureTestingModule({\n declarations: [ BannerComponent ],\n });\n fixture = TestBed.createComponent(BannerComponent);\n component = fixture.componentInstance; // BannerComponent test instance\n h1 = fixture.nativeElement.querySelector('h1');\n});\n\n</code-example>\n<a id=\"detect-changes\"></a>\n<h4 id=\"createcomponent-does-not-bind-data\"><em>createComponent()</em> does not bind data<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-components-scenarios#createcomponent-does-not-bind-data\"><i class=\"material-icons\">link</i></a></h4>\n<p>For your first test you'd like to see that the screen displays the default <code>title</code>.\nYour instinct is to write a test that immediately inspects the <code><h1></code> like this:</p>\n<code-example path=\"testing/src/app/banner/banner.component.spec.ts\" region=\"expect-h1-default-v1\">\nit('should display original title', () => {\n expect(h1.textContent).toContain(component.title);\n});\n\n</code-example>\n<p><e
|
||
|
|
}
|