Sunday 11 June 2017

Tests for Pug generated HTML passing but with TypeError

I'm in the process of building an Express application which uses Pug as the templating engine to generate HTML. The application runs perfectly with no visible errors whatsoever.

Now, I'm in the process of writing unit tests (currently 4 of them) for the app and I get a weird result from my tests which says 4 passing but logs TypeError's for each one of them in the console. The tests are done using Mocha, Chai and Chai-HTTP.

This is the code for the problematic tests:

describe('Front-end pages', function() {

    it('landing page exists', function() {
      chai.request(app)
      .get('/')
      .end(function(err, res) {
        res.should.have.status(200);
        res.should.be.html;
        done();
      });
    });

    it('login page exists', function() {
      chai.request(app)
      .get('/login')
      .end(function(err, res) {
        res.should.have.status(200);
        res.should.be.html;
        done();
      });
    });

    it('register page exists', function() {
      chai.request(app)
      .get('/register')
      .end(function(err, res) {
        res.should.have.status(200);
        res.should.be.html;
        done();
      });
    });

    it('profiles page exists', function() {
      chai.request(app)
      .get('/profiles')
      .end(function(err, res) {
        res.should.have.status(200);
        res.should.be.html;
        done();
      });
    });
});

The errors generated look like this (I've excluded the error stack since each one spans over 100 lines):

Front-end pages
    ✓ landing page exists
    ✓ login page exists
TypeError: /Users/dakshshah/Documents/Work/Git-Works/getfit/views/layout.pug:4
    2| html
    3|   head
  > 4|     title= `${title} | ${h.siteName}`
    5|     link(rel='stylesheet', href='/dist/style.css')
    6|     link(rel="shortcut icon" type="image/png" href="/images/icons/favicon.png")
    7|     meta(name="viewport" content="width=device-width, initial-scale=1")

Cannot read property 'siteName' of undefined

.... error stack ....

✓ profiles page exists
TypeError: /Users/dakshshah/Documents/Work/Git-Works/getfit/views/layout.pug:4
    2| html
    3|   head
  > 4|     title= `${title} | ${h.siteName}`
    5|     link(rel='stylesheet', href='/dist/style.css')
    6|     link(rel="shortcut icon" type="image/png" href="/images/icons/favicon.png")
    7|     meta(name="viewport" content="width=device-width, initial-scale=1")

Cannot read property 'siteName' of undefined

... error stack ...

4 passing (949ms)

TypeError: /Users/dakshshah/Documents/Work/Git-Works/getfit/views/layout.pug:4
    2| html
    3|   head
  > 4|     title= `${title} | ${h.siteName}`
    5|     link(rel='stylesheet', href='/dist/style.css')
    6|     link(rel="shortcut icon" type="image/png" href="/images/icons/favicon.png")
    7|     meta(name="viewport" content="width=device-width, initial-scale=1")

Cannot read property 'siteName' of undefined

... error stack ...

siteName here is a variable declared in one of my modules helpers.js like this: exports.siteName = "My Website Name";. This works perfectly fine when I run the app.

The module helpers is included in app.js along with the following code:

// pass variables to our templates + all requests
app.use((req, res, next) => {
  res.locals.h = helpers;
  res.locals.flashes = req.flash();
  res.locals.user = req.user || null;
  res.locals.currentPath = req.path;
  next();
});

All my modules are included in the correct manner, otherwise the tests would throw an error in the beginning rather than passing and responding with TypeError. What might the problem be?



via Daksh Shah

No comments:

Post a Comment