/*
 * Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { CalloutComponent } from './callout.component';

@Component({
  template: `
    <bci-callout type="info">
      <p>This is a content projected callout with a list</p>
      <ul>
        <li>List item 1</li>
        <li>List item 1</li>
        <li>List item 3</li>
      </ul>
    </bci-callout>
  `,
})
class CalloutContentProjectedTestComponent {}

@Component({
  template: `
    <bci-callout type="info" content="This content is being passed by input.">
      <p>This is content being projected.</p>
    </bci-callout>
  `,
})
class CalloutContentProjectedWithInputTestComponent {}

describe('CalloutComponent', () => {
  let component: CalloutComponent;
  let fixture: ComponentFixture<CalloutComponent>;
  let contentProjectedFixture: ComponentFixture<CalloutContentProjectedTestComponent>;
  let contentProjectedWithInputFixture: ComponentFixture<CalloutContentProjectedWithInputTestComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        CalloutComponent,
        CalloutContentProjectedTestComponent,
        CalloutContentProjectedWithInputTestComponent,
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CalloutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('should display content passed in through the "content" input', () => {
    const componentContent = 'This is some content';
    component.content = componentContent;
    fixture.detectChanges();
    const innerHTML = fixture.debugElement.query(By.css('.callout-content')).properties.innerHTML;
    expect(innerHTML).toEqual(componentContent);
  });

  it('should display projected content', () => {
    contentProjectedFixture = TestBed.createComponent(CalloutContentProjectedTestComponent);
    contentProjectedFixture.detectChanges();

    const calloutContent = contentProjectedFixture.debugElement.query(By.css('.callout-content'));

    expect(calloutContent.children).toHaveLength(2);
    expect(calloutContent.children[0].name).toBe('p');
    expect(calloutContent.children[1].name).toBe('ul');
    expect(calloutContent.children[0].nativeElement.textContent).toEqual(
      'This is a content projected callout with a list'
    );
    expect(calloutContent.children[1].children).toHaveLength(3);
    expect(calloutContent.children[1].children[0].nativeElement.textContent).toEqual('List item 1');
  });

  it('should not display projected content if content input present', () => {
    contentProjectedWithInputFixture = TestBed.createComponent(CalloutContentProjectedWithInputTestComponent);
    contentProjectedWithInputFixture.detectChanges();

    const calloutContent = contentProjectedWithInputFixture.debugElement.query(By.css('.callout-content'));

    expect(calloutContent.children).toHaveLength(0);
    expect(calloutContent.properties.innerHTML).toEqual('This content is being passed by input.');
  });
});
