Do something similar to shallow-render npm package for Angular

[azaeng04]

I like using this library https://github.com/getsaf/shallow-render as it removes a lot of duplication when testing components. Would be great to see something similar being used in cypress-angular-unit-test.

[LeJeanbono]

Hi @azaeng04 ! Can you tell me an example of you would like ?

[azaeng04]

If you have a look at examples here: https://github.com/getsaf/shallow-render

It removes a lot of boilerplate that Angular does.

[LeJeanbono]

Well, new Shallow(..) does the same as initEnv and render(..) as mount

let shallow: Shallow<ColorLinkComponent>;

  beforeEach(() => {
    shallow = new Shallow(ColorLinkComponent, MyModule);
  });

  it('renders a link with the name of the color', async () => {
    const { find } = await shallow.render({ bind: { color: 'Blue' } });
    // or shallow.render(`<color-link color="Blue"></color-link>`);

    expect(find('a').nativeElement.innerText).toBe('Blue');
  });

Is the same as :

beforeEach(() => {
     initEnv(ColorLinkComponent, {imports: [MyModule]});
});

  it('renders a link with the name of the color', () => {
    mount(ColorLinkComponent, { color: 'Blue' });
    // or mountHtml(`<color-link color="Blue"></color-link>`);

   cy.get('a').contains('Blue')
  });

To me, it's even better