vCarousel/tests/vCarouselSpec.ts

import { vCarousel } from "../src/vCarousel";
const errors=require("../src/errors.js");

describe("vCarousel", () =>
{
    let vCarouselTest : vCarousel;
    const videosWebDir="hhttp://localhost:9876/videos";
    const fixture="<div id='fixture'><figure id='noVideo'></figure><figure id='video1'><video controls='controls' preload='metadata'><source src='"+videosWebDir+"/Lizio-Poete-Ferrailleur-clownfunanbule.m4v' type='video/mp4'></source></video></figure><figure id='video2'><video controls='controls' preload='metadata'><source src='"+videosWebDir+"/Lizio-Poete-Ferrailleur-forgeron.m4v' type='video/mp4'></source></video></figure><figure id='video3'><video controls='controls' preload='metadata'><source src='"+videosWebDir+"/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v' type='video/mp4'></source></video></div>";

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

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

    it("Doit être une instance de vCarousel", () =>
    {
        expect(vCarouselTest).toBeInstanceOf(vCarousel);
    });

    describe("Configuration de vCarousel", () =>
    {
        it("Doit générer une erreur si tous les ids passés ne correspondent pas à des éléments HTML existants.", () =>
        {
            expect(() => { return vCarouselTest.vContainers=["dontExistId","video1","video2"]; }).toThrowError(errors.elementNotFound+"dontExistId");
            expect(() => { return vCarouselTest.vContainers=["video1","dontExistId","video2"]; }).toThrowError(errors.elementNotFound+"dontExistId");
            expect(() => { return vCarouselTest.vContainers=["video1","video2","dontExistId"]; }).toThrowError(errors.elementNotFound+"dontExistId");
        });
        
        it("Doit générer une erreur si tous les ids passés ne correspondent pas à des éléments HTML contenant une balise <video>.", () =>
        {       
            expect(() => { return vCarouselTest.vContainers=["noVideo","video1","video2"]; }).toThrowError(errors.videoNotFound+"noVideo");
            expect(() => { return vCarouselTest.vContainers=["video1","noVideo","video2"]; }).toThrowError(errors.videoNotFound+"noVideo");
            expect(() => { return vCarouselTest.vContainers=["video1","video2","noVideo"]; }).toThrowError(errors.videoNotFound+"noVideo");
        });
        
        it("Doit générer une erreur s'il n'y a pas au moins 2 ids valides passés pour les éléments HTML contenant les balises <video>.", () =>
        {
            expect(() => { return vCarouselTest.vContainers=["video1"]; }).toThrowError(errors.need2Videos);
        });

        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 balise video.", () =>
        {
            expect(() => { return vCarouselTest.vContainers=["video1","video2"]; }).not.toThrowError();
        });

        it("Ne doit pas prendre en compte l'id fourni pour la première vidéo à afficher, s'il ne correspond pas à une des vidéos fournies.", () =>
        {
            vCarouselTest.vContainers=["video1","video2"];
            vCarouselTest.firstVideoId="video3";
            expect(vCarouselTest.firstVideoId).toBeUndefined();
        });
                
        it("Doit accepter un firstVideoId vide permettant de cacher toutes les vidéos au lancement.", () =>
        {
            vCarouselTest.vContainers=["video1","video2"];
            vCarouselTest.firstVideoId="";
            expect(vCarouselTest.firstVideoId).toBe("");
        });
    });

    describe("Lancement de vCarousel", () =>
    {
        it("Doit générer une erreur si on lance le carrousel sans avoir fourni les éléments HTML contenant les vidéos.", () =>
        {
            expect(() => { return vCarouselTest.run(); }).toThrowError(errors.needVideosProvided);
        });

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

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

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

        it("Ne doit pas demander le lancement de la première vidéo affichée, si cela n'est pas demandé en option.", () =>
        {
            vCarouselTest.vContainers=["video1","video2","video3"];
            vCarouselTest.firstVideoId="video3";
            let currentVideo=<HTMLMediaElement>document.querySelector("#video3 video");
            spyOn(currentVideo, "play");
            vCarouselTest.run();
            expect(currentVideo.play).not.toHaveBeenCalled();
        });
        
        it("Doit passer d'une vidéo à l'autre et arrêter lorsqu'elles ont toutes été affichées.", () =>
        {
            vCarouselTest.vContainers=["video1","video2","video3"];
            vCarouselTest.run();
            let currentVideo=<HTMLMediaElement>document.querySelector("#video1 video");
            // Fin de lecture de la première vidéo, on passe à la suivante :
            currentVideo.dispatchEvent(new Event("ended"));
            expect(document.getElementById("video1").style.display).toBe("none");
            expect(document.getElementById("video2").style.display).toBe("block");
            currentVideo=<HTMLMediaElement>document.querySelector("#video2 video");
            expect(vCarouselTest.currentVideo).toEqual(currentVideo);
            expect(window.location.hash).toEqual("#video2");
            // Fin de la deuxième, on passe à la dernière :
            currentVideo.dispatchEvent(new Event("ended"));
            expect(document.getElementById("video2").style.display).toBe("none");
            expect(document.getElementById("video3").style.display).toBe("block");
            currentVideo=<HTMLMediaElement>document.querySelector("#video3 video");
            expect(vCarouselTest.currentVideo).toEqual(currentVideo);
            expect(window.location.hash).toEqual("#video3");
            // Fin de la dernière, rien ne bouge :
            currentVideo.dispatchEvent(new Event("ended"));
            expect(document.getElementById("video3").style.display).toBe("block");
            expect(vCarouselTest.currentVideo).toEqual(currentVideo);
            expect(window.location.hash).toEqual("#video3");
        });
                
        it("Si cela est demandé, le carrousel doit reprendre au début après avoir parcouru toutes les vidéos.", () =>
        {
            vCarouselTest.vContainers=["video1","video2","video3"];
            vCarouselTest.noStop=true;
            vCarouselTest.run();
            let currentVideo=<HTMLMediaElement>document.querySelector("#video1 video");
            // Fin de lecture de la première vidéo, on passe à la suivante :
            currentVideo.dispatchEvent(new Event("ended"));
            currentVideo=<HTMLMediaElement>document.querySelector("#video2 video");
            // Fin de la deuxième, on passe à la dernière :
            currentVideo.dispatchEvent(new Event("ended"));
            currentVideo=<HTMLMediaElement>document.querySelector("#video3 video");
            // Fin de la dernière, on doit retourner à la première :
            currentVideo.dispatchEvent(new Event("ended"));
            expect(document.getElementById("video3").style.display).toBe("none");
            expect(document.getElementById("video1").style.display).toBe("block");
            currentVideo=<HTMLMediaElement>document.querySelector("#video1 video");
            expect(vCarouselTest.currentVideo).toEqual(currentVideo);
            expect(window.location.hash).toEqual("#video1");
        });

        it("Lorsque l'on passe d'une vidéo à l'autre, la durée de lecture de la suivante doit être remise à zéro pour permettre sa lecture.", () =>
        {
            vCarouselTest.vContainers=["video1","video2","video3"];
            vCarouselTest.noStop=true;
            vCarouselTest.run();
            let currentVideo=<HTMLMediaElement>document.querySelector("#video1 video");
            let nextVideo=<HTMLMediaElement>document.querySelector("#video2 video");
            nextVideo.currentTime=5;
            currentVideo.dispatchEvent(new Event("ended"));
            expect(nextVideo.currentTime).toEqual(0);
            // Et ainsi de suite :
            currentVideo=<HTMLMediaElement>document.querySelector("#video2 video");
            nextVideo=<HTMLMediaElement>document.querySelector("#video3 video");
            nextVideo.currentTime=3;
            currentVideo.dispatchEvent(new Event("ended"));
            expect(nextVideo.currentTime).toEqual(0);
            // Retour sur la première :
            currentVideo=<HTMLMediaElement>document.querySelector("#video3 video");
            nextVideo=<HTMLMediaElement>document.querySelector("#video1 video");
            currentVideo.dispatchEvent(new Event("ended"));
            expect(nextVideo.currentTime).toEqual(0);
        });
        
        it("Doit demander le lancement des nouvelles vidéos affichées, si cela est demandé en option.", () =>
        {
            vCarouselTest.vContainers=["video1","video2","video3"];
            vCarouselTest.playNextVideos=true;
            vCarouselTest.run();
            let firstVideo=<HTMLMediaElement>document.querySelector("#video1 video");
            let nextVideo=<HTMLMediaElement>document.querySelector("#video2 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.", () =>
        {
            vCarouselTest.vContainers=["video1","video2","video3"];
            vCarouselTest.firstVideoId="video2";
            vCarouselTest.run();
            let firstVideo=<HTMLMediaElement>document.querySelector("#video2 video");
            let nextVideo=<HTMLMediaElement>document.querySelector("#video3 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();
        });
    });
});