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

import { QrPaymentContentComponent } from './qr-payment-content.component';

describe('QrPaymentContentComponent', () => {
  it('shows the QR placeholder when there is no QR data', async () => {
    await TestBed.configureTestingModule({
      imports: [QrPaymentContentComponent]
    }).compileComponents();

    const fixture = TestBed.createComponent(QrPaymentContentComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelectorAll('.qr-code__finder')).toHaveLength(3);
    expect(fixture.nativeElement.querySelector('qrcode')).toBeNull();
  });

  it('renders the QR component when data is provided', async () => {
    await TestBed.configureTestingModule({
      imports: [QrPaymentContentComponent]
    }).compileComponents();

    const fixture = TestBed.createComponent(QrPaymentContentComponent);
    fixture.componentRef.setInput('qrData', 'payment-data');
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('qrcode')).not.toBeNull();
    expect(fixture.nativeElement.querySelector('.qr-code__finder')).toBeNull();
  });
});
