Why am I getting this Angular-Mock error and Mocha test is not running
Asked Answered
S

1

2

I'm getting the exact error as found here: (window.beforeEach || window.setup) is not a function. However the fix did not work, the author of the tutorial series here even mentioned the same fix.

Here is the Tuts+ author's fix: enter image description here

Which is simply to place the angular-mock script tag after the Mochai and Chai scripts. Which I did so below:

enter image description here

test/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mocha Spec Runner</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="../app/favicon.ico">
    <link rel="apple-touch-icon" href="../app/assets/imgs/apple-touch-icon.png">
    <link href="bower_components/mocha/mocha.css" rel="stylesheet">
</head>

<body>

    <div id="mocha"></div>

    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/mocha/mocha.js"></script>
    <script src="../bower_components/chai/chai.js"></script>
    <!-- see Angular-mocks is here :( -->
    <script src="../bower_components/angular-mocks/angular-mocks.js"></script>

    <script>
        mocha.setup('bdd');
    </script>

    <script src="main.spec.js"></script>

    <script>
        mocha.run();
    </script>

</body>
</html>

My main.spec.js file

/**
 * @name Mocha Test Runner
 * @desc Describes and runs our dashboard tests
 */

var assert = chai.assert;
var expect = chai.expect;

// This Test is designed to fail on purpose
describe('User Login', function() {
    console.log('User Login');
    describe('Login Failed', function() {
        console.log('Login Failed');
        if ('Incorrect login should fail', function() {
            module('loginController')
            inject(function($injector) {
                apiFactory = $injector.get('ApiFactory');
            });

            expect(apiFactory).to.be.an('number');
        });
    });    
});

My Gulp tasks

gulp.task('serve', function() {
    return browserSync.init({
        notify : false,
        port   : 3333,
        server: {
            baseDir: ['app'],
            routes: {
                '/bower_components' : 'bower_components'
            }
        }
    });
});

gulp.task('serve-test', function() {
    browserSync.init({
        notify : false,
        port   : 4444,
        server: {
            baseDir: ['test', 'app'],
            routes: {
                '/bower_components' : 'bower_components'
            }
        }
    });
});
Swainson answered 17/2, 2016 at 15:41 Comment(3)
So what is the question?Chicle
Updated my title and code. Why am I getting this error and my test is not running?Swainson
Just realized this course is from July 2015, what I don't get is, I downloaded his github repo and his tests run fine! Our app isn't using Node however, it's running via Python and Apache locally. Not sure if that has anything to do with this, but this is frustrating.Swainson
G
2

In your index.html file, you include the angular-mocks.js script before the call to mocha.setup('bdd'). angular-mocks.js is implemented as an immediately-invoked function expression which attempts to use window.beforeEach. (https://github.com/angular/bower-angular-mocks/blob/master/angular-mocks.js#L2586)

However, mocha.js is not immediately invoked and has to be initialized with the mocha.setup function in order to add its magic to the runtime environment.

Try reversing the order of these script tags, so that mocha.js is included and initialized before angular-mocks.js.

    <script src='bower_components/mocha/mocha.js'></script>
    <script src='bower_components/chai/chai.js'></script>
    <script>
        mocha.setup('bdd');
    </script>
    <script src="bower_components/angular-mocks/angular-mocks.js"></script>
Germane answered 17/2, 2016 at 19:35 Comment(6)
I have this part fixed already and it still happens :( sorry I must have posted older code earlier... what is driving me nuts is that the author's test totally runs lol.Swainson
Well, there goes my big idea. Perhaps you could create a git repo with your code so I could try it on my own end.Germane
Sure! github.com/leongaban/test I didn't add my App files of course, but maybe you can see what's wrong here?Swainson
The code in the repo had the angular mocks script loaded before mocha.setup(). I switched the order around and it worked. I send you a PR just to be 100% crystal.Germane
Ah thanks! I see now and totally miss-read, thought you mean the run statement, but it was actually the mocha.setup('bdd'); :) working nowSwainson
Let us continue this discussion in chat.Germane

© 2022 - 2024 — McMap. All rights reserved.