Советы по тестированию Angular: Ng-Mocks

class MockUserService {
  isLoggedIn = true;
  user = { name: 'Test User'};
}

beforeEach(() => {
  TestBed.configureTestingModule({
    // provide the component-under-test and dependent service
    providers: [
      WelcomeComponent,
      { provide: UserService, useClass: MockUserService }
    ]
  });
  // inject both the component and the dependent service.
  comp = TestBed.inject(WelcomeComponent);
  userService = TestBed.inject(UserService);
});

@Component({selector: 'app-banner', template: ''})
class BannerStubComponent { }

@Component({selector: 'router-outlet', template: ''})
class RouterOutletStubComponent { }

@Component({selector: 'app-welcome', template: ''})
class WelcomeStubComponent { }

TestBed
  .configureTestingModule({
    imports: [RouterLink],
    providers: [provideRouter([])],
    declarations:
        [AppComponent, BannerStubComponent, RouterOutletStubComponent, WelcomeStubComponent]
  })

<div class="main-content">
  <div class="form">
    <div class="breeds">
      <app-form [breeds]="(breeds$ | async)!" [breed]="breed" [count]="count"
        (formChange)="onFormChange($event)"></app-form>
    </div>
  </div>
  <div class="cards">
    <mat-spinner *ngIf="loading$ | async"></mat-spinner>
    <app-card *ngFor="let dog of dogs$ | async" [imgSrc]="dog"></app-card>
  </div>
</div>

@Component({selector: 'app-form', template: ''})
class MockAppFormComponent {
  @Input breeds: Array<any>;
  @Input breed: any;
  @Input count: any;
  @Output formChange = new EventEmitter<any>();
}

@Component({selector: 'mat-spinner', template: ''})
class MockMatProgressSpinnerComponent { }

@Component({selector: 'app-card', template: ''})
class MockAppCardComponent {
  @Input imgSrc: any;
}

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        MockAppFormComponent,
        MockMatProgressSpinnerComponent,
        MockAppCardComponent
      ]
    }).compileComponents();
  
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
});

describe('AppComponent', () => { 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        MockComponent(MatProgressSpinnerComponent),
        MockComponent(FormComponent),
        MockComponent(CardComponent),
      ]
    }).compileComponents();
  
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
});

let dogService: jasmine.SpyObj<DogService>;

describe('AppComponent', () => {
  const breeds = ['affenpinscher', 'african', 'airedale'];
  const dogs = ['https://images.dog.ceo/breeds/affenpinscher/n02110627_10047.jpg'];
  dogService = jasmine.createSpyObj('DogService', ['getBreeds', 'getDogs'];
  dogService.getBreeds.and.returnValue(of(breeds));
  dogService.getDogs.and.returnValue(of(dogs));
  
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [
        {
          provide: DogService,
          useValue: dogService
        }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
});

await TestBed.configureTestingModule({
  providers: [
    MockProvider(DogService, dogService)
  ]
}).compileComponents();

import { createSpyFromClass, Spy } from 'jasmine-auto-spies';

let dogService: Spy<DogService>;

dogService = createSpyFromClass(DogService);
dogService.getBreeds.and.returnValue(of(breeds));
dogService.getDogs.and.returnValue(of(dogs));

describe('AppComponent', () => {
  breeds = ['affenpinscher', 'african', 'airedale'];
  dogs = ['https://images.dog.ceo/breeds/affenpinscher/n02110627_10047.jpg'];
  dogService = createSpyFromClass(DogService);
  dogService.getBreeds.and.returnValue(of(breeds));
  dogService.getDogs.and.returnValue(of(dogs));
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        MockModule(FontAwesomeModule),
        MockModule(MatProgressSpinnerModule),
        MockModule(MatToolbarModule)
      ],
      declarations: [
        AppComponent,
        MockComponent(FormComponent),
        MockComponent(CardComponent)
      ],
      providers: [
        MockProvider(DogService, dogService)
      ]
    }).compileComponents();
  });
});

describe('AppComponent', () => {
  beforeEach(async () => {
    breeds = ['affenpinscher', 'african', 'airedale'];
    dogs = ['https://images.dog.ceo/breeds/affenpinscher/n02110627_10047.jpg'];
    dogService = createSpyFromClass(DogService);
    dogService.getBreeds.and.returnValue(of(breeds));
    dogService.getDogs.and.returnValue(of(dogs));
    await MockBuilder(AppComponent, AppModule)
      .mock(FontAwesomeModule)
      .mock(MatProgressSpinnerModule)
      .mock(MatToolbarModule)
      .mock(CardComponent)
      .mock(DialogComponent)
      .mock(FormComponent)
      .provide({ provide: DogService, useValue: dogService });
  });
});

@Component({
  template: `
  <h2 highlight="yellow">Something Yellow</h2>
  <h2 highlight>The Default (Gray)</h2>
  <h2>No Highlight</h2>
  <input #box [highlight]="box.value" value="cyan"/>`
})
class TestComponent { }

beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [ HighlightDirective, TestComponent ]
  })
  .createComponent(TestComponent);

  fixture.detectChanges(); // initial binding

  // all elements with an attached HighlightDirective
  des = fixture.debugElement.queryAll(By.directive(HighlightDirective));

  // the h2 without the HighlightDirective
  bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])'));
});

// color tests
it('should have three highlighted elements', () => {
  expect(des.length).toBe(3);
});

it('should color 1st <h2> background "yellow"', () => {
  const bgColor = des[0].nativeElement.style.backgroundColor;
  expect(bgColor).toBe('yellow');
});

it('should color 2nd <h2> background w/ default color', () => {
  const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
  const bgColor = des[1].nativeElement.style.backgroundColor;
  expect(bgColor).toBe(dir.defaultColor);
});

it('should bind <input> background to value color', () => {
  // easier to work with nativeElement
  const input = des[2].nativeElement as HTMLInputElement;
  expect(input.style.backgroundColor)
    .withContext('initial backgroundColor')
    .toBe('cyan');

  input.value = 'green';

  // Dispatch a DOM event so that Angular responds to the input value change.
  input.dispatchEvent(new Event('input'));
  fixture.detectChanges();

  expect(input.style.backgroundColor)
    .withContext('changed backgroundColor')
    .toBe('green');
});

it('bare <h2> should not have a customProperty', () => {
  expect(bareH2.properties['customProperty']).toBeUndefined();
});

it('uses default background color', () => {
    const fixture = MockRender('<div target></div>');

    expect(fixture.nativeElement.innerHTML).not.toContain(
      'style="background-color: yellow;"',
    );
});

it('sets provided background color', () => {
    const fixture = MockRender('<div [color]="color" target></div>', {
      color: 'red',
    });

    fixture.point.triggerEventHandler('mouseenter', null);
    expect(fixture.nativeElement.innerHTML).toContain(
      'style="background-color: red;"',
    );
});

<mat-toolbar color="primary">
  <span class="title">
    <fa-icon [icon]="faAngular" size="xl"></fa-icon>
    {{ title }}
  </span>
  <span class="spacer"></span>
  <a mat-icon-button href="https://github.com/bobbyg603/ng-testing-tips-ng-mocks" target="_blank" rel="noopener noreferrer"
    aria-label="ngx-testing-tips on GitHub">
    <fa-icon [icon]="faGithub"></fa-icon>
  </a>
  <a mat-icon-button href="https://bobbyg603.medium.com" target="_blank" rel="noopener noreferrer"
    aria-label="@bobbyg603 on Medium">
    <fa-icon [icon]="faMedium"></fa-icon>
  </a>
  <a mat-icon-button href="https://twitter.com/bobbyg603" target="_blank" rel="noopener noreferrer"
    aria-label="@bobbyg603 on Twitter">
    <fa-icon [icon]="faTwitter"></fa-icon>
  </a>
</mat-toolbar>
<div class="main-content">
  <div class="form">
    <div class="breeds">
      <app-form [breeds]="(breeds$ | async)!" [breed]="breed" [count]="count"
        (formChange)="onFormChange($event)"></app-form>
    </div>
  </div>
  <div class="cards">
    <mat-spinner *ngIf="loading$ | async"></mat-spinner>
    <app-card *ngFor="let dog of dogs$ | async" [imgSrc]="dog"></app-card>
  </div>
</div>

import { Component } from '@angular/core';
import { faAngular, faGithub, faMedium, faTwitter } from '@fortawesome/free-brands-svg-icons';
import { BehaviorSubject, Observable, Subject, tap } from 'rxjs';
import { DogService } from './dog/dog.service';
import { DogsForm } from './form/form.component';
import { nextTurn } from './utils/next-turn';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  readonly title = 'ng-testing-tips';

  readonly faAngular = faAngular;
  readonly faGithub = faGithub;
  readonly faMedium = faMedium;
  readonly faTwitter = faTwitter;
  
  breeds$: Observable<string[]>;
  dogs$: Observable<string[]>;
  loading$: Observable<boolean>;

  breed: string;
  count: number;
  
  private loadingSubject: Subject<boolean>;
 
  constructor(private dogService: DogService) {
    this.breed = 'husky';
    this.count = 3;
    this.loadingSubject = new BehaviorSubject(true);
    this.breeds$ = this.getBreeds();
    this.dogs$ = this.getDogs();
    this.loading$ = this.loadingSubject.asObservable().pipe(nextTurn());
  }

  onFormChange(form: DogsForm) {
    const { breed, count } = form;
    this.breed = breed;
    this.count = count;
    this.dogs$ = this.getDogs();
  }

  private getBreeds() {
    return this.dogService.getBreeds();
  }
  
  private getDogs() {
    this.loadingSubject.next(true);
 
    return this.dogService.getDogs(this.breed, this.count)
      .pipe(
        tap(() => this.loadingSubject.next(false))
      );
  }
}

import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatToolbarModule } from '@angular/material/toolbar';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { createSpyFromClass, Spy } from 'jasmine-auto-spies';
import { MockBuilder, MockedComponentFixture, MockRender, ngMocks } from 'ng-mocks';
import { firstValueFrom, of, skip } from 'rxjs';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { CardComponent } from './card/card.component';
import { DialogComponent } from './dialog/dialog.component';
import { DogService } from './dog/dog.service';
import { FormComponent } from './form/form.component';

let dogService: Spy<DogService>;
let app: AppComponent;
let breeds: string[];
let dogs: string[];

let rendered: MockedComponentFixture<AppComponent>;
let cardComponents: CardComponent[];
let formComponent: FormComponent;

describe('AppComponent', () => {
  beforeEach(async () => {
    breeds = ['affenpinscher', 'african', 'airedale'];
    dogs = ['https://images.dog.ceo/breeds/affenpinscher/n02110627_10047.jpg'];
    dogService = createSpyFromClass(DogService);
    dogService.getBreeds.and.returnValue(of(breeds));
    dogService.getDogs.and.returnValue(of(dogs));
    await MockBuilder(AppComponent, AppModule)
      .mock(FontAwesomeModule)
      .mock(MatProgressSpinnerModule)
      .mock(MatToolbarModule)
      .mock(CardComponent)
      .mock(DialogComponent)
      .mock(FormComponent)
      .provide({ provide: DogService, useValue: dogService });
    rendered = MockRender(AppComponent, null, { detectChanges: false });
    app = rendered.point.componentInstance;
  });

  it('should create the app', () => {
    expect(app).toBeTruthy();
  });

  it(`should have as title 'ng-testing-tips'`, () => {
    expect(app.title).toEqual('ng-testing-tips');
  });

  describe('breeds$', () => {
    it('should emit result of getBreeds from DogService', () => {
      return expectAsync(firstValueFrom(app.breeds$)).toBeResolvedTo(breeds);
    });
  });

  describe('dogs$', () => {
    it('should emit result of getDogs from DogService', () => {
      return expectAsync(firstValueFrom(app.dogs$)).toBeResolvedTo(dogs);
    });
  });

  describe('loading$', () => {
    it('should start with true', () => {
      return expectAsync(firstValueFrom(app.loading$)).toBeResolvedTo(true);
    });

    it('should emit false after call to getDogs', async () => {
      const resultPromise = firstValueFrom(app.loading$.pipe(skip(1)));

      rendered.detectChanges();
      const result = await resultPromise;

      expect(result).toBe(false);
    });
  });

  describe('onFormChange', () => {
    it('should call getDogs with breed and count', () => {
      const breed = 'affenpinscher';
      const count = 3;

      app.onFormChange({ breed, count });

      expect(dogService.getDogs).toHaveBeenCalledWith(breed, count);
    });
  });

  describe('template', () => {
    beforeEach(() => {
      rendered.detectChanges();
      cardComponents = ngMocks.findAll(CardComponent).map(c => c.componentInstance);
      formComponent = ngMocks.find<FormComponent>('app-form').componentInstance;
    });

    it('should render title', () => {
      expect(rendered.nativeElement.querySelector('span.title')?.textContent).toMatch(app.title);
    });

    it('should pass breed to form', () => {
      expect(formComponent.breed).toBe(app.breed);
    });

    it('should pass breeds to form', () => {
      expect(formComponent.breeds).toBe(breeds);
    });

    it('should pass count to form', () => {
      expect(formComponent.count).toBe(app.count);
    });

    it('should create card for each dog', () => {
      dogs.forEach(dog => {
        expect(cardComponents.find(c => c.imgSrc === dog)).toBeTruthy();
      });
    });

    it('should show spinner when loading', () => {
      rendered.componentInstance.loading$ = of(true);
      rendered.detectChanges();
      expect(ngMocks.find(MatProgressSpinner)).toBeTruthy();
    });

    it('should not show spinner when not loading', () => {
      rendered.componentInstance.loading$ = of(false);
      rendered.detectChanges();
      expect(ngMocks.findAll(MatProgressSpinner).length).toBe(0);
    });

    it('should call onFormChange when form component raises formChange event', () => {
      const event = { breed: 'affenpinscher', count: 3 };
      const spy = spyOn(rendered.componentInstance, 'onFormChange');

      formComponent.formChange.emit(event);

      expect(spy).toHaveBeenCalledWith(event);
    });
  });
});