pixi.js/test/functional/example-1-basics/index.js

describe('Example 1 - Basics', function () {
    'use strict';

    var baseUri = '/base/test/functional/example-1-basics';
    var expect = chai.expect;
    var currentFrame = 0;
    var frameEvents = {};
    var stage;
    var renderer;
    var bunny;

    function onFrame(frame, callback) {
        frameEvents[frame] = callback;
    }

    function animate() {
        currentFrame += 1;

        requestAnimFrame( animate );

        // just for fun, lets rotate mr rabbit a little
        bunny.rotation += 0.1;

        // render the stage
        renderer.render(stage);

        if (frameEvents[currentFrame])
            frameEvents[currentFrame](currentFrame);
    }

    function initScene() {
        // create an new instance of a pixi stage
        stage = new PIXI.Stage(0x66FF99);

        // create a renderer instance
        renderer = PIXI.autoDetectRenderer(400, 300);
        console.log('Is PIXI.WebGLRenderer: ' + (renderer instanceof PIXI.WebGLRenderer));

        // add the renderer view element to the DOM
        document.body.appendChild(renderer.view);

        requestAnimFrame( animate );

        // create a texture from an image path
        var texture = PIXI.Texture.fromImage(baseUri + "/bunny.png");
        // create a new Sprite using the texture
        bunny = new PIXI.Sprite(texture);

        // center the sprites anchor point
        bunny.anchor.x = 0.5;
        bunny.anchor.y = 0.5;

        // move the sprite t the center of the screen
        bunny.position.x = 200;
        bunny.position.y = 150;

        stage.addChild(bunny);
    }

    it('assets loaded', function (done) {
        var loader = new PIXI.AssetLoader([
            baseUri + '/bunny.png',
            baseUri + '/frame-30.png',
            baseUri + '/frame-60.png',
            baseUri + '/frame-90.png'
        ]);
        // loader.on('onProgress', function (event) {
        //     console.log(event.content);
        // });
        loader.on('onComplete', function (event) {
            done();
            initScene();
        });
        loader.load();
    });

    it('frame 30 should match', function (done) {
        this.timeout(700);
        onFrame(30, function () {
            var str = renderer.view.toDataURL('image/png');
            //console.log('<img src="' + str + '" />');
            resemble(str)
                .compareTo(baseUri + '/frame-30.png')
                .onComplete(function (data) {
                    expect(data).to.be.an('object');
                    expect(data.isSameDimensions).to.equal(true);
                    expect(data.misMatchPercentage).to.be.below(0.2);
                    done();
                });
        });
    });

    it('frame 60 should match', function (done) {
        this.timeout(1200);
        onFrame(60, function () {
            var str = renderer.view.toDataURL('image/png');
            //console.log('<img src="' + str + '" />');
            resemble(str)
                .compareTo(baseUri + '/frame-60.png')
                .onComplete(function (data) {
                    expect(data).to.be.an('object');
                    expect(data.isSameDimensions).to.equal(true);
                    expect(data.misMatchPercentage).to.be.below(0.2);
                    done();
                });
        });
    });

    it('frame 90 should match', function (done) {
        this.timeout(1700);
        onFrame(90, function () {
            var str = renderer.view.toDataURL('image/png');
            //console.log('<img src="' + str + '" />');
            resemble(str)
                .compareTo(baseUri + '/frame-90.png')
                .onComplete(function (data) {
                    expect(data).to.be.an('object');
                    expect(data.isSameDimensions).to.equal(true);
                    expect(data.misMatchPercentage).to.be.below(0.2);
                    done();
                });
        });
    });

    // it('capture something', function (done) {
    //     this.timeout(2000000);
    //     onFrame(30, function () {
    //         var img = new Image();
    //         img.src = renderer.view.toDataURL('image/png');
    //         document.body.appendChild(img);
    //     });
    // });
});