Bug: MockPipe with custom transform function on a standalone angular pipe

[bornes]

Using standalone angular pipe, it is not possible to mock the transforme function since it always return an empty string.

stackblitz: https://stackblitz.com/edit/angular-ivy-ov8yzw

It should be possible to mock the return of the transform function in a standalone angular pipe

[satanTime]

Hi,

the problem in your test is that you don't change the definition of the standalone component.

Here you can find information how to mock dependencies of a standalone component: https://ng-mocks.sudo.eu/guides/component-standalone

https://stackblitz.com/edit/angular-ivy-8anmhe?file=src%2Fapp%2Fapp.component.spec.ts

import { Component, Pipe, PipeTransform } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { MockBuilder } from 'ng-mocks';

@Pipe({
  name: 'mockedPipe',
  pure: false,
  standalone: true,
})
export class MockedPipe implements PipeTransform {
  transform() {
    return 'hi';
  }
}

@Component({
  selector: 'mocked-component',
  template: '<span> {{ test | mockedPipe }}</span>',
  imports: [MockedPipe],
  standalone: true,
})
export class MockedComponent {}

describe('test standalone mocked pipe', () => {
  beforeEach(() => MockBuilder(MockedComponent).mock(MockedPipe, () => 'bye'));

  it('should have the attribute and method of the extended class', () => {
    const fixture = TestBed.createComponent(MockedComponent);
    const component = fixture.componentInstance;
    fixture.detectChanges();
    expect(fixture.nativeElement.innerText).toContain('bye');
  });
});

[satanTime]

However, you found a different bug.

[bornes]

But I am using TestBed.configureTestingModule in my example with a mocked transform function in a standalone pipe. The same approach, in a not standalone pipe , works well. So, maybe it should work on standalone pipes too 👍

[satanTime]

v14.5.1 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.