import { backgroundEnum, sizeEnum } from '@kodmagie/commons';
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { AvatarComponent } from '../components';
import { debugQueryElement, MockDirective, querySelector } from '../../../../test';

fdescribe('Avatar component', () => {
    let component: AvatarComponent;
    let fixture: ComponentFixture<AvatarComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
                AvatarComponent,

                MockDirective({
                    selector: '[cmnBadge]',
                    inputs: ['cmnBadge', 'color'],
                }),
            ],
        }).compileComponents();

        fixture = TestBed.createComponent(AvatarComponent);

        component = fixture.componentInstance;
    });

    describe('when the instance has been compiled, the component variable should', () => {
        it('be defined.', () => {
            expect(component).toBeDefined();
        });

        it('be equal to avatar component instance class.', () => {
            expect(component instanceof AvatarComponent).toBeTruthy();
        });
    });

    describe('when onInit method is called', () => {
        let spyGetInitialUpperCase;
        let spyGetTwoFirstLetters;

        const setSpies = () => {
            spyGetInitialUpperCase = spyOn((component as any), 'getInitialUpperCase');
            spyGetTwoFirstLetters = spyOn((component as any), 'getTwoFirstLetters');
        };

        describe('and there is not an image', () => {
            it('and there is a void text, should not call any method.', () => {
                setSpies();

                (component).text = '';

                fixture.detectChanges();

                expect(spyGetInitialUpperCase).not.toHaveBeenCalled();
                expect(spyGetTwoFirstLetters).not.toHaveBeenCalled();
            });

            it('and there is a text formed by two words, should call getInitialUpperCase method.', () => {
                setSpies();

                const text = 'Noelia Villa';
                const textArray = text.split(' ');

                spyGetInitialUpperCase.and.returnValue('NV');

                component.text = text;

                expect(spyGetInitialUpperCase).not.toHaveBeenCalled();

                fixture.detectChanges();

                expect(spyGetInitialUpperCase).toHaveBeenCalled();
                expect(spyGetInitialUpperCase).toHaveBeenCalledWith(textArray);

                expect(component.text).toEqual('NV');
            });

            it('and there is a text formed by one word, should call getTwoFirstLetters method.', () => {
                setSpies();

                const text = 'test';

                spyGetTwoFirstLetters.and.returnValue('Te');

                component.text = text;

                expect(spyGetTwoFirstLetters).not.toHaveBeenCalled();

                fixture.detectChanges();

                expect(spyGetTwoFirstLetters).toHaveBeenCalled();
                expect(spyGetTwoFirstLetters).toHaveBeenCalledWith(text);

                expect(component.text).toEqual('Te');
            });
        });

        it('and there is an image, should not call any method.', () => {
            setSpies();

            (component as any).image = 'image';

            fixture.detectChanges();

            expect(spyGetInitialUpperCase).not.toHaveBeenCalled();
            expect(spyGetTwoFirstLetters).not.toHaveBeenCalled();
        });
    });

    describe('when the entrance text', () => {
        it('is an array of two words, should return the first letter of each word in upper case.', () => {
            const textArray = ['noelia', 'villa'];

            const text = (component as any).getInitialUpperCase(textArray);

            expect(text).toEqual('NV');
        });

        it('is just one word, should return first letter in upper case and second letter in lower case.', () => {
            const text = 'test';

            const resultText = (component as any).getTwoFirstLetters(text);

            expect(resultText).toEqual('Te');
        });
    });

    describe('when the view has been rendered,', () => {
        it('should exist a text with the correct letters.', () => {
            component.text = 'Noelia Villa';

            fixture.detectChanges();

            const avatarElement = querySelector(fixture, `div.avatar.has-text-centered.${sizeEnum.medium}.is-circle`);

            expect(avatarElement instanceof HTMLElement).toBeTruthy();
            expect(avatarElement.textContent.trim()).toEqual('NV');
        });

        it('should show an image.', () => {
            const image = 'test';

            (component as any).image = image;
            (component as any).background = backgroundEnum.dark;

            fixture.detectChanges();

            const selector = `div.avatar.has-text-centered.${sizeEnum.medium}.${backgroundEnum.dark}.is-circle.has-image>img`;

            const imageElement = debugQueryElement(fixture, selector);

            expect(imageElement).not.toBeNull();
            expect(imageElement.properties.src).toEqual(image);
        });

        fit('should show a badge with correct numbers and color.', () => {
            component.badge = { label: '12', color: 'link'} as any;

            fixture.detectChanges();

            const selector = `div.avatar.has-text-centered.${ sizeEnum.medium }.is-circle`;

            const badgeElement = debugQueryElement(fixture, selector);

            console.log(badgeElement);

            expect(badgeElement).not.toBeNull();
            expect(badgeElement.attributes['ng-reflect-cmn-badge']).toEqual('12');
            expect(badgeElement.attributes['ng-reflect-color']).toEqual('link');
        });
    });
});