Angular 21

[timdeschryver]

Update to update 21

[rdamazio]

By no means an extensive evaluation, but in my attempt to use it with v21, the main issue I'm hitting is Uncaught Error: NG0101: ApplicationRef.tick is called recursively thrown, and mainly when providing keyboard input.

Some debugging shows it's coming from waitForWrapper:

angular-testing-library/projects/testing-library/src/lib/testing-library.ts

Line 592 in d4d4567

tick(0);

I'm still on zoned change detection (using provideZoneChangeDetection()).

[ThiloAschebrock]

I didn't encounter any issue with tick, probably because the application is zoneless.

A minor change that I am noticing with respect to routing is that the render promise of components with routes now resolves before an initial redirect completes.

[dzonatan]

Interesting finding with the new vitest which is default in Angular v21 is how configureTestingModule works with non-standalone components: angular/angular#66007 angular/angular#65665

It means that the current implementation of WrapperComponent for inline-template tests won't work as expected since it's not a standalone component.

Probably we should think about migrating this to standalone with this update.

[timdeschryver]

Interesting finding with the new vitest which is default in Angular v21 is how configureTestingModule works with non-standalone components: angular/angular#66007 angular/angular#65665

It means that the current implementation of WrapperComponent for inline-template tests won't work as expected since it's not a standalone component.

Probably we should think about migrating this to standalone with this update.

Yea, I agree. This should become the default in v21.

[timdeschryver]

I'm working on a new release, feel free to try it out as @testing-library/angular@beta and provide some feedback here.

If you encounter any issues, please provide a reproduction - or a test case in this repo on the beta branch.

More info can be found at https://github.com/testing-library/angular-testing-library/releases or #559

[timdeschryver]

By no means an extensive evaluation, but in my attempt to use it with v21, the main issue I'm hitting is Uncaught Error: NG0101: ApplicationRef.tick is called recursively thrown, and mainly when providing keyboard input.

Some debugging shows it's coming from waitForWrapper:

angular-testing-library/projects/testing-library/src/lib/testing-library.ts

Line 592 in d4d4567

tick(0);
I'm still on zoned change detection (using provideZoneChangeDetection()).

@rdamazio I'm unable to reproduce this, can you provide an example please?

[timdeschryver]

Interesting finding with the new vitest which is default in Angular v21 is how configureTestingModule works with non-standalone components: angular/angular#66007 angular/angular#65665

It means that the current implementation of WrapperComponent for inline-template tests won't work as expected since it's not a standalone component.

Probably we should think about migrating this to standalone with this update.

@dzonatan can you provide an example please? I'm not encountering any issues with declaring the wrapping component as standalone: false. Funny enough I do get errors when I change this to true.

[dzonatan]

this is nuts. I was having issues when trying to migrate some bigger project to vitest but now I can't come up with a simple failing test case by using testing-library. I'll have to dig in my git-stash to remember what was the cause then.. this may take time.

But the reason why this doesn't work:

it('should create', async () => {
  @Component({
    standalone: false,
    selector: 'wrapper',
    template: '<comp-a />',
  })
  class WrapperComponent {}

  @Component({
    standalone: true,
    selector: 'comp-a',
    template: `Component A`,
  })
  class ComponentA {}

  TestBed.configureTestingModule({
    imports: [ComponentA],
    declarations: [WrapperComponent],
  });
  TestBed.createComponent(WrapperComponent);
  expect(screen.getByText('Component A')).toBeTruthy();
});

But this works:

it('should create', async () => {
  @Component({
    standalone: true,
    selector: 'comp-a',
    template: `Component A`,
  })
  class ComponentA {}

  await render(`<comp-a />`, { imports: [ComponentA] });
  expect(screen.getByText('Component A')).toBeTruthy();
});

seems to be the fact that Wrapper in render starts with an empty template and then is set through overrideTemplate:

it('should create', async () => {
  @Component({
    standalone: false,
    selector: 'wrapper',
    template: '', // <-- this passes
    //template: '<comp-a />', // <-- this fails
  })
  class WrapperComponent {}

  @Component({
    standalone: true,
    selector: 'comp-a',
    template: `Component A`,
  })
  class ComponentA {}

  TestBed.overrideTemplate(WrapperComponent, `<comp-a />`);
  TestBed.configureTestingModule({
    imports: [ComponentA],
    declarations: [WrapperComponent],
  });
  TestBed.createComponent(WrapperComponent);
  expect(screen.getByText('Component A')).toBeTruthy();
});

This probably doesn't help much but at least that's what I found for now.

[timdeschryver]

Thanks for the update and the investigation @dzonatan ! I was also looking at why it can't be a standalone component, but I couldn't figure it out.

[github-actions]

🎉 This issue has been resolved in version 19.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀