import { TestBed, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { RadioButton } from './radiobutton';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

describe('RadioButton', () => {

    let radiobutton: RadioButton;
    let fixture: ComponentFixture<RadioButton>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                NoopAnimationsModule
            ],
            declarations: [
                RadioButton
            ]
        });

        fixture = TestBed.createComponent(RadioButton);
        radiobutton = fixture.componentInstance;
    });

    it('should change name inputId value style styleClass label labelStyleClass and tabIndex', () => {
        radiobutton.name = "BluOne";
        radiobutton.inputId = "bluone"
        radiobutton.value = "BluOne";
        radiobutton.style = {'height': '300px'};
        radiobutton.styleClass = "BluOne ROCKS!";
        radiobutton.label = "bluone";
        radiobutton.labelStyleClass = "BluOne ROCKS";
        radiobutton.tabindex = 13;
        fixture.detectChanges();

        const radiobuttonEl = fixture.debugElement.query(By.css('div'));
        const inputEl = fixture.debugElement.query(By.css('input'));
        const labelEl = fixture.debugElement.query(By.css('label'));
        expect(inputEl.nativeElement.name).toEqual("BluOne");
        expect(inputEl.nativeElement.value).toEqual("BluOne");
        expect(inputEl.nativeElement.id).toEqual("bluone");
        expect(inputEl.nativeElement.tabIndex).toEqual(13);
        expect(radiobuttonEl.nativeElement.className).toContain("BluOne ROCKS!");
        expect(radiobuttonEl.nativeElement.style.height).toEqual("300px");
        expect(labelEl.nativeElement.className).toContain("BluOne ROCKS");
        expect(labelEl.nativeElement.textContent).toEqual("bluone");
        expect(labelEl.nativeElement.htmlFor).toEqual("bluone");
    });

    it('should display active state initially when checked by default', () => {
        fixture.detectChanges();

        radiobutton.checked = true;
        radiobutton.inputViewChild.nativeElement.checked=true;
        fixture.detectChanges();

        const boxEl = fixture.nativeElement.querySelector('.ui-radiobutton-box');
        expect(boxEl.className).toContain('ui-state-active');
    });

    it('should disabled', () => {
        radiobutton.disabled = true;
        radiobutton.label = "bluone"
        fixture.detectChanges();

        const handleClickSpy = spyOn(radiobutton,'handleClick').and.callThrough();
        const selectSpy = spyOn(radiobutton,'select').and.callThrough();
        const radiobuttonEl = fixture.debugElement.queryAll(By.css('div'))[2];
        const inputEl = fixture.debugElement.query(By.css('input'));
        const labelEl = fixture.debugElement.query(By.css('label'));
        expect(inputEl.nativeElement.disabled).toEqual(true);
        expect(radiobuttonEl.nativeElement.className).toContain("ui-state-disabled");
        expect(labelEl.nativeElement.className).toContain("ui-label-disabled");

        radiobuttonEl.nativeElement.click();
        fixture.detectChanges();

        expect(handleClickSpy).toHaveBeenCalled();
        expect(selectSpy).not.toHaveBeenCalled();
        expect(radiobutton.checked).toEqual(undefined);
        labelEl.nativeElement.click();
        fixture.detectChanges();

        expect(handleClickSpy).toHaveBeenCalledTimes(1);
        expect(selectSpy).toHaveBeenCalled();
        expect(radiobutton.checked).toEqual(undefined);
    });

    it('should click checkbox', () => {
        fixture.detectChanges();
        
        let value;
        radiobutton.onClick.subscribe(event => value = 5);
        const handleClickSpy = spyOn(radiobutton,'handleClick').and.callThrough();
        const selectSpy = spyOn(radiobutton,'select').and.callThrough();
        const onFocusSpy = spyOn(radiobutton,'onInputFocus').and.callThrough();
        const radiobuttonEl = fixture.debugElement.queryAll(By.css('div'))[2];
        const inputEl = fixture.debugElement.query(By.css('input'));
        const iconEl = fixture.debugElement.query(By.css('span'));
        inputEl.nativeElement.dispatchEvent(new Event('focus'));
        radiobuttonEl.nativeElement.click();
        fixture.detectChanges();

        expect(handleClickSpy).toHaveBeenCalled();
        expect(selectSpy).toHaveBeenCalled();
        expect(onFocusSpy).toHaveBeenCalled();
        expect(radiobutton.checked).toEqual(true);
        expect(value).toEqual(5);
        expect(radiobutton.focused).toEqual(true);
        expect(radiobuttonEl.nativeElement.className).toContain("ui-state-focus");
        expect(iconEl.nativeElement.className).toContain("far fa-circle");
    });

    it('should click label', () => {
        radiobutton.label = "bluone"
        fixture.detectChanges();
        
        let value;
        radiobutton.onClick.subscribe(event => value = 5);
        const handleClickSpy = spyOn(radiobutton,'handleClick').and.callThrough();
        const selectSpy = spyOn(radiobutton,'select').and.callThrough();
        const onFocusSpy = spyOn(radiobutton,'onInputFocus').and.callThrough();
        const onBlurSpy = spyOn(radiobutton,'onInputBlur').and.callThrough();
        const inputEl = fixture.debugElement.query(By.css('input'));
        const labelEl = fixture.debugElement.query(By.css('label'));
        inputEl.nativeElement.dispatchEvent(new Event('focus'));
        labelEl.nativeElement.click();
        fixture.detectChanges();

        expect(handleClickSpy).not.toHaveBeenCalled();
        expect(selectSpy).toHaveBeenCalled();
        expect(onFocusSpy).toHaveBeenCalled();
        expect(radiobutton.checked).toEqual(true);
        expect(labelEl.nativeElement.className).toContain("ui-label-focus");
        expect(value).toEqual(5);
        inputEl.nativeElement.dispatchEvent(new Event('blur'));
        fixture.detectChanges();

        expect(radiobutton.focused).toEqual(false);
        expect(onBlurSpy).toHaveBeenCalled();
    });

    it('should call writeValue', () => {
        radiobutton.label = "bluone";
        radiobutton.value = "bluone";
        fixture.detectChanges();
        
        const writeValueSpy = spyOn(radiobutton,'writeValue').and.callThrough();
        radiobutton.writeValue("bluone");
        fixture.detectChanges();
        
        expect(writeValueSpy).toHaveBeenCalled();
        expect(radiobutton.checked).toEqual(true);
    });
});