Bug: fixture.getDeferBlocks() returns no defer blocks if we want to use any ng-mocks mock inside the test

[edekovacsgalambos]

Description of the bug

There a problem when trying to use ng-mocks in test which would like to use tools for new @defer block testing,
the problem is:
fixture.getDeferBlocks();
will return no defer blocks if we have any ng-mocks mock inside the test.

An example of the bug

Here is minimalistic example to reproduce

angular-jest-defer-ng-mock.zip

check test-defer.component.spec.ts in the example project

if we comment out .overrideComponent(...) from component ts file and <test-child-defer /> line from template, the test will pass.

Expected vs actual behavior

Mocking components with ng-mock has no effect on fixture.getDeferBlocks() functioning, it will return defer block correctly.

[csaszika]

While we are waiting for the solution, this is my workaround:

.overrideComponent(TestDeferChildComponent, {
        set: {
          template: '<div>TestDeferChildComponent</div>',
        },
      })

The inputs and other meta configuration will be the same.
Injected services into child component will be resolved by TestBed.
Not perfect because MockComponent(TestDeferChildComponent) would be nicer and shorter, but for now, it works.
However it won't hide dependencies of the child.

[a-audusseau]

Hi! Any news on this? I have exactly the same issue and I can't use the workaround as I need to prevent the child component to pull all its dependencies.

[csaszika]

@satanTime Can you give us an update, will it be investigated/fixed?
what do you think?

[Ozmerg]

Hello there, I'm facing the same issue. Is there any update on this?

[MikeMatusz]

Does ng-mocks do some kind of one-time global configuration? Seems like if any test file uses ng-mocks, I can't get results from getDeferBlocks() even in a spec file that doesn't use it (using karma/jasmine). If I scope ng test using --include so I don't include any files using this library, then I start getting defer blocks returned again. Sounds like active development will resume in the new year, hopefully a solution will be found during updates to support newer versions of Angular.

[Francesco-Borzi]

same problem here, any chance this can get fixed? it's quite a serious issue

[satanTime]

Hi all, this is the next one on my todo.

If you can post here more examples (broken code) of what you want to achieve, it would be great.

Thank you in advance.

[Francesco-Borzi]

@satanTime that's great to hear. As an example, basically the standard flow to test any @defer block:

https://angular.dev/guide/templates/defer#testing-defer-blocks

the problem is, in my case for example, getDeferBlocks() just returns an empty array

[edekovacsgalambos]

@satanTime
Sorry just checked again my example, and last expect should be this:
expect(loadedBlock.textContent).toContain('Child');
if will upload it one more time for easier handling
angular-jest-defer-ng-mock_fixed.zip
So currently the test case in the example fails, because it contains override components from ng-mocks
.overrideComponent(TestDeferComponent, { set: { imports: [MockComponents(TestDeferChildComponent)], }, })
if you remove overrideComponent the test will pass (obviously in that case the ChildComponent won't be mocked)

So the expected case would be to have this example test case passing even with using ngmock's overrideComponent

thanks in advance