import { ComponentFixture, TestBed } from '@angular/core/testing';

import { IonicModule, ModalController } from '@ionic/angular';

import { BrowserModule } from '@angular/platform-browser';

import { Component } from '@angular/core';

// Dummy Standalone Component, just a single method that uses the ionic ModalController

@Component({

    selector: 'app-test-dialog',

    template: '',

    imports: [

        IonicModule

    ],

    standalone: true

})

export class TestDialogComponent {

    constructor(private modalCtrl: ModalController) {

    }

    async close() {

        await this.modalCtrl.dismiss();

    }

}

// Test, should override the dismiss method of the ModalController

describe('TestDialogComponent', () => {

    let component: TestDialogComponent;

    let fixture: ComponentFixture<TestDialogComponent>;

    beforeEach(async () => {

        await TestBed.configureTestingModule({

            imports: [

                BrowserModule,

                IonicModule.forRoot(),

                TestDialogComponent

            ],

            providers: [

                {

                    // provide our own ModalController

                    provide: ModalController, useValue: {

                        dismiss: () => Promise.resolve()

                    }

                }

            ]

        }).compileComponents();

        fixture = TestBed.createComponent(TestDialogComponent);

        component = fixture.componentInstance;

    });

    // this should call the provided mock class

    // but I get 'overlay does not exist thrown' 

    // because it calls the real method :-(

    it('close closes the dialog', async () => {

        const modalController = TestBed.inject(ModalController);

        const dismissSpy = spyOn(modalController, 'dismiss');

        await component.close();

        expect(dismissSpy).toHaveBeenCalled();

    });

});

it('close closes the dialog', async () => {

  // Override the ModalController provider for the TestDialogComponent component

  TestBed.overrideComponent(TestDialogComponent, {

    providers: [

      {

        provide: ModalController,

        useValue: {

          dismiss: () => Promise.resolve()

        }

      }

    ]

  });

  // Create a fixture for the TestDialogComponent component

  const fixture = TestBed.createComponent(TestDialogComponent);

  const component = fixture.componentInstance;

  // Call the close method on the component

  await component.close();

  // Expect the dismiss method on the mock ModalController to have been called

  expect(spyOn(TestBed.inject(ModalController), 'dismiss')).toHaveBeenCalled();

});