import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
import { ProductFormatComponent } from './product-format.component';
import { ProductFormatIconComponent } from './product-format-icon.component';

describe('ProductFormatComponent', () => {
  let spectator: Spectator<ProductFormatComponent>;
  const createComponent = createComponentFactory({
    component: ProductFormatComponent,
    imports: [ProductFormatIconComponent],
  });

  beforeEach(() => {
    spectator = createComponent({
      props: { format: 'HC', formatDetail: 'Hardcover' },
    });
  });

  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

  it('should render ProductFormatIconComponent with correct format', () => {
    const icon = spectator.query(ProductFormatIconComponent);
    expect(icon).toBeTruthy();
    // Check input binding
    expect(icon?.format()).toBe('HC');
  });

  it('should render the formatDetail text', () => {
    expect(spectator.query('span')).toHaveText('Hardcover');
  });

  it('should set correct data attributes on host', () => {
    const host = spectator.element;
    expect(host).toHaveAttribute('data-what', 'product-format');
    expect(host).toHaveAttribute('data-which', 'shared-product-format');
  });
});
