How to test or even spy a modal?

Siemens iX
1

I want to test/mock the selected user option on a modal.

But how ?

2

Hello @evertoncanez_ferreira_da_silva,
thank you for reaching out.

Could you please specify what you are trying to do exactly?
A code example would be great. A more detailed description could also help.

3

I think you for quick the response.

I’m trying to test a modal call like this:

image

But I got an error like this one:

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

  86 |
  87 |     component["deleteReport"](reportId);
> 88 |     expect(modalService.open).toHaveBeenCalled();
     |                               ^
  89 |   });
  90 |
  91 |   it("should call toast message", () => {

In other frameworks this usually is more straight forward. Maybe I’m missing some detail here.

Any clue?

Thanks!

4

Maybe you have to check your component code. Here is an example of an working unit test based on the angular documentation

Test:

describe('TestDummyComponent', () => {
  let component: TestDummyComponent;
  let fixture: ComponentFixture<TestDummyComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      // provide the component-under-test and dependent service
      providers: [TestDummyComponent],
      imports: [IxModule.forRoot()],
    });

  });

  beforeEach(() => {
    // inject the component.
    fixture = TestBed.createComponent(TestDummyComponent);
    component = TestBed.inject(TestDummyComponent);
  });

  it('test', () => {
    // inject and the dependent service
    let service = fixture.debugElement.injector.get(ModalService);
    spyOn(service, 'open');

    component.deleteRecord('1');
    expect(service.open).toHaveBeenCalled();
  });
});

Component:

import { Component, OnInit } from '@angular/core';
import { ModalService } from '@siemens/ix-angular';

@Component({
  selector: 'app-test-dummy',
  templateUrl: './test-dummy.component.html',
  styleUrls: ['./test-dummy.component.scss'],
})
export class TestDummyComponent implements OnInit {
  constructor(private readonly modalService: ModalService) {}

  ngOnInit(): void {}

  public deleteRecord(id: string) {
    this.modalService.open({
      content: .... some content .... ,
    });
  }
}