import { vCarousel } from "../src/vCarousel";

describe("vCarousel", function()
{
    let vCarouselTest : vCarousel;
    const videosWebDir="https://forge.chapril.org/Fab_Blab/vCarousel/src/branch/master/public/videos";
    const fixture="<div id='fixture'><figure id='noVideo'></figure><figure id='vFunanbule'><video controls='controls' preload='metadata'><source src='"+videosWebDir+"/Lizio-Poete-Ferrailleur-clownfunanbule.m4v' type='video/mp4'></source><p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p></video><figcaption>Un clown funanbule !</figcaption></figure><figure id='vForgeron'><video controls='controls' preload='metadata'><source src='"+videosWebDir+"/Lizio-Poete-Ferrailleur-forgeron.m4v' type='video/mp4'></source><p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p></video><figcaption>Il faut forger pour devenir forgeron !</figcaption></figure><figure id='vCircuit'><video controls='controls' preload='metadata'><source src='"+videosWebDir+"/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v' type='video/mp4'></source><p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p></video><figcaption>Drôle de circuit !</figcaption></figure></div>";

    beforeEach(function()
    {
        vCarouselTest=new vCarousel();
        document.body.insertAdjacentHTML('afterbegin', fixture);
    });

    afterEach(function()
    {
        document.body.removeChild(document.getElementById('fixture'));
    });


    it("should be an instance of vCarousel", function()
    {
        expect(vCarouselTest).toBeInstanceOf(vCarousel);
    });


    describe("setting vCarousel", function()
    {
        it("Doit générer une erreur si tous les ids passés ne correspondent pas à des éléments HTML existants.", function()
        {
            expect(function() { return vCarouselTest.vContainers=["dontExistId","vFunanbule","vForgeron"]; }).toThrowError("Aucun élément HTML trouvé dans la page pour l'id dontExistId.");
            expect(function() { return vCarouselTest.vContainers=["vFunanbule","dontExistId","vForgeron"]; }).toThrowError("Aucun élément HTML trouvé dans la page pour l'id dontExistId.");
            expect(function() { return vCarouselTest.vContainers=["vFunanbule","vForgeron","dontExistId"]; }).toThrowError("Aucun élément HTML trouvé dans la page pour l'id dontExistId.");
        });
        
        it("Doit générer une erreur si tous les ids passés ne correspondent pas à des éléments HTML contenant une vidéo.", function()
        {
            expect(function() { return vCarouselTest.vContainers=["noVideo","vFunanbule","vForgeron"]; }).toThrowError("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id noVideo.");
            expect(function() { return vCarouselTest.vContainers=["vFunanbule","noVideo","vForgeron"]; }).toThrowError("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id noVideo.");
            expect(function() { return vCarouselTest.vContainers=["vFunanbule","vForgeron","noVideo"]; }).toThrowError("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id noVideo.");
        });
        
        it("Doit générer une erreur s'il n'y a pas au moins deux éléments HTML valides fournis.", function()
        {
            expect(function() { return vCarouselTest.vContainers=["vFunanbule"]; }).toThrowError("Il vous faut fournir au moins deux conteneurs de vidéo valides pour pouvoir lancer le carrousel.");
        });

        it("Ne doit pas générer d'erreur s'il y a au moins 2 ids passés correspondant à des éléments HTML valides et contenant chacun une vidéo.", function()
        {
            expect(function() { return vCarouselTest.vContainers=["vFunanbule","vForgeron"]; }).not.toThrowError();
        });

        it("Ne doit pas prendre en compte l'id fourni pour la première vidéo à afficher s'il n'est pas correcte.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron"];
            vCarouselTest.firstVideoId="vCircuit";
            expect(vCarouselTest.firstVideoId).toBeUndefined();
        });
        
        it("Doit accepter un firstVideoId vide pour n'afficher aucune vidéo au lancement.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron"];
            vCarouselTest.firstVideoId="";
            expect(vCarouselTest.firstVideoId).toBe("");
        });
    });

    describe("running vCarousel", function()
    {        
        it("Doit générer une erreur si on lance le carrousel sans avoir fourni les éléments HTML contenant les vidéos.", function()
        {
            expect(function() { return vCarouselTest.run(); }).toThrowError("vCarousel ne peut être lancé sans au moins 2 vidéos.");
        });

        it("Doit cacher toutes les vidéos si cela est demandé en option, aucune vidéo n'étant enregistrée comme en cours.", function()
        {
            const videosId=["vFunanbule","vForgeron","vCircuit"];
            vCarouselTest.vContainers=videosId;
            vCarouselTest.firstVideoId="";
            vCarouselTest.run();
            for(let containerId of videosId)
            {
                expect(document.getElementById(containerId).style.display).toBe("none");
            }
            expect(vCarouselTest.getCurrentVideo()).toBeUndefined();
        });
        
        it("Doit cacher toutes les vidéos, sauf celle passée en option, qui doit être enregistrée comme celle en cours.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron","vCircuit"];
            vCarouselTest.firstVideoId="vCircuit";
            vCarouselTest.run();
            expect(document.getElementById("vFunanbule").style.display).toBe("none");
            expect(document.getElementById("vForgeron").style.display).toBe("none");
            expect(document.getElementById("vCircuit").style.display).toBe("block");
            let currentVideo=<HTMLMediaElement>document.querySelector("#vCircuit video");
            expect(vCarouselTest.getCurrentVideo()).toEqual(currentVideo);
        });

        it("Doit cacher toutes les vidéos sauf la première, si aucune indication n'est passée en option, qui doit être enregistrée comme celle en cours.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron","vCircuit"];
            vCarouselTest.run();
            expect(document.getElementById("vFunanbule").style.display).toBe("block");
            expect(document.getElementById("vForgeron").style.display).toBe("none");
            expect(document.getElementById("vCircuit").style.display).toBe("none");
            let currentVideo=<HTMLMediaElement>document.querySelector("#vFunanbule video");
            expect(vCarouselTest.getCurrentVideo()).toEqual(currentVideo);
        });

        it("Doit demander le lancement de la première vidéo affichée, si demandé en option.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron","vCircuit"];
            vCarouselTest.firstVideoId="vCircuit";
            vCarouselTest.playFirstVideo=true;
            let currentVideo=<HTMLMediaElement>document.querySelector("#vCircuit video");
            spyOn(currentVideo, "play");
            vCarouselTest.run();
            expect(currentVideo.play).toHaveBeenCalled();
        });

        it("Ne doit demander le lancement de la première vidéo affichée, si cela n'est pas demandé en option.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron","vCircuit"];
            vCarouselTest.firstVideoId="vCircuit";
            let currentVideo=<HTMLMediaElement>document.querySelector("#vCircuit video");
            spyOn(currentVideo, "play");
            vCarouselTest.run();
            expect(currentVideo.play).not.toHaveBeenCalled();
        });


        it("Doit passer d'une vidéo à l'autre jusqu'à ce qu'elles aient été toutes affichées.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron","vCircuit"];
            vCarouselTest.run();
            let currentVideo=<HTMLMediaElement>document.querySelector("#vFunanbule video");

            // Fin de lecture de la première vidéo, on passe à la suivante :
            currentVideo.dispatchEvent(new Event("ended"));
            expect(document.getElementById("vFunanbule").style.display).toBe("none");
            expect(document.getElementById("vForgeron").style.display).toBe("block");
            currentVideo=<HTMLMediaElement>document.querySelector("#vForgeron video");
            expect(vCarouselTest.getCurrentVideo()).toEqual(currentVideo);
            expect(window.location.hash).toEqual("#vForgeron");

            // Fin de la deuxième, on passe à la dernière :
            currentVideo.dispatchEvent(new Event("ended"));
            expect(document.getElementById("vForgeron").style.display).toBe("none");
            expect(document.getElementById("vCircuit").style.display).toBe("block");
            currentVideo=<HTMLMediaElement>document.querySelector("#vCircuit video");
            expect(vCarouselTest.getCurrentVideo()).toEqual(currentVideo);
            expect(window.location.hash).toEqual("#vCircuit");

            // Fin de la dernière, rien ne bouge :
            currentVideo.dispatchEvent(new Event("ended"));
            expect(document.getElementById("vCircuit").style.display).toBe("block");
            expect(vCarouselTest.getCurrentVideo()).toEqual(currentVideo);
            expect(window.location.hash).toEqual("#vCircuit");
        });
        
        it("Si demandé, le carrousel doit continuer après avoir parcouru toutes les vidéos.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron","vCircuit"];
            vCarouselTest.noStop=true;
            vCarouselTest.run();
            let currentVideo=<HTMLMediaElement>document.querySelector("#vFunanbule video");

            // Fin de lecture de la première vidéo, on passe à la suivante :
            currentVideo.dispatchEvent(new Event("ended"));
            currentVideo=<HTMLMediaElement>document.querySelector("#vForgeron video");
            // Fin de la deuxième, on passe à la dernière :
            currentVideo.dispatchEvent(new Event("ended"));
            currentVideo=<HTMLMediaElement>document.querySelector("#vCircuit video");
            // Fin de la dernière, on retourne à la première :
            currentVideo.dispatchEvent(new Event("ended"));
            expect(document.getElementById("vCircuit").style.display).toBe("none");
            expect(document.getElementById("vFunanbule").style.display).toBe("block");
            currentVideo=<HTMLMediaElement>document.querySelector("#vFunanbule video");
            expect(vCarouselTest.getCurrentVideo()).toEqual(currentVideo);
            expect(window.location.hash).toEqual("#vFunanbule");
        });
        

        it("Doit demander le lancement des nouvelles vidéos affichées, si cela est demandé en option.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron","vCircuit"];
            vCarouselTest.playNextVideos=true;
            vCarouselTest.run();
            let firstVideo=<HTMLMediaElement>document.querySelector("#vFunanbule video");
            let nextVideo=<HTMLMediaElement>document.querySelector("#vForgeron video");
            spyOn(nextVideo, "play");
            // Fin de lecture de la première vidéo, on passe à la suivante qui doit se lancer automatiquement :
            firstVideo.dispatchEvent(new Event("ended"));
            expect(nextVideo.play).toHaveBeenCalled();
        });
        
        it("Ne doit pas demander le lancement des nouvelles vidéos affichées, si cela n'est pas demandé en option.", function()
        {
            vCarouselTest.vContainers=["vFunanbule","vForgeron","vCircuit"];
            vCarouselTest.run();
            let firstVideo=<HTMLMediaElement>document.querySelector("#vFunanbule video");
            let nextVideo=<HTMLMediaElement>document.querySelector("#vForgeron video");
            spyOn(nextVideo, "play");
            // Fin de lecture de la première vidéo, on passe à la suivante qui ne doit pas se lancer automatiquement :
            firstVideo.dispatchEvent(new Event("ended"));
            expect(nextVideo.play).not.toHaveBeenCalled();
        });
        
    });

  
});