ng2-semantic-ui icon indicating copy to clipboard operation
ng2-semantic-ui copied to clipboard

Can you unit test modal components?

Open Hughp135 opened this issue 6 years ago • 1 comments

I have a component for a confirm modal similar to the example in the docs, and when I unit test the component, I get this:

Error: StaticInjectorError(DynamicTestModule)[ConfirmModalComponent -> Modal]: 
  StaticInjectorError(Platform: core)[ConfirmModalComponent -> Modal]: 
    NullInjectorError: No provider for Modal!

Adding Modal to the providers array results in this error:

Failed: Can't resolve all parameters for Modal: (?, ?).

Adding SuiModal to providers array does nothing.

Test imports:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ConfirmModalComponent],
      providers: [
        Modal,
      ],
    })
      .compileComponents();
  }));

Component

export class ConfirmModalComponent implements OnInit {

  constructor(public modal: SuiModal<IConfirmModalContext, void, void>) { }


  ngOnInit() { }
}

Hughp135 avatar Apr 10 '18 15:04 Hughp135

Found a way around by mocking the SuiModal class like so:

const modalContext: IConfirmModalContext = {
    title: 'Title',
    question: 'test?',
};
const fakeModalService = {
    approve: () => null,
    context: modalContext,
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ConfirmModalComponent],
      providers: [
        { provide: SuiModal, useValue: fakeModalService },
      ],
    })
      .compileComponents();
  }));

Hughp135 avatar Apr 10 '18 16:04 Hughp135