Jun 15, 2015
Table of contents:
Over the last couple of weeks we’ve covered a lot of the basics of Ember. Whilst we haven’t went into too much depth in any one area, hopefully you should now have a general understanding of the core characteristics of the framework and how it fundamentally works.
One thing we haven’t touched upon in testing. Testing is an extremely important tool in any modern developer’s tool belt.
However, testing is difficult to pick up when you only read about it in abstract tutorials.
Originally I had a couple of posts that went through the various techniques of testing an Ember application.
However, when I reread those articles back, it felt like there was a big piece missing.
So instead of showing you “how to write unit tests in Ember” or “how to write acceptance tests in Ember”, we’re going to actually create an application using Test Driven Development.
I think seeing Test Driven Development in action is a lot more valuable than knowing the syntax of writing tests. It’s not what you write that is important, it’s the conceptional value of the tests that we’re looking for.
So in today’s tutorial we’re going to go back over the basics of creating a new Ember application as a foundation to what is coming over the next couple of weeks.
To create a new Ember application we’re going to need Ember CLI. Ember CLI is a command line utility that ties together everything you will need to create Ember applications.
Don’t worry if you’re not used to using the Command Line, I promise using Ember CLI will make your life easier, not harder.
As with all installation type tutorials I write on Culttt, I’m using OS X as my operating system. The following commands should be pretty easy to translate to *nix operating systems, however, if you’re using Windows, sorry but you’re on your own!
To install Node I’m going to use Homebrew:
homebrew install node
npm install -g ember-cli bower
With Ember CLI installed, we can now create a new Ember application:
ember new my-app
my-app with the name of your application.
This command will generate the file structure for your new Ember application.
Now that the application has been generated everything should be in place for us to view it in the browser.
cd into the directory of your application.
Next, run the following command:
Now if you visit
https://localhost:4200 in your browser you should see the Welcome to Ember.js screen.
Next, we can run the tests to make sure everything is working as it should as a baseline.
In order for this to work you might need to install PhantomJS if you don’t already have it:
brew install phantomjs
Now if you run the following command, the default tests should run successfully:
Finally, running the test command over and over again is going to get laborious. Ember CLI allows you to run the tests after every file change with the following command:
ember test —server
Now when you save a file your tests will automatically be run.
This was the basic set up for an Ember application. We now have the tools in place to create new Ember instances whenever we start a new project.
In this tutorial we installed Ember CLI and Bower and we also created a fresh new Ember application.
Out of the box the Ember application can be booted up and viewed in the browser. It also has a couple of tests you can run through to make sure everything has been set up correctly.
Next week we will start using TDD to start developing the application.