From ca96ec32f996b1130f06ad070ee29c5810c40e57 Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Thu, 18 Oct 2012 02:33:45 -0700 Subject: 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. --- docs/content/tutorial/index.ngdoc | 97 ++++++++++++------------------------- docs/content/tutorial/step_00.ngdoc | 66 +------------------------ docs/content/tutorial/step_02.ngdoc | 31 +++++------- docs/content/tutorial/step_03.ngdoc | 5 ++ docs/content/tutorial/step_04.ngdoc | 12 ++--- docs/content/tutorial/step_05.ngdoc | 9 ++-- docs/content/tutorial/step_06.ngdoc | 4 +- docs/content/tutorial/step_07.ngdoc | 4 +- docs/content/tutorial/step_08.ngdoc | 13 ++--- docs/content/tutorial/step_09.ngdoc | 8 +-- docs/content/tutorial/step_10.ngdoc | 4 +- docs/content/tutorial/step_11.ngdoc | 8 +-- docs/content/tutorial/the_end.ngdoc | 2 +- 13 files changed, 73 insertions(+), 190 deletions(-) (limited to 'docs/content/tutorial') diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index bc5d4180..2d6cf43f 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -47,20 +47,23 @@ really digging into it. If you're looking for a shorter introduction to AngularJ # Working with the code 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 -code management or to use scripts that copy snapshots of project files into your workspace -(`sandbox`) directory. Select one of the tabs below and follow the instructions for setting up your -computer for your preferred option. +environment. The tutorial relies on the use of Git versioning system for source code management. +You don't need to know anything about Git to follow the tutorial. Select one of the tabs below +and follow the instructions for setting up your computer.
    -

  1. Verify that you have Java installed by running the -following command in a terminal window:

    - 
    java -version
    -

    You will need Java to run unit tests.

    2. -

  2. Download Git from the Git site.

    -

    You can build Git from source or use the pre-compiled package.

    3. +

  3. You will need Node.js and Testacular to run unit tests, so please verify that you have + Node.js v0.8 or better installed + and that the node executable is on your PATH by running the following + command in a terminal window:

    + 
    node --version
    +

    Additionally install Testacular if you + don't have it already:

    + 
    npm install -g testacular
    +

  4. You'll also need Git, which you can get from + the Git site.

  5. Clone the angular-phonecat repository located at Github by running the following command:

    git clone git://github.com/angular/angular-phonecat.git
    @@ -71,76 +74,40 @@ directory.

    6. The tutorial instructions assume you are running all commands from the angular-phonecat directory.

  6. 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 install node.js. Use node to run -scripts/web-server.js, a simple bundled http server.

    7. +have Apache pre-installed, but If you don't already have one installed, you can use node +to run scripts/web-server.js, a simple bundled http server.

    -

  1. You will need Java to run unit tests, so run the following command to verify that you -have Java installed and that the java executable is on -your PATH.

    - 
    java -version
    -

    2. -

  2. Install msysGit from the Git site.

    3. -

  3. Open msysGit bash and clone the angular-phonecat repository located at Github by running the following command:

    +

  4. You will need Node.js and Testacular to run unit tests, so please verify that you have + Node.js v0.8 or better installed + and that the node executable is on your PATH by running the following + command in a terminal window:

    + 
    node --version
    +

    Additionally install Testacular if you + don't have it already:

    + 
    npm install -g testacular
    +
    5. +

  5. You'll also need Git, which you can get from + the Git site.

    6. +

  6. Clone the angular-phonecat repository located at Github by running the following command:

    git clone git://github.com/angular/angular-phonecat.git

    This command creates the angular-phonecat directory in your current directory.

  7. Change your current directory to angular-phonecat.

    cd angular-phonecat

    The tutorial instructions assume you are running all commands from the angular-phonecat directory.

    -

    You should run all git commands from msysGit bash.

    -

    Other commands like test-server.bat or test.bat should be +

    You should run all git commands from Git bash.

    +

    Other commands like test.bat or e2e-test.bat should be executed from the Windows command line.

  8. You need an http server running on your system, but if you don't already have one -already installed, you can install node.js. Make sure that -nodejs\bin was added into your PATH. Use node to run -scripts\web-server.js, a simple bundled http server.

    9. -
-
- -
-
    -

  1. You need Java to run unit tests, so verify that you have Java installed by running the following command in a terminal -window:

    - 
    java -version
    -

  2. Download the zip archive -containing all of the files and unzip them into the [tutorial-dir] directory

    .
    3. -

  3. Change your current directory to [tutorial-dir]/sandbox, as follows:

    - 
    cd [tutorial-dir]/sandbox
    -

    The tutorial instructions assume you are running all commands from your -sandbox directory.

    4. -

  4. 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 install node.js and use it to run -scripts/web-server.js, a simple bundled http server.

    5. -
-
- -
-
    -

  1. Verify that you have Java installed and that the -java executable is on your PATH by running the following command in the -Windows command line:

    - 
    java -version
    -

    You need Java to run unit tests, so download the zip archive that contains all of the files -and unzip the files into the [tutorial-dir] directory

    2. -

  2. Change your current directory to [tutorial-dir]/sandbox, as follows:

    - 
    cd [tutorial-dir]/sandbox
    -

    The tutorial instructions assume you are running all commands from this directory.

    3. -

  3. You need an http server running on your system, but if you don't already have one -already installed, you can install node.js. Make sure that -nodejs\bin was added into your PATH. Use node to run -scripts\web-server.js, a simple bundled http server.

    4. +already installed, you can use node to run scripts\web-server.js, a simple +bundled http server.

- 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! diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index 1e3c61a0..e151d9e2 100644 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -46,7 +46,7 @@ directory.
    -

  1. Open msysGit bash and run this command (in angular-phonecat directory):

    +

  2. Open Git bash and run this command (in angular-phonecat directory):

    git checkout -f step-0

    This resets your workspace to step 0 of the tutorial app.

    You must repeat this for every future step in the tutorial and change the number to @@ -74,70 +74,6 @@ directory.

- - -
-
    -

  1. In the angular-phonecat directory, run this command:

    - 
    ./goto_step.sh 0
    -

    This resets your workspace to step 0 of the tutorial app.

    -

    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.

    2. -
  2. To see the app running in a browser, do one of the following: -
      -
    • For node.js users: -
        -
      1. In a separate terminal tab or window, run -./scripts/web-server.js to start the web server.
        2. -
      2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
        3. -
      -
      • -
    • For other http servers: -
        -
      1. Configure the server to serve the files in the angular-phonecat -sandbox directory.
        2. -
      2. Navigate in your browser to -http://localhost:[port-number]/[context-path]/app/index.html.
        3. -
      -
      • -
    -
    3. -
-
- - -
-
    -

  1. Open windows command line and run this command (in the angular-phonecat directory):

    - 
    goto_step.bat 0
    -

    This resets your workspace to step 0 of the tutorial app.

    -

    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.

    2. -
  2. To see the app running in a browser, do one of the following: -
      -
    • For node.js users: -
        -
      1. In a separate terminal tab or window, run node -scripts\web-server.js to start the web server.
        2. -
      2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
        3. -
      -
      • -
    • For other http servers: -
        -
      1. Configure the server to serve the files in the angular-phonecat -sandbox directory.
        2. -
      2. Navigate in your browser to -http://localhost:[port-number]/[context-path]/app/index.html.
        3. -
      -
      • -
    -
    3. -
-
diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc index 2b431dbc..d874b8ba 100644 --- a/docs/content/tutorial/step_02.ngdoc +++ b/docs/content/tutorial/step_02.ngdoc @@ -146,31 +146,25 @@ http://pivotal.github.com/jasmine/ Jasmine home page} and on the {@link https://github.com/pivotal/jasmine/wiki Jasmine wiki}. 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 -`./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 -execute the tests and report the results in the terminal. - -4. Execute the test by running `./scripts/test.sh` - - 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) + info: Testacular server started at http://localhost:9876/ + info (launcher): Starting browser "Chrome" + info (Chrome 22.0): Connected on socket id tPUm9DXcLHtZTKbAEO-n + Chrome 22.0: Executed 1 of 1 SUCCESS (0.093 secs / 0.004 secs) 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 - terminal and kill the script, then repeat the procedure above. +4. To rerun the tests, just change any of the source or test files. Testacular will notice the change + and will rerun the tests for you. Now isn't that sweet? # Experiments @@ -198,8 +192,7 @@ execute the tests and report the results in the terminal. {{i+1}} -* Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`, and rerun the -`./scripts/test.sh` script. +* Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`. # Summary diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index 1dc5bbca..a5558608 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -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` * 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 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. diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc index be7df1f0..0a6a74e5 100644 --- a/docs/content/tutorial/step_04.ngdoc +++ b/docs/content/tutorial/step_04.ngdoc @@ -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 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 -following output. +You should now see the following output in the Testacular tab: - 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) + Chrome 22.0: Executed 2 of 2 SUCCESS (0.021 secs / 0.001 secs) 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. -You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you -can see them running on {@link +You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test +`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 Angular's server}. diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc index 543a5489..0c960722 100644 --- a/docs/content/tutorial/step_05.ngdoc +++ b/docs/content/tutorial/step_05.ngdoc @@ -208,13 +208,10 @@ Finally, we verify that the default value of `orderProp` is set correctly: }); -To run the unit tests, execute the `./scripts/test.sh` script and you should see the following -output. +You should now see the following output in the Testacular tab: + + 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 diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc index 550d71ea..a4ca18ed 100644 --- a/docs/content/tutorial/step_06.ngdoc +++ b/docs/content/tutorial/step_06.ngdoc @@ -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 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 -can see them running on {@link +You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test +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 Angular's server}. diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc index 3d24d205..dea62691 100644 --- a/docs/content/tutorial/step_07.ngdoc +++ b/docs/content/tutorial/step_07.ngdoc @@ -232,8 +232,8 @@ to various URLs and verify that the correct view was rendered. -You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you -can see them running on {@link +You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test +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 Angular's server}. diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc index 1316024f..160ba19f 100644 --- a/docs/content/tutorial/step_08.ngdoc +++ b/docs/content/tutorial/step_08.ngdoc @@ -147,13 +147,9 @@ __`test/unit/controllersSpec.js`:__ ... -To run the unit tests, execute the `./scripts/test.sh` script and you should see the following -output. +You should now see the following output in the Testacular tab: - Chrome: Runner reset. - ... - 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) + Chrome 22.0: Executed 3 of 3 SUCCESS (0.039 secs / 0.012 secs) 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`:__ -You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you -can see them running on {@link +You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test +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 Angular's server}. + # Experiments * Using the {@link guide/dev_guide.e2e-testing Angular's end-to-end test runner API}, write a test diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc index 09499fa8..dbc455c9 100644 --- a/docs/content/tutorial/step_09.ngdoc +++ b/docs/content/tutorial/step_09.ngdoc @@ -110,13 +110,9 @@ describe('filter', function() { Note that you need to configure our test injector with the `phonecatFilters` module before any of our filter tests execute. -To run the unit tests, execute the `./scripts/test.sh` script and you should see the following -output. +You should now see the following output in the Testacular tab: - Chrome: Runner reset. - .... - 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) + Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs) # Experiments diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc index 11571ca2..245d9510 100644 --- a/docs/content/tutorial/step_10.ngdoc +++ b/docs/content/tutorial/step_10.ngdoc @@ -102,8 +102,8 @@ __`test/e2e/scenarios.js`:__ }); -You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you -can see them running on {@link +You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test +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 Angular's server}. diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc index e34545b3..9ab28da3 100644 --- a/docs/content/tutorial/step_11.ngdoc +++ b/docs/content/tutorial/step_11.ngdoc @@ -214,13 +214,9 @@ describe('PhoneCat controllers', function() { }); -To run the unit tests, execute the `./scripts/test.sh` script and you should see the following -output. +You should now see the following output in the Testacular tab: - Chrome: Runner reset. - .... - 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) + Chrome 22.0: Executed 4 of 4 SUCCESS (0.038 secs / 0.01 secs) # Summary diff --git a/docs/content/tutorial/the_end.ngdoc b/docs/content/tutorial/the_end.ngdoc index 839a119c..a573d391 100644 --- a/docs/content/tutorial/the_end.ngdoc +++ b/docs/content/tutorial/the_end.ngdoc @@ -3,7 +3,7 @@ @description 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 {@link guide/ Developer Guide}. -- cgit v1.2.3