import { HeaderDataService } from '../services/header-data.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { TestableModule } from '../shared/baseshared/components/test.base.module';
import { LanguageSelectComponent } from './language-select.component';
import { Observable } from 'rxjs/Observable';
import 'rxjs';

describe('LanguageSelectComponent', () => {
    let component: LanguageSelectComponent;
    let fixture: ComponentFixture<LanguageSelectComponent>;
    let de: DebugElement;
    let el: HTMLElement;
    let headerDataService: HeaderDataService;
    let dropdownListItems: DebugElement[];
    let dropdownItems: DebugElement[];
    let languageDropdown: DebugElement;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [TestableModule],
            declarations: [LanguageSelectComponent],
            providers: [HeaderDataService]
        });
        
        TestBed.compileComponents();

        headerDataService = TestBed.get(HeaderDataService);

        fixture = TestBed.createComponent(LanguageSelectComponent);
        component = fixture.componentInstance;
        de = fixture.debugElement;
        el = de.nativeElement;

        spyOn(headerDataService, 'loadData').and.returnValue(Observable.of({
            'langData': [
                { 'language': 'English', 'call': 'English/api/call' },
                { 'language': 'Español', 'call': 'Español/api/call' },
                { 'language': 'Français', 'call': 'Français/api/call' }
            ]
        }));

        component.initialize();
        fixture.detectChanges();
        dropdownListItems = fixture.debugElement.queryAll(By.css('.dropdownListItems'));
        dropdownItems = fixture.debugElement.queryAll(By.css('.dropdown-item'));
        languageDropdown = fixture.debugElement.query(By.css('#languageDropdown'));
    });

    it('Should initialize HeaderDataService', () => {
        expect(headerDataService).not.toBeNull('HeaderDataService is not initialized.');
    });

    it('Should set the data property when initialized', () => {
        expect(component.data).not.toBeNull('data is null.');
        expect(component.data).not.toBeUndefined('data is undefined.');
        expect(component.data[0].language).toEqual('English');
    });

    it('Should set the default language to the first language in the array', () => {
        expect(component.currentLanguage).toEqual('English');
    });

    it('Should render all the languages in the dropdown list', () => {
        expect(dropdownListItems.length).toEqual(component.data.length);
    });

    it('Should not render the language that is currently selected in the dropdown list', () => {
        let dropdownItemsinnerHtml: string[] = dropdownItems.map(x => x.nativeElement.innerHTML);
        expect(dropdownItemsinnerHtml.indexOf('English')).toBe(-1);
    });

    it('Should change the language of the dropdown when selecting a different language', () => {
        dropdownItems[0].nativeElement.click();
        fixture.detectChanges();
        expect(languageDropdown.nativeElement.innerHTML).toEqual('Español');
    });

    it('Should remove the selected language from the drop down list', () => {
        dropdownItems[0].nativeElement.click();
        fixture.detectChanges();
        let dropdownItemsinnerHtml: string[] = dropdownItems.map(x => x.nativeElement.innerHTML);
        expect(dropdownItemsinnerHtml.indexOf('Español')).toBe(-1);
    });
});