import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { ProductImagePipe } from '@cdn/product-image';
import { createComponentFactory, Spectator } from '@ngneat/spectator';
import { UiSliderComponent } from '@ui/slider';
import { MockComponent, MockPipe } from 'ng-mocks';
import { ProductsCardComponent } from './product-card.component';
describe('ProductsCardComponent', () => {
  let spectator: Spectator<ProductsCardComponent>;

  const createComponent = createComponentFactory({
    component: ProductsCardComponent,
    imports: [RouterTestingModule],
    declarations: [MockComponent(UiSliderComponent), MockPipe(ProductImagePipe, (ean) => 'ean-' + ean)],
  });

  beforeEach(() => {
    spectator = createComponent();
  });

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

  it('should render the title', () => {
    spectator.setInput('feed', {
      label: 'title',
      type: 'products',
      items: [],
    });

    spectator.detectChanges();

    expect(spectator.query('.title')).toHaveText('title');
  });

  it('should render the .desc innerHtml', () => {
    spectator.setInput('feed', {
      label: 'title',
      type: 'products',
      desc: '<p>Hello <b>Unit</b> Test</p>',
      items: [],
    });

    spectator.detectChanges();

    expect(spectator.query('.desc').innerHTML).toBe('<p>Hello <b>Unit</b> Test</p>');
  });

  it('should render the img provided in items', () => {
    spectator.setInput('feed', {
      label: 'title',
      type: 'products',
      items: [
        {
          product: {
            ean: '1234567890123',
            name: 'Product 1',
          },
        },
        {
          product: {
            ean: '1234567890124',
            name: 'Product 2',
          },
        },
      ],
    });
    spectator.detectChanges();
    expect((spectator.queryAll('img')[0] as any).src).toContain('ean-1234567890123');
    expect((spectator.queryAll('img')[1] as any).src).toContain('ean-1234567890124');
    expect((spectator.queryAll('img')[0] as any).alt).toBe('Product 1');
    expect((spectator.queryAll('img')[1] as any).alt).toBe('Product 2');
  });

  describe('navigatetToProduct()', () => {
    it('should navigate to product details', () => {
      const router = spectator.inject(Router);
      spyOn(router, 'navigate');
      const ean = '1234567890123';
      spectator.setInput('feed', {
        label: 'title',
        type: 'products',
        items: [
          {
            product: {
              ean,
              name: 'Product 1',
            },
          },
        ],
      });
      spectator.detectChanges();
      spectator.click('ui-slider img');
      expect(router.navigate).toHaveBeenCalledWith(['/kunde/product/details/ean', ean]);
    });
  });
});
