Testing setup for components in modals in weird behaviour of change detection in these setups

[antonborisoff]

ngZorro uses a particular setup to test that components for modals are correctly opened. Here is an example: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/modal/modal-footer.directive.spec.ts

If you check 'should work with service' test and setup for it, you'll notice that ngZorro devs call createComponent() with completely unrelated component in beforeEach() (TestDirectiveFooterComponent, but it could be any dummy component with any template) to get a fixture, but then open the component under testing with modalService.create() in tests.

Suprisingly enough, if you call fixture.detectChanges() in such setup, you will trigger change detection for the component in the modal as well (it could be checked if you add ngDoCheck() logging to the component under testing).

Now consider a different (IMHO, more natural) setup. Have a dummy component that provides a button and a click on this button opens the modal:

@Component({
  selector: 'host-comp',
  template: `
  <button (click)="openModal()">Open modal</button>
  `
})
export class HostComponent {
  constructor(public modalService: NzModalService){}

  openModal(){
    this.modalService.create(TestDirectiveFooterInServiceComponent)
  }
}

If you now use HostComponent to get fixture and click its button to open the modal, the strange thing happens: fixture.detectChanges() no longer triggers change detection on component in the modal.

So I have the following questions:

1. Why does ngZorro team uses such a weird setup with explicit creation of modals in tests via the service? If they borrowed the setup, who the borrowed it from?
2. Why doesn't fixture.detectChanges() work in the second setup with HostComponent, but works when we create the modal via service in tests?

I would greatly appreciate any help with these questions either from the community or ngZorr dev team.

[ParsaArvanehPA]

@antonborisoff Greetings,
These are my interpretations of the situation, so please note that I might be mistaken.

For Your First Question:

You're correct that creating TestDirectiveFooterComponent isn't necessary. The purpose of the should work with service test is to verify the creation of the Modal component without relying on a service. Ideally, they could have used a test setup that provided NzModalService without creating any components, as the focus is on testing the service itself. However, they chose to create the component anyway, possibly because it was more convenient for their testing approach.

For Your Second Question:

I believe the first usage you're referring to involves creating the modal using the <nz-modal> tag. If that's the case, once the modal becomes visible for the first time, the component is initialized and remains in memory even if isVisible is later set to false. In this state, isVisible=false only destroys the view, not the underlying logic, so change detection should still function.

For the second scenario, where you're creating the modal using the service, change detection won't occur until the modal is opened for the first time. Also, the modal component must be visible at least once for change detection to be active, which might have already occurred in previous tests.

To better illustrate this, I've created a StackBlitz example: (link)
Check the console output. Initially, you shouldn't see any logs from the component inside the modal. However, once you open the modal, it will begin logging, and the logs will continue even after you close the modal.

I hope I could be of help.