まず、必要なパッケージをインストールします。Angularのプロジェクトディレクトリで、以下のコマンドを実行します。
npm install @ng-bootstrap/ng-bootstrap --save
次に、テスト用のコンポーネントを作成します。以下のコマンドを実行して、新しいコンポーネントファイルを作成します。
ng generate component ModalTest
作成されたModalTestコンポーネントのテストファイル(modal-test.component.spec.ts)を開き、以下のようにテストケースを作成します。
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BsModalService } from 'ngx-bootstrap/modal';
import { ModalTestComponent } from './modal-test.component';
describe('ModalTestComponent', () => {
let component: ModalTestComponent;
let fixture: ComponentFixture<ModalTestComponent>;
let modalService: BsModalService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ModalTestComponent],
providers: [BsModalService]
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ModalTestComponent);
component = fixture.componentInstance;
modalService = TestBed.inject(BsModalService);
});
it('should open a modal', () => {
spyOn(modalService, 'show').and.callThrough();
component.openModal();
expect(modalService.show).toHaveBeenCalled();
});
});
上記の例では、ModalTestComponentのopenModalメソッドが正しくモーダルを表示するかどうかをテストしています。BsModalServiceのshowメソッドをスパイし、openModalメソッドがそれを呼び出すことを確認しています。
これで、BsModalServiceをJasmineを使用してテストする準備が整いました。追加のテストケースや必要なアサーションを追加することもできます。
以上が、AngularでJasmineを使用してBsModalServiceをテストする方法の簡単な例です。これにより、モーダルダイアログの表示や機能のテストを簡単に行うことができます。