first-app-tests.jade

include ../_util-fns

:marked
  In this chapter we'll setup the environment for testing our sample application and write a few easy Jasmine tests of the app's simplest parts.
  We'll learn:
  - to test one of our application files
  - why we prefer our test files to be next to their corresponding source files
  - to run tests with an `npm` command
  - load the test file with SystemJS

.callout.is-helpful
  header Prior Knowledge
  :marked
    The Unit Testing chapters build upon each other. We recommend reading them in order.
    We're also assuming that you're already comfortable with basic Angular 2 concepts and the tools
    we introduced in the [QuickStart](../quickstart.html) and
    the [Tour of Heroes](../tutorial/) tutorial
    such as <code>npm</code>, <code>gulp</code>, and <code>lite-server</code>.

.l-main-section
:marked
  ## Create the test-runner HTML

  Locate the folder that contains the application `index.html` for your testing copy of Tour of Heroes.

  Create a new, sibling HTML file, ** `unit-tests.html` ** and copy over the same basic material from the  `unit-tests.html` in the [Jasmine 101](./jasmine-testing-101.html) chapter.
  
+makeExample('testing/ts/unit-tests-2.html', 'test-runner-base', 'unit-tests.html')

:marked
  We're picking up right where we left off. All we've done is change the title.

.l-main-section
:marked
  ## Update `package.json` for testing

  We must install the Jasmine package as well:

pre.prettyprint.lang-bash
  code npm install jasmine-core --save-dev --save-exact

.alert.is-important Be sure to install <code>jasmine-core</code> , not <code>jasmine</code>!

.l-main-section
:marked
  ## Configure `lite-server` for serving our test harness

:marked
  First create a configuration file for serving up our test harness through `lite-server`.

+makeExample('testing/ts/liteserver-test-config.json', '', 'liteserver-test-config.json')

:marked
  Let's make one more change to the `package.json` script commands.

  **Open the `package.json` ** and scroll to the `scripts` node and add the following two entries:

code-example(format="").
  "lite-server-test": "lite-server --config=liteserver-test-config.json",
  "test": "tsc && concurrently \"npm run tsc:w\" \"npm run lite-server-test\" "

:marked
  The `npm test` command will launch `lite-server` and open a browser to the `unit-tests.html` page we just wrote. It will also take care of recompiling your source code and reloading your browser after any change.

.l-main-section
:marked
  ## First app tests

  We can start testing *some* of our app right away. For example, we can test the `Hero` interface:
  
+makeExample('testing/ts/app/hero.ts')  

:marked
  Let's add a couple of simple tests in a new file.

+makeExample('testing/ts/app/hero.spec.ts', 'base-hero-spec')  

:marked
  That's the basic Jasmine we learned back in "Jasmine 101".

  Notice that we surrounded our tests with ** `describe('Hero')` **.

  **By convention, our test always begin with a `describe` that identifies the application part under test.**

  The description should be sufficient to identify the tested application part and its source file. Almost any convention will do as long as you and your team follow it consistently and are never confused.
  
  But we haven't saved this test yet.

.l-main-section
:marked
  ## Where do tests go?

  Some people like to keep their tests in a `tests` folder parallel to the application source folder.

  We are not those people. We like our unit tests to be close to the source code that they test. We prefer this approach because
  - The tests are easy to find
  - We see at a glance if an application part lacks tests.
  - Nearby tests can teach us about how the part works; they express the developers intention and reveal how the developer thinks the part should behave under a variety of circumstances.
  - When we move the source (inevitable), we remember to move the test.
  - When we rename the source file (inevitable), we remember to rename the test file.

  We can't think of a downside. The server doesn't care where they are.  They are easy to find and distinguish from application files when named conventionally.

.l-sub-section
  :marked
    You may put your tests elsewhere if you wish. 
    We're putting ours inside the app, next to the source files that they test.

.l-main-section
:marked
  ## First spec file

  **Create** a new file, ** `hero.spec.ts` ** in `app` next to `hero.ts`.

  Notice the ".spec" suffix in the test file's filename, appended to the name of the file holding the application part we're testing.

.alert.is-important  All of our unit test files follow this .spec naming pattern.

:marked
  Save the tests we just made in `hero.spec.ts`:

+makeExample('testing/ts/app/hero.spec.ts', 'base-hero-spec')  

:marked
  ### Import the part we're testing

  We have an `import {Hero} from './hero' ` statement.

  If we forgot this import, a TypeScript-aware editor would warn us, with a squiggly red underline, that it can't find the definition of the `Hero` interface.

  ### Update unit-tests.html

  Next we update the `unit-tests.html` with a reference to our new `hero.spec.ts` file. Delete the inline test code.  The revised pertinent HTML looks like this:
  
+makeExample('testing/ts/unit-tests-2.html', 'load-hero-and-spec')(format=".")

:marked
  ### Run and Fail

  Look over at the browser (lite-server will have reloaded it).  The browser displays

figure.image-display
  img(src='/resources/images/devguide/first-app-tests/Jasmine-not-running-tests.png' style="width:400px;" alt="Jasmine not running any tests")

:marked
  That's Jasmine saying "**things are _so_ bad that _I'm not running any tests_.**"

  Open the browser's Developer Tools (F12, Ctrl-Shift-i). There's an error:

code-example(format="" language="html").
  Uncaught ReferenceError: System is not defined

.l-main-section
:marked
  ## Load tests with SystemJS

  The immediate cause of the error is the `export` statement in `hero.ts`.
  That error was there all along.
  It wasn't a problem until we tried to `import` the `Hero` interface in our tests.

  Our test environment lacks support for module loading.
  Apparently we can't simply load our application and test scripts like we do with 3rd party JavaScript libraries.

  We are committed to module loading in our application.
  Our app will call `import`.  Our tests must do so too.

  We add module loading support in four steps:

  1. add the *SystemJS* module management library
  1. configure *SystemJS* to look for JavaScript files by default
  1. import our test files
  1. tell Jasmine to run the imported tests

  These steps are all clearly visible, in exactly that order, in the following lines that
  replace the `<body>` contents in `unit-tests.html`:

+makeExample('testing/ts/unit-tests-3.html', 'systemjs')(format=".")

:marked
  Look in the browser window. Our tests pass once again.

figure.image-display
  img(src='/resources/images/devguide/first-app-tests/test-passed-once-again.png' style="width:400px;" alt="Tests passed once again")


.l-main-section
:marked
  ## Observations

  ### System.config
  System.js demands that we specify a default extension for the filenames that correspond to whatever it is asked to import.
  Without that default, it would translate an import statement such as `import {Hero} from './hero'` to a request for the file named `hero`.
  Not `hero.js`. Just plain `hero`.  Our server error with "404 - not found" because it doesn't have a file of that name.

  Once configured with a default extension of 'js',&nbsp;  SystemJS requests `hero.js` which *does* exist and is promptly returned by our server.

  ### Asynchronous System.import
  The call to `System.import` shouldn't surprise us but it's asynchronous nature might.
  If we ponder this for a moment, we realize that it must be asynchronous because
  System.js may have to fetch the corresponding JavaScript file from the server.
  Accordingly, `System.import` returns a promise and we must wait for that promise to resolve.
  Only then can Jasmine start evaluating the imported tests.

  ### window.onload
  Jasmine doesn't have a `start` method.  It wires its own start to the browser window's `load` event.
  That makes sense if we're loading our tests with script tags.
  The browser raises the `load` event when it finishes loading all scripts.

  But we're not loading test scripts inline anymore.
  We're using the SystemJS module loader and it won't be done until long after the browser raised the `load` event.
  Meanwhile, Jasmine started and ran to completion … with no tests to evaluate … before the import completed.

  So we must wait until the import completes and only then call the window `onLoad` handler.
  Jasmine re-starts, this time with our imported test queued up.

.l-main-section
:marked
  ## What's Next?
  We are able to test a part of our application with simple Jasmine tests.
  The part was a stand-alone interface that made no mention or use of Angular.

  That's not rare but it's not typical either. 
  Most of our application parts make some use of the Angular framework.
  Let's test a *pipe* class that does rely on Angular.