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

@Component({
  imports: [<%= classify(name) %>],
  template: `
    <<%= selector %>
      cardLabel="Cartão corporativo"
      brand="Mastercard"
      cardholder="Marina Alves"
      lastFour="9081"
      expiry="08/29"
      (cardAction)="managed = true"
    />
  `,
})
class HostComponent {
  managed = false;
}

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

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

  function article(): HTMLElement {
    return fixture.nativeElement.querySelector('article');
  }

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

  it('labels the card summary and renders only masked card details', () => {
    const heading = fixture.nativeElement.querySelector('h2');
    const description = fixture.nativeElement.querySelector('p[id]');

    expect(heading.textContent).toContain('Cartão corporativo');
    expect(article().getAttribute('aria-labelledby')).toBe(heading.id);
    expect(article().getAttribute('aria-describedby')).toBe(description.id);
    expect(description.textContent).toContain('Mastercard');
    expect(description.textContent).toContain('9081');
    expect(fixture.nativeElement.textContent).toContain('Marina Alves');
    expect(fixture.nativeElement.textContent).toContain('08/29');
  });

  it('emits cardAction from the native button', () => {
    button().click();
    fixture.detectChanges();

    expect(fixture.componentInstance.managed).toBe(true);
  });
});