docs(tutorial): replace JsTD with Testacular + drop snapshots

JsTD references have been replaced with Testacular stuff.

snapshots are PITA to maintain so I'm dropping them, everyone loves the Git
version anyway.
This commit is contained in:
Igor Minar 2012-10-18 02:33:45 -07:00
parent c4573c04aa
commit 6ff2685668
14 changed files with 73 additions and 192 deletions

View file

@ -47,20 +47,23 @@ really digging into it. If you're looking for a shorter introduction to AngularJ
# Working with the code # Working with the code
You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
environment. Options for working with the tutorial are to use the Git versioning system for source environment. The tutorial relies on the use of Git versioning system for source code management.
code management or to use scripts that copy snapshots of project files into your workspace You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
(`sandbox`) directory. Select one of the tabs below and follow the instructions for setting up your and follow the instructions for setting up your computer.
computer for your preferred option.
<div class="tabbable" show="true"> <div class="tabbable" show="true">
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux"> <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
<ol> <ol>
<li><p>Verify that you have <a href="http://java.com/">Java</a> installed by running the <li><p>You will need Node.js and Testacular to run unit tests, so please verify that you have
following command in a terminal window:</p> <a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
<pre>java -version</pre> and that the <code>node</code> executable is on your <code>PATH</code> by running the following
<p>You will need Java to run unit tests.</p></li> command in a terminal window:</p>
<li><p>Download Git from the <a href="http://git-scm.com/download">Git</a> site.</p> <pre>node --version</pre>
<p>You can build Git from source or use the pre-compiled package.</p></li> <p>Additionally install <a href="http://vojtajina.github.com/testacular">Testacular</a> if you
don't have it already:</p>
<pre>npm install -g testacular</pre>
<li><p>You'll also need Git, which you can get from
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
<li><p>Clone the angular-phonecat repository located at <a <li><p>Clone the angular-phonecat repository located at <a
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p> href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
<pre>git clone git://github.com/angular/angular-phonecat.git</pre> <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
@ -71,77 +74,41 @@ directory.</p></li>
<p>The tutorial instructions assume you are running all commands from the angular-phonecat <p>The tutorial instructions assume you are running all commands from the angular-phonecat
directory.</p></li> directory.</p></li>
<li><p>You will need an http server running on your system. Mac and Linux machines typically <li><p>You will need an http server running on your system. Mac and Linux machines typically
have Apache pre-installed, but If you don't already have one installed, you can <a have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
href="http://nodejs.org/#download">install node.js</a>. Use <code>node</code> to run to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
<code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
</ol> </ol>
</div> </div>
<div class="tab-pane well" id="git-win" title="Git on Windows"> <div class="tab-pane well" id="git-win" title="Git on Windows">
<ol> <ol>
<li><p>You will need Java to run unit tests, so run the following command to verify that you <li><p>You will need Node.js and Testacular to run unit tests, so please verify that you have
have <a href="http://java.com/">Java</a> installed and that the <code>java</code> executable is on <a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
your <code>PATH</code>.</p> and that the <code>node</code> executable is on your <code>PATH</code> by running the following
<pre>java -version</pre> command in a terminal window:</p>
<p></p></li> <pre>node --version</pre>
<li><p>Install msysGit from <a href="http://git-scm.com/download">the Git</a> site.</p></li> <p>Additionally install <a href="http://vojtajina.github.com/testacular">Testacular</a> if you
<li><p>Open msysGit bash and clone the angular-phonecat repository located at <a don't have it already:</p>
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p> <pre>npm install -g testacular</pre>
</li>
<li><p>You'll also need Git, which you can get from
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
<li><p>Clone the angular-phonecat repository located at <a
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
<pre>git clone git://github.com/angular/angular-phonecat.git</pre> <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
<p>This command creates the angular-phonecat directory in your current directory.</p></li> <p>This command creates the angular-phonecat directory in your current directory.</p></li>
<li><p>Change your current directory to angular-phonecat.</p> <li><p>Change your current directory to angular-phonecat.</p>
<pre>cd angular-phonecat</pre> <pre>cd angular-phonecat</pre>
<p>The tutorial instructions assume you are running all commands from the angular-phonecat <p>The tutorial instructions assume you are running all commands from the angular-phonecat
directory.</p> directory.</p>
<p>You should run all <code>git</code> commands from msysGit bash.</p> <p>You should run all <code>git</code> commands from Git bash.</p>
<p>Other commands like <code>test-server.bat</code> or <code>test.bat</code> should be <p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
executed from the Windows command line.</li> executed from the Windows command line.</li>
<li><p>You need an http server running on your system, but if you don't already have one <li><p>You need an http server running on your system, but if you don't already have one
already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that already installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple
<code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run bundled http server.</p></li>
<code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
</ol> </ol>
</div> </div>
<div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux">
<ol>
<li><p>You need Java to run unit tests, so verify that you have <a
href="http://java.com/">Java</a> installed by running the following command in a terminal
window:</p>
<pre>java -version</pre>
<li><p>Download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a>
containing all of the files and unzip them into the [tutorial-dir] directory</p>.</li>
<li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
<pre>cd [tutorial-dir]/sandbox</pre>
<p>The tutorial instructions assume you are running all commands from your
<code>sandbox</code> directory.</p></li>
<li><p>You need an http server running on your system and Mac and Linux machines typically
have Apache pre-installed. If you don't have an http server installed, you can <a
href="http://nodejs.org/#download">install node.js</a> and use it to run
<code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
</ol>
</div>
<div class="tab-pane well" id="ss-win" title="Snapshots on Windows">
<ol>
<li><p>Verify that you have <a href="http://java.com/">Java</a> installed and that the
<code>java</code> executable is on your <code>PATH</code> by running the following command in the
Windows command line:</p>
<pre>java -version</pre>
<p>You need Java to run unit tests, so download the <a
href="http://code.angularjs.org/angular-phonecat/">zip archive</a> that contains all of the files
and unzip the files into the [tutorial-dir] directory</p></li>
<li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
<pre>cd [tutorial-dir]/sandbox</pre>
<p>The tutorial instructions assume you are running all commands from this directory.</p></li>
<li><p>You need an http server running on your system, but if you don't already have one
already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that
<code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run
<code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
</ol>
</div>
</divs>
The last thing to do is to make sure your computer has a web browser and a good text editor The last thing to do is to make sure your computer has a web browser and a good text editor
installed. Now, let's get some cool stuff done! installed. Now, let's get some cool stuff done!

View file

@ -46,7 +46,7 @@ directory.</li>
<div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin"> <div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin">
<ol> <ol>
<li><p>Open msysGit bash and run this command (in angular-phonecat directory):</p> <li><p>Open Git bash and run this command (in angular-phonecat directory):</p>
<pre>git checkout -f step-0</pre> <pre>git checkout -f step-0</pre>
<p>This resets your workspace to step 0 of the tutorial app.</p> <p>This resets your workspace to step 0 of the tutorial app.</p>
<p>You must repeat this for every future step in the tutorial and change the number to <p>You must repeat this for every future step in the tutorial and change the number to
@ -74,70 +74,6 @@ directory.</li>
</li> </li>
</ol> </ol>
</div> </div>
<div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux" value="snapshotUnix">
<ol>
<li><p>In the angular-phonecat directory, run this command:</p>
<pre>./goto_step.sh 0</pre>
<p>This resets your workspace to step 0 of the tutorial app.</p>
<p>You must repeat this for every future step in the tutorial and change the number to
the number of the step you are on. This will cause any changes you made within
your working directory to be lost.</p></li>
<li>To see the app running in a browser, do one of the following:
<ul>
<li><b>For node.js users:</b>
<ol>
<li>In a <i>separate</i> terminal tab or window, run
<code>./scripts/web-server.js</code> to start the web server.</li>
<li>Open a browser window for the app and navigate to <a
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
</ol>
</li>
<li><b>For other http servers:</b>
<ol>
<li>Configure the server to serve the files in the angular-phonecat
<code>sandbox</code> directory.</li>
<li>Navigate in your browser to
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
</ol>
</li>
</ul>
</li>
</ol>
</div>
<div class="tab-pane well" id="ss-win" title="Snapshots on Windows" value="snapshotWin">
<ol>
<li><p>Open windows command line and run this command (in the angular-phonecat directory):</p>
<pre>goto_step.bat 0</pre>
<p>This resets your workspace to step 0 of the tutorial app.</p>
<p>You must repeat this for every future step in the tutorial and change the number to
the number of the step you are on. This will cause any changes you made within
your working directory to be lost.</p></li>
<li>To see the app running in a browser, do one of the following:
<ul>
<li><b>For node.js users:</b>
<ol>
<li>In a <i>separate</i> terminal tab or window, run <code>node
scripts\web-server.js</code> to start the web server.</li>
<li>Open a browser window for the app and navigate to <a
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
</ol>
</li>
<li><b>For other http servers:</b>
<ol>
<li>Configure the server to serve the files in the angular-phonecat
<code>sandbox</code> directory.</li>
<li>Navigate in your browser to
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
</ol>
</li>
</ul>
</li>
</ol>
</div>
</div> </div>

View file

@ -146,31 +146,25 @@ http://pivotal.github.com/jasmine/ Jasmine home page} and on the {@link
https://github.com/pivotal/jasmine/wiki Jasmine wiki}. https://github.com/pivotal/jasmine/wiki Jasmine wiki}.
The angular-seed project is pre-configured to run all unit tests using {@link The angular-seed project is pre-configured to run all unit tests using {@link
http://code.google.com/p/js-test-driver/ JsTestDriver}. To run the test, do the following: http://vojtajina.github.com/testacular/ Testacular}. To run the test, do the following:
1. In a _separate_ terminal window or tab, go to the `angular-phonecat` directory and run 1. In a _separate_ terminal window or tab, go to the `angular-phonecat` directory and run
`./scripts/test-server.sh` to start the test web server. `./scripts/test.sh` to start the Testacular server.
2. Open a new browser window and navigate to {@link http://localhost:9876}. 2. Testacular will start a new instance of Chrome browser automatically. Just ignore it and let it run in
the background. Testacular will use this browser for test execution.
3. Choose "Capture this browser in strict mode". 3. You should see the following or similar output in the terminal:
At this point, you can leave this window open and forget about it. JsTestDriver will use it to info: Testacular server started at http://localhost:9876/
execute the tests and report the results in the terminal. info (launcher): Starting browser "Chrome"
info (Chrome 22.0): Connected on socket id tPUm9DXcLHtZTKbAEO-n
4. Execute the test by running `./scripts/test.sh` Chrome 22.0: Executed 1 of 1 SUCCESS (0.093 secs / 0.004 secs)
You should see the following or similar output:
Chrome: Runner reset.
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
Yay! The test passed! Or not... Yay! The test passed! Or not...
Note: If you see errors after you run the test, close the browser window and go back to the 4. To rerun the tests, just change any of the source or test files. Testacular will notice the change
terminal and kill the script, then repeat the procedure above. and will rerun the tests for you. Now isn't that sweet?
# Experiments # Experiments
@ -198,8 +192,7 @@ execute the tests and report the results in the terminal.
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr> <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
</table> </table>
* Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`, and rerun the * Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`.
`./scripts/test.sh` script.
# Summary # Summary

View file

@ -122,6 +122,11 @@ To run the end-to-end test, open one of the following in a new browser tab:
`http://localhost:[port-number]/[context-path]/test/e2e/runner.html` `http://localhost:[port-number]/[context-path]/test/e2e/runner.html`
* casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html} * casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html}
Previously we've seen how Testacular can be used to execute unit tests. Well, it can also run the
end-to-end tests! Use `./scripts/e2e-test.sh` script for that. End-to-end tests are slow, so unlike
with unit tests, Testacular will exit after the test run and will not automatically rerun the test
suite on every file change. To rerun the test suite, execute the `e2e-test.sh` script again.
This test verifies that the search box and the repeater are correctly wired together. Notice how This test verifies that the search box and the repeater are correctly wired together. Notice how
easy it is to write end-to-end tests in Angular. Although this example is for a simple test, it easy it is to write end-to-end tests in Angular. Although this example is for a simple test, it
really is that easy to set up any functional, readable, end-to-end test. really is that easy to set up any functional, readable, end-to-end test.

View file

@ -134,13 +134,9 @@ The unit test now verifies that the default ordering property is set.
We used Jasmine's API to extract the controller construction into a `beforeEach` block, which is We used Jasmine's API to extract the controller construction into a `beforeEach` block, which is
shared by all tests in the parent `describe` block. shared by all tests in the parent `describe` block.
To run the unit tests, once again execute the `./scripts/test.sh` script and you should see the You should now see the following output in the Testacular tab:
following output.
Chrome: Runner reset. Chrome 22.0: Executed 2 of 2 SUCCESS (0.021 secs / 0.001 secs)
..
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
Let's turn our attention to the end-to-end test. Let's turn our attention to the end-to-end test.
@ -168,8 +164,8 @@ __`test/e2e/scenarios.js`:__
The end-to-end test verifies that the ordering mechanism of the select box is working correctly. The end-to-end test verifies that the ordering mechanism of the select box is working correctly.
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
can see them running on {@link `runner.html` to see the tests run, or you can see them running on {@link
http://angular.github.com/angular-phonecat/step-4/test/e2e/runner.html http://angular.github.com/angular-phonecat/step-4/test/e2e/runner.html
Angular's server}. Angular's server}.

View file

@ -208,13 +208,10 @@ Finally, we verify that the default value of `orderProp` is set correctly:
}); });
</pre> </pre>
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following You should now see the following output in the Testacular tab:
output.
Chrome 22.0: Executed 2 of 2 SUCCESS (0.028 secs / 0.007 secs)
Chrome: Runner reset.
..
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
# Experiments # Experiments

View file

@ -84,8 +84,8 @@ __`test/e2e/scenarios.js`__:
We added a new end-to-end test to verify that the app is generating correct links to the phone We added a new end-to-end test to verify that the app is generating correct links to the phone
views that we will implement in the upcoming steps. views that we will implement in the upcoming steps.
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
can see them running on {@link runner to see the tests run, or you can see them running on {@link
http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html
Angular's server}. Angular's server}.

View file

@ -232,8 +232,8 @@ to various URLs and verify that the correct view was rendered.
</pre> </pre>
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
can see them running on {@link runner to see the tests run, or you can see them running on {@link
http://angular.github.com/angular-phonecat/step-7/test/e2e/runner.html http://angular.github.com/angular-phonecat/step-7/test/e2e/runner.html
Angular's server}. Angular's server}.

View file

@ -147,13 +147,9 @@ __`test/unit/controllersSpec.js`:__
... ...
</pre> </pre>
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following You should now see the following output in the Testacular tab:
output.
Chrome: Runner reset. Chrome 22.0: Executed 3 of 3 SUCCESS (0.039 secs / 0.012 secs)
...
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that the We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that the
@ -177,11 +173,12 @@ __`test/e2e/scenarios.js`:__
</pre> </pre>
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
can see them running on {@link runner to see the tests run, or you can see them running on {@link
http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
Angular's server}. Angular's server}.
# Experiments # Experiments
* Using the {@link guide/dev_guide.e2e-testing Angular's end-to-end test runner API}, write a test * Using the {@link guide/dev_guide.e2e-testing Angular's end-to-end test runner API}, write a test

View file

@ -110,13 +110,9 @@ describe('filter', function() {
Note that you need to configure our test injector with the `phonecatFilters` module before any of Note that you need to configure our test injector with the `phonecatFilters` module before any of
our filter tests execute. our filter tests execute.
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following You should now see the following output in the Testacular tab:
output.
Chrome: Runner reset. Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)
....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
# Experiments # Experiments

View file

@ -102,8 +102,8 @@ __`test/e2e/scenarios.js`:__
}); });
</pre> </pre>
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
can see them running on {@link runner to see the tests run, or you can see them running on {@link
http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
Angular's server}. Angular's server}.

View file

@ -214,13 +214,9 @@ describe('PhoneCat controllers', function() {
}); });
</pre> </pre>
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following You should now see the following output in the Testacular tab:
output.
Chrome: Runner reset. Chrome 22.0: Executed 4 of 4 SUCCESS (0.038 secs / 0.01 secs)
....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
# Summary # Summary

View file

@ -3,7 +3,7 @@
@description @description
Our application is now complete. Feel free to experiment with the code further, and jump back to Our application is now complete. Feel free to experiment with the code further, and jump back to
previous steps using the `git checkout` or `goto_step.sh` commands. previous steps using the `git checkout` commandx.
For more details and examples of the Angular concepts we touched on in this tutorial, see the For more details and examples of the Angular concepts we touched on in this tutorial, see the
{@link guide/ Developer Guide}. {@link guide/ Developer Guide}.

View file

@ -111,8 +111,6 @@ docsApp.directive.docTutorialReset = function() {
'<div class="tabbable" ng-show="show" ng-model="$cookies.platformPreference">\n' + '<div class="tabbable" ng-show="show" ng-model="$cookies.platformPreference">\n' +
tab('Git on Mac/Linux', 'git checkout -f step-' + step, 'gitUnix', step) + tab('Git on Mac/Linux', 'git checkout -f step-' + step, 'gitUnix', step) +
tab('Git on Windows', 'git checkout -f step-' + step, 'gitWin', step) + tab('Git on Windows', 'git checkout -f step-' + step, 'gitWin', step) +
tab('Snapshots on Mac/Linux', './goto_step.sh ' + step, 'snapshotUnix', step) +
tab('Snapshots on on Windows', './goto_step.bat ' + step, 'snapshotWin', step) +
'</div>\n'); '</div>\n');
} }
}; };