javascript - Angular 单元测试：单击 DOM 后无法更改属性值

问题描述

所以我是 Angular 测试的新手，我想测试我的属性 selectedHeroes 在我单击 DOM 中的按钮后是否发生了变化。我还测试了当我在测试中触发按钮单击时是否调用了方法 onSelect() 并且确实如此。

但是，当我测试 selectedHero 属性值现在是否真实时。它说它仍然是未定义的。你们能看出为什么吗？

测试文件

describe('TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;
  let userService;

  let el;

  beforeEach(async(() => {

    const userServiceSpy = jasmine.createSpyObj('UserService', ['getUserData']);

    TestBed.configureTestingModule({
      declarations: [ TestComponent ],
      providers: [{provide: UserService, useClass: MockUserService}]
    })
    .compileComponents();

  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    userService = TestBed.get(UserService);
  });

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

  it('should change selectedHeroes property after click', fakeAsync(() => {
fixture.detectChanges();

let spy = spyOn(component, 'onSelect');
el = fixture.debugElement.query(By.css('li')).nativeElement.click();

tick();

expect(component.onSelect).toHaveBeenCalled();
expect(component.selectedHero).toBeTruthy();

  }));
});

组件.ts

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

  selectedHero;
  heroes = [{id: 1, name: 'superman'}, {id: 2, name: 'Iron man'}];

  ngOnInit() {}

  onSelect(hero) {
    this.selectedHero = hero;
  }

}

模板

<div *ngIf="selectedHero">...</div>
<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

标签： javascriptangularangular-test

javascript - Angular 单元测试：单击 DOM 后无法更改属性值

问题描述

解决方案

推荐阅读