Angular 17 signal required input
Deeadline opened this issue ยท 4 comments
Hi, I am moving to signal inputs in angular 17 and I came across the problem with unit test passing required inputs.
Console error:
NG0303: Can't set value of the 'badgeValueInput' input on the 'BadgeComponent' component. Make sure that the 'badgeValueInput' property is annotated with @Input() or a mapped @Input('badgeValueInput') exists.
My code:
// unit test
describe('BadgeComponent', () => {
let spectator: Spectator<BadgeComponent>;
const createComponent = createComponentFactory({
component: BadgeComponent,
});
beforeEach(() => {
spectator = createComponent();
spectator.setInput('badgeValue', 'test')
});
it('should be okay', () => {
expect(spectator.component).toBeDefined()
});
});
// component
class BadgeComponent {
badgeValueInput = input.required<string>( { alias: 'badgeValue' } );
}
Can you help me what am I doing wrong?
@Deeadline, It'd be nice of you if you elaborated on why you closed the ticket as I assume you managed to resolve the issue.
I'm facing the same error while doing exactly what official spec files do and ask my self the same question โ what am I doing wrong...
@SillyButt sorry ๐
In unit-test disable "detectChanges" in createComponent. And it should work correctly
Thank you, pal!
Unfortunately, that didn't do the trick.
Error: NG0303: Can't set value of the 'title' input on the 'HeaderComponent' component. Make sure that the 'title' property is annotated with @Input() or a mapped @Input('title') exists.
Versions:
"@angular/common": "17.3.3",
"@angular/compiler": "17.3.3",
"@angular/core": "17.3.3",
"@angular/platform-browser": "17.3.3",
"@angular/platform-browser-dynamic": "17.3.3",
"@ngneat/spectator": "~17.1.0", // tried "18.0.0" too
Component:
@Component({
selector: 'header',
standalone: true,
template: '{{ title }}'
})
export class HeaderComponent {
title = input<string>();
}
Testing:
import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
import { HeaderComponent } from './header.component';
describe('HeaderComponent', () => {
let spectator: Spectator<HeaderComponent>;
const createComponent = createComponentFactory({
component: HeaderComponent,
detectChanges: false, // Tried true too
});
it('should show title', () => {
spectator = createComponent({ props: { title: titleMockValue } });
// spectator = createComponent();
// spectator.setInput({ title: titleMockValue }); // Tried using .setInput too
expect(spectator.query('.title')).toHaveExactText(titleMockValue);
});
});
I tried rewriting it with native TestBed and it worked.