Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
skatterwe opened this issue Jan 31, 2024 · 1 comment
Open
1 task done

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

skatterwe opened this issue Jan 31, 2024 · 1 comment

Comments

@skatterwe
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants