时间戳

首页 > 解决方案 > Angular Spectator setInput - 如何传递对象

angular - Angular Spectator setInput - 如何传递对象

问题描述

也许它和这个问题一样的错误......

在我的旁观者测试中，我想测试将输入传递给组件：

sidebar.component.ts：

export class SidebarComponent {
  @Input() projects: Project[];
  filteredProjects: Observable<Project[]>;

  constructor() {
    this.filteredProjects = this.searchControl.valueChanges.pipe(
      startWith(''),
      map(project =>
        project ? this.filterProjects(project) : this.projects.slice()
      )
    );
  }

  private filterProjects(value: string): Project[] {
    const filterValue = new RegExp(value.toLowerCase().trim());

    return this.projects.filter(
      project => filterValue.test(project.name.toLowerCase())
    );
  }
}

sidebar.component.html：

<div class="sidebar__header--count">
  <span>Projects</span> ({{ (filteredProjects | async).length }})
</div>

<mat-nav-list>
  <a
    data-test-sidebar-nav-list-item
    class="nav__list--item"
    mat-list-item
    routerLinkActive="active"
    routerLink="/project/{{ project.id }}"
    *ngFor="let project of filteredProjects | async"
  >
    <div class="project">
      <div class="project__name">{{ project.name }}</div>
    </div>
  </a>
</mat-nav-list>

sidebar.component.spec.ts：

describe('SidebarComponent', () => {
  const createComponent = createComponentFactory({
    component: SidebarComponent,
    imports: [ ... ]
  });
  let component: any;
  let spectator: Spectator<SidebarComponent>;
  beforeEach(() => {
    spectator = createComponent();
    component = spectator.component;
  });

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

  it('should initially show all projects', () => {
    spectator.setInput({
      projects: {
        FOO1: { id: 1, name: 'foo' },
        FOO2: { id: 2, name: 'foo' }
        FOO3: { id: 3, name: 'foo' }
      }
    });

    /* count items from list */
    const navItem = spectator.query('[data-test-sidebar-nav-list-item]');
    console.log(navItem); // is null, but should not be null

    const itemHeader = spectator.query('.sidebar__header--count'); // null returned, but should be a HTML element
    expect(itemHeader.innerHTML).toContain('Projects (3)');

  });

});

我只是假设setInput()它不能正常工作，但也许我只是忘记了要添加到我的设置中的东西？

或者可能是我需要考虑的与异步管道相关的一些问题？

非常欢迎任何其他提示测试设置中缺少或错误的内容，非常感谢。

标签： angularunit-testingobservableangular-unit-testangular-spectator

解决方案

在 setInput 之后，我建议你使用

spectator.detectChanges();

推荐阅读