import { Component, ViewContainerRef } from '@angular/core';
import {
  DeferBlockBehavior,
  DeferBlockState,
  TestBed,
} from '@angular/core/testing';

@Component({
  selector: 'large-component',
  template: `I'm so large!`,
})
class LargeComponent {}

@Component({
  imports: [LargeComponent],
  template: `
    @defer {
    <large-component />
    } @placeholder { Placeholder } @loading { Loading... }
  `,
})
class DeferTestComponent {}

describe('defer bug', () => {
  it('should render a defer block in different states', async () => {
    TestBed.configureTestingModule({
      deferBlockBehavior: DeferBlockBehavior.Manual,
    });
    const fixture = TestBed.createComponent(DeferTestComponent);
    await fixture.whenStable();

    // having this here will cause getDeferBlocks to return []
    // doing it after getDeferBlocks has no negative side-effects
    fixture.debugElement.injector.get(ViewContainerRef);

    const deferBlocks = await fixture.getDeferBlocks();
    const deferBlockFixture = deferBlocks[0];

    // Renders placeholder state by default.
    expect(fixture.nativeElement.innerHTML).toContain('Placeholder');
    // Render loading state and verify rendered output.
    await deferBlockFixture.render(DeferBlockState.Loading);
    expect(fixture.nativeElement.innerHTML).toContain('Loading');

    // Render final state and verify the output.
    await deferBlockFixture.render(DeferBlockState.Complete);

    expect(fixture.nativeElement.innerHTML).toContain("I'm so large!");
  });
});