import { TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: '<router-outlet></router-outlet>',
  standalone: true,
  template: 'mock',
})
export class MockRouterOutlet {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: '<router-outlet></router-outlet>',
})
export class AppComponent {
  title = 'a17';
}

describe('AppComponent with real router', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
    }).compileComponents();
  });

  // REMOVE "x" TO REPRODUCE THE ISSUE
  xit('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    expect(fixture.nativeElement.innerHTML).toEqual('<router-outlet></router-outlet><!--container-->');
  });
});

describe('AppComponent with mock router', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
    }).overrideComponent(AppComponent, {
      set: {
        imports: [MockRouterOutlet],
      }
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    expect(fixture.nativeElement.innerHTML).toEqual('<router-outlet>mock</router-outlet>');
  });
});