import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { <%= classify(name) %> } from './<%= dasherize(name) %>';

describe('<%= classify(name) %>', () => {
  let fixture: ComponentFixture<<%= classify(name) %>>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({ imports: [<%= classify(name) %>] }).compileComponents();
    fixture = TestBed.createComponent(<%= classify(name) %>);
    fixture.detectChanges();
  });

  function saveButton(): HTMLButtonElement {
    return fixture.nativeElement.querySelector('button');
  }

  it('starts hidden and shows a status message from the trigger', () => {
    expect(fixture.nativeElement.querySelector('[role="status"]')).toBeNull();

    saveButton().click();
    fixture.detectChanges();

    const status = fixture.nativeElement.querySelector('[role="status"]');
    expect(status).toBeTruthy();
    expect(status.textContent).toContain('Your changes have been saved.');
  });

  it('dismisses manually', () => {
    saveButton().click();
    fixture.detectChanges();

    const dismissButton = Array.from(fixture.nativeElement.querySelectorAll('button'))[1] as HTMLButtonElement;
    dismissButton.click();
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('[role="status"]')).toBeNull();
  });

  it('auto-dismisses after the configured delay', fakeAsync(() => {
    saveButton().click();
    fixture.detectChanges();

    tick(5000);
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('[role="status"]')).toBeNull();
  }));
});