Saya sedang belajar pengujian integrasi dangkal di Angular. Saya memiliki komponen HeroesComponent. Itu telah mendapat satu injeksi layanan yaitu HeroService dan satu komponen anak HeroComponent. Untuk saat ini saya mencoba untuk mengejek layanan injeksi saja. Saya memiliki beberapa contoh data di HEROES: Hero[] Ini file spesifikasi saya:

heores.component.spec.ts

import { Hero } from "../hero"
import { HeroesComponent } from "./heroes.component";
import { HeroService } from "../hero.service";
import { TestBed, ComponentFixture } from "@angular/core/testing";
import { NO_ERRORS_SCHEMA } from "@angular/core";
import { of } from "rxjs/internal/observable/of";

describe('HeroesComponent', () => {
    let HEROES: Hero[];
    let mockHeroService: HeroService;
    let fixture: ComponentFixture<HeroesComponent>

    beforeEach(() => {
        HEROES = [
            {id: 1, name: 'Ant man', strength: 20},
            {id: 2, name: 'Gohan', strength: 10},
            {id: 3, name: 'Goku', strength: 5}
        ];
        mockHeroService = jasmine.createSpyObj(['getHeroes', 'addHero', 'deleteHero']);

        TestBed.configureTestingModule({
            declarations: [HeroesComponent],
            providers: [
                {provide: HeroService, useValue: mockHeroService}
            ],
            schemas: [NO_ERRORS_SCHEMA]
        })

        fixture=TestBed.createComponent(HeroesComponent);
     })

     it('should set heroes correctly from the service', () => {
        // arrange
        mockHeroService.getHeroes.and.returnValue(of(HEROES));

        // act
        fixture.detectChanges();

        // assert
        expect(fixture.componentInstance.heroes.length).toBe(3);
    })
})

Tapi saya mendapatkan kesalahan ini di konsol. Masalahnya adalah dengan and di dalam metode it() saya:

KESALAHAN di src/app/heroes/heroes.second.spec.ts(32,39): kesalahan TS2339: Properti 'dan' tidak ada > pada tipe '() => Dapat diamati'.

Tolong tunjukkan kesalahan saya. Jangan ragu untuk meminta lebih banyak kode. Terima kasih.

PS: Ini kode untuk HeroesComponent:

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
    .subscribe(heroes => this.heroes = heroes);
  }

  add(name: string): void {
    name = name.trim();
    var strength = 11
    if (!name) { return; }
    this.heroService.addHero({ name, strength } as Hero)
      .subscribe(hero => {
        this.heroes.push(hero);
      });
  }

  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero).subscribe();
  }
}

Berikut adalah screenshot dari tutorial pluralsight yang saya ikuti. Baginya kode tersebut berfungsi tanpa kesalahan: masukkan deskripsi gambar di sini angular karma-jasmine

0
Tanzeel 2 Mei 2020, 18:48

1 menjawab

Jawaban Terbaik

Masalahnya adalah dengan mengejek, Anda perlu mengubah sintaks jasmine.createSpybj dari

mockHeroService = jasmine.createSpyObj(['getHeroes', 'addHero', 'deleteHero']);

Untuk

mockHeroService = jasmine.createSpyObj('HeroService', ['getHeroes', 'addHero', 'deleteHero']);

Dan Anda juga perlu memindahkan mockHeroService.getHeroes.and.returnValue(of(HEROES)); sebelum membuat komponen. Karena saat Anda membuat komponen, metode konstruktor dan ngOnInit Anda akan dipanggil. Dan kami tidak mengembalikan data mata-mata saat kami menulis pernyataan ini setelah ini.

Anda juga perlu mengubah pernyataan tempat Anda membuat mata-mata:

let mockHeroService: jasmine.SpyObj<HeroService>;

Ini akan menyelesaikan masalah Anda. Silakan temukan dokumentasi di sini

1
Prince 2 Mei 2020, 16:57