angular-test

问题 I am using jest.js for testing with my angular app. here is the directive I use in html: <textarea errorHighlighter formControlName="Url" name="Url" cols="50" rows="5" placeholder="Enter Page URL" (ngModelChange)="pageUrlChanges($event)"></textarea> here is my directive.ts file: import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2 } from '@angular/core'; import { NgControl } from '@angular/forms'; @Directive({ selector: '[errorHighlighter]' }) export class

问题 When using the following configuration for a test fixture, I get complaints that the tag cannot be found. Substituting the MockSelectionToolComponent directly in AppModule works fine, so must be something else... // Add the imported module to the imports array in beforeEach beforeEach(() => { TestBed.configureTestingModule({ declarations: [MockSelectionToolComponent], imports: [ AppModule ] }).overrideModule(AppModule, { remove: { declarations: [SelectionToolComponent] } }).compileComponents(

问题 I have a Component which embeds an Angular Material MatSelect element. In a test that I am writing, I need to simulate the selection of a certain option and make sure that the selectionChange Observable associated to that MatSelect element actually fires. So far my code is const mySelect: MatSelect = fixture.nativeElement.querySelector('#mySelect'); mySelect.value = 'new value'; But unfortunately this is not making the mySelect.selectionChange notify, and therefore my test work. Any idea on

问题 I have a pipe that sanatises HTML as below: import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'sanitiseHtml' }) export class SanitiseHtmlPipe implements PipeTransform { constructor(private _sanitizer: DomSanitizer) {} transform(value: any): any { return this._sanitizer.bypassSecurityTrustHtml(value); } } I want to test it as below: describe('Pipe: Sanatiser', () => { let pipe: SanitiseHtmlPipe; beforeEach(() => { pipe

问题 Does TestBed.overrideModule replace previously added providers? I have a Component c1 which uses a dynamically created component c2 . I read that I need to use overrideModule to add entryComponents entry in the TestBed . So I did this TestBed.configureTestingModule({ declarations: [ NewPracticeQuestionComponent, DialogBoxComponent, ShowErrorsComponent], imports:[ReactiveFormsModule,HttpClientTestingModule], providers:[WebToBackendInterfaceService, HelperService, AuthService, {provide

问题 I am trying to mock some http requests while testing my Angular app. I am following popular examples over the internet that uses fakeBackendProvider by utilizing Angular's MockBackEnd and MockConnection. Though I understand the code well I would like to understand more in-detail the internal working of these providers. How do they intercept http requests? For instance when my code make calls to http.get() who gets hooked to what, who replaces what, and how? Any reference material would be

问题 I have a simple case. The standard AppComponent of an Angular app contains a ChildComponent which is defined in its own module ChildModule . The template of ChildComponent is very simple <div class="child" (click)="testClick($event)"></div> ChildComponent has an even simpler testClick(event) method that just logs a message on the console. testClick(event) { console.log(event); } Now I want to build a test on AppComponent simulating a click on ChildComponent . This is the code of the test

问题 I have the following directive. When applied to an input element, it checks for characters and calls preventDefault when the character is forbidden: @Directive({ selector: '[cdtPreventInput]' }) export class PreventInputDirective implements OnInit { // the list of characters that are to be prevented @Input() cdtPreventInput: String; constructor() { } ngOnInit() { if (!this.cdtPreventInput) { throw new Error('cdtPreventInput cannot be used without providing a list of characters.'); } }

问题 I have an Angular CLI project with a NgModule located outside of the /src folder (eventually this NgModule will be packaged as a npm module but for now I'm just leaving it outside of /src ). I'm trying to write unit tests for this NgModule but ng test doesn't seem to pick up .spec.ts files outside of the /src folder. I have tried altering the path in /src/test.ts : // Original const context = require.context('./', true, /\.spec\.ts$/); // Does not work const context = require.context('../',

问题 I have an Angular CLI project with a NgModule located outside of the /src folder (eventually this NgModule will be packaged as a npm module but for now I'm just leaving it outside of /src ). I'm trying to write unit tests for this NgModule but ng test doesn't seem to pick up .spec.ts files outside of the /src folder. I have tried altering the path in /src/test.ts : // Original const context = require.context('./', true, /\.spec\.ts$/); // Does not work const context = require.context('../',