In my Angular application, I am working on writing integration tests for a component that includes an ngx-bootstrap modal.
Within these integration tests, the component features a button that triggers a modal to appear. Within the modal, there is a "Save" button that is clicked during the testing process.
When the "Save" button is clicked, it calls a method:
(click)=onSave() and this is the structure of the Modal Component:
constructor(
protected bsModalRef: BsModalRef,
) {}
onSave() {
// perform certain tasks (NOTE: this part is executed during testing)
this.bsModalRef.hide();
}
Although the logic within the onSave() method is executed correctly, the modal does not disappear as expected during the test runs.
Strangely, manually clicking the button after the test is done running hides the modal properly.
Despite the fact that the button properly registers the click and triggers the onSave() method during the tests, the modal fails to disappear.
It is important to note that there are no spies used in this scenario, and in order to maintain the integrity of the integration test, I would like to avoid mocking the hide() method. Instead, I aim to resolve the issue to ensure that the modal hides during the test run and verify that it disappears along with the other outcomes of my custom onSave() method.