+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 | 1x + + + + + + + + + +1x +1x + + | import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-fixture',
+ template: `
+ <button (click)="value = value - 1">Decrement</button>
+ <span data-testid="value">{{ value }}</span>
+ <button (click)="value = value + 1">Increment</button>
+ `,
+})
+export class SingleComponent {
+ value = 0;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | 1x + + + + + +1x +1x +2x + + + + + + +1x +1x + + + + + + + + + + +1x +1x + + | import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+ selector: 'app-button',
+ template: ` <button (click)="raise.emit()">{{ name }}</button> `,
+})
+export class NestedButtonComponent {
+ @Input() name: string;
+ @Output() raise = new EventEmitter<void>();
+}
+
+@Component({
+ selector: 'app-value',
+ template: ` <span data-testid="value">{{ value }}</span> `,
+})
+export class NestedValueComponent {
+ @Input() value: number;
+}
+
+@Component({
+ selector: 'app-fixture',
+ template: `
+ <app-button (raise)="value = value - 1" name="Decrement"></app-button>
+ <app-value [value]="value"></app-value>
+ <app-button (raise)="value = value + 1" name="Increment"></app-button>
+ `,
+})
+export class NestedContainerComponent {
+ value = 0;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 | 1x + + + + + + + + + + + +1x +1x +1x + + | import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-fixture',
+ template: `
+ <button (click)="value = value - 1">Decrement</button>
+ <span data-testid="value">{{ value }}</span>
+ <button (click)="value = value + 1">Increment</button>
+
+ <button (click)="sendValue.emit(value)">Send</button>
+ `,
+})
+export class InputOutputComponent {
+ @Input() value = 0;
+ @Output() sendValue = new EventEmitter<number>();
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 | 1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + +1x + + + + + +1x + + +280x + +840x +840x +484x +484x +484x + +208x + +136x + +140x + + + + +840x + + + + | import { Component } from '@angular/core';
+import { FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+
+@Component({
+ selector: 'app-fixture',
+ template: `
+ <form [formGroup]="form" name="form">
+ <div>
+ <label for="name">Name</label>
+ <input type="text" id="name" name="name" formControlName="name" required />
+ </div>
+
+ <div>
+ <label for="score">Score</label>
+ <input type="number" id="score" name="score" formControlName="score" required min="0" max="10" />
+ </div>
+
+ <div>
+ <label for="color">Color</label>
+ <select id="color" name="color" formControlName="color">
+ <option value="">---</option>
+ <option *ngFor="let color of colors" [value]="color.id">{{ color.value }}</option>
+ </select>
+ </div>
+
+ <div role="alert" *ngIf="formErrors.length">
+ <p *ngFor="let error of formErrors">{{ error }}</p>
+ </div>
+ </form>
+ `,
+})
+export class FormsComponent {
+ colors = [
+ { id: 'R', value: 'Red' },
+ { id: 'B', value: 'Blue' },
+ { id: 'G', value: 'Green' },
+ ];
+ form = this.formBuilder.group({
+ name: ['', Validators.required],
+ score: [0, { validators: [Validators.min(1), Validators.max(10)], updateOn: 'blur' }],
+ color: ['', Validators.required],
+ });
+
+ constructor(private formBuilder: FormBuilder) {}
+
+ get formErrors() {
+ return Object.keys(this.form.controls)
+ .map((formKey) => {
+ const controlErrors: ValidationErrors = this.form.get(formKey).errors;
+ if (controlErrors != null) {
+ return Object.keys(controlErrors).map((keyError) => {
+ const error = controlErrors[keyError];
+ switch (keyError) {
+ case 'required':
+ return `${formKey} is required`;
+ case 'min':
+ return `${formKey} must be greater than ${error.min}`;
+ case 'max':
+ return `${formKey} must be lesser than ${error.max}`;
+ }
+ });
+ }
+ })
+ .reduce((errors, value) => errors.concat(value), [])
+ .filter(Boolean);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 | 1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + +1x + + + + + +1x + + +264x + +792x +792x +444x +444x +444x + +224x + +100x + +120x + + + + +792x + + + + | import { Component } from '@angular/core';
+import { FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+
+@Component({
+ selector: 'app-fixture',
+ template: `
+ <form [formGroup]="form" name="form">
+ <mat-form-field>
+ <input matInput placeholder="Name" name="name" formControlName="name" required />
+ </mat-form-field>
+
+ <mat-form-field>
+ <input
+ matInput
+ type="number"
+ placeholder="Score"
+ name="score"
+ formControlName="score"
+ required
+ min="0"
+ max="10"
+ />
+ </mat-form-field>
+
+ <mat-form-field>
+ <mat-select placeholder="Color" name="color" formControlName="color">
+ <mat-option value="">---</mat-option>
+ <mat-option *ngFor="let color of colors" [value]="color.id">{{ color.value }}</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <div role="alert" *ngIf="formErrors.length">
+ <p *ngFor="let error of formErrors">{{ error }}</p>
+ </div>
+ </form>
+ `,
+ styles: [
+ `
+ form {
+ display: flex;
+ flex-direction: column;
+ }
+
+ form > * {
+ width: 100%;
+ }
+
+ [role='alert'] {
+ color: red;
+ }
+ `,
+ ],
+})
+export class MaterialFormsComponent {
+ colors = [
+ { id: 'R', value: 'Red' },
+ { id: 'B', value: 'Blue' },
+ { id: 'G', value: 'Green' },
+ ];
+ form = this.formBuilder.group({
+ name: ['', Validators.required],
+ score: [0, [Validators.min(1), Validators.max(10)]],
+ color: ['', Validators.required],
+ });
+
+ constructor(private formBuilder: FormBuilder) {}
+
+ get formErrors() {
+ return Object.keys(this.form.controls)
+ .map((formKey) => {
+ const controlErrors: ValidationErrors = this.form.get(formKey).errors;
+ if (controlErrors != null) {
+ return Object.keys(controlErrors).map((keyError) => {
+ const error = controlErrors[keyError];
+ switch (keyError) {
+ case 'required':
+ return `${formKey} is required`;
+ case 'min':
+ return `${formKey} must be greater than ${error.min}`;
+ case 'max':
+ return `${formKey} must be lesser than ${error.max}`;
+ }
+ });
+ }
+ })
+ .reduce((errors, value) => errors.concat(value), [])
+ .filter(Boolean);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 | 1x + + + + +1x +1x + + +2x + + + +1x + + + +14x + + + + + + + + + + + + +1x +3x + + | import { Component, Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class CounterService {
+ private _value = 0;
+
+ increment() {
+ this._value += 1;
+ }
+
+ decrement() {
+ this._value -= 1;
+ }
+
+ value() {
+ return this._value;
+ }
+}
+
+@Component({
+ selector: 'app-fixture',
+ template: `
+ <button (click)="counter.decrement()">Decrement</button>
+ <span data-testid="value">{{ counter.value() }}</span>
+ <button (click)="counter.increment()">Increment</button>
+ `,
+ providers: [CounterService],
+})
+export class ComponentWithProviderComponent {
+ constructor(public counter: CounterService) {}
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 | 1x +1x + +1x +1x +1x + +2x +1x + + +1x +4x + + +1x +4x +4x + + + + + + + + + + +1x +1x +1x + + +2x + + + +1x + + + | import { Component } from '@angular/core';
+import { createSelector, Store, createAction, createReducer, on, select } from '@ngrx/store';
+
+const increment = createAction('increment');
+const decrement = createAction('decrement');
+const counterReducer = createReducer(
+ 0,
+ on(increment, (state) => state + 1),
+ on(decrement, (state) => state - 1),
+);
+
+export function reducer(state, action) {
+ return counterReducer(state, action);
+}
+
+const selectValue = createSelector(
+ (state: any) => state.value,
+ (value) => value * 10,
+);
+
+@Component({
+ selector: 'app-fixture',
+ template: `
+ <button (click)="decrement()">Decrement</button>
+ <span data-testid="value">{{ value | async }}</span>
+ <button (click)="increment()">Increment</button>
+ `,
+})
+export class WithNgRxStoreComponent {
+ value = this.store.pipe(select(selectValue));
+ constructor(private store: Store<any>) {}
+
+ increment() {
+ this.store.dispatch(increment());
+ }
+
+ decrement() {
+ this.store.dispatch(decrement());
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 | 1x +1x + +1x + + + + + + + + + + + + +1x +1x +1x + + +1x + + + | import { Component } from '@angular/core';
+import { createSelector, Store, select } from '@ngrx/store';
+
+export const selectItems = createSelector(
+ (state: any) => state.items,
+ (items) => items,
+);
+
+@Component({
+ selector: 'app-fixture',
+ template: `
+ <ul>
+ <li *ngFor="let item of items | async" (click)="send(item)" [attr.aria-label]="item">{{ item }}</li>
+ </ul>
+ `,
+})
+export class WithNgRxMockStoreComponent {
+ items = this.store.pipe(select(selectItems));
+ constructor(private store: Store<any>) {}
+
+ send(item: string) {
+ this.store.dispatch({ type: '[Item List] send', item });
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 | 1x + + + + +1x +3x +3x + +3x + + +3x + + + +1x +3x + + + +1x +3x + + + | import { Directive, HostListener, ElementRef, Input, OnInit } from '@angular/core';
+
+@Directive({
+ selector: '[appSpoiler]',
+})
+export class SpoilerDirective implements OnInit {
+ @Input() hidden = 'SPOILER';
+ @Input() visible = 'I am visible now...';
+
+ constructor(private el: ElementRef) {}
+
+ ngOnInit() {
+ this.el.nativeElement.textContent = this.hidden;
+ }
+
+ @HostListener('mouseover')
+ onMouseOver() {
+ this.el.nativeElement.textContent = this.visible;
+ }
+
+ @HostListener('mouseleave')
+ onMouseLeave() {
+ this.el.nativeElement.textContent = this.hidden;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 | 1x +1x +1x + + + + + + + + + + + + +1x + + + + + + + + + + + + +1x +6x +4x +4x +4x + + + + + + +1x + | import { OnInit, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+
+@Component({
+ selector: 'app-master',
+ template: `
+ <a [routerLink]="'./detail/one'">Load one</a> | <a [routerLink]="'./detail/two'">Load two</a> |
+ <a [routerLink]="'./detail/three'">Load three</a> |
+
+ <hr />
+
+ <router-outlet></router-outlet>
+ `,
+})
+export class MasterComponent {}
+
+@Component({
+ selector: 'app-detail',
+ template: `
+ <h2>Detail {{ id | async }}</h2>
+
+ <p>{{ text | async }} {{ subtext | async }}</p>
+
+ <a [routerLink]="'../..'">Back to parent</a>
+ <a routerLink="/hidden-detail">hidden x</a>
+ `,
+})
+export class DetailComponent {
+ id = this.route.paramMap.pipe(map((params) => params.get('id')));
+ text = this.route.queryParams.pipe(map((params) => params['text']));
+ subtext = this.route.queryParams.pipe(map((params) => params['subtext']));
+ constructor(private route: ActivatedRoute) {}
+}
+
+@Component({
+ selector: 'app-detail-hidden',
+ template: ` You found the treasure! `,
+})
+export class HiddenDetailComponent {}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 | 1x + +1x + + + + + +1x +1x + + | import { Component, InjectionToken, Inject } from '@angular/core';
+
+export const DATA = new InjectionToken<{ text: string }>('Components Data');
+
+@Component({
+ selector: 'app-fixture',
+ template: ` {{ data.text }} `,
+})
+export class DataInjectedComponent {
+ constructor(@Inject(DATA) public data: { text: string }) {}
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 | 1x + + + + + + + + + +1x + | import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+ template: `
+ <p>
+ <ng-content></ng-content>
+ </p>
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CellComponent {}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 | 1x +1x + +1x + + + + + + + +1x + + + + + + + + + + + + + + + +1x +2x +2x + + | import { Component, Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+export class Customer {
+ id: string;
+ name: string;
+}
+
+@Injectable({
+ providedIn: 'root',
+})
+export class CustomersService {
+ load(): Observable<Customer[]> {
+ return of([]);
+ }
+}
+
+@Component({
+ selector: 'app-fixture',
+ template: `
+ <ul>
+ <li *ngFor="let customer of customers$ | async">
+ {{ customer.name }}
+ </li>
+ </ul>
+ `,
+})
+export class CustomersComponent {
+ customers$ = this.service.load();
+ constructor(private service: CustomersService) {}
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| 00-single-component.ts | +
+
+ |
+ 100% | +5/5 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| 01-nested-component.ts | +
+
+ |
+ 100% | +15/15 | +100% | +0/0 | +100% | +2/2 | +100% | +8/8 | +
| 02-input-output.ts | +
+
+ |
+ 100% | +8/8 | +100% | +0/0 | +100% | +1/1 | +100% | +4/4 | +
| 03-forms.ts | +
+
+ |
+ 100% | +18/18 | +100% | +5/5 | +100% | +5/5 | +100% | +16/16 | +
| 04-forms-with-material.ts | +
+
+ |
+ 100% | +18/18 | +100% | +5/5 | +100% | +5/5 | +100% | +16/16 | +
| 05-component-provider.ts | +
+
+ |
+ 100% | +12/12 | +100% | +0/0 | +100% | +5/5 | +100% | +8/8 | +
| 06-with-ngrx-store.ts | +
+
+ |
+ 100% | +19/19 | +100% | +0/0 | +100% | +8/8 | +100% | +17/17 | +
| 07-with-ngrx-mock-store.ts | +
+
+ |
+ 81.82% | +9/11 | +100% | +0/0 | +50% | +2/4 | +77.78% | +7/9 | +
| 08-directive.ts | +
+
+ |
+ 100% | +14/14 | +100% | +0/0 | +100% | +4/4 | +100% | +10/10 | +
| 09-router.ts | +
+
+ |
+ 100% | +19/19 | +100% | +0/0 | +100% | +4/4 | +100% | +10/10 | +
| 10-inject-token-dependency.ts | +
+
+ |
+ 100% | +6/6 | +100% | +0/0 | +100% | +1/1 | +100% | +4/4 | +
| 11-ng-content.ts | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +0/0 | +100% | +2/2 | +
| 12-service-component.ts | +
+
+ |
+ 91.67% | +11/12 | +100% | +0/0 | +50% | +1/2 | +87.5% | +7/8 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| material.module.ts | +
+
+ |
+ 100% | +6/6 | +100% | +0/0 | +100% | +0/0 | +100% | +4/4 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 | 1x + +1x +1x + + + + +1x + | import { NgModule } from '@angular/core';
+
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+
+@NgModule({
+ exports: [MatInputModule, MatSelectModule],
+})
+export class MaterialModule {}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| app | +
+
+ |
+ 100% | +6/6 | +100% | +0/0 | +100% | +0/0 | +100% | +4/4 | +
| app/examples | +
+
+ |
+ 98.14% | +158/161 | +100% | +10/10 | +92.86% | +39/42 | +97.39% | +112/115 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| public_api.ts | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +0/0 | +100% | +1/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 | + + + +1x +3x + + +9x +3x + + +6x +42x +6x + + +36x +36x +33x + + + +6x + + +3x + +3x + + +1x +2x + + + + + | import { Type, Provider } from '@angular/core';
+
+export type Mock<T> = T & { [K in keyof T]: T[K] & jest.Mock };
+
+export function createMock<T>(type: Type<T>): Mock<T> {
+ const mock: any = {};
+
+ function mockFunctions(proto: any) {
+ if (!proto) {
+ return;
+ }
+
+ for (const prop of Object.getOwnPropertyNames(proto)) {
+ if (prop === 'constructor') {
+ continue;
+ }
+
+ const descriptor = Object.getOwnPropertyDescriptor(proto, prop);
+ if (typeof descriptor.value === 'function') {
+ mock[prop] = jest.fn();
+ }
+ }
+
+ mockFunctions(Object.getPrototypeOf(proto));
+ }
+
+ mockFunctions(type.prototype);
+
+ return mock;
+}
+
+export function provideMock<T>(type: Type<T>): Provider {
+ return {
+ provide: type,
+ useValue: createMock(type),
+ };
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| create-mock.ts | +
+
+ |
+ 100% | +15/15 | +100% | +6/6 | +100% | +3/3 | +100% | +15/15 | +
| index.ts | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +0/0 | +100% | +1/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 | 1x + | export * from './create-mock'; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 | + + + +1x + | /* + * Public API Surface of testing-library + */ + +export * from './lib'; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| migrations/4_0_0 | +
+
+ |
+ 100% | +11/11 | +100% | +0/0 | +100% | +3/3 | +100% | +11/11 | +
| migrations/4_0_0/rules | +
+
+ |
+ 100% | +56/56 | +100% | +4/4 | +100% | +10/10 | +100% | +56/56 | +
| migrations/5_1_2 | +
+
+ |
+ 100% | +19/19 | +83.33% | +5/6 | +100% | +5/5 | +100% | +19/19 | +
| migrations/5_1_2/rules | +
+
+ |
+ 100% | +12/12 | +100% | +0/0 | +100% | +3/3 | +100% | +12/12 | +
| src | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +0/0 | +100% | +3/3 | +
| src/lib | +
+
+ |
+ 91.81% | +213/232 | +76.25% | +61/80 | +88.89% | +48/54 | +92.2% | +201/218 | +
| src/lib/user-events | +
+
+ |
+ 96.3% | +78/81 | +77.5% | +31/40 | +100% | +15/15 | +96.05% | +73/76 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | +
+
+ |
+ 100% | +11/11 | +100% | +0/0 | +100% | +3/3 | +100% | +11/11 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | +1x +1x + + +9x + + + + + + + + + + + + + +1x +3x +3x +3x +3x + +3x +3x +3x + + + | import { Rule } from '@angular-devkit/schematics';
+import { TslintFixTask } from '@angular-devkit/schematics/tasks';
+import * as path from 'path';
+
+function createRule(ruleName: string): TslintFixTask {
+ return new TslintFixTask(
+ {
+ rulesDirectory: path.join(__dirname, 'rules'),
+ rules: {
+ [ruleName]: [true],
+ },
+ },
+ {
+ includes: ['**/*.spec.ts', '**/*.test.ts'],
+ silent: false,
+ },
+ );
+}
+
+export default function (): Rule {
+ return (_, context) => {
+ const noCreateComponentRule = createRule('no-create-component');
+ const noComponentParametersRule = createRule('no-component-parameters');
+ const noComponentPropertyRule = createRule('no-component-property');
+
+ const noCreateComponentRuleId = context.addTask(noCreateComponentRule);
+ const noComponentParametersRuleId = context.addTask(noComponentParametersRule, [noCreateComponentRuleId]);
+ context.addTask(noComponentPropertyRule, [noComponentParametersRuleId]);
+ };
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| noComponentParametersRule.ts | +
+
+ |
+ 100% | +23/23 | +100% | +2/2 | +100% | +3/3 | +100% | +23/23 | +
| noComponentPropertyRule.ts | +
+
+ |
+ 100% | +12/12 | +100% | +2/2 | +100% | +2/2 | +100% | +12/12 | +
| noCreateComponentRule.ts | +
+
+ |
+ 100% | +21/21 | +100% | +0/0 | +100% | +5/5 | +100% | +21/21 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 | +1x +1x + + +1x +1x +1x + +1x + +1x + +5x + +4x +4x +2x + +2x + +2x +2x + +2x + + + +2x +2x +2x + +2x +2x +2x + +2x + + + + +4x + + + | import * as ts from 'typescript';
+import { Replacement, RuleFailure, Rules } from 'tslint';
+import { tsquery } from '@phenomnomnominal/tsquery';
+
+const IS_COMPONENT_PROPERTY_QUERY =
+ 'CallExpression:has(Identifier[name="render"]) > ObjectLiteralExpression:first-child';
+const RENDER_OPTIONS_QUERY = 'CallExpression:has(Identifier[name="render"]) > ObjectLiteralExpression:last-child';
+const COMPONENT_PARAMETERS_PROPERTY_VALUE_QUERY = 'PropertyAssignment:has(Identifier[name="parameters"]) :last-child';
+
+const FAILURE_MESSAGE = 'Found `parameters` parameter, use `componentProperties` instead.';
+
+export class Rule extends Rules.AbstractRule {
+ public apply(ast: ts.SourceFile): Array<RuleFailure> {
+ return tsquery(ast, IS_COMPONENT_PROPERTY_QUERY)
+ .map((result) => {
+ const [parameterNode] = tsquery(result, COMPONENT_PARAMETERS_PROPERTY_VALUE_QUERY);
+ if (!parameterNode) {
+ return [];
+ }
+ const [renderOptionsNode] = tsquery(ast, RENDER_OPTIONS_QUERY);
+
+ const renderOptionsText = renderOptionsNode.getFullText();
+ const bracketIndex = renderOptionsText.indexOf('{');
+ const renderOptions =
+ renderOptionsText.substring(0, bracketIndex + 1) +
+ `componentProperties:${parameterNode.getFullText()},` +
+ renderOptionsText.substr(bracketIndex + 1);
+
+ const replacement = new Replacement(renderOptionsNode.getStart(), renderOptionsNode.getWidth(), renderOptions);
+ const start = renderOptionsNode.getStart();
+ const end = renderOptionsNode.getEnd();
+
+ const replacementOriginal = new Replacement(parameterNode.getStart(), parameterNode.getWidth(), '');
+ const startOriginal = renderOptionsNode.getStart();
+ const endOriginal = renderOptionsNode.getEnd();
+
+ return [
+ new RuleFailure(ast, startOriginal, endOriginal, FAILURE_MESSAGE, this.ruleName, replacementOriginal),
+ new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement),
+ ];
+ })
+ .reduce((rules, rule) => rules.concat(rule), []);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 | +1x +1x + + +1x +1x + +1x + +1x + +7x +4x +4x +4x +4x + +4x + + + + | import * as ts from 'typescript';
+import { Replacement, RuleFailure, Rules } from 'tslint';
+import { tsquery } from '@phenomnomnominal/tsquery';
+
+const IS_COMPONENT_PROPERTY_QUERY =
+ 'CallExpression:has(Identifier[name="render"]) > ObjectLiteralExpression:first-child';
+const COMPONENT_PROPERTY_VALUE_QUERY = 'PropertyAssignment:has(Identifier[name="component"]) :last-child';
+
+const FAILURE_MESSAGE = 'Found component propety syntax, signature looks different.';
+
+export class Rule extends Rules.AbstractRule {
+ public apply(ast: ts.SourceFile): Array<RuleFailure> {
+ return tsquery(ast, IS_COMPONENT_PROPERTY_QUERY).map((result) => {
+ const [valueNode] = tsquery(result, COMPONENT_PROPERTY_VALUE_QUERY);
+ const replacement = new Replacement(result.getStart(), result.getWidth(), (valueNode || result).getText());
+ const start = result.getStart();
+ const end = result.getEnd();
+
+ return new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement);
+ });
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 | +1x +1x + +1x +1x +1x + +1x + +1x + +1x + +9x +9x + +9x + + + +9x +6x +6x +6x + +6x + + + + +9x +6x +6x +6x + +6x + + + + | import * as ts from 'typescript';
+import { Replacement, RuleFailure, Rules } from 'tslint';
+import { tsquery } from '@phenomnomnominal/tsquery';
+
+const CREATE_COMPONENT_IDENTIFIER = 'Identifier[name="createComponent"]';
+const CREATE_COMPONENT_IMPORT_QUERY = `ImportSpecifier > ${CREATE_COMPONENT_IDENTIFIER}`;
+const CREATE_COMPONENT_CALL_EXPRESSION_QUERY = `CallExpression > ${CREATE_COMPONENT_IDENTIFIER}`;
+
+const RENDER = 'render';
+
+const FAILURE_MESSAGE = 'Found `createComponent`, use `render` instead.';
+
+export class Rule extends Rules.AbstractRule {
+ public apply(ast: ts.SourceFile): Array<RuleFailure> {
+ const imports = this.getImports(ast);
+ const usages = this.getUsages(ast);
+
+ return [...imports, ...usages];
+ }
+
+ private getImports(ast: ts.SourceFile): Array<RuleFailure> {
+ return tsquery(ast, CREATE_COMPONENT_IMPORT_QUERY).map((result) => {
+ const replacement = new Replacement(result.getStart(), result.getWidth(), RENDER);
+ const start = result.getStart();
+ const end = result.getEnd();
+
+ return new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement);
+ });
+ }
+
+ private getUsages(ast: ts.SourceFile): Array<RuleFailure> {
+ return tsquery(ast, CREATE_COMPONENT_CALL_EXPRESSION_QUERY).map((result) => {
+ const replacement = new Replacement(result.getStart(), result.getWidth(), RENDER);
+ const start = result.getStart();
+ const end = result.getEnd();
+
+ return new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement);
+ });
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | +
+
+ |
+ 100% | +19/19 | +83.33% | +5/6 | +100% | +5/5 | +100% | +19/19 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 | 1x +1x +1x +1x + + +2x + + + + + + + + + + + + + + +2x + + + + + +2x + + + +2x + +2x +2x + +2x +1x +1x +1x + + + +2x + + +1x +2x +2x + +2x + + + | import { Rule, chain, Tree, SchematicContext } from '@angular-devkit/schematics';
+import { TslintFixTask } from '@angular-devkit/schematics/tasks';
+import * as path from 'path';
+import { stripIndents } from '@angular-devkit/core/src/utils/literals';
+
+function createRule(ruleName: string): TslintFixTask {
+ return new TslintFixTask(
+ {
+ rulesDirectory: path.join(__dirname, 'rules'),
+ rules: {
+ [ruleName]: [true],
+ },
+ },
+ {
+ includes: ['**/*.spec.ts', '**/*.test.ts'],
+ silent: false,
+ },
+ );
+}
+
+function displayInformation(tree, context: SchematicContext) {
+ context.logger.info(stripIndents`
+ @angular-extensions/testing-library has moved to @testing-library/angular.
+
+ Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260
+ `);
+
+ return tree;
+}
+
+function updatePackageJson(host: Tree) {
+ Eif (host.exists('package.json')) {
+ // tslint:disable-next-line: no-non-null-assertion
+ const sourceText = host.read('package.json')!.toString('utf-8');
+ const json = JSON.parse(sourceText);
+
+ if (json['devDependencies'] && json['devDependencies']['@angular-extensions/testing-library']) {
+ json['devDependencies']['@testing-library/angular'] = '^6.0.0';
+ delete json['devDependencies']['@angular-extensions/testing-library'];
+ host.overwrite('package.json', JSON.stringify(json, null, 2));
+ }
+ }
+
+ return host;
+}
+
+export default function (): Rule {
+ return (host, context) => {
+ context.addTask(createRule('no-angular-extensions-import'));
+
+ return chain([displayInformation, updatePackageJson])(host, context);
+ };
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| noAngularExtensionsImportRule.ts | +
+
+ |
+ 100% | +12/12 | +100% | +0/0 | +100% | +3/3 | +100% | +12/12 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 | +1x +1x + +1x + + +1x + +1x + +4x +4x + + + +4x + +4x +4x +4x + +4x + + + + | import * as ts from 'typescript';
+import { Replacement, RuleFailure, Rules } from 'tslint';
+import { tsquery } from '@phenomnomnominal/tsquery';
+
+const IMPORT_QUERY = `ImportDeclaration StringLiteral[value="@angular-extensions/testing-library"]`;
+
+const FAILURE_MESSAGE =
+ 'Found the library `@angular-extensions/testing-library`, use `@testing-library/angular` instead.';
+
+export class Rule extends Rules.AbstractRule {
+ public apply(ast: ts.SourceFile): Array<RuleFailure> {
+ const imports = this.getImports(ast);
+ return imports;
+ }
+
+ private getImports(ast: ts.SourceFile): Array<RuleFailure> {
+ return tsquery(ast, IMPORT_QUERY).map((result) => {
+ // replace text between (single) quotes
+ const replacement = new Replacement(result.getStart() + 1, result.getWidth() - 2, '@testing-library/angular');
+ const start = result.getStart();
+ const end = result.getEnd();
+
+ return new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement);
+ });
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| public_api.ts | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +0/0 | +100% | +3/3 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 | + +17x + + + + +17x +3x + + +1x + + + +3x + + + + + +17x +70x + + | import { Config } from './models';
+
+let config: Config = {
+ defaultImports: [],
+ dom: {},
+};
+
+export function configure(newConfig: Partial<Config> | ((config: Partial<Config>) => Partial<Config>)) {
+ if (typeof newConfig === 'function') {
+ // Pass the existing config out to the provided function
+ // and accept a delta in return
+ newConfig = newConfig(config);
+ }
+
+ // Merge the incoming config delta
+ config = {
+ ...config,
+ ...newConfig,
+ };
+}
+
+export function getConfig() {
+ return config;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| config.ts | +
+
+ |
+ 100% | +7/7 | +100% | +2/2 | +100% | +2/2 | +100% | +7/7 | +
| testing-library.ts | +
+
+ |
+ 91.56% | +206/225 | +75.64% | +59/78 | +88.46% | +46/52 | +91.94% | +194/211 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 | 17x +17x +17x +17x +17x +17x +17x + + + + + + + + + + + + + +17x +17x + +17x + + + + + + + + + + +17x + + + + + + + + + + + + + + + + + +70x + +70x + +70x + +964x +964x +964x + + + + +70x + + + + + + +70x +70x +2x + +2x +2x + + + +70x +70x + +70x +3x +3x +3x +3x + + + +70x + +70x + +70x +70x + + +1082x +973x + + + + +70x +3x +3x + + +70x +70x + + +70x +5810x +962x +962x +962x + +5810x + + +70x +2x + +2x + +2x +1x + + +2x + + +70x +70x +70x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + +3x + + +70x + + + + + + + +2x + + + + + + + + + + + + + + + + + + + +70x +7x +7x + +63x + + + + + + +72x +40x + +72x + + + +72x + + + + + +5x +5x +9x + + + + + + + + + + + + + + + + + + + +70x +70x + + +70x +70x + + +70x + + + +70x + +70x +70x + + +70x +70x + + +70x + + + + + + + + + + +8x +45x +45x + + + + + + + + + + + + +6x +2x +2x +2x +2x +4x + +26x + +26x + +4x + + +6x +62x +62x + + + + +71x + + + +70x +3x + +70x + + +17x +71x +71x + + + + +17x + + + + + +87x +4193x +1392x +1392x + +4x + +11x + + +2x + + +2801x + + +4193x + + + + + + + +1026x +1026x +1026x + +109x + + + + + + + + + +17x +1411x +2x +2x +2x + +1411x + + + + + +17x + + + + + +2x + + + + + + +3x + + + + + +17x + + + + + + + + + + +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x + + +17x + | import { Component, Type, NgZone, SimpleChange, OnChanges, SimpleChanges } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import {
+ FireFunction,
+ FireObject,
+ getQueriesForElement as dtlGetQueriesForElement,
+ prettyDOM as dtlPrettyDOM,
+ waitFor as dtlWaitFor,
+ waitForElementToBeRemoved as dtlWaitForElementToBeRemoved,
+ fireEvent as dtlFireEvent,
+ screen as dtlScreen,
+ queries as dtlQueries,
+ waitForOptions as dtlWaitForOptions,
+ configure as dtlConfigure,
+} from '@testing-library/dom';
+import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
+import { getConfig } from './config';
+import { createSelectOptions, createType, tab } from './user-events';
+
+const mountedFixtures = new Set<ComponentFixture<any>>();
+
+export async function render<ComponentType>(
+ component: Type<ComponentType>,
+ renderOptions?: RenderComponentOptions<ComponentType>,
+): Promise<RenderResult<ComponentType, ComponentType>>;
+export async function render<DirectiveType, WrapperType = WrapperComponent>(
+ component: Type<DirectiveType>,
+ renderOptions?: RenderDirectiveOptions<DirectiveType, WrapperType>,
+): Promise<RenderResult<DirectiveType, WrapperType>>;
+
+export async function render<SutType, WrapperType = SutType>(
+ sut: Type<SutType>,
+ renderOptions: RenderComponentOptions<SutType> | RenderDirectiveOptions<SutType, WrapperType> = {},
+): Promise<RenderResult<SutType>> {
+ const {
+ detectChanges: detectChangesOnRender = true,
+ declarations = [],
+ imports = [],
+ providers = [],
+ schemas = [],
+ queries,
+ template,
+ wrapper = WrapperComponent,
+ componentProperties = {},
+ componentProviders = [],
+ excludeComponentDeclaration = false,
+ routes,
+ removeAngularAttributes = false,
+ } = renderOptions as RenderDirectiveOptions<SutType, WrapperType>;
+
+ const config = getConfig();
+
+ dtlConfigure({
+ eventWrapper: (cb) => {
+ const result = cb();
+ detectChangesForMountedFixtures();
+ return result;
+ },
+ ...config.dom,
+ });
+
+ TestBed.configureTestingModule({
+ declarations: addAutoDeclarations(sut, { declarations, excludeComponentDeclaration, template, wrapper }),
+ imports: addAutoImports({ imports: imports.concat(config.defaultImports), routes }),
+ providers: [...providers],
+ schemas: [...schemas],
+ });
+
+ Eif (componentProviders) {
+ componentProviders
+ .reduce((acc, provider) => acc.concat(provider), [])
+ .forEach((p) => {
+ const { provide, ...provider } = p;
+ TestBed.overrideProvider(provide, provider);
+ });
+ }
+
+ const fixture = createComponentFixture(sut, { template, wrapper });
+ setComponentProperties(fixture, { componentProperties });
+
+ if (removeAngularAttributes) {
+ fixture.nativeElement.removeAttribute('ng-version');
+ const idAttribute = fixture.nativeElement.getAttribute('id');
+ Eif (idAttribute && idAttribute.startsWith('root')) {
+ fixture.nativeElement.removeAttribute('id');
+ }
+ }
+
+ mountedFixtures.add(fixture);
+
+ await TestBed.compileComponents();
+
+ let isAlive = true;
+ fixture.componentRef.onDestroy(() => (isAlive = false));
+
+ function detectChanges() {
+ if (isAlive) {
+ fixture.detectChanges();
+ }
+ }
+
+ // Call ngOnChanges on initial render
+ if (hasOnChangesHook(fixture.componentInstance)) {
+ const changes = getChangesObj(null, fixture.componentInstance);
+ fixture.componentInstance.ngOnChanges(changes);
+ }
+
+ Eif (detectChangesOnRender) {
+ detectChanges();
+ }
+
+ const eventsWithDetectChanges = Object.keys(dtlFireEvent).reduce((events, key) => {
+ events[key] = (element: HTMLElement, options?: {}) => {
+ const result = dtlFireEvent[key](element, options);
+ detectChanges();
+ return result;
+ };
+ return events;
+ }, {} as FireFunction & FireObject);
+
+ const rerender = (rerenderedProperties: Partial<SutType>) => {
+ const changes = getChangesObj(fixture.componentInstance, rerenderedProperties);
+
+ setComponentProperties(fixture, { componentProperties: rerenderedProperties });
+
+ if (hasOnChangesHook(fixture.componentInstance)) {
+ fixture.componentInstance.ngOnChanges(changes);
+ }
+
+ detectChanges();
+ };
+
+ let router = routes ? TestBed.inject(Router) : null;
+ const zone = TestBed.inject(NgZone);
+ const navigate = async (elementOrPath: Element | string, basePath = '') => {
+ if (!router) {
+ router = TestBed.inject(Router);
+ }
+
+ const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href');
+ const [path, params] = (basePath + href).split('?');
+ const queryParams = params
+ ? params.split('&').reduce((qp, q) => {
+ const [key, value] = q.split('=');
+ qp[key] = value;
+ return qp;
+ }, {})
+ : undefined;
+
+ const doNavigate = () =>
+ router.navigate([path], {
+ queryParams,
+ });
+
+ let result;
+
+ if (zone) {
+ await zone.run(() => (result = doNavigate()));
+ } else {
+ result = doNavigate();
+ }
+
+ detectChanges();
+ return result;
+ };
+
+ function componentWaitFor<T>(
+ callback,
+ options: dtlWaitForOptions = { container: fixture.nativeElement },
+ ): Promise<T> {
+ return waitForWrapper(detectChanges, callback, options);
+ }
+
+ function componentWaitForElementToBeRemoved<T>(
+ callback: (() => T) | T,
+ options: dtlWaitForOptions = { container: fixture.nativeElement },
+ ): Promise<T> {
+ return waitForElementToBeRemovedWrapper(detectChanges, callback, options);
+ }
+
+ return {
+ fixture,
+ detectChanges,
+ navigate,
+ rerender,
+ debugElement: fixture.debugElement.query(By.directive(sut)),
+ container: fixture.nativeElement,
+ debug: (element = fixture.nativeElement, maxLength, options) =>
+ Array.isArray(element)
+ ? element.forEach((e) => console.log(dtlPrettyDOM(e, maxLength, options)))
+ : console.log(dtlPrettyDOM(element, maxLength, options)),
+ type: createType(eventsWithDetectChanges),
+ selectOptions: createSelectOptions(eventsWithDetectChanges),
+ tab,
+ waitFor: componentWaitFor,
+ waitForElementToBeRemoved: componentWaitForElementToBeRemoved,
+ ...replaceFindWithFindAndDetectChanges(
+ fixture.nativeElement,
+ dtlGetQueriesForElement(fixture.nativeElement, queries),
+ ),
+ ...eventsWithDetectChanges,
+ };
+}
+
+function createComponentFixture<SutType>(
+ component: Type<SutType>,
+ { template, wrapper }: Pick<RenderDirectiveOptions<SutType, any>, 'template' | 'wrapper'>,
+): ComponentFixture<SutType> {
+ if (template) {
+ TestBed.overrideTemplate(wrapper, template);
+ return TestBed.createComponent(wrapper);
+ }
+ return TestBed.createComponent(component);
+}
+
+function setComponentProperties<SutType>(
+ fixture: ComponentFixture<SutType>,
+ { componentProperties = {} }: Pick<RenderDirectiveOptions<SutType, any>, 'componentProperties'>,
+) {
+ for (const key of Object.keys(componentProperties)) {
+ fixture.componentInstance[key] = componentProperties[key];
+ }
+ return fixture;
+}
+
+function hasOnChangesHook<SutType>(componentInstance: SutType): componentInstance is SutType & OnChanges {
+ return (
+ 'ngOnChanges' in componentInstance && typeof (componentInstance as SutType & OnChanges).ngOnChanges === 'function'
+ );
+}
+
+function getChangesObj<SutType>(oldProps: Partial<SutType> | null, newProps: Partial<SutType>) {
+ const isFirstChange = oldProps === null;
+ return Object.keys(newProps).reduce<SimpleChanges>(
+ (changes, key) => ({
+ ...changes,
+ [key]: new SimpleChange(isFirstChange ? null : oldProps[key], newProps[key], isFirstChange),
+ }),
+ {},
+ );
+}
+
+function addAutoDeclarations<SutType>(
+ component: Type<SutType>,
+ {
+ declarations,
+ excludeComponentDeclaration,
+ template,
+ wrapper,
+ }: Pick<
+ RenderDirectiveOptions<SutType, any>,
+ 'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'
+ >,
+) {
+ const wrappers = () => {
+ return template ? [wrapper] : [];
+ };
+
+ const components = () => {
+ return excludeComponentDeclaration ? [] : [component];
+ };
+
+ return [...declarations, ...wrappers(), ...components()];
+}
+
+function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'>) {
+ const animations = () => {
+ const animationIsDefined =
+ imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1;
+ return animationIsDefined ? [] : [NoopAnimationsModule];
+ };
+
+ const routing = () => {
+ return routes ? [RouterTestingModule.withRoutes(routes)] : [];
+ };
+
+ return [...imports, ...animations(), ...routing()];
+}
+
+/**
+ * Wrap waitFor to poke the Angular change detection cycle before invoking the callback
+ */
+async function waitForWrapper<T>(
+ detectChanges: () => void,
+ callback: () => T extends Promise<any> ? never : T,
+ options?: dtlWaitForOptions,
+): Promise<T> {
+ return await dtlWaitFor(() => {
+ detectChanges();
+ return callback();
+ }, options);
+}
+
+/**
+ * Wrap waitForElementToBeRemovedWrapper to poke the Angular change detection cycle before invoking the callback
+ */
+async function waitForElementToBeRemovedWrapper<T>(
+ detectChanges: () => void,
+ callback: (() => T) | T,
+ options?: dtlWaitForOptions,
+): Promise<T> {
+ let cb;
+ if (typeof callback !== 'function') {
+ const elements = (Array.isArray(callback) ? callback : [callback]) as HTMLElement[];
+ const getRemainingElements = elements.map((element) => {
+ let parent = element.parentElement;
+ while (parent.parentElement) {
+ parent = parent.parentElement;
+ }
+ return () => (parent.contains(element) ? element : null);
+ });
+ cb = () => getRemainingElements.map((c) => c()).filter(Boolean);
+ } else {
+ cb = callback;
+ }
+
+ return await dtlWaitForElementToBeRemoved(() => {
+ detectChanges();
+ return cb();
+ }, options);
+}
+
+function cleanup() {
+ mountedFixtures.forEach(cleanupAtFixture);
+}
+
+function cleanupAtFixture(fixture) {
+ if (!fixture.nativeElement.getAttribute('ng-version') && fixture.nativeElement.parentNode === document.body) {
+ document.body.removeChild(fixture.nativeElement);
+ }
+ mountedFixtures.delete(fixture);
+}
+
+Eif (typeof afterEach === 'function' && !process.env.ATL_SKIP_AUTO_CLEANUP) {
+ afterEach(async () => {
+ cleanup();
+ });
+}
+
+@Component({ selector: 'wrapper-component', template: '' })
+class WrapperComponent {}
+
+/**
+ * Wrap findBy queries to poke the Angular change detection cycle
+ */
+function replaceFindWithFindAndDetectChanges<T>(container: HTMLElement, originalQueriesForContainer: T): T {
+ return Object.keys(originalQueriesForContainer).reduce((newQueries, key) => {
+ if (key.startsWith('find')) {
+ const getByQuery = dtlQueries[key.replace('find', 'get')];
+ newQueries[key] = async (text, options, waitOptions) => {
+ // original implementation at https://github.com/testing-library/dom-testing-library/blob/master/src/query-helpers.js
+ const result = await waitForWrapper(
+ detectChangesForMountedFixtures,
+ () => getByQuery(container, text, options),
+ waitOptions,
+ );
+ return result;
+ };
+ } else {
+ newQueries[key] = originalQueriesForContainer[key];
+ }
+
+ return newQueries;
+ }, {} as T);
+}
+
+/**
+ * Call detectChanges for all fixtures
+ */
+function detectChangesForMountedFixtures() {
+ mountedFixtures.forEach((fixture) => {
+ try {
+ fixture.detectChanges();
+ } catch (err) {
+ Iif (!err.message.startsWith('ViewDestroyedError')) {
+ throw err;
+ }
+ }
+ });
+}
+
+/**
+ * Wrap dom-fireEvent to poke the Angular change detection cycle after an event is fired
+ */
+const fireEvent = Object.keys(dtlFireEvent).reduce((events, key) => {
+ events[key] = (element: HTMLElement, options?: {}) => {
+ const result = dtlFireEvent[key](element, options);
+ detectChangesForMountedFixtures();
+ return result;
+ };
+ return events;
+}, {} as typeof dtlFireEvent);
+
+/**
+ * Re-export screen with patched queries
+ */
+const screen = replaceFindWithFindAndDetectChanges(document.body, dtlScreen);
+
+/**
+ * Re-export waitFor with patched waitFor
+ */
+async function waitFor<T>(callback: () => T extends Promise<any> ? never : T, options?: dtlWaitForOptions): Promise<T> {
+ return waitForWrapper(detectChangesForMountedFixtures, callback, options);
+}
+
+/**
+ * Re-export waitForElementToBeRemoved with patched waitForElementToBeRemoved
+ */
+async function waitForElementToBeRemoved<T>(callback: (() => T) | T, options?: dtlWaitForOptions): Promise<T> {
+ return waitForElementToBeRemovedWrapper(detectChangesForMountedFixtures, callback, options);
+}
+
+/**
+ * Re-export userEvent with the patched fireEvent
+ */
+const userEvent = {
+ type: createType(fireEvent),
+ selectOptions: createSelectOptions(fireEvent),
+ tab: tab,
+};
+
+/**
+ * Manually export otherwise we get the following error while running Jest tests
+ * TypeError: Cannot set property fireEvent of [object Object] which has only a getter
+ * exports.fireEvent = fireEvent
+ */
+export {
+ buildQueries,
+ getByLabelText,
+ getAllByLabelText,
+ queryByLabelText,
+ queryAllByLabelText,
+ findByLabelText,
+ findAllByLabelText,
+ getByPlaceholderText,
+ getAllByPlaceholderText,
+ queryByPlaceholderText,
+ queryAllByPlaceholderText,
+ findByPlaceholderText,
+ findAllByPlaceholderText,
+ getByText,
+ getAllByText,
+ queryByText,
+ queryAllByText,
+ findByText,
+ findAllByText,
+ getByAltText,
+ getAllByAltText,
+ queryByAltText,
+ queryAllByAltText,
+ findByAltText,
+ findAllByAltText,
+ getByTitle,
+ getAllByTitle,
+ queryByTitle,
+ queryAllByTitle,
+ findByTitle,
+ findAllByTitle,
+ getByDisplayValue,
+ getAllByDisplayValue,
+ queryByDisplayValue,
+ queryAllByDisplayValue,
+ findByDisplayValue,
+ findAllByDisplayValue,
+ getByRole,
+ getAllByRole,
+ queryByRole,
+ queryAllByRole,
+ findByRole,
+ findAllByRole,
+ getByTestId,
+ getAllByTestId,
+ queryByTestId,
+ queryAllByTestId,
+ findByTestId,
+ findAllByTestId,
+ createEvent,
+ getDefaultNormalizer,
+ getElementError,
+ getNodeText,
+ getQueriesForElement,
+ getRoles,
+ isInaccessible,
+ logDOM,
+ logRoles,
+ prettyDOM,
+ queries,
+ queryAllByAttribute,
+ queryByAttribute,
+ queryHelpers,
+ within,
+} from '@testing-library/dom';
+
+export { fireEvent, screen, userEvent, waitFor, waitForElementToBeRemoved };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | +
+
+ |
+ 100% | +6/6 | +100% | +0/0 | +100% | +0/0 | +100% | +4/4 | +
| selectOptions.ts | +
+
+ |
+ 91.43% | +32/35 | +61.11% | +11/18 | +100% | +7/7 | +91.18% | +31/34 | +
| tab.ts | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| type.ts | +
+
+ |
+ 100% | +37/37 | +90.91% | +20/22 | +100% | +7/7 | +100% | +35/35 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 | 17x +17x +17x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +17x + | import { createType } from './type';
+import { createSelectOptions } from './selectOptions';
+import { tab } from './tab';
+
+export interface UserEvents {
+ /**
+ * @deprecated
+ * Use `userEvents.type` from @testing-library/user-event
+ *
+ * @description
+ * Types a value in an input field with the same interactions as the user would do.
+ *
+ * @argument
+ * element: HTMLElement - the form field to type in
+ * value: string | number - the value to type in
+ *
+ * @example
+ * component.type(component.getByLabelText('Firstname'), 'Tim')
+ * component.type(component.getByLabelText('Firstname'), 'Tim', { delay: 100 })
+ * component.type(component.getByLabelText('Firstname'), 'Tim', { allAtOnce: true })
+ */
+ type: ReturnType<typeof createType>;
+
+ /**
+ * @deprecated
+ * Use `userEvents.selectOptions` from @testing-library/user-event
+ *
+ * @description
+ * Select an option(s) from a select field with the same interactions as the user would do.
+ *
+ * @argument
+ * element: HTMLElement - the select box to select an option in
+ * matcher: Matcher | Matcher[] - the value(s) to select
+ *
+ * @example
+ * component.selectOptions(component.getByLabelText('Fruit'), 'Blueberry')
+ * component.selectOptions(component.getByLabelText('Fruit'), ['Blueberry'. 'Grape'])
+ */
+ selectOptions: ReturnType<typeof createSelectOptions>;
+
+ /**
+ * @deprecated
+ * Use `userEvents.tab` from @testing-library/user-event
+ *
+ * @description
+ * Fires a tab event changing the document.activeElement in the same way the browser does.
+ *
+ * @argument
+ * shift: can be set to true to invert tab direction (default false)
+ * focusTrap: a container element to restrict the tabbing within (default document)
+ *
+ * @example
+ * component.tab()
+ */
+ tab: typeof tab;
+}
+
+export { createType, createSelectOptions, tab };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 | 17x + + +17x + +16x +16x +16x +16x +16x +16x + + + + +20x + + + + + + +20x + +20x +20x +20x +20x +20x +20x + +20x +20x + + +87x + + + +16x + +16x +16x + + +16x +16x + +16x + + + + +16x + +16x +16x +20x +20x + +16x + + + + + | import { FireFunction, FireObject, Matcher, screen, ByRoleOptions } from '@testing-library/dom';
+
+// implementation from https://github.com/testing-library/user-event
+export function createSelectOptions(fireEvent: FireFunction & FireObject) {
+ function clickElement(element: HTMLElement) {
+ fireEvent.mouseOver(element);
+ fireEvent.mouseMove(element);
+ fireEvent.mouseDown(element);
+ fireEvent.focus(element);
+ fireEvent.mouseUp(element);
+ fireEvent.click(element);
+ }
+
+ function selectOption(select: HTMLSelectElement, index: number, options: Matcher | ByRoleOptions) {
+ const query =
+ typeof options === 'string'
+ ? (({ name: new RegExp(options, 'i') } as unknown) as ByRoleOptions)
+ : options instanceof RegExp
+ ? (({ name: options } as unknown) as ByRoleOptions)
+ : typeof options === 'function'
+ ? (({ name: options } as unknown) as ByRoleOptions)
+ : options;
+ const option = screen.getByRole('option', query) as HTMLOptionElement;
+
+ fireEvent.mouseOver(option);
+ fireEvent.mouseMove(option);
+ fireEvent.mouseDown(option);
+ fireEvent.focus(option);
+ fireEvent.mouseUp(option);
+ fireEvent.click(option, { ctrlKey: index > 0 });
+
+ option.selected = true;
+ fireEvent.change(select);
+ }
+
+ return async function selectOptions(
+ element: HTMLElement,
+ options: Matcher | ByRoleOptions | (Matcher | ByRoleOptions)[],
+ ) {
+ const selectElement = element as HTMLSelectElement;
+
+ Eif (selectElement.selectedOptions) {
+ Array.from(selectElement.selectedOptions).forEach((option) => (option.selected = false));
+ }
+
+ const focusedElement = document.activeElement;
+ const wasAnotherElementFocused = focusedElement !== document.body && focusedElement !== selectElement;
+
+ Iif (wasAnotherElementFocused) {
+ fireEvent.mouseMove(focusedElement);
+ fireEvent.mouseLeave(focusedElement);
+ }
+
+ clickElement(selectElement);
+
+ const values = Array.isArray(options) ? options : [options];
+ values
+ .filter((_, index) => index === 0 || selectElement.multiple)
+ .forEach((val, index) => selectOption(selectElement, index, val));
+
+ Iif (wasAnotherElementFocused) {
+ fireEvent.blur(focusedElement);
+ }
+ };
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 | 17x + + + + + + +17x +4x + + | import userEvent from '@testing-library/user-event';
+
+export interface ITabUserOptions {
+ shift?: boolean;
+ focusTrap?: Document | Element;
+}
+
+export function tab(options?: ITabUserOptions) {
+ return userEvent.tab(options);
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 | + + +6x +6x + + + + + + + + + + + + + + + + + + + + + + + +17x + +14x +3x +2x + +3x + + + +87x +15x +15x +15x + +15x +1x + + +14x +2x +2x + +2x +2x + + +12x +12x +12x +180x +180x +180x + +180x +6x + + +180x + + + + + +180x +174x + + + + + +174x +174x +174x +169x + + + + + + + + + + +180x + + + + + + +12x + + + | import { FireFunction, FireObject } from '@testing-library/dom';
+
+function wait(time) {
+ return new Promise(function (resolve) {
+ setTimeout(() => resolve(), time);
+ });
+}
+
+export interface TypeOptions {
+ /**
+ * @description
+ * Types the text at once rather than on character at a time
+ *
+ * @default
+ * false
+ */
+ allAtOnce?: boolean;
+ /**
+ * @description
+ * Number of milliseconds until the next character is typed
+ *
+ * @default
+ * 0
+ */
+ delay?: number;
+}
+
+// implementation from https://github.com/testing-library/user-event
+export function createType(fireEvent: FireFunction & FireObject) {
+ function createFireChangeEvent(value: string) {
+ return function fireChangeEvent(event) {
+ if (value !== event.target.value) {
+ fireEvent.change(event.target);
+ }
+ event.target.removeEventListener('blur', fireChangeEvent);
+ };
+ }
+
+ return async function type(element: HTMLElement, value: string | number, options?: TypeOptions) {
+ const { allAtOnce = false, delay = 0 } = options || {};
+ const inputElement = element as HTMLInputElement;
+ const initialValue = inputElement.value;
+
+ if (inputElement.disabled) {
+ return;
+ }
+
+ if (allAtOnce || value === '') {
+ Eif (!inputElement.readOnly) {
+ fireEvent.input(inputElement, { target: { value } });
+ }
+ inputElement.addEventListener('blur', createFireChangeEvent(initialValue));
+ return;
+ }
+
+ const text = value.toString();
+ let actuallyTyped = '';
+ for (let index = 0; index < text.length; index++) {
+ const char = text[index];
+ const key = char;
+ const keyCode = char.charCodeAt(0);
+
+ if (delay > 0) {
+ await wait(delay);
+ }
+
+ const downEvent = fireEvent.keyDown(inputElement, {
+ key: key,
+ keyCode: keyCode,
+ which: keyCode,
+ });
+
+ if (downEvent) {
+ const pressEvent = fireEvent.keyPress(inputElement, {
+ key: key,
+ keyCode,
+ charCode: keyCode,
+ });
+
+ Eif (pressEvent) {
+ actuallyTyped += key;
+ if (!inputElement.readOnly) {
+ fireEvent.input(inputElement, {
+ target: {
+ value: actuallyTyped,
+ },
+ bubbles: true,
+ cancelable: true,
+ });
+ }
+ }
+ }
+
+ fireEvent.keyUp(inputElement, {
+ key: key,
+ keyCode: keyCode,
+ which: keyCode,
+ });
+ }
+
+ inputElement.addEventListener('blur', createFireChangeEvent(initialValue));
+ };
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 | + + + + +17x +17x +17x + | /* + * Public API Surface of testing-library + */ + +export * from './lib/models'; +export * from './lib/user-events'; +export * from './lib/config'; +export * from './lib/testing-library'; + |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 | 1x - - - - - - - - - -1x -1x - - | import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-fixture',
- template: `
- <button (click)="value = value - 1">Decrement</button>
- <span data-testid="value">{{ value }}</span>
- <button (click)="value = value + 1">Increment</button>
- `,
-})
-export class SingleComponent {
- value = 0;
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 | 1x - - - - - -1x -1x -2x - - - - - - -1x -1x - - - - - - - - - - -1x -1x - - | import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
- selector: 'app-button',
- template: ` <button (click)="raise.emit()">{{ name }}</button> `,
-})
-export class NestedButtonComponent {
- @Input() name: string;
- @Output() raise = new EventEmitter<void>();
-}
-
-@Component({
- selector: 'app-value',
- template: ` <span data-testid="value">{{ value }}</span> `,
-})
-export class NestedValueComponent {
- @Input() value: number;
-}
-
-@Component({
- selector: 'app-fixture',
- template: `
- <app-button (raise)="value = value - 1" name="Decrement"></app-button>
- <app-value [value]="value"></app-value>
- <app-button (raise)="value = value + 1" name="Increment"></app-button>
- `,
-})
-export class NestedContainerComponent {
- value = 0;
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 | 1x - - - - - - - - - - - -1x -1x -1x - - | import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
- selector: 'app-fixture',
- template: `
- <button (click)="value = value - 1">Decrement</button>
- <span data-testid="value">{{ value }}</span>
- <button (click)="value = value + 1">Increment</button>
-
- <button (click)="sendValue.emit(value)">Send</button>
- `,
-})
-export class InputOutputComponent {
- @Input() value = 0;
- @Output() sendValue = new EventEmitter<number>();
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 | 1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x -1x - - - - -1x - - - - - -1x - - -280x - -840x -840x -484x -484x -484x - -208x - -136x - -140x - - - - -840x - - - - | import { Component } from '@angular/core';
-import { FormBuilder, Validators, ValidationErrors } from '@angular/forms';
-
-@Component({
- selector: 'app-fixture',
- template: `
- <form [formGroup]="form" name="form">
- <div>
- <label for="name">Name</label>
- <input type="text" id="name" name="name" formControlName="name" required />
- </div>
-
- <div>
- <label for="score">Score</label>
- <input type="number" id="score" name="score" formControlName="score" required min="0" max="10" />
- </div>
-
- <div>
- <label for="color">Color</label>
- <select id="color" name="color" formControlName="color">
- <option value="">---</option>
- <option *ngFor="let color of colors" [value]="color.id">{{ color.value }}</option>
- </select>
- </div>
-
- <div role="alert" *ngIf="formErrors.length">
- <p *ngFor="let error of formErrors">{{ error }}</p>
- </div>
- </form>
- `,
-})
-export class FormsComponent {
- colors = [
- { id: 'R', value: 'Red' },
- { id: 'B', value: 'Blue' },
- { id: 'G', value: 'Green' },
- ];
- form = this.formBuilder.group({
- name: ['', Validators.required],
- score: [0, { validators: [Validators.min(1), Validators.max(10)], updateOn: 'blur' }],
- color: ['', Validators.required],
- });
-
- constructor(private formBuilder: FormBuilder) {}
-
- get formErrors() {
- return Object.keys(this.form.controls)
- .map((formKey) => {
- const controlErrors: ValidationErrors = this.form.get(formKey).errors;
- if (controlErrors != null) {
- return Object.keys(controlErrors).map((keyError) => {
- const error = controlErrors[keyError];
- switch (keyError) {
- case 'required':
- return `${formKey} is required`;
- case 'min':
- return `${formKey} must be greater than ${error.min}`;
- case 'max':
- return `${formKey} must be lesser than ${error.max}`;
- }
- });
- }
- })
- .reduce((errors, value) => errors.concat(value), [])
- .filter(Boolean);
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 | 1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x -1x - - - - -1x - - - - - -1x - - -264x - -792x -792x -444x -444x -444x - -224x - -100x - -120x - - - - -792x - - - - | import { Component } from '@angular/core';
-import { FormBuilder, Validators, ValidationErrors } from '@angular/forms';
-
-@Component({
- selector: 'app-fixture',
- template: `
- <form [formGroup]="form" name="form">
- <mat-form-field>
- <input matInput placeholder="Name" name="name" formControlName="name" required />
- </mat-form-field>
-
- <mat-form-field>
- <input
- matInput
- type="number"
- placeholder="Score"
- name="score"
- formControlName="score"
- required
- min="0"
- max="10"
- />
- </mat-form-field>
-
- <mat-form-field>
- <mat-select placeholder="Color" name="color" formControlName="color">
- <mat-option value="">---</mat-option>
- <mat-option *ngFor="let color of colors" [value]="color.id">{{ color.value }}</mat-option>
- </mat-select>
- </mat-form-field>
-
- <div role="alert" *ngIf="formErrors.length">
- <p *ngFor="let error of formErrors">{{ error }}</p>
- </div>
- </form>
- `,
- styles: [
- `
- form {
- display: flex;
- flex-direction: column;
- }
-
- form > * {
- width: 100%;
- }
-
- [role='alert'] {
- color: red;
- }
- `,
- ],
-})
-export class MaterialFormsComponent {
- colors = [
- { id: 'R', value: 'Red' },
- { id: 'B', value: 'Blue' },
- { id: 'G', value: 'Green' },
- ];
- form = this.formBuilder.group({
- name: ['', Validators.required],
- score: [0, [Validators.min(1), Validators.max(10)]],
- color: ['', Validators.required],
- });
-
- constructor(private formBuilder: FormBuilder) {}
-
- get formErrors() {
- return Object.keys(this.form.controls)
- .map((formKey) => {
- const controlErrors: ValidationErrors = this.form.get(formKey).errors;
- if (controlErrors != null) {
- return Object.keys(controlErrors).map((keyError) => {
- const error = controlErrors[keyError];
- switch (keyError) {
- case 'required':
- return `${formKey} is required`;
- case 'min':
- return `${formKey} must be greater than ${error.min}`;
- case 'max':
- return `${formKey} must be lesser than ${error.max}`;
- }
- });
- }
- })
- .reduce((errors, value) => errors.concat(value), [])
- .filter(Boolean);
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 | 1x - - - - -1x -1x - - -2x - - - -1x - - - -14x - - - - - - - - - - - - -1x -3x - - | import { Component, Injectable } from '@angular/core';
-
-@Injectable({
- providedIn: 'root',
-})
-export class CounterService {
- private _value = 0;
-
- increment() {
- this._value += 1;
- }
-
- decrement() {
- this._value -= 1;
- }
-
- value() {
- return this._value;
- }
-}
-
-@Component({
- selector: 'app-fixture',
- template: `
- <button (click)="counter.decrement()">Decrement</button>
- <span data-testid="value">{{ counter.value() }}</span>
- <button (click)="counter.increment()">Increment</button>
- `,
- providers: [CounterService],
-})
-export class ComponentWithProviderComponent {
- constructor(public counter: CounterService) {}
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 | 1x -1x - -1x -1x -1x - -2x -1x - - -1x -4x - - -1x -4x -4x - - - - - - - - - - -1x -1x -1x - - -2x - - - -1x - - - | import { Component } from '@angular/core';
-import { createSelector, Store, createAction, createReducer, on, select } from '@ngrx/store';
-
-const increment = createAction('increment');
-const decrement = createAction('decrement');
-const counterReducer = createReducer(
- 0,
- on(increment, (state) => state + 1),
- on(decrement, (state) => state - 1),
-);
-
-export function reducer(state, action) {
- return counterReducer(state, action);
-}
-
-const selectValue = createSelector(
- (state: any) => state.value,
- (value) => value * 10,
-);
-
-@Component({
- selector: 'app-fixture',
- template: `
- <button (click)="decrement()">Decrement</button>
- <span data-testid="value">{{ value | async }}</span>
- <button (click)="increment()">Increment</button>
- `,
-})
-export class WithNgRxStoreComponent {
- value = this.store.pipe(select(selectValue));
- constructor(private store: Store<any>) {}
-
- increment() {
- this.store.dispatch(increment());
- }
-
- decrement() {
- this.store.dispatch(decrement());
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 | 1x -1x - -1x - - - - - - - - - - - - -1x -1x -1x - - -1x - - - | import { Component } from '@angular/core';
-import { createSelector, Store, select } from '@ngrx/store';
-
-export const selectItems = createSelector(
- (state: any) => state.items,
- (items) => items,
-);
-
-@Component({
- selector: 'app-fixture',
- template: `
- <ul>
- <li *ngFor="let item of items | async" (click)="send(item)" [attr.aria-label]="item">{{ item }}</li>
- </ul>
- `,
-})
-export class WithNgRxMockStoreComponent {
- items = this.store.pipe(select(selectItems));
- constructor(private store: Store<any>) {}
-
- send(item: string) {
- this.store.dispatch({ type: '[Item List] send', item });
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 | 1x - - - - -1x -3x -3x - -3x - - -3x - - - -1x -3x - - - -1x -3x - - - | import { Directive, HostListener, ElementRef, Input, OnInit } from '@angular/core';
-
-@Directive({
- selector: '[appSpoiler]',
-})
-export class SpoilerDirective implements OnInit {
- @Input() hidden = 'SPOILER';
- @Input() visible = 'I am visible now...';
-
- constructor(private el: ElementRef) {}
-
- ngOnInit() {
- this.el.nativeElement.textContent = this.hidden;
- }
-
- @HostListener('mouseover')
- onMouseOver() {
- this.el.nativeElement.textContent = this.visible;
- }
-
- @HostListener('mouseleave')
- onMouseLeave() {
- this.el.nativeElement.textContent = this.hidden;
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 | 1x -1x -1x - - - - - - - - - - - - -1x - - - - - - - - - - - - -1x -6x -4x -4x -4x - - - - - - -1x - | import { OnInit, Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs/operators';
-
-@Component({
- selector: 'app-master',
- template: `
- <a [routerLink]="'./detail/one'">Load one</a> | <a [routerLink]="'./detail/two'">Load two</a> |
- <a [routerLink]="'./detail/three'">Load three</a> |
-
- <hr />
-
- <router-outlet></router-outlet>
- `,
-})
-export class MasterComponent {}
-
-@Component({
- selector: 'app-detail',
- template: `
- <h2>Detail {{ id | async }}</h2>
-
- <p>{{ text | async }} {{ subtext | async }}</p>
-
- <a [routerLink]="'../..'">Back to parent</a>
- <a routerLink="/hidden-detail">hidden x</a>
- `,
-})
-export class DetailComponent {
- id = this.route.paramMap.pipe(map((params) => params.get('id')));
- text = this.route.queryParams.pipe(map((params) => params['text']));
- subtext = this.route.queryParams.pipe(map((params) => params['subtext']));
- constructor(private route: ActivatedRoute) {}
-}
-
-@Component({
- selector: 'app-detail-hidden',
- template: ` You found the treasure! `,
-})
-export class HiddenDetailComponent {}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 | 1x - -1x - - - - - -1x -1x - - | import { Component, InjectionToken, Inject } from '@angular/core';
-
-export const DATA = new InjectionToken<{ text: string }>('Components Data');
-
-@Component({
- selector: 'app-fixture',
- template: ` {{ data.text }} `,
-})
-export class DataInjectedComponent {
- constructor(@Inject(DATA) public data: { text: string }) {}
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 | 1x - - - - - - - - - -1x - | import { Component, ChangeDetectionStrategy } from '@angular/core';
-
-@Component({
- template: `
- <p>
- <ng-content></ng-content>
- </p>
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class CellComponent {}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 | 1x -1x - -1x - - - - - - - -1x - - - - - - - - - - - - - - - -1x -2x -2x - - | import { Component, Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
-
-export class Customer {
- id: string;
- name: string;
-}
-
-@Injectable({
- providedIn: 'root',
-})
-export class CustomersService {
- load(): Observable<Customer[]> {
- return of([]);
- }
-}
-
-@Component({
- selector: 'app-fixture',
- template: `
- <ul>
- <li *ngFor="let customer of customers$ | async">
- {{ customer.name }}
- </li>
- </ul>
- `,
-})
-export class CustomersComponent {
- customers$ = this.service.load();
- constructor(private service: CustomersService) {}
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| 00-single-component.ts | -
-
- |
- 100% | -5/5 | -100% | -0/0 | -100% | -1/1 | -100% | -3/3 | -
| 01-nested-component.ts | -
-
- |
- 100% | -15/15 | -100% | -0/0 | -100% | -2/2 | -100% | -8/8 | -
| 02-input-output.ts | -
-
- |
- 100% | -8/8 | -100% | -0/0 | -100% | -1/1 | -100% | -4/4 | -
| 03-forms.ts | -
-
- |
- 100% | -18/18 | -100% | -5/5 | -100% | -5/5 | -100% | -16/16 | -
| 04-forms-with-material.ts | -
-
- |
- 100% | -18/18 | -100% | -5/5 | -100% | -5/5 | -100% | -16/16 | -
| 05-component-provider.ts | -
-
- |
- 100% | -12/12 | -100% | -0/0 | -100% | -5/5 | -100% | -8/8 | -
| 06-with-ngrx-store.ts | -
-
- |
- 100% | -19/19 | -100% | -0/0 | -100% | -8/8 | -100% | -17/17 | -
| 07-with-ngrx-mock-store.ts | -
-
- |
- 81.82% | -9/11 | -100% | -0/0 | -50% | -2/4 | -77.78% | -7/9 | -
| 08-directive.ts | -
-
- |
- 100% | -14/14 | -100% | -0/0 | -100% | -4/4 | -100% | -10/10 | -
| 09-router.ts | -
-
- |
- 100% | -19/19 | -100% | -0/0 | -100% | -4/4 | -100% | -10/10 | -
| 10-inject-token-dependency.ts | -
-
- |
- 100% | -6/6 | -100% | -0/0 | -100% | -1/1 | -100% | -4/4 | -
| 11-ng-content.ts | -
-
- |
- 100% | -4/4 | -100% | -0/0 | -100% | -0/0 | -100% | -2/2 | -
| 12-service-component.ts | -
-
- |
- 91.67% | -11/12 | -100% | -0/0 | -50% | -1/2 | -87.5% | -7/8 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| material.module.ts | -
-
- |
- 100% | -6/6 | -100% | -0/0 | -100% | -0/0 | -100% | -4/4 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 | 1x - -1x -1x - - - - -1x - | import { NgModule } from '@angular/core';
-
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-
-@NgModule({
- exports: [MatInputModule, MatSelectModule],
-})
-export class MaterialModule {}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| app | -
-
- |
- 100% | -6/6 | -100% | -0/0 | -100% | -0/0 | -100% | -4/4 | -
| app/examples | -
-
- |
- 98.14% | -158/161 | -100% | -10/10 | -92.86% | -39/42 | -97.39% | -112/115 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| public_api.ts | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -0/0 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 | - - - -1x -3x - - -9x -3x - - -6x -42x -6x - - -36x -36x -33x - - - -6x - - -3x - -3x - - -1x -2x - - - - - | import { Type, Provider } from '@angular/core';
-
-export type Mock<T> = T & { [K in keyof T]: T[K] & jest.Mock };
-
-export function createMock<T>(type: Type<T>): Mock<T> {
- const mock: any = {};
-
- function mockFunctions(proto: any) {
- if (!proto) {
- return;
- }
-
- for (const prop of Object.getOwnPropertyNames(proto)) {
- if (prop === 'constructor') {
- continue;
- }
-
- const descriptor = Object.getOwnPropertyDescriptor(proto, prop);
- if (typeof descriptor.value === 'function') {
- mock[prop] = jest.fn();
- }
- }
-
- mockFunctions(Object.getPrototypeOf(proto));
- }
-
- mockFunctions(type.prototype);
-
- return mock;
-}
-
-export function provideMock<T>(type: Type<T>): Provider {
- return {
- provide: type,
- useValue: createMock(type),
- };
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| create-mock.ts | -
-
- |
- 100% | -15/15 | -100% | -6/6 | -100% | -3/3 | -100% | -15/15 | -
| index.ts | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -0/0 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 | 1x - | export * from './create-mock'; - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 | - - - -1x - | /* - * Public API Surface of testing-library - */ - -export * from './lib'; - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| migrations/4_0_0 | -
-
- |
- 100% | -11/11 | -100% | -0/0 | -100% | -3/3 | -100% | -11/11 | -
| migrations/4_0_0/rules | -
-
- |
- 100% | -56/56 | -100% | -4/4 | -100% | -10/10 | -100% | -56/56 | -
| migrations/5_1_2 | -
-
- |
- 100% | -19/19 | -83.33% | -5/6 | -100% | -5/5 | -100% | -19/19 | -
| migrations/5_1_2/rules | -
-
- |
- 100% | -12/12 | -100% | -0/0 | -100% | -3/3 | -100% | -12/12 | -
| src | -
-
- |
- 100% | -3/3 | -100% | -0/0 | -100% | -0/0 | -100% | -3/3 | -
| src/lib | -
-
- |
- 91.81% | -213/232 | -76.25% | -61/80 | -88.89% | -48/54 | -92.2% | -201/218 | -
| src/lib/user-events | -
-
- |
- 96.3% | -78/81 | -77.5% | -31/40 | -100% | -15/15 | -96.05% | -73/76 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | -
-
- |
- 100% | -11/11 | -100% | -0/0 | -100% | -3/3 | -100% | -11/11 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 | -1x -1x - - -9x - - - - - - - - - - - - - -1x -3x -3x -3x -3x - -3x -3x -3x - - - | import { Rule } from '@angular-devkit/schematics';
-import { TslintFixTask } from '@angular-devkit/schematics/tasks';
-import * as path from 'path';
-
-function createRule(ruleName: string): TslintFixTask {
- return new TslintFixTask(
- {
- rulesDirectory: path.join(__dirname, 'rules'),
- rules: {
- [ruleName]: [true],
- },
- },
- {
- includes: ['**/*.spec.ts', '**/*.test.ts'],
- silent: false,
- },
- );
-}
-
-export default function (): Rule {
- return (_, context) => {
- const noCreateComponentRule = createRule('no-create-component');
- const noComponentParametersRule = createRule('no-component-parameters');
- const noComponentPropertyRule = createRule('no-component-property');
-
- const noCreateComponentRuleId = context.addTask(noCreateComponentRule);
- const noComponentParametersRuleId = context.addTask(noComponentParametersRule, [noCreateComponentRuleId]);
- context.addTask(noComponentPropertyRule, [noComponentParametersRuleId]);
- };
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| noComponentParametersRule.ts | -
-
- |
- 100% | -23/23 | -100% | -2/2 | -100% | -3/3 | -100% | -23/23 | -
| noComponentPropertyRule.ts | -
-
- |
- 100% | -12/12 | -100% | -2/2 | -100% | -2/2 | -100% | -12/12 | -
| noCreateComponentRule.ts | -
-
- |
- 100% | -21/21 | -100% | -0/0 | -100% | -5/5 | -100% | -21/21 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 | -1x -1x - - -1x -1x -1x - -1x - -1x - -5x - -4x -4x -2x - -2x - -2x -2x - -2x - - - -2x -2x -2x - -2x -2x -2x - -2x - - - - -4x - - - | import * as ts from 'typescript';
-import { Replacement, RuleFailure, Rules } from 'tslint';
-import { tsquery } from '@phenomnomnominal/tsquery';
-
-const IS_COMPONENT_PROPERTY_QUERY =
- 'CallExpression:has(Identifier[name="render"]) > ObjectLiteralExpression:first-child';
-const RENDER_OPTIONS_QUERY = 'CallExpression:has(Identifier[name="render"]) > ObjectLiteralExpression:last-child';
-const COMPONENT_PARAMETERS_PROPERTY_VALUE_QUERY = 'PropertyAssignment:has(Identifier[name="parameters"]) :last-child';
-
-const FAILURE_MESSAGE = 'Found `parameters` parameter, use `componentProperties` instead.';
-
-export class Rule extends Rules.AbstractRule {
- public apply(ast: ts.SourceFile): Array<RuleFailure> {
- return tsquery(ast, IS_COMPONENT_PROPERTY_QUERY)
- .map((result) => {
- const [parameterNode] = tsquery(result, COMPONENT_PARAMETERS_PROPERTY_VALUE_QUERY);
- if (!parameterNode) {
- return [];
- }
- const [renderOptionsNode] = tsquery(ast, RENDER_OPTIONS_QUERY);
-
- const renderOptionsText = renderOptionsNode.getFullText();
- const bracketIndex = renderOptionsText.indexOf('{');
- const renderOptions =
- renderOptionsText.substring(0, bracketIndex + 1) +
- `componentProperties:${parameterNode.getFullText()},` +
- renderOptionsText.substr(bracketIndex + 1);
-
- const replacement = new Replacement(renderOptionsNode.getStart(), renderOptionsNode.getWidth(), renderOptions);
- const start = renderOptionsNode.getStart();
- const end = renderOptionsNode.getEnd();
-
- const replacementOriginal = new Replacement(parameterNode.getStart(), parameterNode.getWidth(), '');
- const startOriginal = renderOptionsNode.getStart();
- const endOriginal = renderOptionsNode.getEnd();
-
- return [
- new RuleFailure(ast, startOriginal, endOriginal, FAILURE_MESSAGE, this.ruleName, replacementOriginal),
- new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement),
- ];
- })
- .reduce((rules, rule) => rules.concat(rule), []);
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 | -1x -1x - - -1x -1x - -1x - -1x - -7x -4x -4x -4x -4x - -4x - - - - | import * as ts from 'typescript';
-import { Replacement, RuleFailure, Rules } from 'tslint';
-import { tsquery } from '@phenomnomnominal/tsquery';
-
-const IS_COMPONENT_PROPERTY_QUERY =
- 'CallExpression:has(Identifier[name="render"]) > ObjectLiteralExpression:first-child';
-const COMPONENT_PROPERTY_VALUE_QUERY = 'PropertyAssignment:has(Identifier[name="component"]) :last-child';
-
-const FAILURE_MESSAGE = 'Found component propety syntax, signature looks different.';
-
-export class Rule extends Rules.AbstractRule {
- public apply(ast: ts.SourceFile): Array<RuleFailure> {
- return tsquery(ast, IS_COMPONENT_PROPERTY_QUERY).map((result) => {
- const [valueNode] = tsquery(result, COMPONENT_PROPERTY_VALUE_QUERY);
- const replacement = new Replacement(result.getStart(), result.getWidth(), (valueNode || result).getText());
- const start = result.getStart();
- const end = result.getEnd();
-
- return new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement);
- });
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 | -1x -1x - -1x -1x -1x - -1x - -1x - -1x - -9x -9x - -9x - - - -9x -6x -6x -6x - -6x - - - - -9x -6x -6x -6x - -6x - - - - | import * as ts from 'typescript';
-import { Replacement, RuleFailure, Rules } from 'tslint';
-import { tsquery } from '@phenomnomnominal/tsquery';
-
-const CREATE_COMPONENT_IDENTIFIER = 'Identifier[name="createComponent"]';
-const CREATE_COMPONENT_IMPORT_QUERY = `ImportSpecifier > ${CREATE_COMPONENT_IDENTIFIER}`;
-const CREATE_COMPONENT_CALL_EXPRESSION_QUERY = `CallExpression > ${CREATE_COMPONENT_IDENTIFIER}`;
-
-const RENDER = 'render';
-
-const FAILURE_MESSAGE = 'Found `createComponent`, use `render` instead.';
-
-export class Rule extends Rules.AbstractRule {
- public apply(ast: ts.SourceFile): Array<RuleFailure> {
- const imports = this.getImports(ast);
- const usages = this.getUsages(ast);
-
- return [...imports, ...usages];
- }
-
- private getImports(ast: ts.SourceFile): Array<RuleFailure> {
- return tsquery(ast, CREATE_COMPONENT_IMPORT_QUERY).map((result) => {
- const replacement = new Replacement(result.getStart(), result.getWidth(), RENDER);
- const start = result.getStart();
- const end = result.getEnd();
-
- return new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement);
- });
- }
-
- private getUsages(ast: ts.SourceFile): Array<RuleFailure> {
- return tsquery(ast, CREATE_COMPONENT_CALL_EXPRESSION_QUERY).map((result) => {
- const replacement = new Replacement(result.getStart(), result.getWidth(), RENDER);
- const start = result.getStart();
- const end = result.getEnd();
-
- return new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement);
- });
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | -
-
- |
- 100% | -19/19 | -83.33% | -5/6 | -100% | -5/5 | -100% | -19/19 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 | 1x -1x -1x -1x - - -2x - - - - - - - - - - - - - - -2x - - - - - -2x - - - -2x - -2x -2x - -2x -1x -1x -1x - - - -2x - - -1x -2x -2x - -2x - - - | import { Rule, chain, Tree, SchematicContext } from '@angular-devkit/schematics';
-import { TslintFixTask } from '@angular-devkit/schematics/tasks';
-import * as path from 'path';
-import { stripIndents } from '@angular-devkit/core/src/utils/literals';
-
-function createRule(ruleName: string): TslintFixTask {
- return new TslintFixTask(
- {
- rulesDirectory: path.join(__dirname, 'rules'),
- rules: {
- [ruleName]: [true],
- },
- },
- {
- includes: ['**/*.spec.ts', '**/*.test.ts'],
- silent: false,
- },
- );
-}
-
-function displayInformation(tree, context: SchematicContext) {
- context.logger.info(stripIndents`
- @angular-extensions/testing-library has moved to @testing-library/angular.
-
- Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260
- `);
-
- return tree;
-}
-
-function updatePackageJson(host: Tree) {
- Eif (host.exists('package.json')) {
- // tslint:disable-next-line: no-non-null-assertion
- const sourceText = host.read('package.json')!.toString('utf-8');
- const json = JSON.parse(sourceText);
-
- if (json['devDependencies'] && json['devDependencies']['@angular-extensions/testing-library']) {
- json['devDependencies']['@testing-library/angular'] = '^6.0.0';
- delete json['devDependencies']['@angular-extensions/testing-library'];
- host.overwrite('package.json', JSON.stringify(json, null, 2));
- }
- }
-
- return host;
-}
-
-export default function (): Rule {
- return (host, context) => {
- context.addTask(createRule('no-angular-extensions-import'));
-
- return chain([displayInformation, updatePackageJson])(host, context);
- };
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| noAngularExtensionsImportRule.ts | -
-
- |
- 100% | -12/12 | -100% | -0/0 | -100% | -3/3 | -100% | -12/12 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 | -1x -1x - -1x - - -1x - -1x - -4x -4x - - - -4x - -4x -4x -4x - -4x - - - - | import * as ts from 'typescript';
-import { Replacement, RuleFailure, Rules } from 'tslint';
-import { tsquery } from '@phenomnomnominal/tsquery';
-
-const IMPORT_QUERY = `ImportDeclaration StringLiteral[value="@angular-extensions/testing-library"]`;
-
-const FAILURE_MESSAGE =
- 'Found the library `@angular-extensions/testing-library`, use `@testing-library/angular` instead.';
-
-export class Rule extends Rules.AbstractRule {
- public apply(ast: ts.SourceFile): Array<RuleFailure> {
- const imports = this.getImports(ast);
- return imports;
- }
-
- private getImports(ast: ts.SourceFile): Array<RuleFailure> {
- return tsquery(ast, IMPORT_QUERY).map((result) => {
- // replace text between (single) quotes
- const replacement = new Replacement(result.getStart() + 1, result.getWidth() - 2, '@testing-library/angular');
- const start = result.getStart();
- const end = result.getEnd();
-
- return new RuleFailure(ast, start, end, FAILURE_MESSAGE, this.ruleName, replacement);
- });
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| public_api.ts | -
-
- |
- 100% | -3/3 | -100% | -0/0 | -100% | -0/0 | -100% | -3/3 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 | - -17x - - - - -17x -3x - - -1x - - - -3x - - - - - -17x -70x - - | import { Config } from './models';
-
-let config: Config = {
- defaultImports: [],
- dom: {},
-};
-
-export function configure(newConfig: Partial<Config> | ((config: Partial<Config>) => Partial<Config>)) {
- if (typeof newConfig === 'function') {
- // Pass the existing config out to the provided function
- // and accept a delta in return
- newConfig = newConfig(config);
- }
-
- // Merge the incoming config delta
- config = {
- ...config,
- ...newConfig,
- };
-}
-
-export function getConfig() {
- return config;
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| config.ts | -
-
- |
- 100% | -7/7 | -100% | -2/2 | -100% | -2/2 | -100% | -7/7 | -
| testing-library.ts | -
-
- |
- 91.56% | -206/225 | -75.64% | -59/78 | -88.46% | -46/52 | -91.94% | -194/211 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 -496 -497 -498 -499 | 17x -17x -17x -17x -17x -17x -17x - - - - - - - - - - - - - -17x -17x - -17x - - - - - - - - - - -17x - - - - - - - - - - - - - - - - - -70x - -70x - -70x - -964x -964x -964x - - - - -70x - - - - - - -70x -70x -2x - -2x -2x - - - -70x -70x - -70x -3x -3x -3x -3x - - - -70x - -70x - -70x -70x - - -1082x -973x - - - - -70x -3x -3x - - -70x -70x - - -70x -5810x -962x -962x -962x - -5810x - - -70x -2x - -2x - -2x -1x - - -2x - - -70x -70x -70x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - -3x - - -70x - - - - - - - -2x - - - - - - - - - - - - - - - - - - - -70x -7x -7x - -63x - - - - - - -72x -40x - -72x - - - -72x - - - - - -5x -5x -9x - - - - - - - - - - - - - - - - - - - -70x -70x - - -70x -70x - - -70x - - - -70x - -70x -70x - - -70x -70x - - -70x - - - - - - - - - - -8x -45x -45x - - - - - - - - - - - - -6x -2x -2x -2x -2x -4x - -26x - -26x - -4x - - -6x -62x -62x - - - - -71x - - - -70x -3x - -70x - - -17x -71x -71x - - - - -17x - - - - - -87x -4193x -1392x -1392x - -4x - -11x - - -2x - - -2801x - - -4193x - - - - - - - -1026x -1026x -1026x - -109x - - - - - - - - - -17x -1411x -2x -2x -2x - -1411x - - - - - -17x - - - - - -2x - - - - - - -3x - - - - - -17x - - - - - - - - - - -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x -17x - - -17x - | import { Component, Type, NgZone, SimpleChange, OnChanges, SimpleChanges } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
-import {
- FireFunction,
- FireObject,
- getQueriesForElement as dtlGetQueriesForElement,
- prettyDOM as dtlPrettyDOM,
- waitFor as dtlWaitFor,
- waitForElementToBeRemoved as dtlWaitForElementToBeRemoved,
- fireEvent as dtlFireEvent,
- screen as dtlScreen,
- queries as dtlQueries,
- waitForOptions as dtlWaitForOptions,
- configure as dtlConfigure,
-} from '@testing-library/dom';
-import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
-import { getConfig } from './config';
-import { createSelectOptions, createType, tab } from './user-events';
-
-const mountedFixtures = new Set<ComponentFixture<any>>();
-
-export async function render<ComponentType>(
- component: Type<ComponentType>,
- renderOptions?: RenderComponentOptions<ComponentType>,
-): Promise<RenderResult<ComponentType, ComponentType>>;
-export async function render<DirectiveType, WrapperType = WrapperComponent>(
- component: Type<DirectiveType>,
- renderOptions?: RenderDirectiveOptions<DirectiveType, WrapperType>,
-): Promise<RenderResult<DirectiveType, WrapperType>>;
-
-export async function render<SutType, WrapperType = SutType>(
- sut: Type<SutType>,
- renderOptions: RenderComponentOptions<SutType> | RenderDirectiveOptions<SutType, WrapperType> = {},
-): Promise<RenderResult<SutType>> {
- const {
- detectChanges: detectChangesOnRender = true,
- declarations = [],
- imports = [],
- providers = [],
- schemas = [],
- queries,
- template,
- wrapper = WrapperComponent,
- componentProperties = {},
- componentProviders = [],
- excludeComponentDeclaration = false,
- routes,
- removeAngularAttributes = false,
- } = renderOptions as RenderDirectiveOptions<SutType, WrapperType>;
-
- const config = getConfig();
-
- dtlConfigure({
- eventWrapper: (cb) => {
- const result = cb();
- detectChangesForMountedFixtures();
- return result;
- },
- ...config.dom,
- });
-
- TestBed.configureTestingModule({
- declarations: addAutoDeclarations(sut, { declarations, excludeComponentDeclaration, template, wrapper }),
- imports: addAutoImports({ imports: imports.concat(config.defaultImports), routes }),
- providers: [...providers],
- schemas: [...schemas],
- });
-
- Eif (componentProviders) {
- componentProviders
- .reduce((acc, provider) => acc.concat(provider), [])
- .forEach((p) => {
- const { provide, ...provider } = p;
- TestBed.overrideProvider(provide, provider);
- });
- }
-
- const fixture = createComponentFixture(sut, { template, wrapper });
- setComponentProperties(fixture, { componentProperties });
-
- if (removeAngularAttributes) {
- fixture.nativeElement.removeAttribute('ng-version');
- const idAttribute = fixture.nativeElement.getAttribute('id');
- Eif (idAttribute && idAttribute.startsWith('root')) {
- fixture.nativeElement.removeAttribute('id');
- }
- }
-
- mountedFixtures.add(fixture);
-
- await TestBed.compileComponents();
-
- let isAlive = true;
- fixture.componentRef.onDestroy(() => (isAlive = false));
-
- function detectChanges() {
- if (isAlive) {
- fixture.detectChanges();
- }
- }
-
- // Call ngOnChanges on initial render
- if (hasOnChangesHook(fixture.componentInstance)) {
- const changes = getChangesObj(null, fixture.componentInstance);
- fixture.componentInstance.ngOnChanges(changes);
- }
-
- Eif (detectChangesOnRender) {
- detectChanges();
- }
-
- const eventsWithDetectChanges = Object.keys(dtlFireEvent).reduce((events, key) => {
- events[key] = (element: HTMLElement, options?: {}) => {
- const result = dtlFireEvent[key](element, options);
- detectChanges();
- return result;
- };
- return events;
- }, {} as FireFunction & FireObject);
-
- const rerender = (rerenderedProperties: Partial<SutType>) => {
- const changes = getChangesObj(fixture.componentInstance, rerenderedProperties);
-
- setComponentProperties(fixture, { componentProperties: rerenderedProperties });
-
- if (hasOnChangesHook(fixture.componentInstance)) {
- fixture.componentInstance.ngOnChanges(changes);
- }
-
- detectChanges();
- };
-
- let router = routes ? TestBed.inject(Router) : null;
- const zone = TestBed.inject(NgZone);
- const navigate = async (elementOrPath: Element | string, basePath = '') => {
- if (!router) {
- router = TestBed.inject(Router);
- }
-
- const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href');
- const [path, params] = (basePath + href).split('?');
- const queryParams = params
- ? params.split('&').reduce((qp, q) => {
- const [key, value] = q.split('=');
- qp[key] = value;
- return qp;
- }, {})
- : undefined;
-
- const doNavigate = () =>
- router.navigate([path], {
- queryParams,
- });
-
- let result;
-
- if (zone) {
- await zone.run(() => (result = doNavigate()));
- } else {
- result = doNavigate();
- }
-
- detectChanges();
- return result;
- };
-
- function componentWaitFor<T>(
- callback,
- options: dtlWaitForOptions = { container: fixture.nativeElement },
- ): Promise<T> {
- return waitForWrapper(detectChanges, callback, options);
- }
-
- function componentWaitForElementToBeRemoved<T>(
- callback: (() => T) | T,
- options: dtlWaitForOptions = { container: fixture.nativeElement },
- ): Promise<T> {
- return waitForElementToBeRemovedWrapper(detectChanges, callback, options);
- }
-
- return {
- fixture,
- detectChanges,
- navigate,
- rerender,
- debugElement: fixture.debugElement.query(By.directive(sut)),
- container: fixture.nativeElement,
- debug: (element = fixture.nativeElement, maxLength, options) =>
- Array.isArray(element)
- ? element.forEach((e) => console.log(dtlPrettyDOM(e, maxLength, options)))
- : console.log(dtlPrettyDOM(element, maxLength, options)),
- type: createType(eventsWithDetectChanges),
- selectOptions: createSelectOptions(eventsWithDetectChanges),
- tab,
- waitFor: componentWaitFor,
- waitForElementToBeRemoved: componentWaitForElementToBeRemoved,
- ...replaceFindWithFindAndDetectChanges(
- fixture.nativeElement,
- dtlGetQueriesForElement(fixture.nativeElement, queries),
- ),
- ...eventsWithDetectChanges,
- };
-}
-
-function createComponentFixture<SutType>(
- component: Type<SutType>,
- { template, wrapper }: Pick<RenderDirectiveOptions<SutType, any>, 'template' | 'wrapper'>,
-): ComponentFixture<SutType> {
- if (template) {
- TestBed.overrideTemplate(wrapper, template);
- return TestBed.createComponent(wrapper);
- }
- return TestBed.createComponent(component);
-}
-
-function setComponentProperties<SutType>(
- fixture: ComponentFixture<SutType>,
- { componentProperties = {} }: Pick<RenderDirectiveOptions<SutType, any>, 'componentProperties'>,
-) {
- for (const key of Object.keys(componentProperties)) {
- fixture.componentInstance[key] = componentProperties[key];
- }
- return fixture;
-}
-
-function hasOnChangesHook<SutType>(componentInstance: SutType): componentInstance is SutType & OnChanges {
- return (
- 'ngOnChanges' in componentInstance && typeof (componentInstance as SutType & OnChanges).ngOnChanges === 'function'
- );
-}
-
-function getChangesObj<SutType>(oldProps: Partial<SutType> | null, newProps: Partial<SutType>) {
- const isFirstChange = oldProps === null;
- return Object.keys(newProps).reduce<SimpleChanges>(
- (changes, key) => ({
- ...changes,
- [key]: new SimpleChange(isFirstChange ? null : oldProps[key], newProps[key], isFirstChange),
- }),
- {},
- );
-}
-
-function addAutoDeclarations<SutType>(
- component: Type<SutType>,
- {
- declarations,
- excludeComponentDeclaration,
- template,
- wrapper,
- }: Pick<
- RenderDirectiveOptions<SutType, any>,
- 'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'
- >,
-) {
- const wrappers = () => {
- return template ? [wrapper] : [];
- };
-
- const components = () => {
- return excludeComponentDeclaration ? [] : [component];
- };
-
- return [...declarations, ...wrappers(), ...components()];
-}
-
-function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'>) {
- const animations = () => {
- const animationIsDefined =
- imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1;
- return animationIsDefined ? [] : [NoopAnimationsModule];
- };
-
- const routing = () => {
- return routes ? [RouterTestingModule.withRoutes(routes)] : [];
- };
-
- return [...imports, ...animations(), ...routing()];
-}
-
-/**
- * Wrap waitFor to poke the Angular change detection cycle before invoking the callback
- */
-async function waitForWrapper<T>(
- detectChanges: () => void,
- callback: () => T extends Promise<any> ? never : T,
- options?: dtlWaitForOptions,
-): Promise<T> {
- return await dtlWaitFor(() => {
- detectChanges();
- return callback();
- }, options);
-}
-
-/**
- * Wrap waitForElementToBeRemovedWrapper to poke the Angular change detection cycle before invoking the callback
- */
-async function waitForElementToBeRemovedWrapper<T>(
- detectChanges: () => void,
- callback: (() => T) | T,
- options?: dtlWaitForOptions,
-): Promise<T> {
- let cb;
- if (typeof callback !== 'function') {
- const elements = (Array.isArray(callback) ? callback : [callback]) as HTMLElement[];
- const getRemainingElements = elements.map((element) => {
- let parent = element.parentElement;
- while (parent.parentElement) {
- parent = parent.parentElement;
- }
- return () => (parent.contains(element) ? element : null);
- });
- cb = () => getRemainingElements.map((c) => c()).filter(Boolean);
- } else {
- cb = callback;
- }
-
- return await dtlWaitForElementToBeRemoved(() => {
- detectChanges();
- return cb();
- }, options);
-}
-
-function cleanup() {
- mountedFixtures.forEach(cleanupAtFixture);
-}
-
-function cleanupAtFixture(fixture) {
- if (!fixture.nativeElement.getAttribute('ng-version') && fixture.nativeElement.parentNode === document.body) {
- document.body.removeChild(fixture.nativeElement);
- }
- mountedFixtures.delete(fixture);
-}
-
-Eif (typeof afterEach === 'function' && !process.env.ATL_SKIP_AUTO_CLEANUP) {
- afterEach(async () => {
- cleanup();
- });
-}
-
-@Component({ selector: 'wrapper-component', template: '' })
-class WrapperComponent {}
-
-/**
- * Wrap findBy queries to poke the Angular change detection cycle
- */
-function replaceFindWithFindAndDetectChanges<T>(container: HTMLElement, originalQueriesForContainer: T): T {
- return Object.keys(originalQueriesForContainer).reduce((newQueries, key) => {
- if (key.startsWith('find')) {
- const getByQuery = dtlQueries[key.replace('find', 'get')];
- newQueries[key] = async (text, options, waitOptions) => {
- // original implementation at https://github.com/testing-library/dom-testing-library/blob/master/src/query-helpers.js
- const result = await waitForWrapper(
- detectChangesForMountedFixtures,
- () => getByQuery(container, text, options),
- waitOptions,
- );
- return result;
- };
- } else {
- newQueries[key] = originalQueriesForContainer[key];
- }
-
- return newQueries;
- }, {} as T);
-}
-
-/**
- * Call detectChanges for all fixtures
- */
-function detectChangesForMountedFixtures() {
- mountedFixtures.forEach((fixture) => {
- try {
- fixture.detectChanges();
- } catch (err) {
- Iif (!err.message.startsWith('ViewDestroyedError')) {
- throw err;
- }
- }
- });
-}
-
-/**
- * Wrap dom-fireEvent to poke the Angular change detection cycle after an event is fired
- */
-const fireEvent = Object.keys(dtlFireEvent).reduce((events, key) => {
- events[key] = (element: HTMLElement, options?: {}) => {
- const result = dtlFireEvent[key](element, options);
- detectChangesForMountedFixtures();
- return result;
- };
- return events;
-}, {} as typeof dtlFireEvent);
-
-/**
- * Re-export screen with patched queries
- */
-const screen = replaceFindWithFindAndDetectChanges(document.body, dtlScreen);
-
-/**
- * Re-export waitFor with patched waitFor
- */
-async function waitFor<T>(callback: () => T extends Promise<any> ? never : T, options?: dtlWaitForOptions): Promise<T> {
- return waitForWrapper(detectChangesForMountedFixtures, callback, options);
-}
-
-/**
- * Re-export waitForElementToBeRemoved with patched waitForElementToBeRemoved
- */
-async function waitForElementToBeRemoved<T>(callback: (() => T) | T, options?: dtlWaitForOptions): Promise<T> {
- return waitForElementToBeRemovedWrapper(detectChangesForMountedFixtures, callback, options);
-}
-
-/**
- * Re-export userEvent with the patched fireEvent
- */
-const userEvent = {
- type: createType(fireEvent),
- selectOptions: createSelectOptions(fireEvent),
- tab: tab,
-};
-
-/**
- * Manually export otherwise we get the following error while running Jest tests
- * TypeError: Cannot set property fireEvent of [object Object] which has only a getter
- * exports.fireEvent = fireEvent
- */
-export {
- buildQueries,
- getByLabelText,
- getAllByLabelText,
- queryByLabelText,
- queryAllByLabelText,
- findByLabelText,
- findAllByLabelText,
- getByPlaceholderText,
- getAllByPlaceholderText,
- queryByPlaceholderText,
- queryAllByPlaceholderText,
- findByPlaceholderText,
- findAllByPlaceholderText,
- getByText,
- getAllByText,
- queryByText,
- queryAllByText,
- findByText,
- findAllByText,
- getByAltText,
- getAllByAltText,
- queryByAltText,
- queryAllByAltText,
- findByAltText,
- findAllByAltText,
- getByTitle,
- getAllByTitle,
- queryByTitle,
- queryAllByTitle,
- findByTitle,
- findAllByTitle,
- getByDisplayValue,
- getAllByDisplayValue,
- queryByDisplayValue,
- queryAllByDisplayValue,
- findByDisplayValue,
- findAllByDisplayValue,
- getByRole,
- getAllByRole,
- queryByRole,
- queryAllByRole,
- findByRole,
- findAllByRole,
- getByTestId,
- getAllByTestId,
- queryByTestId,
- queryAllByTestId,
- findByTestId,
- findAllByTestId,
- createEvent,
- getDefaultNormalizer,
- getElementError,
- getNodeText,
- getQueriesForElement,
- getRoles,
- isInaccessible,
- logDOM,
- logRoles,
- prettyDOM,
- queries,
- queryAllByAttribute,
- queryByAttribute,
- queryHelpers,
- within,
-} from '@testing-library/dom';
-
-export { fireEvent, screen, userEvent, waitFor, waitForElementToBeRemoved };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | -
-
- |
- 100% | -6/6 | -100% | -0/0 | -100% | -0/0 | -100% | -4/4 | -
| selectOptions.ts | -
-
- |
- 91.43% | -32/35 | -61.11% | -11/18 | -100% | -7/7 | -91.18% | -31/34 | -
| tab.ts | -
-
- |
- 100% | -3/3 | -100% | -0/0 | -100% | -1/1 | -100% | -3/3 | -
| type.ts | -
-
- |
- 100% | -37/37 | -90.91% | -20/22 | -100% | -7/7 | -100% | -35/35 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 | 17x -17x -17x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -17x - | import { createType } from './type';
-import { createSelectOptions } from './selectOptions';
-import { tab } from './tab';
-
-export interface UserEvents {
- /**
- * @deprecated
- * Use `userEvents.type` from @testing-library/user-event
- *
- * @description
- * Types a value in an input field with the same interactions as the user would do.
- *
- * @argument
- * element: HTMLElement - the form field to type in
- * value: string | number - the value to type in
- *
- * @example
- * component.type(component.getByLabelText('Firstname'), 'Tim')
- * component.type(component.getByLabelText('Firstname'), 'Tim', { delay: 100 })
- * component.type(component.getByLabelText('Firstname'), 'Tim', { allAtOnce: true })
- */
- type: ReturnType<typeof createType>;
-
- /**
- * @deprecated
- * Use `userEvents.selectOptions` from @testing-library/user-event
- *
- * @description
- * Select an option(s) from a select field with the same interactions as the user would do.
- *
- * @argument
- * element: HTMLElement - the select box to select an option in
- * matcher: Matcher | Matcher[] - the value(s) to select
- *
- * @example
- * component.selectOptions(component.getByLabelText('Fruit'), 'Blueberry')
- * component.selectOptions(component.getByLabelText('Fruit'), ['Blueberry'. 'Grape'])
- */
- selectOptions: ReturnType<typeof createSelectOptions>;
-
- /**
- * @deprecated
- * Use `userEvents.tab` from @testing-library/user-event
- *
- * @description
- * Fires a tab event changing the document.activeElement in the same way the browser does.
- *
- * @argument
- * shift: can be set to true to invert tab direction (default false)
- * focusTrap: a container element to restrict the tabbing within (default document)
- *
- * @example
- * component.tab()
- */
- tab: typeof tab;
-}
-
-export { createType, createSelectOptions, tab };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 | 17x - - -17x - -16x -16x -16x -16x -16x -16x - - - - -20x - - - - - - -20x - -20x -20x -20x -20x -20x -20x - -20x -20x - - -87x - - - -16x - -16x -16x - - -16x -16x - -16x - - - - -16x - -16x -16x -20x -20x - -16x - - - - - | import { FireFunction, FireObject, Matcher, screen, ByRoleOptions } from '@testing-library/dom';
-
-// implementation from https://github.com/testing-library/user-event
-export function createSelectOptions(fireEvent: FireFunction & FireObject) {
- function clickElement(element: HTMLElement) {
- fireEvent.mouseOver(element);
- fireEvent.mouseMove(element);
- fireEvent.mouseDown(element);
- fireEvent.focus(element);
- fireEvent.mouseUp(element);
- fireEvent.click(element);
- }
-
- function selectOption(select: HTMLSelectElement, index: number, options: Matcher | ByRoleOptions) {
- const query =
- typeof options === 'string'
- ? (({ name: new RegExp(options, 'i') } as unknown) as ByRoleOptions)
- : options instanceof RegExp
- ? (({ name: options } as unknown) as ByRoleOptions)
- : typeof options === 'function'
- ? (({ name: options } as unknown) as ByRoleOptions)
- : options;
- const option = screen.getByRole('option', query) as HTMLOptionElement;
-
- fireEvent.mouseOver(option);
- fireEvent.mouseMove(option);
- fireEvent.mouseDown(option);
- fireEvent.focus(option);
- fireEvent.mouseUp(option);
- fireEvent.click(option, { ctrlKey: index > 0 });
-
- option.selected = true;
- fireEvent.change(select);
- }
-
- return async function selectOptions(
- element: HTMLElement,
- options: Matcher | ByRoleOptions | (Matcher | ByRoleOptions)[],
- ) {
- const selectElement = element as HTMLSelectElement;
-
- Eif (selectElement.selectedOptions) {
- Array.from(selectElement.selectedOptions).forEach((option) => (option.selected = false));
- }
-
- const focusedElement = document.activeElement;
- const wasAnotherElementFocused = focusedElement !== document.body && focusedElement !== selectElement;
-
- Iif (wasAnotherElementFocused) {
- fireEvent.mouseMove(focusedElement);
- fireEvent.mouseLeave(focusedElement);
- }
-
- clickElement(selectElement);
-
- const values = Array.isArray(options) ? options : [options];
- values
- .filter((_, index) => index === 0 || selectElement.multiple)
- .forEach((val, index) => selectOption(selectElement, index, val));
-
- Iif (wasAnotherElementFocused) {
- fireEvent.blur(focusedElement);
- }
- };
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 | 17x - - - - - - -17x -4x - - | import userEvent from '@testing-library/user-event';
-
-export interface ITabUserOptions {
- shift?: boolean;
- focusTrap?: Document | Element;
-}
-
-export function tab(options?: ITabUserOptions) {
- return userEvent.tab(options);
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 | - - -6x -6x - - - - - - - - - - - - - - - - - - - - - - - -17x - -14x -3x -2x - -3x - - - -87x -15x -15x -15x - -15x -1x - - -14x -2x -2x - -2x -2x - - -12x -12x -12x -180x -180x -180x - -180x -6x - - -180x - - - - - -180x -174x - - - - - -174x -174x -174x -169x - - - - - - - - - - -180x - - - - - - -12x - - - | import { FireFunction, FireObject } from '@testing-library/dom';
-
-function wait(time) {
- return new Promise(function (resolve) {
- setTimeout(() => resolve(), time);
- });
-}
-
-export interface TypeOptions {
- /**
- * @description
- * Types the text at once rather than on character at a time
- *
- * @default
- * false
- */
- allAtOnce?: boolean;
- /**
- * @description
- * Number of milliseconds until the next character is typed
- *
- * @default
- * 0
- */
- delay?: number;
-}
-
-// implementation from https://github.com/testing-library/user-event
-export function createType(fireEvent: FireFunction & FireObject) {
- function createFireChangeEvent(value: string) {
- return function fireChangeEvent(event) {
- if (value !== event.target.value) {
- fireEvent.change(event.target);
- }
- event.target.removeEventListener('blur', fireChangeEvent);
- };
- }
-
- return async function type(element: HTMLElement, value: string | number, options?: TypeOptions) {
- const { allAtOnce = false, delay = 0 } = options || {};
- const inputElement = element as HTMLInputElement;
- const initialValue = inputElement.value;
-
- if (inputElement.disabled) {
- return;
- }
-
- if (allAtOnce || value === '') {
- Eif (!inputElement.readOnly) {
- fireEvent.input(inputElement, { target: { value } });
- }
- inputElement.addEventListener('blur', createFireChangeEvent(initialValue));
- return;
- }
-
- const text = value.toString();
- let actuallyTyped = '';
- for (let index = 0; index < text.length; index++) {
- const char = text[index];
- const key = char;
- const keyCode = char.charCodeAt(0);
-
- if (delay > 0) {
- await wait(delay);
- }
-
- const downEvent = fireEvent.keyDown(inputElement, {
- key: key,
- keyCode: keyCode,
- which: keyCode,
- });
-
- if (downEvent) {
- const pressEvent = fireEvent.keyPress(inputElement, {
- key: key,
- keyCode,
- charCode: keyCode,
- });
-
- Eif (pressEvent) {
- actuallyTyped += key;
- if (!inputElement.readOnly) {
- fireEvent.input(inputElement, {
- target: {
- value: actuallyTyped,
- },
- bubbles: true,
- cancelable: true,
- });
- }
- }
- }
-
- fireEvent.keyUp(inputElement, {
- key: key,
- keyCode: keyCode,
- which: keyCode,
- });
- }
-
- inputElement.addEventListener('blur', createFireChangeEvent(initialValue));
- };
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 | - - - - -17x -17x -17x - | /* - * Public API Surface of testing-library - */ - -export * from './lib/models'; -export * from './lib/user-events'; -export * from './lib/config'; -export * from './lib/testing-library'; - |