Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Posted by gregsmith5
gregsmith5
32,615 Points

Having trouble testing in Yeoman - gulp-webapp

Hey all,

I've been using the Angular-gulp generator in Yeoman for a couple projects and they have come along nicely. I'm having trouble with Yeoman's gulp-webapp generator, though. It uses Mocha/Chai.js for client testing, but it doesn't seem to be working for me. What I have is basically straight out of the generator:

// app/main.js

$(document).ready(function() {
    var timerObject = {
        timer: 25
    };

    $('#timer').html(timerObject.timer);
});

// /test/spec/test.js

(function () {
  'use strict';

  describe('timerObject holds all of the pomodoro data', function(){

    it('should initialize with a timer value of 25',function(){
        expect(timerObject.timer).to.equal(25);
    });

  });
})();

<!--test/index.html sources the scripts and nicely formats the output-->

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mocha Spec Runner</title>
  <link rel="stylesheet" href="../bower_components/mocha/mocha.css">
</head>
<body>
  <div id="mocha"></div>
  <script src="../bower_components/mocha/mocha.js"></script>
  <script>mocha.setup('bdd');</script>
  <script src="../bower_components/chai/chai.js"></script>
  <script>
    var assert = chai.assert;
    var expect = chai.expect;
    var should = chai.should();
  </script>
  <!-- bower:js -->
  <!-- endbower -->
  <!-- include source files here... -->
  <script type="text/javascript" src="../app/main.js"></script>
  <!-- include spec files here... -->
  <script src="spec/test.js"></script>
  <script>
    if (navigator.userAgent.indexOf('PhantomJS') === -1) {
      mocha.run();
    }
  </script>
</body>
</html>

I'm not sure that anyone here will be familiar with this framework, but I figured I'd give it a shot as the Treehouse community has been quite helpful in the past.

Thanks!

2 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

I think I figured it out. You first need to add the 'app' path to the gulpfile's serve:test task like this:

gulp.task('serve:test', () => {
  browserSync({
    notify: false,
    port: 9000,
    ui: false,
    server: {
      baseDir: 'test',
      routes: {
        '/bower_components': 'bower_components',
        '/app': 'app'  // add this line (and the comma after the previous line)
      }
    }
  });

Then in your test/index.html, change the reference to main.js to look like this:

<script type="text/javascript" src="/app/scripts/main.js"></script>

The test passed for me after I made those changes.

gregsmith5
gregsmith5
32,615 Points

You!!! Are!!! Awesome!!! This totally works and my life is better for it.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Sweet! Glad I could help. I'm not sure why they wouldn't already have the app directory included in the test routes.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

I don't have much experience in testing. I setup a new gulp-webapp and added your code and got this error when I ran gulp serve:test:

ReferenceError: timerObject is not defined
    at Context.<anonymous> (spec/test.js:7:16)

Is this the same error you are getting?

gregsmith5
gregsmith5
32,615 Points

That's the very same. I'm referencing it right under where it says 'include source files here... ', so I'm not sure what the problem is. The documentation for this generator is woefully inadequate, too.