ngneat / spectator

🦊 🚀 A Powerful Tool to Simplify Your Angular Tests

Home Page:https://ngneat.github.io/spectator

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Angular 17 signal required input

Deeadline opened this issue · comments

commented

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...

commented

@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.