(docs) testing and toh formatting improvements

wardbell · wardbell · commit 93a646d63fcd · 2015-10-16T09:42:50.000-07:00
diff --git a/public/docs/_examples/quickstart/js/app.js b/public/docs/_examples/quickstart/js/app.js
@@ -3,7 +3,7 @@
 
 // #docregion class-w-annotations
 var AppComponent = ng
-  ng.Component({
+  .Component({
     selector: 'my-app',
     template: '<h1>My First Angular 2 App</h1>'
   })
diff --git a/public/docs/_examples/quickstart/js/index.html b/public/docs/_examples/quickstart/js/index.html
@@ -2,6 +2,7 @@
 <!-- #docregion -->
 <html>
   <head>
+    <title>Angular 2 QuickStart</title>
     <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
     <script src="app.js"></script>
   </head>
diff --git a/public/docs/_examples/quickstart/ts/src/index.1.html b/public/docs/_examples/quickstart/ts/src/index.1.html
@@ -3,7 +3,7 @@
 <html>
 
   <head>
-    <title>Getting Started</title>
+    <title>Angular 2 QuickStart</title>
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
     <script src="https://code.angularjs.org/2.0.0-alpha.42/angular2.dev.js"></script>
diff --git a/public/docs/_examples/quickstart/ts/src/index.html b/public/docs/_examples/quickstart/ts/src/index.html
@@ -3,7 +3,7 @@
 <html>
 
   <head>
-    <title>Getting Started</title>
+    <title>Angular 2 QuickStart</title>
     <!-- #docregion libraries -->
     <script src="../node_modules/systemjs/dist/system.src.js"></script>
     <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
diff --git a/public/docs/ts/latest/testing/_data.json b/public/docs/ts/latest/testing/_data.json
@@ -2,22 +2,27 @@
   "_listtype": "ordered",
 
   "index": {
-    "title": "Testing Guides"
+    "title": "Testing Guides",
+    "intro": "Techniques and practices for testing an Angular 2 app"
   },
 
    "jasmine-testing-101": {
-    "title": "Jasmine Testing 101"
+    "title": "Jasmine Testing 101",
+    "intro": "The basics of testing anything with Jasmine"
   },
 
   "application-under-test": {
-    "title": "The Application Under Test"
+    "title": "The Application Under Test",
+    "intro": "A quick look at the application we will test"
   },
 
   "first-app-tests": {
-    "title": "First App Tests"
+    "title": "First App Tests",
+    "intro": "The first test of a simple, non-Angular part of our app"
   },
 
   "testing-an-angular-pipe": {
-    "title": "Testing an Angular Pipe"
+    "title": "Testing an Angular Pipe",
+    "intro": "We test an Angular-aware part of our app"
   }
 }
diff --git a/public/docs/ts/latest/testing/application-under-test.jade b/public/docs/ts/latest/testing/application-under-test.jade
@@ -32,5 +32,7 @@ figure.image-display
 
 	We’ll examine the implementation details as we evolve our tests.
 
+.l-main-section
+:markdown
 	## What’s Next?
 	Now that we’re familiar with how the test app works, we’re ready to poke at it with our first application tests written in Jasmine.
diff --git a/public/docs/ts/latest/testing/first-app-tests.jade b/public/docs/ts/latest/testing/first-app-tests.jade
@@ -16,6 +16,8 @@ include ../../../../_includes/_util-fns
     we introduced in the [QuickStart](../quickstart.html) and
     the [Tour of Heroes](../tutorial/) tutorial
     such as <code>npm</code>, <code>gulp</code>, and <code>live-server</code>.
+
+.l-main-section
 :markdown
   ## Create the test-runner HTML
 
@@ -44,6 +46,8 @@ include ../../../../_includes/_util-fns
 
   We’re picking up right where we left off. All we’ve done is change the title.
 
+.l-main-section
+:markdown
   ## Update `package.json` for testing
 
   We’ll assume that the application has `package.json` file that looks more or less like
@@ -66,6 +70,8 @@ pre.prettyprint.lang-bash
 
   That command will launch `live-server` and open a browser to the `unit-tests.html` page we just wrote.
 
+.l-main-section
+:markdown
   ## First app tests
 
   Believe it or not … we could start testing *some* of our app right away. For example, we can test the `Hero` class:
@@ -128,6 +134,8 @@ pre.prettyprint.lang-bash
 
   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.
 
+.l-main-section
+:markdown
   ## Run the tests
 
   Open one terminal window and run the watching compiler command: `npm run tsc`
@@ -139,6 +147,8 @@ pre.prettyprint.lang-bash
 figure.image-display
   img(src='/resources/images/devguide/first-app-tests/passed-2-specs-0-failures.png' style="width:400px;" alt="Two passing tests")
 
+
+.l-main-section
 :markdown
   ## Critique
 
@@ -150,6 +160,8 @@ figure.image-display
 
   We need to relocate these tests to a separate file.  Let’s do that next.
 
+.l-main-section
+:markdown
   ## Where do tests go?
 
   Some people like to keep their tests in a `tests` folder parallel to the application source folder.
@@ -165,6 +177,8 @@ figure.image-display
 
   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
+:markdown
   ## First spec file
 
   **Create** a new file, ** `hero.spec.ts` ** in `src/app` next to `hero.ts`.
@@ -209,7 +223,7 @@ figure.image-display
     <script src="app/hero.js"></script>
     <script src="app/hero.spec.js"></script>
 
-  ## Run and Fail
+  ### Run and Fail
 
   Look over at the browser (live-server will have reloaded it).  The browser displays
 
@@ -220,10 +234,12 @@ figure.image-display
   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: exports is not defined
-  ```
 
+.l-main-section
+:markdown
   ## Load tests with systemjs
 
   The immediate cause of the error is the `export` statement in `hero.ts`.  
@@ -278,6 +294,8 @@ figure.image-display
 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
 :markdown
   ## Observations
 
@@ -307,6 +325,8 @@ figure.image-display
   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
+:markdown
   ## What’s Next?
   We are able to test a part of our application with simple Jasmine tests. 
   The part was a stand-alone class that made no mention or use of Angular.
diff --git a/public/docs/ts/latest/testing/jasmine-testing-101.jade b/public/docs/ts/latest/testing/jasmine-testing-101.jade
@@ -36,7 +36,6 @@ pre.prettyprint.lang-bash
   :markdown
     The browser is nice during development of a few tests. It’s not the best venue for working with a lot of tests and it won’t do at all for build automation. We’ll switch to the karma test-runner when the time comes. But the browser will do for now.
 
-.l-main-section
 :markdown
   Create a new file called`unit-tests.html` and enter the following:
   ```
@@ -73,7 +72,9 @@ figure.image-display
 
 :markdown
   It doesn’t get much simpler than that!
-
+  
+.l-main-section
+:markdown
   ## First TypeScript Test
   Perhaps too simple. We won’t write our entire test suite inside one HTML file.
   Let’s **extract** that line of test code to a **new file in `src` called `1st.spec.ts` ** .
@@ -82,7 +83,6 @@ figure.image-display
   :markdown
     Among Jasmine developers, a test is known as a “spec” and test filenames include the word “spec”.  We’ll stick with that convention.
 
-.l-main-section
 :markdown
   The test we wrote is valid TypeScript because any JavaScript is valid TypeScript. But let’s make it more modern with an arrow function:
   ```
@@ -96,6 +96,8 @@ figure.image-display
 
   That’s a reminder that we need to compile our TypeScript test files as we do our TypeScript application files.  Do that next.
 
+.l-main-section
+:markdown
   ## Prepare for TypeScript
 
   As we’ve seen before, we first have to tell the compiler how to compile our TypeScript files with
@@ -143,6 +145,8 @@ pre.prettyprint.lang-bash
 
   We should get the same Jasmine test-runner output as before.
 
+.l-main-section
+:markdown
   ## Add a describe and another test
 
   We can’t tell what file produced these test results. We only have one file at the moment but soon we’ll write more.
@@ -189,6 +193,8 @@ figure.image-display
 :markdown
   We can re-run just the failing test by double-clicking it.  Try it!
 
+.l-main-section
+:markdown
   ## Debug the test
   Suppose we didn’t know what was going on.  We can debug it in the browser.
 
@@ -214,10 +220,14 @@ figure.image-display
 
   Congratulations … you’ve completed Jasmine testing 101.
 
+.l-main-section
+:markdown
   ## Learn more
   Learn more about basic Jasmine testing here
   [Resources TBD](./#)
-
+  
+.l-main-section
+:markdown
   ## What’s Next?
   Now that we’re familiar with Jasmine on its own, we’re ready to test an application.
 
diff --git a/public/docs/ts/latest/testing/testing-an-angular-pipe.jade b/public/docs/ts/latest/testing/testing-an-angular-pipe.jade
@@ -9,10 +9,8 @@ include ../../../../_includes/_util-fns
 
   We use it our `hero-detail.component.html` template to turn a hero name like “eeny weenie” into “Eeny Weenie”
 
-  The code for `InitCapsPipe` in `init-caps-pipe.ts` is quite brief:
-
-code-example(format="linenums").
-  &lt;h2&gt;{{hero.name  | initCaps}} is {{userName}}'s current super hero!&lt;/h2&gt;
+code-example(format="linenums" language="html" escape="html").
+  <h2>{{hero.name  | initCaps}} is {{userName}}'s current super hero!</h2>
 
 :markdown
   The code for `InitCapsPipe` in `init-caps-pipe.ts` is quite brief:
@@ -61,9 +59,10 @@ figure.image-display
   in the console window, we would see that SystemJS 
   tried to load Angular and couldn't find it.
 
-  ```
+code-example(format="" language="html" escape="html").
   GET http://127.0.0.1:8080/src/angular2/angular2 404 (Not Found) 
-  ```
+  
+:markdown
   We are writing an Angular application afterall and 
   we were going to need Angular sooner or later. That time has come.  
   The `InitCapsPiep` clearly depends on Angular as is clear in the first few lines:
diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade
@@ -24,7 +24,9 @@ include ../../../../_includes/_util-fns
     Angular can do whatever we need it to do.
     We'll be covering a lot of ground at an introductory level but we’ll find plenty of links
     to chapters with greater depth.
-
+    
+.l-main-section
+  :markdown
     ## The End Game
 
     Here's a visual idea of where we're going in this tour, beginning with the "Dashboard"
@@ -59,7 +61,9 @@ include ../../../../_includes/_util-fns
     
     We can click a hero and have the router race us over to a "Hero Details" view
     again.
-
+    
+.l-main-section
+  :markdown
     ## How We Roll
 
     We’ll build this Tour of Heroes together, step by step.
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
