import { TestBed, ComponentFixture } from '@angular/core/testing';
import { CommonModule } from '@angular/common';
import { ModalDialogComponent } from './modal-dialog.component';
import { ModalModule } from '@libs/ui';
import { By } from '@angular/platform-browser';
import { SharedModule } from '../../shared.module';

describe('ModalDialogComponent', () => {
  let fixture: ComponentFixture<ModalDialogComponent>;
  let component: ModalDialogComponent;
  let element: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [CommonModule, SharedModule, ModalModule],
    }).compileComponents();

    fixture = TestBed.createComponent(ModalDialogComponent);
    component = fixture.componentInstance;
    element = fixture.nativeElement;

    component.title = 'Title_Mock';
    component.text = 'Text_Mock';
    component.actions = [
      {
        onClick: () => {},
        text: 'Text_Title_1',
        primary: true,
      },
      {
        onClick: () => {},
        text: 'Text_Title_2',
        primary: false,
      },
    ];
  });

  it('should close the modal dialog when clicking theclose icon', () => {
    spyOn(component.close, 'emit').and.callThrough();
    const closeIcon = fixture.debugElement.query(By.css('.close-icon'));

    closeIcon.triggerEventHandler('click', null);

    fixture.detectChanges();

    expect(component.close.emit).toHaveBeenCalled();
  });

  it('should show the title', () => {
    const title = fixture.debugElement.query(By.css('.title'));

    fixture.detectChanges();

    expect(title).toBeTruthy();
    expect(title.nativeElement.textContent).toEqual(component.title);
  });

  it('should show the text', () => {
    const text = fixture.debugElement.query(By.css('.sub-title'));

    fixture.detectChanges();

    expect(text).toBeTruthy();
    expect(text.nativeElement.textContent).toEqual(component.text);
  });

  it('should show the actions', () => {
    fixture.detectChanges();

    const actions = element.querySelector('.actions');
    const firstAction = actions.querySelector('#action0');
    const secondAction = actions.querySelector('#action1');
    const thirdAction = actions.querySelector('#action2');

    expect(actions).toBeTruthy();
    expect(firstAction).toBeTruthy();
    expect(secondAction).toBeTruthy();
    expect(thirdAction).toBeFalsy();
  });
});
