jsverse / transloco

🚀 😍 The internationalization (i18n) library for Angular
https://jsverse.github.io/transloco/
MIT License
1.97k stars 191 forks source link

Bug(scope): Unit tests failing with standalone components #745

Open skatterwe opened 5 months ago

skatterwe commented 5 months ago

Is there an existing issue for this?

Which Transloco package(s) are the source of the bug?

Transloco

Is this a regression?

Yes

Current behavior

A simple component like this, fails the unit tests when trying to access the content of the template with V6. It works fine with 5.0.7

Template:

<ng-container *transloco="let t; read: 'scopeName'">
<button (click)=onClick()>Test</button>
</ng-container>

Component:

@Component({
  standalone: true,
  selector: 'app-transloco',
  templateUrl: './transloco.component.html',
  imports: [CommonModule, TranslocoModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TranslocoComponent {
  onClick() {
    console.log('Hello World')
  }
}

Test:

describe('TranslocoComponent', () => {
  let component: TranslocoComponent;
  let fixture: ComponentFixture<TranslocoComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [TranslocoComponent, getTranslocoModule()],
    })
      .overrideComponent(TranslocoComponent, {
        set: {
          imports: [CommonModule, TranslocoModule],
          schemas: [CUSTOM_ELEMENTS_SCHEMA],
        },
      })
      .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(FeedbackErrorComponent);
    component = fixture.componentInstance;
  });

  it('should click button', () => {
    const emitStub = jest.spyOn(console, 'log');
    fixture.detectChanges();

    const button = fixture.debugElement.query(By.css("button"));
    button.triggerEventHandler('click', null);

    expect(emitStub).toHaveBeenCalled();
  });

});

The test fails with cannot read property 'triggerEventhandler' of undefined, checking the content of the whole debug element it is apparent that the structural directive of is not resolved and the template blank.

With 5.0.7 this works as expected

Expected behavior

Component unit tests should be working with standalone components like it was in 5.0.7

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

Coudn't find a working example that executes test pls tryout code provided above

Transloco Config

No response

Please provide the environment you discovered this bug in

Transloco: 6.0.4
Angular: 17.1.1
Node: 20.11.0
Package Manager: NPM
OS: Mac

Browser

No response

Additional context

Interestingly this error occurs only when using the transloco structural directive. When using normal directive everything runs fine.

I would like to make a pull request for this bug

No

JonasDev17 commented 4 weeks ago

I have a similar issue where my structural directive is not being resolved. I tried reproducing the issue using a stackblitz but this time the structural directive was resolved however the text wasn't translated:

https://stackblitz.com/edit/stackblitz-starters-c9bsvj?file=README.md