Bug(transloco): translateSignal API adds unnecessary async task when using string for key parameter

[maleetz]

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?

No

Current behavior

Calling translateSignal with a static string as the key parameter adds an unnecessary async task, which complicates component testing and adds an unnecessary render on the component itself.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TranslocoDirective, AsyncPipe],
  template: `
    <ul *transloco="let t">
      <li id="titleDirective">t("title"): {{ t('title') }}</li>
      <li id="titleObservable">
        this.service.selectTranslate('title'): {{ titleObservable | async }}
      </li>
      <li id="titleSignal">translateSignal('title'): {{ titleSignal() }}</li>
    </ul>
  `,
})
export class AppComponent {
  private service = inject(TranslocoService);
  public titleObservable = this.service.selectTranslate('title');
  public titleSignal = translateSignal('title');
}

Testing Example

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        AppComponent,
        TranslocoTestingModule.forRoot({
          translocoConfig: {
            availableLangs: ['en'],
            defaultLang: 'en',
          },
          langs: {
            en: {
              title: 'TranslatedTitle',
            },
          },
        }),
      ],
    }).compileComponents();
  });

  it('should render the title from the directive API', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('#titleDirective')?.textContent).toContain(
      'TranslatedTitle'
    );
  });

  it('should render the title from the selectTranslate API', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('#titleObservable')?.textContent).toContain(
      'TranslatedTitle'
    );
  });

  it('should render the title from the signal API', async () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('#titleSignal')?.textContent).toContain(
      'TranslatedTitle'
    );
  });
});

Current Output from Tests:

 FAIL  dist/test-out/browser/app.component.spec.mjs
  AppComponent
    ✓ should render the title from the directive API (39 ms)
    ✓ should render the title from the selectTranslate API (6 ms)
    ✕ should render the title from the signal API (306 ms)

  ● AppComponent › should render the title from the signal API

    expect(received).toContain(expected) // indexOf

    Expected substring: "TranslatedTitle"
    Received string:    "translateSignal('title'): "

      at Object.<anonymous> (src/app/app.component.spec.ts:47:65)
      at chunk-WUKDJ4I2.mjs:60:61
      at new ZoneAwarePromise (node_modules/zone.js/fesm2015/zone.js:1425:21)
      at __async (chunk-WUKDJ4I2.mjs:44:10)
      at src/app/app.component.spec.ts:43:64
      at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:368:26)
      at _ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:273:39)
      at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:367:52)
      at _Zone.run (node_modules/zone.js/fesm2015/zone.js:130:43)
      at Object.wrappedFunc (node_modules/zone.js/fesm2015/zone-testing.js:740:30)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   0 total
Time:        1.093 s
Ran all test suites.

Expected behavior

I would expect the signal API to behave the same as the directive / observable API when used with a static string parameter so the should render the title from the signal API test should pass as it is implemented above.

This is an issue for users trying to migrate from the selectTranslate API to the signal API because they would have to add async / awaits to their tests to handle the extra tick required by the signal API to render the translation.

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

https://codesandbox.io/p/devbox/epic-taussig-forked-86rsdk

Transloco Config

        TranslocoTestingModule.forRoot({
          translocoConfig: {
            availableLangs: ['en'],
            defaultLang: 'en',
          },
          langs: {
            en: {
              title: 'TranslatedTitle',
            },
          },
        }),

Please provide the environment you discovered this bug in

Transloco: 8.0.2

Browser

Chrom 142.0.7444.135

Additional context

No response

I would like to make a pull request for this bug

Yes 🚀

[shaharkazaz]

@maleetz Interesting, how would you approach this?

[maleetz]

Sorry I didn't get a chance to include the PR with the issue right away, but essentially I'm proposing to use the basic of function for static params, which I think avoids lots of complexity for the most common use case.