Bug: Angular 17.1.0 `input.required()` issues about ng-mocks HOT 14 OPEN

Fair enough, my comment was jest-centric. I have no idea about jasmine

from ng-mocks.

I believe it might be a good idea to migrate to reflectComponentType from @angular/core to fetch inputs / outputs (and other data regarding the component). That is however quite some work, and I'm not sure if it is the correct path or even where / how / if that should start. But I have been able to confirm that reflectComponentType does return inputs and outputs for signals, decorators and host-properties.

Do you have any input @satanTime?

from ng-mocks.

meta.inputs is empty if we use input() instead of @Input

__ngMocksDeclarations doesn't contain the inputs (see libs/ng-mocks/src/lib/resolve/collect-declarations.ts).

from ng-mocks.

It looks like, at the moment, Angular themselves test out signal inputs by manually defining and using wrapper components (i.e. without any reflection on the available inputs and types):

https://github.com/angular/angular/blob/e2272750878e1f74e59121e76a01e910ad1ac607/integration/cli-signal-inputs/src/app/greet.component.spec.ts#L20-L27

from ng-mocks.

Any news about this issue ?

from ng-mocks.

Potentially useful: the Spectator library is being updated to support signal inputs: ngneat/spectator#638

from ng-mocks.

Seems to me like this can be regarded as resolved.
jest-preset-angular added support for input signals, queries and models in ^14.0.1

For comparison, this is @Sebastian-G 's stackblitz with @angular-builders/[email protected] which uses an older version of jest-preset-angular:
https://stackblitz.com/edit/ex-base-reusable-component-c33uk8?file=package.json ; the tests fail

This is the same stackblitz with @angular-builders/[email protected] which uses jest-preset-angular@^14.0.1:
https://stackblitz.com/edit/ex-base-reusable-component-zpyjgn?file=package.json ; the tests pass, aside from a snapshot test not matching, which I don't care about in this context

TL;DR: Update jest-preset-angular or dependencies that use jest-preset-angular

from ng-mocks.

How about when using Jasmine? (The default out-of-the-box experience that Angular provides)

from ng-mocks.

@cuddlecake — it's useful to know, thanks for sharing.

Aside: Angular does have official experimental support for Jest; I wonder where that will go.

from ng-mocks.

Not sure if this is a seperate issue or related, but I'm getting Error: NG0303 from signal components. Note that input.required isn't needed, a simple input gives the same error. Here is a test-case:

import { CommonModule } from '@angular/common';
import { Component, NgModule, input } from '@angular/core';

import { MockBuilder, MockRender } from 'ng-mocks';

@Component({
  selector: 'signal-component',
  template: '<h1>{{ header() }}</h1>',
})
class SignalComponent {
  public readonly header = input<string>();
}

@Component({
  selector: 'target-component',
  template: '<signal-component [header]="hello"></signal-component>',
})
class TargetComponent {
  public readonly hello = 'Hello!';
}

@NgModule({
  declarations: [TargetComponent, SignalComponent],
  imports: [CommonModule],
})
class TargetModule {}

describe('signal inputs', () => {
  beforeEach(() => MockBuilder(TargetComponent, TargetModule));

  it('should be created', () => {
    expect(
      MockRender(TargetComponent)?.point?.componentInstance,
    ).toBeTruthy();
  });
});

from ng-mocks.

Hi @andreandersson, it used to be like that, but it doesn't represent all the data which is needed for mocks, that's why ng-mocks replies on decorators data instead.

from ng-mocks.

Done some digging. This probably relates to angular/angular#54013

For example, this does not work in ng-mocks, but in a new Angular-repository:

import {
    Component,
    input,
    reflectComponentType,
  } from '@angular/core';
  
  @Component({
    selector: 'test-component',
    template: '<h1>{{ header() }}</h1>',
  })
  class TestComponent {
    public readonly header = input.required<string>();
  }
  
  describe('signals', () => {
    it('should print header', () => {
      expect(reflectComponentType(TestComponent)?.inputs?.length).toBe(1);
    });
  });

from ng-mocks.

I've noticed that Signal Inputs are just treated as Decorator Input.

I have the following component:

@Component({
  selector: 'app-list-item',
  standalone: true,
  templateUrl: './list-item.component.html',
  styleUrl: './list-item.component.scss',
})
export class ListItemComponent { 
  task = input.required<Task>();
}

I mock the component using MockComponent function:

 await TestBed.configureTestingModule({
      imports: [ListComponent],
      providers: [
        {
          provide: TasksService,
          useValue: tasksServiceStub,
        },
      ],
    })
      .overrideComponent(ListComponent, {
        remove: {
          imports: [ListItemComponent],
        },
        add: {
          imports: [MockComponent(ListItemComponent)], // I mock here
        },
      })
      .compileComponents();

And my test try to access the Singal Input from ListItemComponent to assert its value:

 expect((<ListItemComponent>item.componentInstance).task()).toEqual(completedTasksStub[index]);

But the test breaks because the task property (it's a Signal Input) is not a function.

The complete error:
TypeError: completedItemDebugEl.componentInstance.task is not a function

Logging the <ListItemComponent>item.componentInstance).task in the test, I see that it's a property

task: { id: '1', name: 'Buy milk', completed: true }

Working with Signal Inputs, we need to test it as a Signal and not as a property as it was with Decorator Inputs.

Any news about that @satanTime?

Thank for your amazing work btw

from ng-mocks.

I just created an issue related to my last comment
#8887

from ng-mocks.