title: Angular Spectator setInput - how to pass object
body: <p>Maybe it's the same bug like <a href="https://stackoverflow.com/questions/60571144/angular-spectator-setinput-not-working-for-non-string-input">this question</a>...</p>
  
  <p>In my spectator test I wanna test passing an input to a component:</p>
  
  <p>sidebar.component.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class SidebarComponent {
    @Input() projects: Project[];
    filteredProjects: Observable&lt;Project[]&gt;;
  
    constructor() {
      this.filteredProjects = this.searchControl.valueChanges.pipe(
        startWith(''),
        map(project =&gt;
          project ? this.filterProjects(project) : this.projects.slice()
        )
      );
    }
  
    private filterProjects(value: string): Project[] {
      const filterValue = new RegExp(value.toLowerCase().trim());
  
      return this.projects.filter(
        project =&gt; filterValue.test(project.name.toLowerCase())
      );
    }
  }
  </code></pre>
  
  <p>sidebar.component.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="sidebar__header--count"&gt;
    &lt;span&gt;Projects&lt;/span&gt; ({{ (filteredProjects | async).length }})
  &lt;/div&gt;
  
  &lt;mat-nav-list&gt;
    &lt;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"
    &gt;
      &lt;div class="project"&gt;
        &lt;div class="project__name"&gt;{{ project.name }}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/mat-nav-list&gt;
  </code></pre>
  
  <p>sidebar.component.spec.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>describe('SidebarComponent', () =&gt; {
    const createComponent = createComponentFactory({
      component: SidebarComponent,
      imports: [ ... ]
    });
    let component: any;
    let spectator: Spectator&lt;SidebarComponent&gt;;
    beforeEach(() =&gt; {
      spectator = createComponent();
      component = spectator.component;
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy(); // works
    });
  
    it('should initially show all projects', () =&gt; {
      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)');
  
    });
  
  });
  
  </code></pre>
  
  <p>I only assume that <code>setInput()</code> doesn't work correctly, but maybe I just forgot something to add to my setup?</p>
  
  <p>Or could it be some issues related to the async pipe which I need to consider?</p>
  
  <p>Any other hints what's missing or wrong in the test setup are very welcome, thanks a lot.</p>