title: Unit testing with Angular: how to test changes on parent to child
body: <p>I am unit testing a component in Angular, using Jasmine.
  My test</p>
  <pre class="lang-js prettyprint-override"><code>it('contacts should be passed to child component', fakeAsync(() =&gt; {
      const newContact: Contact = {
          id: 1,
          name: 'Jason Pipemaker'
      };
      const contactsList: Array&lt;Contact&gt; = [newContact];
      contactsComponent.contacts = contactsList;//change on parent component
      tick()
      fixture.detectChanges();
      fixture.whenStable().then(() =&gt; {
          expect(childComponents()[0].contacts).toEqual(contactsComponent.contacts);//want to check if changed on child also
      })
  }));
  </code></pre>
  <p><strong>I want to test if a change in the parent will reflect on the child</strong>, like happens in a real scenario.</p>
  <p>I have tested that the values are equal when everything starts, but I want to test the scenario when one changes the parent value, and that should automatically reflect on the child.</p>
  <pre class="lang-js prettyprint-override"><code>it('contacts should be the same', () =&gt; {
     expect(childComponents([0].contacts)
        .toEqual(contactsComponent.contacts);
  });
  </code></pre>
  <p>Error:</p>
  <blockquote>
  <p>Expected $.length = 0 to equal 1.
  Expected $[0] = undefined to equal Object({ id: 1, name: 'Jason Pipemaker' }).</p>
  </blockquote>
  <p><strong>My interpretation</strong>: it is not waiting for the update to test.</p>
  <p>Maybe it is not even a unit test? Since I want to test the binding, maybe it is an integration test.</p>
  <p><strong>Suggestions so far</strong></p>
  <p><em>Suggestion 1</em>: I would try with <code>contactsComponent.contacts = JSON.parse(JSON.stringify(contactsList))</code></p>
  <p>comments: Thanks, it does not work. See that I have already tested at the beginning: everything passes. The question would be. Why did it work at the beginning/launching but not after started? I guess this is a problem of somehow making sure everything finishes before testing: an async issue, not JSON.stringify. I have no idea how to make that in code terms! In simple terms: I am changing something on the parent, and want to make sure the child receives the change, like it happens on real scenarios. Thanks for your participation! 
  My HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;app-contact-list [contacts]=contacts&gt;&lt;/app-contact-list&gt;
  </code></pre>
  <p>PS. app-contact-list is the child:</p>
  <pre class="lang-js prettyprint-override"><code>export class ContactListComponent implements OnInit {
    .......
    @Input('contacts') contacts: Contact[];//the input for the component
  </code></pre>
  <p><em>Suggestion 2</em>: I think you should test the component individually.</p>
  <p>Comments:
  Regarding mocking the child, I am already mocking using ng-mock</p>
  <pre class="lang-js prettyprint-override"><code>beforeEach(async(() =&gt; {
     TestBed.configureTestingModule({
        declarations: [ContactsComponent, 
           MockComponent(ContactListComponent)],
     }).compileComponents();
  }));
  </code></pre>
  <p>Drawback: it came to me as private lessons that some organizations do not allow installing those packages, thus, one should mock manually, as suggested.</p>
  <p><em>Suggestion 3</em>: You can avoid it by leveraging the async/await syntax.</p>
  <p><em>Comments</em>: tried, but did not work, same problem as before. it seems the code is executing before test. I face the same problem with Jest, learnt a trick, that that never happened before. I guess I am missing something like that, something that makes sure the test waits for the final modifications before testing.</p>
  <p><strong>Codes</strong>: some suggested making the codes available.
  Here it goes: <a href="https://github.com/JorgeGuerraPires/testing-angular-applications/tree/master/website/src/app/contacts" rel="nofollow noreferrer">https://github.com/JorgeGuerraPires/testing-angular-applications/tree/master/website/src/app/contacts</a></p>
  <p>Maybe someone could make a StackBlitz as suggested!</p>
  <p><strong>Final solution</strong></p>
  <p>In order to close this issue, I have decided to test in a simple case, as so the core idea under test would be the only concern. See the full simple application <a href="https://github.com/JorgeGuerraPires/angulartypescript/tree/master/code-samples/Angular9/chapter8/inter-component/src/app/input" rel="nofollow noreferrer">here</a> before testing. And see the final testing file <a href="https://github.com/JorgeGuerraPires/angular-unit-testing/blob/main/order.componenent.spec.ts" rel="nofollow noreferrer">here</a>.</p>
  <p>I draw insights from both answers, and accepted the one that helped me the most, even the comments helped.</p>
  <p>Thanks to everyone!</p>