Angular Spectator setInput - how to pass object

Question

Maybe it's the same bug like this question...

In my spectator test I wanna test passing an input to a component:

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)');

  });

});

I only assume that setInput() doesn't work correctly, but maybe I just forgot something to add to my setup?

Or could it be some issues related to the async pipe which I need to consider?

Any other hints what's missing or wrong in the test setup are very welcome, thanks a lot.

Answer 1

After setInput, I suggest you to use

spectator.detectChanges();