5 lines
19 KiB
JSON
5 lines
19 KiB
JSON
{
|
|
"id": "api/upgrade/static/testing/createAngularJSTestingModule",
|
|
"title": "createAngularJSTestingModule",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/upgrade\", \"name\": \"@angular/upgrade\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/upgrade/static/testing\", \"name\": \"@angular/upgrade/static/testing\" } },\n { \"@type\": \"ListItem\", \"position\": 4, \"item\": { \"@id\": \"https://angular.io/api/upgrade/static/testing/createAngularJSTestingModule\", \"name\": \"createAngularJSTestingModule\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/upgrade\">@angular/upgrade</a> > <a href=\"api/upgrade/static/testing\">@angular/upgrade/static/testing</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/static/testing/src/create_angularjs_testing_module.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L15-L100\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/testing/src/create_angularjs_testing_module.ts#L15-L100\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"createangularjstestingmodule\">createAngularJSTestingModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/testing/createAngularJSTestingModule#createangularjstestingmodule\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label function\">function</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>A helper function to use when unit testing AngularJS services that depend upon downgraded Angular\nservices.</p>\n\n <p><a href=\"api/upgrade/static/testing/createAngularJSTestingModule#description\">See more...</a></p>\n </section>\n \n \n \n\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"> <span class=\"member-name\"><a href=\"api/upgrade/static/testing/createAngularJSTestingModule\" class=\"code-anchor\">createAngularJSTestingModule</a></span>(angularModules: any[]): string</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table function-overload-parameters\">\n <tbody>\n \n <tr class=\"function-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>angularModules</code>\n </td>\n <td class=\"param-type\"><code>any[]</code></td>\n <td class=\"param-description\">\n <p>a collection of Angular modules to include in the configuration.</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code>string</code></p>\n\n \n\n\n \n\n \n</div>\n\n\n \n\n \n\n<section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/testing/createAngularJSTestingModule#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>This function returns an AngularJS module that is configured to wire up the AngularJS and Angular\ninjectors without the need to actually bootstrap a hybrid application.\nThis makes it simpler and faster to unit test services.</p>\n<p>Use the returned AngularJS module in a call to\n<a href=\"https://docs.angularjs.org/api/ngMock/function/angular.mock.module\"><code>angular.mocks.module</code></a> to\ninclude this module in the unit test injector.</p>\n<p>In the following code snippet, we are configuring the <code>$injector</code> with two modules:\nThe AngularJS <code>ng1AppModule</code>, which is the AngularJS part of our hybrid application and the\n<code>Ng2AppModule</code>, which is the Angular part.</p>\n<code-example path=\"upgrade/static/ts/full/module.spec.ts\" region=\"angularjs-setup\">\nbeforeEach(module(<a href=\"api/upgrade/static/testing/createAngularJSTestingModule\" class=\"code-anchor\">createAngularJSTestingModule</a>([Ng2AppModule])));\nbeforeEach(module(ng1AppModule.name));\n\n</code-example>\n<p>Once this is done we can get hold of services via the AngularJS <code>$injector</code> as normal.\nServices that are (or have dependencies on) a downgraded Angular service, will be instantiated as\nneeded by the Angular root <code><a href=\"api/core/Injector\" class=\"code-anchor\">Injector</a></code>.</p>\n<p>In the following code snippet, <code>heroesService</code> is a downgraded Angular service that we are\naccessing from AngularJS.</p>\n<code-example path=\"upgrade/static/ts/full/module.spec.ts\" region=\"angularjs-spec\">\nit('should have access to the HeroesService', inject((heroesService: HeroesService) => {\n expect(heroesService).toBeDefined();\n }));\n\n</code-example>\n<div class=\"alert is-important\">\n<p>This helper is for testing services not components.\nFor Component testing you must still bootstrap a hybrid app. See <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> or\n<code><a href=\"api/upgrade/static/downgradeModule\" class=\"code-anchor\">downgradeModule</a></code> for more information.</p>\n</div>\n<div class=\"alert is-important\">\n<p>The resulting configuration does not wire up AngularJS digests to Zone hooks. It is the\nresponsibility of the test writer to call <code>$rootScope.$apply</code>, as necessary, to trigger\nAngularJS handlers of async events from Angular.</p>\n</div>\n<div class=\"alert is-important\">\n<p>The helper sets up global variables to hold the shared Angular and AngularJS injectors.</p>\n<ul>\n<li>Only call this helper once per spec.</li>\n<li>Do not use <code><a href=\"api/upgrade/static/testing/createAngularJSTestingModule\" class=\"code-anchor\">createAngularJSTestingModule</a></code> in the same spec as <code><a href=\"api/upgrade/static/testing/createAngularTestingModule\" class=\"code-anchor\">createAngularTestingModule</a></code>.</li>\n</ul>\n</div>\n<p>Here is the example application and its unit tests that use <code><a href=\"api/upgrade/static/testing/createAngularTestingModule\" class=\"code-anchor\">createAngularTestingModule</a></code>\nand <code><a href=\"api/upgrade/static/testing/createAngularJSTestingModule\" class=\"code-anchor\">createAngularJSTestingModule</a></code>.</p>\n<code-tabs>\n <code-pane header=\"module.spec.ts\" path=\"upgrade/static/ts/full/module.spec.ts\">\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {<a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a>} from '@angular/core/testing';\nimport {<a href=\"api/upgrade/static/testing/createAngularJSTestingModule\" class=\"code-anchor\">createAngularJSTestingModule</a>, <a href=\"api/upgrade/static/testing/createAngularTestingModule\" class=\"code-anchor\">createAngularTestingModule</a>} from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>/testing';\n\nimport {HeroesService, ng1AppModule, Ng2AppModule} from './module';\n\nconst {module, inject} = (window as any).angular.mock;\n\ndescribe('HeroesService (from Angular)', () => {\n beforeEach(() => {\n TestBed.configureTestingModule(\n {imports: [<a href=\"api/upgrade/static/testing/createAngularTestingModule\" class=\"code-anchor\">createAngularTestingModule</a>([ng1AppModule.name]), Ng2AppModule]});\n });\n\n it('should have access to the HeroesService', () => {\n const heroesService = TestBed.inject(HeroesService);\n expect(heroesService).toBeDefined();\n });\n});\n\n\ndescribe('HeroesService (from AngularJS)', () => {\n beforeEach(module(<a href=\"api/upgrade/static/testing/createAngularJSTestingModule\" class=\"code-anchor\">createAngularJSTestingModule</a>([Ng2AppModule])));\n beforeEach(module(ng1AppModule.name));\n\n it('should have access to the HeroesService', inject((heroesService: HeroesService) => {\n expect(heroesService).toBeDefined();\n }));\n});\n\n\n</code-pane>\n <code-pane header=\"module.ts\" path=\"upgrade/static/ts/full/module.ts\">\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>, <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>, <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a>, <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>, <a href=\"api/core/Injector\" class=\"code-anchor\">Injector</a>, <a href=\"api/core/Input\" class=\"code-anchor\">Input</a>, <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>, <a href=\"api/core/Output\" class=\"code-anchor\">Output</a>} from '@angular/core';\nimport {<a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>} from '@angular/platform-browser';\nimport {<a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a>} from '@angular/platform-browser-dynamic';\nimport {<a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>, <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a>, <a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a>, <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>} from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\ndeclare var angular: ng.IAngularStatic;\n\nexport interface Hero {\n name: string;\n description: string;\n}\n\nexport class TextFormatter {\n titleCase(value: string) {\n return value.replace(/((^|\\s)[a-z])/g, (_, c) => c.toUpperCase());\n }\n}\n\n// This Angular component will be \"downgraded\" to be used in AngularJS\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'ng2-heroes',\n // This template uses the upgraded `ng1-hero` component\n // Note that because its element is compiled by Angular we must use camelCased attribute names\n template: `<header><ng-content selector=\"h1\"></ng-content></header>\n <ng-content selector=\".extra\"></ng-content>\n <div *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes\">\n <ng1-hero [hero]=\"hero\" (onRemove)=\"removeHero.emit(hero)\"><strong>Super Hero</strong></ng1-hero>\n </div>\n <button (click)=\"addHero.emit()\">Add Hero</button>`,\n})\nexport class Ng2HeroesComponent {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() heroes!: Hero[];\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() addHero = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a>();\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() removeHero = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a>();\n}\n\n// This Angular service will be \"downgraded\" to be used in AngularJS\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class HeroesService {\n heroes: Hero[] = [\n {name: 'superman', description: 'The man of steel'},\n {name: 'wonder woman', description: 'Princess of the Amazons'},\n {name: 'thor', description: 'The hammer-wielding god'}\n ];\n\n constructor(textFormatter: TextFormatter) {\n // Change all the hero names to title case, using the \"upgraded\" AngularJS service\n this.heroes.forEach((hero: Hero) => hero.name = textFormatter.titleCase(hero.name));\n }\n\n addHero() {\n this.heroes =\n this.heroes.concat([{name: 'Kamala Khan', description: 'Epic shape-shifting healer'}]);\n }\n\n removeHero(hero: Hero) {\n this.heroes = this.heroes.filter((item: Hero) => item !== hero);\n }\n}\n\n// This Angular directive will act as an interface to the \"upgraded\" AngularJS component\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({selector: 'ng1-hero'})\nexport class Ng1HeroComponentWrapper extends <a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a> {\n // The names of the input and output properties here must match the names of the\n // `<` and `&` bindings in the AngularJS component that is being wrapped\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() hero!: Hero;\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() onRemove!: <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><void>;\n\n constructor(elementRef: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>, injector: <a href=\"api/core/Injector\" class=\"code-anchor\">Injector</a>) {\n // We must pass the name of the directive as used by AngularJS to the super\n super('ng1Hero', elementRef, injector);\n }\n}\n\n// This <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> represents the Angular pieces of the application\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],\n providers: [\n HeroesService,\n // Register an Angular provider whose value is the \"upgraded\" AngularJS service\n {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']}\n ],\n // All components that are to be \"downgraded\" must be declared as `entryComponents`\n entryComponents: [Ng2HeroesComponent],\n // We must import `<a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>` to get access to the AngularJS core services\n imports: [<a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>, <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>]\n})\nexport class Ng2AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) {}\n\n ngDoBootstrap() {\n // We bootstrap the AngularJS app.\n this.upgrade.bootstrap(document.body, [ng1AppModule.name]);\n }\n}\n\n\n// This Angular 1 module represents the AngularJS pieces of the application\nexport const ng1AppModule: ng.IModule = angular.module('ng1AppModule', []);\n\n// This AngularJS component will be \"upgraded\" to be used in Angular\nng1AppModule.component('ng1Hero', {\n bindings: {hero: '<', onRemove: '&'},\n transclude: true,\n template: `<div class=\"title\" ng-transclude></div>\n <h2>{{ $ctrl.hero.name }}</h2>\n <p>{{ $ctrl.hero.description }}</p>\n <button ng-click=\"$ctrl.onRemove()\">Remove</button>`\n});\n\n// This AngularJS service will be \"upgraded\" to be used in Angular\nng1AppModule.service('textFormatter', [TextFormatter]);\n\n// Register an AngularJS service, whose value is the \"downgraded\" Angular injectable.\nng1AppModule.factory('heroesService', <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a>(HeroesService) as any);\n\n// This directive will act as the interface to the \"downgraded\" Angular component\nng1AppModule.directive('ng2Heroes', <a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>({component: Ng2HeroesComponent}));\n\n// This is our top level application component\nng1AppModule.component('exampleApp', {\n // We inject the \"downgraded\" HeroesService into this AngularJS component\n // (We don't need the `HeroesService` type for AngularJS DI - it just helps with TypeScript\n // compilation)\n controller: [\n 'heroesService',\n function(heroesService: HeroesService) {\n this.heroesService = heroesService;\n }\n ],\n // This template makes use of the downgraded `ng2-heroes` component\n // Note that because its element is compiled by AngularJS we must use kebab-case attributes\n // for inputs and outputs\n template: `<link rel=\"stylesheet\" href=\"./styles.css\">\n <ng2-heroes [heroes]=\"$ctrl.heroesService.heroes\" (add-hero)=\"$ctrl.heroesService.addHero()\" (remove-hero)=\"$ctrl.heroesService.removeHero($event)\">\n <h1>Heroes</h1>\n <p class=\"extra\">There are {{ $ctrl.heroesService.heroes.length }} heroes.</p>\n </ng2-heroes>`\n});\n\n\n// We bootstrap the Angular module as we would do in a normal Angular app.\n// (We are using the dynamic <a href=\"api/animations/browser\" class=\"code-anchor\">browser</a> platform as this example has not been compiled AOT.)\n<a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a>().bootstrapModule(Ng2AppModule);\n\n\n</code-pane>\n</code-tabs>\n\n \n</section>\n\n\n\n \n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/upgrade/static/testing\n - api/upgrade/static/testing/createAngularTestingModule\n-->\n<!-- links from this doc:\n - /api\n - api/animations/browser\n - api/common/NgForOf\n - api/core/Component\n - api/core/Directive\n - api/core/ElementRef\n - api/core/EventEmitter\n - api/core/Injectable\n - api/core/Injector\n - api/core/Input\n - api/core/NgModule\n - api/core/Output\n - api/core/testing/TestBed\n - api/platform-browser-dynamic/platformBrowserDynamic\n - api/platform-browser/BrowserModule\n - api/upgrade\n - api/upgrade/static\n - api/upgrade/static/UpgradeComponent\n - api/upgrade/static/UpgradeModule\n - api/upgrade/static/downgradeComponent\n - api/upgrade/static/downgradeInjectable\n - api/upgrade/static/downgradeModule\n - api/upgrade/static/testing\n - api/upgrade/static/testing/createAngularJSTestingModule#createangularjstestingmodule\n - api/upgrade/static/testing/createAngularJSTestingModule#description\n - api/upgrade/static/testing/createAngularTestingModule\n - https://docs.angularjs.org/api/ngMock/function/angular.mock.module\n - https://github.com/angular/angular/edit/master/packages/upgrade/static/testing/src/create_angularjs_testing_module.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L15-L100\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/testing/src/create_angularjs_testing_module.ts#L15-L100\n-->"
|
|
} |