{"id":5207,"date":"2014-08-27T21:11:19","date_gmt":"2014-08-28T04:11:19","guid":{"rendered":"https:\/\/www.ultrasaurus.com\/?p=5207"},"modified":"2014-08-28T06:13:15","modified_gmt":"2014-08-28T13:13:15","slug":"test-first-express","status":"publish","type":"post","link":"https:\/\/www.ultrasaurus.com\/2014\/08\/test-first-express\/","title":{"rendered":"simple test first express setup & tutorial"},"content":{"rendered":"

It has been surprisingly hard to find a very simple tutorial to get started with Express, along with some common helpful tools, including tests!<\/p>\n

Here’s a little tutorial for Node.js v0.10 and Express 4. I’m learning Express, since I’m working on an app in SailsJS, so I will pick options that mirror choices made by the SailsJS framework.<\/p>\n

Install Express<\/h3>\n

Express is a popular simple web app framework for Node (similar to Sinatra for Ruby), and is easily instally with the fabulous Node Package Manager, npm. I find the generators to be handy (at least for learning) and don’t ship with Express anymore, so you need to install them separately.<\/p>\n

\nnpm install -g express\nnpm install -g express-generator\n<\/pre>\n
Create an Express App<\/h3>\n
Let’s create an app named ‘test-app’ — this will create a new directory of that name with all the app files in it.<\/p>\n
\nexpress test-app -e\n<\/pre>\n
The -e<\/code> option tells express-generator to use ejs. (From the Express guide<\/a>: Jade is the default. Express-generator supports only a few template engines, whereas Express itself supports virtually any template engine built for node. For the complete list, see express --help<\/code><\/p>\n
It shows you all the files it creates and even gives a hint about next steps:<\/p>\n
\ncd test-app\nnpm install\n<\/pre>\n
npm install<\/code> will download all of the dependencies specified in our “package.json” file and put them in the the node_modules directory.  This directory will get big fast, so we probably want to add to .gitignore.<\/p>\n
Run the App!<\/h3>\n
Start the server<\/p>\n
\nnpm start\n<\/pre>\n
Then go to http:\/\/localhost:3000\/<\/a> and see:
\n\"Browser<\/p>\n
Stop the server with ctrl-C.<\/p>\n
Take a moment to review the contents of the generated package.json, the npm docs<\/a> are a good reference for the defaults.  All of the dependencies that we have right now are ones that express decided we should have. Max Ogden<\/a> has some nice docs about Node modules<\/a>.<\/p>\n
Add a “devDependency” section to package.json:<\/p>\n
\n  \"devDependencies\": {\n    \"mocha\": \"*\",\n    \"chai\": \"*\",\n    \"supertest\": \"*\",\n    \"supervisor\": \"*\"\n   }\n<\/pre>\n
We’re adding a set of tools that are installed with npm but only used for development and testing.<\/p>\n
Don’t forget to add a comma or we’ll get a scary looking error:<\/p>\n
\nnpm ERR! install Couldn't read dependencies\nnpm ERR! Failed to parse json\nnpm ERR! Unexpected string\n...\n<\/pre>\n
Also in “package.json,” change<\/p>\n
\n  \"scripts\": {\n    \"start\": \"node .\/bin\/www\"\n  },\n<\/pre>\n
to<\/p>\n
\n  \"scripts\": {\n    \"start\": \"supervisor .\/bin\/www\",\n    \"test\": \".\/node_modules\/.bin\/mocha\"\n  },\n<\/pre>\n
the install the new packages with:<\/p>\n
\nnpm install\n<\/pre>\n
We’ve just added a set of development tools for rapid iteration and testing.  The scripts section lets us create shortcuts for the npm command.<\/p>\n
Supervisor Allows Fast Experimentation<\/h3>\n
Supervisor makes it so you can edit files and just refresh the page to see the change.  Now that we have edited the npm ‘start’ script to use supervisor, we can:<\/p>\n
\nnpm start\n<\/pre>\n
We can view the main index page, by going to http:\/\/localhost:3000<\/a>. Then without stopping the server, let’s edit<\/p>\n
views\/index.ejs<\/pre>\n
so the H1 text says “Hello!” instead of Express. We can refresh the page to see the update.<\/p>\n
Mocha, Chai and Supertest for Testing<\/h3>\n
Mocha<\/a> will serially run a set of tests and report failures nicely. It supports a number of different assertion libraries. Chai<\/a> is a single assertion library that supports the popular variants: assert, expect and should.<\/p>\n
You’ll need to create a test directory, empty for now.  Let’s make sure we’re set up right:<\/p>\n
\nmkdir test\nnpm test\n<\/pre>\n
We should see:<\/p>\n
\n  0 passing (2ms)\n<\/pre>\n
create the file<\/p>\n
test\/index.test.js<\/pre>\n
with a test<\/p>\n
\nvar request = require('supertest')\n  , express = require('express');\n \nvar app = require('..\/app');\n \ndescribe('Index Page', function() {\n  it(\"renders successfully\", function(done) {\n    request(app).get('\/').expect(200, done);    \n  })\n})\n<\/pre>\n
run the test with<\/p>\n
npm test<\/pre>\n
and it passes!<\/p>\n
Adding New Behavior Test First<\/h3>\n
We can add expectations to our test.  Let’s plan to add the text “Hello World to the index page.  Supertest supports simple regex syntax for comparing text.  The super test API cleverly supports concise testing by assuming a number as the first param is a status code, but a regex or a string wants to compare to the body.<\/p>\n
\n  it(\"renders successfully\", function(done) {\n    request(app).get('\/')\n      .expect(200)\n      .expect(\/Hello World\/, done);    \n  })\n<\/pre>\n
This will fail<\/p>\n
\n  1) Index Page renders successfully:\n     Error: expected body '\\n\\n  \\n    Express<\/title>\\n    \\n  \\n  \\n    <h1>Hello!<\/h1>\\n    <p>Welcome to Express<\/p>\\n  \\n\\n' to match \/Hello World\/\n<\/pre>\n<p>Now we can edit the page in<\/p>\n<pre>views\/index.ejs<\/pre>\n<p>and run the test again with<\/p>\n<pre>npm test<\/pre>\n<p>to see it pass!<\/p>\n<pre>\n  Index Page\nGET \/ 200 10ms - 211b\n    \u2713 renders successfully \n\n\n  1 passing (34ms)\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>It has been surprisingly hard to find a very simple tutorial to get started with Express, along with some common helpful tools, including tests! Here’s a little tutorial for Node.js v0.10 and Express 4. I’m learning Express, since I’m working on an app in SailsJS, so I will pick options that mirror choices made by… <a href=\"https:\/\/www.ultrasaurus.com\/2014\/08\/test-first-express\/\">Continue reading <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":84,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.ultrasaurus.com\/wp-json\/wp\/v2\/posts\/5207"}],"collection":[{"href":"https:\/\/www.ultrasaurus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ultrasaurus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ultrasaurus.com\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ultrasaurus.com\/wp-json\/wp\/v2\/comments?post=5207"}],"version-history":[{"count":0,"href":"https:\/\/www.ultrasaurus.com\/wp-json\/wp\/v2\/posts\/5207\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ultrasaurus.com\/wp-json\/wp\/v2\/media?parent=5207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ultrasaurus.com\/wp-json\/wp\/v2\/categories?post=5207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ultrasaurus.com\/wp-json\/wp\/v2\/tags?post=5207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}