import { SelectComponent, Option } from './select.component';
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { By } from '@angular/platform-browser';

let selectComponent: SelectComponent;
let options: Option[];
describe('Select Component', () => {
    beforeEach(() => {
        selectComponent = new SelectComponent();
        options = [
            { id: 1, name: 'a', value: 'a'},
            { id: 2, name: 'b', value: 'b'},
            { id: 3, name: 'c', value: 'c'}
        ];
        selectComponent.options = [...options ];

    });

    it('should load', () => {
        expect(selectComponent).toBeDefined();
    });

    describe('Select simple', () => {

        it('should be simple', () => {
            expect(selectComponent.multiple).toBe(false);
        });

        it('should initialize with value null', () => {
            selectComponent.writeValue(null);
            expect(selectComponent.getValues()).toEqual(undefined);
            selectComponent.defineFieldLabel();
            expect(selectComponent.fieldLabel).toBe(selectComponent.placeholder);
        });

        it('should initialize with 1 value', () => {
            const expected = options[0];
            selectComponent.writeValue(options[0]);
            const result = selectComponent.getValues() as Option;
            expect(result.id).toEqual(expected.id);

            selectComponent.defineFieldLabel();
            expect(selectComponent.fieldLabel).toBe(expected.name);
        });

        it('should toggle select content', () => {
            selectComponent.toggleContent();
            expect(selectComponent.open).toBe(true);
            selectComponent.toggleContent();
            expect(selectComponent.open).toBe(false);
            selectComponent.toggleContent();
            expect(selectComponent.open).toBe(true);
        });

        it('select an option', () => {
            selectComponent.selectOption(options[0]);
            expect((selectComponent.getValues() as Option).id).toBe(1);

            selectComponent.defineFieldLabel();
            expect(selectComponent.fieldLabel).toBe(options[0].name);

            selectComponent.selectOption(options[0]);
            expect((selectComponent.getValues() as Option).name).toBe(options[0].name);

            selectComponent.defineFieldLabel();
            expect(selectComponent.fieldLabel).toBe(options[0].name);
        });

    });


    describe('Select multiple', () => {
        beforeEach(() => {
            selectComponent.multiple = true;
        });

            it('should be simple', () => {
                expect(selectComponent.multiple).toBe(true);
            });

          it('should initialize with value null', () => {
              selectComponent.writeValue(null);
              expect(selectComponent.getValues()).toEqual([]);
              selectComponent.defineFieldLabel();
              expect(selectComponent.fieldLabel).toBe(selectComponent.placeholder);
          });

          it('should initialize with 1 value', () => {
              const expected = options[0];
              selectComponent.writeValue([options[0], options[1]]);

              const results = selectComponent.getValues() as Option[];

              expect(results[0].id).toEqual(expected.id);
              expect(results[1].id).toEqual(options[1].id);
              expect(results.length).toBe(2);

              selectComponent.defineFieldLabel();
              expect(selectComponent.fieldLabel).toBe('Selected sites (2)');
          });

          it('should initialize values', () => {
              selectComponent.writeValue([ ...options]);
              selectComponent.defineFieldLabel();
              expect(selectComponent.fieldLabel).toBe('All Sites selected');
          });

          it('should toggle select content', () => {
              selectComponent.toggleContent();
              expect(selectComponent.open).toBe(true);
              selectComponent.toggleContent();
              expect(selectComponent.open).toBe(false);
              selectComponent.toggleContent();
              expect(selectComponent.open).toBe(true);
          });
    });

    describe('shallow Test', () => {

        let fixture: ComponentFixture<SelectComponent>;
        let comp: SelectComponent;

        beforeEach(() => {
            TestBed.configureTestingModule({
                declarations: [
                    SelectComponent
                ],
                providers: [],
                schemas: [ NO_ERRORS_SCHEMA ]
            });
        });

        beforeEach(async(() => {
            TestBed.compileComponents().then(() => {
                fixture = TestBed.createComponent(SelectComponent);
                comp = fixture.componentInstance;
            });
        }));

        it('should have Select Placeholder', () => {
            fixture.detectChanges();
            expect(fixture.nativeElement.querySelector('.lbl').textContent).toBe('Select');
        });
        it('should open and close on Select an Item', () => {
            comp.options = [
                {id: 1, name: 'Option a'},
                {id: 2, name: 'Option b'}
            ];
            fixture.detectChanges();
            expect(fixture.debugElement.query(By.css('.lbl-content')).nativeElement.textContent.trim()).toBe('Select an Item');
            expect(fixture.componentInstance.open).toBe(false);

            fixture.debugElement.query(By.css('.lbl-content')).nativeElement.click();

            expect(fixture.componentInstance.open).toBe(true);

            fixture.debugElement.query(By.css('.slct-option-simple')).nativeElement.click();
            expect(fixture.componentInstance.open).toBe(false);
            fixture.detectChanges();
            expect(fixture.debugElement.query(By.css('.slc-value')).nativeElement.textContent).toBe('Option a');
        });
    });


});