testing-library/angular-testing-library

Signal inputs paired with constructor injection

Closed this issue · 2 comments

I'm not sure if this is intended but to me it feels like a bug.
When testing a component with an input signal I can't use constructor injection because I get a NG0303: Can't set value of the 'value' input on the 'DummyComponent' component. error. Replacing constructor injection with the inject() function, however, works just fine.

This is a simple test component showcasing the behavior:

import { HttpClient } from '@angular/common/http';
import { Component, inject, input } from '@angular/core';

@Component({
  selector: 'sq-dummy',
  standalone: true,
  imports: [],
  template: '<p>{{ value() }}</p>\n',
  styleUrl: './dummy.component.css'
})
export class DummyComponent {

  value = input.required<string>();

  // private http = inject(HttpClient);

  // constructor(private http: HttpClient) {
  // }
}

testfile:

import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { render, screen } from '@testing-library/angular';

import { DummyComponent } from './dummy.component';

describe('DummyComponent', () => {
  it('should succeed', async () => {
    await render(DummyComponent, {
      inputs: {
        value: 'test',
      },
      providers: [
        provideHttpClientTesting(),
        provideHttpClient(),
      ],
    });

    expect(screen.getByText('test')).toBeVisible();
  });
});

versions:

"@angular-devkit/core": "18.2.0",
"@testing-library/angular": "17.3.1",
"@testing-library/jest-dom": "6.5.0",

I tried to reproduce this in #496, but everything seems fine.
Please open a new issue, including a reproduction.

In my current setup your test case fails so I assume that the next version will fix the issue then. Thanks!