Serializers should be more useful

[Lonli-Lokli]

🚀 Feature Proposal

Currently all object props are serialized as Object, which do not have any sense with snapshots

Motivation

Real serializer will help to increase real coverage with tests

Example

child

@Component({
  selector: 'test-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss']
})
export class SampleComponent {

  @Input()
  public user!: {name: string};
}

parent

<header class="flex">
  <h1>Welcome to {{ title }}!</h1>
</header>
<main>
  <test-sample [user]="current"></test-sample>
</main>


@Component({
  selector: 'test-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'test';

  public current: {name: string} = { name: 'hero' }
}

produce this snapshot

<test-root
  __ngContext__={[Function LRootView]}
  current={[Function Object]}
  title={[Function String]}
>
  <header
    class="flex"
  >
    <h1>
      
    </h1>
  </header><main>
    <test-sample>
      <p>
        sample works!
      </p>
    </test-sample>
  </main>
</test-root>

So instead of
current={[Function Object]}
I was hoping to see
current={ name: 'hero' }

[intellix]

Another thing I'd love to see is removal of private services being printed on the element as it makes maintaining snapshots on any injection really annoying and adds nothing as far as I can think.

constructor(private seoService: SeoService) {
  seoService.addMeta(...)
}

Ends up adding to the snapshot:

<cw-root
  seoService={[Function SeoService]}
>

But since it's not publically available to the view then I'm not sure what it adds to show it on the host element.

Currently I do:

expect(fixture).toMatchSnapshot();

But maybe we should be doing (which removes the host element from the snapshot). The problem with this though is that if you do add things to the host, they won't get snapshotted/tested:

expect(fixture.nativeElement).toMatchSnapshot();

[ahnpnl]

PR is welcome:)