ng-mocks/community

Discussions about usage of mocks in Angular unit tests

MG.

@satanTime

Hi @gituser3000, a good question, might you provide me a min repo with the issue? For popups / overlays / modals, I usually mock the service which creates them and simply assert that its .open has been called with right params, so there is no real modal behind. But in your case, if you don't want to mock the service, I think it should still work with a mock component, but I need to check the error. Maybe ng-mocks should be adjusted.

GeassCoder

@GeassCoder

Hi @satanTime Your suggestion earlier seemed to work and I was trying to add ngMocks.faster() to speed it up a bit, but it gives warning that ngMocks.faster has no effect. The setup is like this as you suggested

beforeEach(() => {
    return MockBuild(MyComponent)
        .keep(FormsModule, { exportAll: true })
        .keep(SomeModule, { exportAll: true })
        ... // more modules to keep
        .replace(Noisy3rdPartyComponent, MockComponent)
        .provide([
              { provide: SomeService1, useClass: MockSomeService1 }
              { provide: SomeService2, useValue: MockSomeService2 }
              ...
        ])
})

There is no spyOn used and I looked into all those MockSomeService and there is no spyOn in them either, so what could be the reason then?

MG.

@satanTime

Hi @GeassCoder, this one actually should work :) could you send me in PM the full MockBuilder setup? usually it does not have the effect if useValue recreated in the beforeEach.

Or feel free to create an issue on github with the info and I'll take a look at it next days.

MG.

@satanTime

Hi everybody. v1.7.0 has been released. There are some new features which might be quite interesting:

https://ng-mocks.sudo.eu/api/ngMocks/render
https://ng-mocks.sudo.eu/api/ngMocks/hide

and examples
https://ng-mocks.sudo.eu/guides/libraries/ng-select
https://ng-mocks.sudo.eu/guides/libraries/primeng
https://ng-mocks.sudo.eu/guides/libraries/angular-material

also cool stuff is coming in 1 week, stay tuned.

MG.

@satanTime

Hi everybody, v11.8.0 has been released.

There are new features which help with finding and asserting ng-container elements:
https://ng-mocks.sudo.eu/api/ngMocks/reveal
https://ng-mocks.sudo.eu/api/ngMocks/revealAll
https://ng-mocks.sudo.eu/api/ngMocks/formatHtml
https://ng-mocks.sudo.eu/api/ngMocks/crawl

MG.

@satanTime

Hi everybody, v11.9.0 has been released.

New features for form controls:
https://ng-mocks.sudo.eu/api/ngMocks/change
https://ng-mocks.sudo.eu/api/ngMocks/touch

also issues with mock ControlValueAccessors and kept ReactiveFormsModule and FormsModule should be solved.

Rodrigo

@fcostarodrigo

Hello, I am getting a "No component factory found for MockComponent. Did you add it to @NgModule.entryComponents?" I am trying to test a component that you can pass another component to render. I created this mock component in my test, how can I add it to MockBuilder for it to be included in the module in the tests?

MG.

@satanTime

Hi @fcostarodrigo, yep, they are there, but I think the problem is that the code still uses the original component's class. and because entryComponents has a mock of it - there is the error. I would say, you can try .keep the component, then the error should be gone.

Rodrigo

@fcostarodrigo

I try using keep but it didn't work. Let me create an example in StackBlitz.

MG.

@satanTime

that's a pity, good, then looking forward to to check it.

Rodrigo

@fcostarodrigo

https://stackblitz.com/edit/angular-ivy-lp4rzq?file=src/dynamic-overlay/dynamic-overlay.component.spec.ts

Ivy is disabled as well.

The component that I want to render is not present in the module. I am expecting that the user of my module will add it to their module. So if they want to render a button component, in their module they will import my module and add the button component there.

MG.

@satanTime

in your example ry-dynamic-overlay isn't provided in the test.

Rodrigo

@fcostarodrigo

Sorry about that, it should be dynamic-overlay only.

MG.

@satanTime

yep - fixing the app, and ping you soon

Rodrigo

@fcostarodrigo

Thanks

MG.

@satanTime

Yep, that's a bug without ivy.

for now you can use a hotfix:

  @NgModule({
    declarations: [
      MockComponent,
    ],
    imports: [OverlayModule],
    entryComponents: [MockComponent],
  })
  class MockModule {}

  beforeEach(() =>
    MockBuilder(DynamicOverlayComponent, MockModule).keep(MockComponent)
  );

and on the weekend I'll add a fix to the library.

Rodrigo

@fcostarodrigo

That worked great, thanks for the fast feedback :)

I updated the stackblitz to use the module in the app component. But you were faster hehehe.

MG.

@satanTime

:+1: cool. Then ping you on the weekend when the new version is here. Happy coding!

MG.

@satanTime

Hi guys, v11.10.0 has been released.

Now ng-mocks can trigger events and simulate hot keys
https://ng-mocks.sudo.eu/api/ngMocks/trigger
https://ng-mocks.sudo.eu/api/ngMocks/click

touches and changes support all possible cases: kept control value accessors, mock ones, and also kept and mock form modules.
https://ng-mocks.sudo.eu/api/ngMocks/change
https://ng-mocks.sudo.eu/api/ngMocks/touch

there is formatText along with formatHtml now. Also their interface was extended, if to pass an array of debug elements into them, they'll return an array of formatted strings
https://ng-mocks.sudo.eu/api/ngMocks/formatText

@fcostarodrigo, your bug is still in progress. I found out that I had tried to tackle it already, still on it, the next week or in one week there will be a solution.

Florian Novellon

@fnovellon

Hi, I have recently been using ngMocks and i am facing an error that I cannot resolve. I'm trying to MockRender a component that has an @Input.
MockRender(MyComponent, { myInput: "hello" }).
This input isn't used in template and I get a Template parse errors beceause myInput ins't a known property of Mycomponent template.
So my question is : how to inject data into my @Input that ins't used in template ? If you have a solution I am interested, thank you :)

MG.

@satanTime

Hi @fnovellon, how is the input defined in MyComponent?

Florian Novellon

@fnovellon

@Input()
myInput: AnObject[] = null;

I have to inject it because it's use in OnInit method

MG.

@satanTime

the code you showed should generate <my-component [myInput]="myInput"></my-component>
https://github.com/ike18t/ng-mocks/blame/master/docs/articles/api/MockRender.md#L180-L186

aha - looks right :)

I would say it should work, maybe myInput in the test has a typo? Could you create a min example with the issue on stackblitz for example?
You could use ng-mocks template: https://stackblitz.com/github/ng-mocks/examples?file=src/test.spec.ts

Florian Novellon

@fnovellon

Ok thanks :)

Sergei Sergeevich

@ssergdev

Hello everyone, want to say Thanks for the ng-mocks!

MG.

@satanTime

Hi @ssergdev, welcome to the group and thanks for the warm words!

Sergei Sergeevich

@ssergdev

Can I ask something - why if i'm trying to spy on some injected service BEFORE MockRender(...), my spies would not work: https://gist.github.com/ssergdev/6e88de0f2d0d60306269211707eaff26 and actually what is the correct way to test OnInit logic with multiple scenarious? Thanks!

MG.

@satanTime

I think, the issue is here, because MockRender resets TestBed for own needs. I would recommend to check MockInstance https://ng-mocks.sudo.eu/api/MockInstance#set-desired-values, it helps to set mocks for services which aren't used yet.

But in your case, I see that you keep the service and mock only one method. Why do you not want to mock the whole service?

Sergei Sergeevich

@ssergdev

@satanTime It seems the MockInstance is what I need. Thank you for response!

MG.

@satanTime

@ssergdev that’s great. Feel free to ping me if there are any concerns.

Babeetlebum

@Babeetlebum

hi guys, been trying to use MockBuilder but I struggle on lazy-loaded modules as MockBuilder only accepts one Module as the second argument. I guess the second paramter of MockBuilder should be an array of AppModule and LazyLoadedModule in my situation ?

MG.

@satanTime

Hi @Babeetlebum, would .mock work for you https://ng-mocks.sudo.eu/api/MockBuilder#mock ? I think, if to chain lazy modules there, it should work.

Babeetlebum

@Babeetlebum

Hi @Babeetlebum, would .mock work for you https://ng-mocks.sudo.eu/api/MockBuilder#mock ? I think, if to chain lazy modules there, it should work.

looks like it works, thanks !

MG.

@satanTime

Hi @Babeetlebum, would .mock work for you https://ng-mocks.sudo.eu/api/MockBuilder#mock ? I think, if to chain lazy modules there, it should work.

looks like it works, thanks !

Great, I'll add an example with lazy modules to the docs.

Babeetlebum

@Babeetlebum

awesome :thumbsup:

Dji

@dji:matrix.org

[m]

Hello, I'm using ng-mocks for years now but I need some help today using ng-mocks 11 new capabilities and particularly mixing up new capabilities with legacy ones. As I have a huge app, I decided to migrate modules/components testing one by one and move it to ngMocks.find / ngMocks.change methods (particularly for replacement of __simulateChange).

If I ran legacy tests alone (several modules/components) on one side it works; If I ran new unit tests (with ngMocks) on the other side, it works.
But if I run all tests in one shot, I got the following error: .__simulateChange is not a function and some others expects fails with undefined value.

I added ngMocks.reset() on top of the test files where I used __simulateChange and it seems to workaround the problem, could you confirm this is the right way to fix this ?

Is that problem were documented somewhere ?
If didn't find such information in https://ng-mocks.sudo.eu but I can add a specific troubleshooting section if you want.

Please let me know, thanks in advance !

MG.

@satanTime

Hi @dji:matrix.org, thanks for the report. It looks like an issue. __simulateChange is deprecated and ngMocks.change is the right way to proceed, but still, they should work together correctly. Could you create an issue on github and provide an example of a failing test which contains a mixture of their usage?

3 replies

MG.

@satanTime

Hi guys, v11.11.0 has been released.

almost all ngMocks helpers support css selectors along with debugElements
ngMocks.faster supports MockRender in beforeAll
MockBuilder accepts arrays of declarations in params
MockBuilder respects passed modules with providers and keeps / mocks them properly
in no-ivy mode MockBuilder registers all components in entryComponents and allows popup testing
MockBuilder allows to mock declarations from CommonModule date / number pipes for example

If you are facing an issue - feel free to ping me or open an issue on github. Happy coding!

Peter Foeng

@peterfoeng

hi everyone, any pointers of mocking ActivatedRoute?

2 replies

Sergei Sergeevich

@ssergdev

Hello everyone! After update from 11.10.0 to 12.0.0 all spyes defined as
mySpy = MockInstance(MyService, 'method', jasmine.createSpy()) just stop working. Is it not a valid way anymore?

16 replies

MG.

@satanTime

Hi guys, I hope you all are well.

If you don't mind, I would like to ask to support a fix in jest for ng-mocks with a like / upvote: facebook/jest#11483.

Thank you in advance!

MG.

@satanTime

Hi everybody.

v12.1.0 has been released.
There is a potentially interesting feature for you besides stability improvements.
It is MockRenderFactory, it allows to reuse the same middleware component in different tests. With its help and ngMocks.faster() you can get max performance.

describe('Maximum performance', () => {
  const factory = MockRenderFactory(MyComponent, ['input1', 'input2']);

  ngMocks.faster();
  beforeAll(() => MockBuilder(MyComponent, MyModule));
  beforeAll(() => factory.configureTestBed());

  it('covers one case', () => {
    const fixture = factory({input1: 1});
    expect(fixture.point.componentInstance.input1).toEqual(1);
  });

  it('covers another case', () => {
    const fixture = factory({input2: 2});
    expect(fixture.point.componentInstance.input2).toEqual(2);
  });
});

MG.

@satanTime

Hi everybody,
I hope you are doing great.

There is a big upcoming change regarding mocking platform root level definitions.
Might you test a preliminary build of ng-mocks on your projects and let me know whether everything is fine?
The build is here: https://github.com/ike18t/ng-mocks/files/6731063/ng-mocks.zip

Thank you in advance and happy coding!

Babeetlebum

@Babeetlebum

Hello, I want to mock a component but replace its template with a specific text, any easy way to do that with MockBuilder ? Something like MockBuilder(MyComponent, MyModule).mock(ComponentToStub, '<span>MY SPECIFIC TEXT</span>'); ? My first idea was to .replace() it with a stub which goes against the idea of ngMocksas I would have to maintain my stubs... Thanks for your help!

11 replies

Where communities thrive

People

Repo info

Activity