javascript scoping in requirejs and qunit

Question

I've been trying to puzzle out why the scoping was a little screwy on these 2 prototype objects - the first one is my preloader based on PreloadJS and the second is my QUnit test. I've fixed the issue but I accidently deleted the original thread which someone kindly responded to so I've reposted this working version to say thankyou to that person

'use strict';

define(['preloadjs'], function (PreloadJS) {
    var Preloader = function (model) {
        this.model = model;
        this.totalLoaded = 0;
        this.context = model.context;
        this.isFinished = false;

        this.onStart = (model.onStart != null) ? model.onStart : function (e) {};
        this.onUpdate = (model.onUpdate != null) ? model.onUpdate : function (e) {};
        this.onComplete = (model.onComplete != null) ? model.onComplete : function (e) {};

        this.preload = null;

        // make sure assets exists
        if (model.assets == null) {
            model.assets = {};
        }

        this.init();
    };

    /**
     * initialise preloader
     * @return {null}
     */
    Preloader.prototype.init = function() {
        var self = this;

        var preload = new PreloadJS();
        if (this.onStart != null) { 
            this.onStart(); 
        }
        preload.onProgress = function (e) { self.onUpdate(e); };
        preload.onComplete = function (e) { self.handleComplete(e); };
        preload.onFileLoad = function (e) { self.onFileLoad(e); };
        preload.loadManifest(this.model.manifest);

        this.preload = preload;
    };

    Preloader.prototype.handleComplete = function(e) {
        this.isFinished = true;

        this.onComplete(e);
    };

    /**
     * called when each file in the manifest is loaded - if it's an image, 
     * create an image object and populate its properties
     * @param  {event} e    event object
     * @return {null}
     */
    Preloader.prototype.onFileLoad = function(e) {
        if (e.type == PreloadJS.IMAGE) {
            var self = this;

            var img = new Image();
            img.src = e.src;
            img.onload = function () { self.handleFileComplete(); };
            this.model.assets[e.id] = img;
        }
    };

    /**
     * iterates totalLoaded when each image has intialised
     * @return {null}
     */
    Preloader.prototype.handleFileComplete = function() {
        this.totalLoaded++;
    };

    // public interface
    return Preloader;
});

and this is the preloader QUnit test

'use strict';

define(function (require) {
    var Preloader = require('Preloader');

    var manifest = [
        { src : '../app/images/splash-screen.jpg', id : 'splash-screen' }
    ];

    var assets = {};

    var startFired = 0;
    var updateFired = 0;
    var completeFired = 0;

    var totalLoaded = 0;

    var scopetest = 'test';

    var loaded = 0;

    var pl = new Preloader({
        manifest : manifest,
        assets : assets, 
        onStart : function (e) {
            startFired++;
        },
        onUpdate : function (e) {
            updateFired++;

            totalLoaded = e.loaded;
        },
        onComplete : function (e) {
            completeFired++;

            // adding the unit tests into the onComplete function fixed the inconsistent test results i was getting
            test('Preloader tests', function () {
                expect(4);

                equal(startFired, 1, 'onStart was called once exactly');
                ok((updateFired > 0), 'onUpdate was called at least once. Total: ' + updateFired);
                equal(completeFired, 1, 'onComplete was called once exactly');
                notEqual(pl.model.assets['splash-screen'], undefined, 'there was at least one asset loaded: ' + pl.model.assets['splash-screen']);

            });

            QUnit.start();
        }
    });

    QUnit.stop();
});

Thankyou for your response and apologies for deleting the thread

Please undelete the old thread instead of re-asking the question — Bergi, Dec 18 '12 at 18:26
apologies - couldn't find it - if i click on the link in my inbox it says 'Page Not Found This question was voluntarily removed by the author – that's you!' — obie, Dec 18 '12 at 18:48
Google helps: http://stackoverflow.com/questions/13938324/javascript-scoping-in-callbacks. Please reopen that one, [edit](http://stackoverflow.com/posts/13938324/edit) or answer it, and delete this one here. — Bergi, Dec 18 '12 at 18:51
Hi Bergi - I'm still getting the Page Not Found error and while the edit link still works, when the edit is saved it ends up back at the Page not found link — obie, Dec 18 '12 at 19:01
Uh, forgot about reputation-dependent privileges. Seems you are not allowed to view or reopen your own question... I've voted for reopening it, but that may not happen as well. — Bergi, Dec 18 '12 at 19:17

obie · Accepted Answer · 2012-12-18T19:03:12.303

0

This question already answered in the OP - this is my acceptance

edited Dec 18 '12 at 19:03

answered Dec 18 '12 at 18:04

obie

578
7
23

it wasn't answered but someone had responded and I appreciated it – obie Dec 18 '12 at 19:02

javascript scoping in requirejs and qunit

1 Answers1