Skip to content

Commit ca96ec3

Browse files
IgorMinarIgorMinar
committed
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.
1 parent 4f59022 commit ca96ec3

14 files changed

Lines changed: 73 additions & 192 deletions

File tree

‎docs/content/tutorial/index.ngdoc‎

Lines changed: 32 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,23 @@ really digging into it. If you're looking for a shorter introduction to AngularJ
4747
# Working with the code
4848

4949
You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
50-
environment. Options for working with the tutorial are to use the Git versioning system for source
51-
code management or to use scripts that copy snapshots of project files into your workspace
52-
(`sandbox`) directory. Select one of the tabs below and follow the instructions for setting up your
53-
computer for your preferred option.
50+
environment. The tutorial relies on the use of Git versioning system for source code management.
51+
You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
52+
and follow the instructions for setting up your computer.
5453

5554
<div class="tabbable" show="true">
5655
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
5756
<ol>
58-
<li><p>Verify that you have <a href="http://java.com/">Java</a> installed by running the
59-
following command in a terminal window:</p>
60-
<pre>java -version</pre>
61-
<p>You will need Java to run unit tests.</p></li>
62-
<li><p>Download Git from the <a href="http://git-scm.com/download">Git</a> site.</p>
63-
<p>You can build Git from source or use the pre-compiled package.</p></li>
57+
<li><p>You will need Node.js and Testacular to run unit tests, so please verify that you have
58+
<a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
59+
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
60+
command in a terminal window:</p>
61+
<pre>node --version</pre>
62+
<p>Additionally install <a href="http://vojtajina.github.com/testacular">Testacular</a> if you
63+
don't have it already:</p>
64+
<pre>npm install -g testacular</pre>
65+
<li><p>You'll also need Git, which you can get from
66+
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
6467
<li><p>Clone the angular-phonecat repository located at <a
6568
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
6669
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
@@ -71,76 +74,40 @@ directory.</p></li>
7174
<p>The tutorial instructions assume you are running all commands from the angular-phonecat
7275
directory.</p></li>
7376
<li><p>You will need an http server running on your system. Mac and Linux machines typically
74-
have Apache pre-installed, but If you don't already have one installed, you can <a
75-
href="http://nodejs.org/#download">install node.js</a>. Use <code>node</code> to run
76-
<code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
77+
have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
78+
to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
7779
</ol>
7880
</div>
7981

8082
<div class="tab-pane well" id="git-win" title="Git on Windows">
8183
<ol>
82-
<li><p>You will need Java to run unit tests, so run the following command to verify that you
83-
have <a href="http://java.com/">Java</a> installed and that the <code>java</code> executable is on
84-
your <code>PATH</code>.</p>
85-
<pre>java -version</pre>
86-
<p></p></li>
87-
<li><p>Install msysGit from <a href="http://git-scm.com/download">the Git</a> site.</p></li>
88-
<li><p>Open msysGit bash and clone the angular-phonecat repository located at <a
89-
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
84+
<li><p>You will need Node.js and Testacular to run unit tests, so please verify that you have
85+
<a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
86+
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
87+
command in a terminal window:</p>
88+
<pre>node --version</pre>
89+
<p>Additionally install <a href="http://vojtajina.github.com/testacular">Testacular</a> if you
90+
don't have it already:</p>
91+
<pre>npm install -g testacular</pre>
92+
</li>
93+
<li><p>You'll also need Git, which you can get from
94+
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
95+
<li><p>Clone the angular-phonecat repository located at <a
96+
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
9097
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
9198
<p>This command creates the angular-phonecat directory in your current directory.</p></li>
9299
<li><p>Change your current directory to angular-phonecat.</p>
93100
<pre>cd angular-phonecat</pre>
94101
<p>The tutorial instructions assume you are running all commands from the angular-phonecat
95102
directory.</p>
96-
<p>You should run all <code>git</code> commands from msysGit bash.</p>
97-
<p>Other commands like <code>test-server.bat</code> or <code>test.bat</code> should be
103+
<p>You should run all <code>git</code> commands from Git bash.</p>
104+
<p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
98105
executed from the Windows command line.</li>
99106
<li><p>You need an http server running on your system, but if you don't already have one
100-
already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that
101-
<code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run
102-
<code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
103-
</ol>
104-
</div>
105-
106-
<div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux">
107-
<ol>
108-
<li><p>You need Java to run unit tests, so verify that you have <a
109-
href="http://java.com/">Java</a> installed by running the following command in a terminal
110-
window:</p>
111-
<pre>java -version</pre>
112-
<li><p>Download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a>
113-
containing all of the files and unzip them into the [tutorial-dir] directory</p>.</li>
114-
<li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
115-
<pre>cd [tutorial-dir]/sandbox</pre>
116-
<p>The tutorial instructions assume you are running all commands from your
117-
<code>sandbox</code> directory.</p></li>
118-
<li><p>You need an http server running on your system and Mac and Linux machines typically
119-
have Apache pre-installed. If you don't have an http server installed, you can <a
120-
href="http://nodejs.org/#download">install node.js</a> and use it to run
121-
<code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
122-
</ol>
123-
</div>
124-
125-
<div class="tab-pane well" id="ss-win" title="Snapshots on Windows">
126-
<ol>
127-
<li><p>Verify that you have <a href="http://java.com/">Java</a> installed and that the
128-
<code>java</code> executable is on your <code>PATH</code> by running the following command in the
129-
Windows command line:</p>
130-
<pre>java -version</pre>
131-
<p>You need Java to run unit tests, so download the <a
132-
href="http://code.angularjs.org/angular-phonecat/">zip archive</a> that contains all of the files
133-
and unzip the files into the [tutorial-dir] directory</p></li>
134-
<li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
135-
<pre>cd [tutorial-dir]/sandbox</pre>
136-
<p>The tutorial instructions assume you are running all commands from this directory.</p></li>
137-
<li><p>You need an http server running on your system, but if you don't already have one
138-
already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that
139-
<code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run
140-
<code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
107+
already installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple
108+
bundled http server.</p></li>
141109
</ol>
142110
</div>
143-
</divs>
144111

145112
The last thing to do is to make sure your computer has a web browser and a good text editor
146113
installed. Now, let's get some cool stuff done!

‎docs/content/tutorial/step_00.ngdoc‎

Lines changed: 1 addition & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ directory.</li>
4646

4747
<div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin">
4848
<ol>
49-
<li><p>Open msysGit bash and run this command (in angular-phonecat directory):</p>
49+
<li><p>Open Git bash and run this command (in angular-phonecat directory):</p>
5050
<pre>git checkout -f step-0</pre>
5151
<p>This resets your workspace to step 0 of the tutorial app.</p>
5252
<p>You must repeat this for every future step in the tutorial and change the number to
@@ -74,70 +74,6 @@ directory.</li>
7474
</li>
7575
</ol>
7676
</div>
77-
78-
79-
<div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux" value="snapshotUnix">
80-
<ol>
81-
<li><p>In the angular-phonecat directory, run this command:</p>
82-
<pre>./goto_step.sh 0</pre>
83-
<p>This resets your workspace to step 0 of the tutorial app.</p>
84-
<p>You must repeat this for every future step in the tutorial and change the number to
85-
the number of the step you are on. This will cause any changes you made within
86-
your working directory to be lost.</p></li>
87-
<li>To see the app running in a browser, do one of the following:
88-
<ul>
89-
<li><b>For node.js users:</b>
90-
<ol>
91-
<li>In a <i>separate</i> terminal tab or window, run
92-
<code>./scripts/web-server.js</code> to start the web server.</li>
93-
<li>Open a browser window for the app and navigate to <a
94-
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
95-
</ol>
96-
</li>
97-
<li><b>For other http servers:</b>
98-
<ol>
99-
<li>Configure the server to serve the files in the angular-phonecat
100-
<code>sandbox</code> directory.</li>
101-
<li>Navigate in your browser to
102-
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
103-
</ol>
104-
</li>
105-
</ul>
106-
</li>
107-
</ol>
108-
</div>
109-
110-
111-
<div class="tab-pane well" id="ss-win" title="Snapshots on Windows" value="snapshotWin">
112-
<ol>
113-
<li><p>Open windows command line and run this command (in the angular-phonecat directory):</p>
114-
<pre>goto_step.bat 0</pre>
115-
<p>This resets your workspace to step 0 of the tutorial app.</p>
116-
<p>You must repeat this for every future step in the tutorial and change the number to
117-
the number of the step you are on. This will cause any changes you made within
118-
your working directory to be lost.</p></li>
119-
<li>To see the app running in a browser, do one of the following:
120-
<ul>
121-
<li><b>For node.js users:</b>
122-
<ol>
123-
<li>In a <i>separate</i> terminal tab or window, run <code>node
124-
scripts\web-server.js</code> to start the web server.</li>
125-
<li>Open a browser window for the app and navigate to <a
126-
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
127-
</ol>
128-
</li>
129-
<li><b>For other http servers:</b>
130-
<ol>
131-
<li>Configure the server to serve the files in the angular-phonecat
132-
<code>sandbox</code> directory.</li>
133-
<li>Navigate in your browser to
134-
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
135-
</ol>
136-
</li>
137-
</ul>
138-
</li>
139-
</ol>
140-
</div>
14177
</div>
14278

14379

‎docs/content/tutorial/step_02.ngdoc‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -146,31 +146,25 @@ http://pivotal.github.com/jasmine/ Jasmine home page} and on the {@link
146146
https://github.com/pivotal/jasmine/wiki Jasmine wiki}.
147147

148148
The angular-seed project is pre-configured to run all unit tests using {@link
149-
http://code.google.com/p/js-test-driver/ JsTestDriver}. To run the test, do the following:
149+
http://vojtajina.github.com/testacular/ Testacular}. To run the test, do the following:
150150

151151
1. In a _separate_ terminal window or tab, go to the `angular-phonecat` directory and run
152-
`./scripts/test-server.sh` to start the test web server.
152+
`./scripts/test.sh` to start the Testacular server.
153153

154-
2. Open a new browser window and navigate to {@link http://localhost:9876}.
154+
2. Testacular will start a new instance of Chrome browser automatically. Just ignore it and let it run in
155+
the background. Testacular will use this browser for test execution.
155156

156-
3. Choose "Capture this browser in strict mode".
157+
3. You should see the following or similar output in the terminal:
157158

158-
At this point, you can leave this window open and forget about it. JsTestDriver will use it to
159-
execute the tests and report the results in the terminal.
160-
161-
4. Execute the test by running `./scripts/test.sh`
162-
163-
You should see the following or similar output:
164-
165-
Chrome: Runner reset.
166-
.
167-
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
168-
Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
159+
info: Testacular server started at http://localhost:9876/
160+
info (launcher): Starting browser "Chrome"
161+
info (Chrome 22.0): Connected on socket id tPUm9DXcLHtZTKbAEO-n
162+
Chrome 22.0: Executed 1 of 1 SUCCESS (0.093 secs / 0.004 secs)
169163

170164
Yay! The test passed! Or not...
171165

172-
Note: If you see errors after you run the test, close the browser window and go back to the
173-
terminal and kill the script, then repeat the procedure above.
166+
4. To rerun the tests, just change any of the source or test files. Testacular will notice the change
167+
and will rerun the tests for you. Now isn't that sweet?
174168

175169
# Experiments
176170

@@ -198,8 +192,7 @@ execute the tests and report the results in the terminal.
198192
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
199193
</table>
200194

201-
* Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`, and rerun the
202-
`./scripts/test.sh` script.
195+
* Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`.
203196

204197

205198
# Summary

‎docs/content/tutorial/step_03.ngdoc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,11 @@ To run the end-to-end test, open one of the following in a new browser tab:
122122
`http://localhost:[port-number]/[context-path]/test/e2e/runner.html`
123123
* casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html}
124124

125+
Previously we've seen how Testacular can be used to execute unit tests. Well, it can also run the
126+
end-to-end tests! Use `./scripts/e2e-test.sh` script for that. End-to-end tests are slow, so unlike
127+
with unit tests, Testacular will exit after the test run and will not automatically rerun the test
128+
suite on every file change. To rerun the test suite, execute the `e2e-test.sh` script again.
129+
125130
This test verifies that the search box and the repeater are correctly wired together. Notice how
126131
easy it is to write end-to-end tests in Angular. Although this example is for a simple test, it
127132
really is that easy to set up any functional, readable, end-to-end test.

‎docs/content/tutorial/step_04.ngdoc‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,9 @@ The unit test now verifies that the default ordering property is set.
134134
We used Jasmine's API to extract the controller construction into a `beforeEach` block, which is
135135
shared by all tests in the parent `describe` block.
136136

137-
To run the unit tests, once again execute the `./scripts/test.sh` script and you should see the
138-
following output.
137+
You should now see the following output in the Testacular tab:
139138

140-
Chrome: Runner reset.
141-
..
142-
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
143-
Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
139+
Chrome 22.0: Executed 2 of 2 SUCCESS (0.021 secs / 0.001 secs)
144140

145141

146142
Let's turn our attention to the end-to-end test.
@@ -168,8 +164,8 @@ __`test/e2e/scenarios.js`:__
168164

169165
The end-to-end test verifies that the ordering mechanism of the select box is working correctly.
170166

171-
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
172-
can see them running on {@link
167+
You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
168+
`runner.html` to see the tests run, or you can see them running on {@link
173169
http://angular.github.com/angular-phonecat/step-4/test/e2e/runner.html
174170
Angular's server}.
175171

‎docs/content/tutorial/step_05.ngdoc‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -208,13 +208,10 @@ Finally, we verify that the default value of `orderProp` is set correctly:
208208
});
209209
</pre>
210210

211-
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
212-
output.
211+
You should now see the following output in the Testacular tab:
212+
213+
Chrome 22.0: Executed 2 of 2 SUCCESS (0.028 secs / 0.007 secs)
213214

214-
Chrome: Runner reset.
215-
..
216-
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
217-
Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
218215

219216

220217
# Experiments

‎docs/content/tutorial/step_06.ngdoc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,8 @@ __`test/e2e/scenarios.js`__:
8484
We added a new end-to-end test to verify that the app is generating correct links to the phone
8585
views that we will implement in the upcoming steps.
8686

87-
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
88-
can see them running on {@link
87+
You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
88+
runner to see the tests run, or you can see them running on {@link
8989
http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html
9090
Angular's server}.
9191

‎docs/content/tutorial/step_07.ngdoc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -232,8 +232,8 @@ to various URLs and verify that the correct view was rendered.
232232
</pre>
233233

234234

235-
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
236-
can see them running on {@link
235+
You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
236+
runner to see the tests run, or you can see them running on {@link
237237
http://angular.github.com/angular-phonecat/step-7/test/e2e/runner.html
238238
Angular's server}.
239239

‎docs/content/tutorial/step_08.ngdoc‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -147,13 +147,9 @@ __`test/unit/controllersSpec.js`:__
147147
...
148148
</pre>
149149

150-
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
151-
output.
150+
You should now see the following output in the Testacular tab:
152151

153-
Chrome: Runner reset.
154-
...
155-
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
156-
Chrome 19.0.1084.36 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
152+
Chrome 22.0: Executed 3 of 3 SUCCESS (0.039 secs / 0.012 secs)
157153

158154

159155
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`:__
177173
</pre>
178174

179175

180-
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
181-
can see them running on {@link
176+
You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
177+
runner to see the tests run, or you can see them running on {@link
182178
http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
183179
Angular's server}.
184180

181+
185182
# Experiments
186183

187184
* Using the {@link guide/dev_guide.e2e-testing Angular's end-to-end test runner API}, write a test

‎docs/content/tutorial/step_09.ngdoc‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,9 @@ describe('filter', function() {
110110
Note that you need to configure our test injector with the `phonecatFilters` module before any of
111111
our filter tests execute.
112112

113-
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
114-
output.
113+
You should now see the following output in the Testacular tab:
115114

116-
Chrome: Runner reset.
117-
....
118-
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
119-
Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
115+
Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)
120116

121117

122118
# Experiments

0 commit comments

Comments
 (0)