import { waitForAsync, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';

import { MultiselectDropdownComponent } from './multiselect-dropdown.component';

describe('MultiselectDropdownComponent', () => {
	let component: MultiselectDropdownComponent;
	let fixture: ComponentFixture<MultiselectDropdownComponent>;

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

	beforeEach(() => {
		fixture = TestBed.createComponent(MultiselectDropdownComponent);
		component = fixture.componentInstance;
		component.multiSelectOptions = [
			{ value: 'Value1', selected: true },
			{ value: 'Value2', selected: true },
			{ value: 'Value3', label: 'Value 3', selected: true },
		];
		component.singleSelectOptions = [
			{ value: 'Value1', selected: false },
			{ value: 'Value2', selected: true },
			{ value: 'Value3', label: 'Value 3', selected: false },
		];

		component.dropdownName = 'Segments';
		component.dropdownType = 'multiSelect';
		component.selectAllLabel = 'All segments';
		component.showOptions = true;

		fixture.detectChanges();
	});

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

	it('dropdown option element should be present', () => {
		const option = fixture.debugElement.nativeElement.querySelectorAll('.dropdown-option');
		expect(option).not.toBe(null);
	});

	it('Count of dropdown options should be based on input values', () => {
		const option = fixture.debugElement.nativeElement.querySelectorAll('.dropdown-option');
		expect(option.length).toBe(3);
	});

	it('On unselection of all options label should change to None', () => {
		const option = fixture.debugElement.nativeElement.querySelectorAll('.dropdown-option');
		option[0].click();
		option[1].click();
		option[2].click();
		expect(component.dropdownLabel).toEqual('None');
	});

	it('Should show options on click ', () => {
		component.showOptions = false;
		component.toggleDropdown();
		expect(component.showOptions).toEqual(true);
	});

	it('Should uncheck and check the value if clicked on option ', () => {
		const firstCheckBox = fixture.debugElement.nativeElement.querySelector('.checkbox');
		firstCheckBox.click();
		expect(component.multiSelectOptions[0].selected).toEqual(false);
		firstCheckBox.click();
		expect(component.multiSelectOptions[0].selected).toEqual(true);
	});

	it('Close dropdown when clicked outside the dropdown ', () => {
		const event = new MouseEvent('click');
		component.onMenuDeselect(event);
		expect(component.showOptions).toEqual(false);
	});

	it('Show default select label if select all label is not passed', () => {
		component.selectAllLabel = null;
		expect(component.getDropdownLabel()).toEqual('All selected');
	});

	it('Show single select options if dropdown type is single select', () => {
		component.dropdownType = 'singleSelect';
		fixture.detectChanges();
		const option = fixture.debugElement.nativeElement.querySelectorAll('.single-select');
		expect(option.length).toBe(3);
	});

	it('Should select the value if clicked on option for single select dropdown ', () => {
		component.dropdownType = 'singleSelect';
		fixture.detectChanges();
		const option = fixture.debugElement.nativeElement.querySelectorAll('.single-select');
		option[0].click();
		expect(component.singleSelectOptions[0].selected).toEqual(true);
		expect(component.singleSelectOptions[1].selected).toEqual(false);

		component.dropdownName = null;
		component.showOptions = true;
		fixture.detectChanges();
		const selectOption = fixture.debugElement.nativeElement.querySelectorAll('.single-select');
		selectOption[0].click();
		component.selectChange.subscribe($event => expect($event.name).toBe('selectedOption'));
	});

	it('By default first option should be selected if no option is selected to true ', () => {
		component.dropdownType = 'singleSelect';
		component.singleSelectOptions = [
			{ value: 'Value1', selected: false },
			{ value: 'Value2', selected: false },
			{ value: 'Value3', selected: false },
		];
		fixture.detectChanges();
		component.getDropdownLabel();
		expect(component.singleSelectOptions[0].selected).toEqual(true);
	});

	it('Component should load component even when dropdownType is not passed ', () => {
		component.dropdownType = undefined;
		fixture.detectChanges();
		const label = component.getDropdownLabel();
		expect(label).toEqual('Choose');
	});
});