import { ShelfHistoryLogBodyComponent } from './log-body.component';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

fdescribe('ShelfHistoryLogBodyComponent', () => {
  let fixture: ComponentFixture<ShelfHistoryLogBodyComponent>;
  let component: ShelfHistoryLogBodyComponent;
  let debugElement: DebugElement;

  let oldStatusElement: HTMLSpanElement;
  let newStatusElement: HTMLSpanElement;
  let changedByElement: HTMLSpanElement;

  let captionElementOldStatus: HTMLLIElement;
  let captionElementNewStatus: HTMLLIElement;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [ShelfHistoryLogBodyComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ShelfHistoryLogBodyComponent);
    component = fixture.componentInstance;
    debugElement = fixture.debugElement;
  });

  it('should be created', () => {
    expect(component instanceof ShelfHistoryLogBodyComponent).toBeTruthy();
  });

  describe('Case: No Inputs provided', () => {
    beforeEach(() => {
      fixture.detectChanges();
    });

    it('should show a dash as old status', () => {
      oldStatusElement = debugElement.queryAll(By.css('li'))[0].nativeElement.querySelector('span');

      expect(oldStatusElement.textContent).toBe('-');
    });
    it('should show a dash new status', () => {
      newStatusElement = debugElement.queryAll(By.css('li'))[1].nativeElement.querySelector('span');

      expect(newStatusElement.textContent).toBe('-');
    });
    it('should show a dash as new changedBy', () => {
      changedByElement = debugElement.queryAll(By.css('li'))[2].nativeElement.querySelector('span');

      expect(newStatusElement.textContent).toBe('-');
    });
    it('should show an empty string as caption for old status', () => {
      captionElementOldStatus = debugElement.queryAll(By.css('li'))[0].nativeElement;

      expect(captionElementOldStatus.textContent).toContain('alt:');
    });
    it('should show an empty string as caption for new status', () => {
      captionElementNewStatus = debugElement.queryAll(By.css('li'))[1].nativeElement;

      expect(captionElementNewStatus.textContent).toContain('neu:');
    });
  });

  describe('Case: With Inputs provided', () => {
    beforeEach(() => {
      component.oldStatus = 'Mock Old Status';
      component.newStatus = 'Mock New Status';
      component.changedBy = 'Mock ChangedBy';
      component.caption = 'Mock Caption';
      fixture.detectChanges();
    });

    it('should show old status', () => {
      oldStatusElement = debugElement.queryAll(By.css('li'))[0].nativeElement.querySelector('span');

      expect(oldStatusElement.textContent).toBe(component.oldStatus);
    });
    it('should show new status', () => {
      newStatusElement = debugElement.queryAll(By.css('li'))[1].nativeElement.querySelector('span');

      expect(newStatusElement.textContent).toBe(component.newStatus);
    });
    it('should show new changedBy', () => {
      changedByElement = debugElement.queryAll(By.css('li'))[2].nativeElement.querySelector('span');

      expect(changedByElement.textContent).toBe(component.changedBy);
    });
    it('should show caption for old status', () => {
      captionElementOldStatus = debugElement.queryAll(By.css('li'))[0].nativeElement;

      expect(captionElementOldStatus.textContent).toContain(`alt: ${component.oldStatus}`);
    });
    it('should show caption for new status', () => {
      captionElementNewStatus = debugElement.queryAll(By.css('li'))[1].nativeElement;

      expect(captionElementNewStatus.textContent).toContain(`neu: ${component.newStatus}`);
    });
  });
});
