Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Providing a replacement in MockComponent by adding a second parameter #10987

Open
Martinspire opened this issue Feb 10, 2025 · 3 comments
Labels
enhancement New feature or request

Comments

@Martinspire
Copy link

Describe the feature or problem you'd like to solve

Ever since Angular Standalone was introduced, I found the boilerplate for overriding components to be a bit tedious.

For example:

const createComponent = createComponentFactory({
  component: SomeComponent,
  imports: [],
  overrideComponents: [
    [
      SomeComponent,
      {
        remove: {
          imports: [ChildComponent]
        },
        add: {
          imports: [MockChildComponent]
        },
      },
    ],
  ],
});

For many projects I use NG-Mocks to easily create components to override my components, but often I need more than just a mock and want to do some custom logic in there. But it would be nice if we could do the following solution.

Proposed solution

  imports: [
     MockComponent(ChildComponent, MockChildComponent),
  ],

In this case when the second parameter is provided, it will do the overriding itself and it prevents me from writing a lot of boilerplate to do it.

For the array of components, perhaps a similar setup could be done by providing an array, but I don't think many people are using that yet, but here's an example:

  imports: [
     MockComponents(Othercomponent, [ChildComponent, MockChildComponent], AnotherComponent),
  ],

Additional context

By using this setup, it becomes a lot easier to figure out what role your mocked component is going to play and make the tests use less boilerplate and code to set up.

@Martinspire Martinspire added the enhancement New feature or request label Feb 10, 2025
@satanTime
Copy link
Member

Hi @Martinspire, from what you've described, it sounds like you need to use MockBuilder and simply create TestBed via MockBuilder(ChildComponent) to avoid many lines of code.

@Martinspire
Copy link
Author

I'm already using Angular Standalone and as far as I know Mockbuilder is more for non-standalone. Plus I'm also using Spectator, which puts some improvements on Testbed, but also doesn't really support mockbuilder in the same way.

I would also be fine with MockComponent(ChildComponent).replace(MockChildComponent) but it just seems logical to me to also be able to use the Mock... functions to replace my components with my own mocks. Often times I'm trying to replace a very complex dependency with a simple mock that just has the functions I'm looking for instead of all of the logic and sub dependencies that this complex dependency offers. Like a Charting library or for displaying maps. Its a lot faster to just create a small mock.

But right now I'm also blocked because of the whole mock child with signal issue, so I wanted to use my own temporary mocks, but found it was tedious to implement it, when I had hoped that NGMocks would have a simpler replacement option.

@satanTime
Copy link
Member

You need to read documentation. All things you mentioned are supported by MockBuilder.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants