More gradual testing intro #1818

toddjordan · 2017-02-20T05:23:47Z

Addresses #1718
Fixes #1863

Still in need of some proof reading, and would like a couple of people to walk through this version of the tutorial, since its a pretty big change.

homu · 2017-03-09T16:44:49Z

☔ The latest upstream changes (presumably e257e8b) made this pull request unmergeable. Please resolve the merge conflicts.

locks · 2017-03-09T16:55:45Z

Poo, it's a significant conflict :\

move tests after content Move back tests for route, complex component, and service sections fix spelling errors another spelling fix fix lifecycle link Fix links More seperation between test and features

toddjordan · 2017-03-18T01:27:37Z

Also made several updates that address some of the initial comments in #1708

theroncross · 2017-03-18T14:00:41Z

source/localizable/tutorial/acceptance-test.md

-test('should list available rentals.', function (assert) {
-});
+The launched Chrome web browser shows 10 successful tests.
+Ember generates tests that lint each file you create using [JSHint](http://jshint.com/).


Should this be changed to eslint now?

As of 2.11 (which I think the tutorial is at), its still installing jshint.

theroncross · 2017-03-18T14:04:09Z

source/localizable/tutorial/acceptance-test.md

+Running `ember test --server` will show a total of 7 failed tests out of 15.
+Each of the 6 tests defined above will fail, plus you'll notice one JSHint failure saying, `assert is defined but never used`.
+The tests we defined fail because a QUnit test fails if it is empty.
+Tests require a check for a specific condition (known as an `assert`).



I think this is a great compromise on de-emphasizing testing.

theroncross · 2017-03-18T14:19:54Z

source/localizable/tutorial/ember-data.md

-Since we're using Mirage in our development environment, Mirage will return the data we've provided.
-When we deploy our app to a production server, we will need to provide a backend for Ember Data to communicate with.
+Since we've already set up Ember Mirage in our development environment, Mirage will return the data we requested.
+When we deploy our app to a production server, we will likely want to provide a backend server for Ember Data to communicate with to store and retrieve persisted data from.


...for storing and retrieving persisted data. Anything saved only in Ember Data's local store will be lost when we close our app.

The last sentence might be confusing because we are talking in this paragraph about using mirage vs a remote server. Will have to think about how to elaborate on providing a backend.
"...we will likely want to replace Mirage with a remote server for Ember Data to communicate with for storing and retrieving persisted data. A remote server will allow for data to be shared and updated across users."

Makes sense.

theroncross

This strikes me as a much more reasonable approach, especially for beginners.

theroncross · 2017-03-18T14:25:10Z

source/localizable/tutorial/installing-addons.md

+The [`vendor` directory](../../addons-and-dependencies/managing-dependencies/#toc_other-assets) in Ember is a special directory where you can include content that gets compiled into your application.
+
+As Ember CLI runs, it takes the `ember-tutorial` CSS file and puts it in a file called `vendor.css`.
+The `vender.css` file is referenced in `app/index.html`, making the styles available at runtime.


The vendor.css ...

theroncross · 2017-03-18T14:26:07Z

source/localizable/tutorial/installing-addons.md

-As Ember CLI runs, it takes the `ember-tutorial` CSS file and puts it in `vendor.css` (which is referenced in `app/index.html`).
+The addon works by generating a file called `ember-tutorial.css` and putting that file in the super-rentals `vendor` directory.
+
+The [`vendor` directory](../../addons-and-dependencies/managing-dependencies/#toc_other-assets) in Ember is a special directory where you can include content that gets compiled into your application.


When Ember CLI builds our app from our source code, it copies ember-tutorial.css into a file called vendor.css.

theroncross · 2017-03-18T14:29:31Z

source/localizable/tutorial/model-hook.md

+Run the tests again using the command `ember t -s`, and toggle "Hide passed tests" to show your new passing test.
+
+Now we are listing rentals, and and verifying it with an acceptance test.
+This leaves us with 2 remaining acceptance test failure (and 1 jshint failure):


... test failures...

theroncross · 2017-03-18T14:35:10Z

source/localizable/tutorial/routes-and-templates.md

@@ -256,7 +247,7 @@ export default Ember.Route.extend({
 });
 ```

-Now visiting the root route `/` will result in the `/rentals` URL loading.
+Now visiting the root URL `/` will result in the `/rentals` URL loading.


Isn't route more correct here?

theroncross · 2017-03-18T14:42:37Z

source/localizable/tutorial/routes-and-templates.md

+  });
+});
+```
+


Maybe a quick breakdown of the test here.

assert.equal() takes three arguments. The first two can be any expression, but are usually a test helper followed by the expected result. assert.equal() simply returns true if the expressions are equal, and false if they aren't. The third is a user-friendly message that will be displayed in the test runner. A thorough test suite could be written with nothing but assert.equal() calls.

theroncross · 2017-03-18T15:18:14Z

source/localizable/tutorial/service.md

-The CLI `generate util` command will create a utility file and a unit test.
-We'll delete the unit test since we don't want to test Google code.
-Our app needs a single function, `createMap`, which makes use of `google.maps.Map` to create our map element, `google.maps.Geocoder` to lookup the coordinates of our location, and `google.maps.Marker` to pin our map based on the resolved location.
+Finally open the template file for our `rental-listing` component and add the new `location-map` component.


You may have noticed that this.get('location') refers to a property location we haven't defined. This property will be passed in to the component by its parent template.

theroncross · 2017-03-18T15:19:59Z

source/localizable/tutorial/service.md

+
+We'll use a unit test to validate the service.
+Unit tests are more isolated than integration tests and acceptance test,
+and are intended for testing specific login within a class.


~~login~~ logic

theroncross · 2017-03-18T15:27:24Z

source/localizable/tutorial/service.md

+When the service calls `createMap` on our fake utility, we will run asserts to validate that it is called.
+In our first test notice that we expect four asserts to be run in line 17. Two of the asserts run in the test function, while the other two are run when `createMap` is called.
+
+In the second test, only one assert is expected (line 26), since the map element is fetch from cache and does not use the utility.


theroncross · 2017-03-18T15:42:53Z

source/localizable/tutorial/simple-component.md

+```
+
+Now lets render our component using the `render` function.
+The `render` function allows use to pass a template string, so that we can declare the component in the same way we do in our templates.


theroncross · 2017-03-18T15:44:33Z

source/localizable/tutorial/simple-component.md

+test('should display rental details', function(assert) {
+  this.set('rentalObj', rental);
+  this.render(hbs`{{rental-listing rental=rentalObj}}`);
+  assert.equal(this.$('.listing h3').text(), 'test-title');


Add messages for continuity with earlier tests?

toddjordan · 2017-03-18T17:03:45Z

Thank you so much @theroncross for reviewing! I'll address these this weekend.

toddjordan · 2017-03-21T04:59:20Z

if you want to review the tutorial without installing middleman, one option is to walk through the rendered markdown files in order:

acorncom · 2017-03-21T06:01:23Z

@toddjordan Nice work on this. Just sent in a PR to tweak, refine and simplify the language on the first three pages. I think we should merge what we have here and we can keep editorializing on it as we go.

toddjordan · 2017-03-21T06:02:31Z

thanks @acorncom !

Additional tweaks and adjustments to the tutorial

toddjordan force-pushed the more-gradual-testing-intro branch 2 times, most recently from 0c5c736 to 3f64a38 Compare February 20, 2017 06:29

toddjordan force-pushed the more-gradual-testing-intro branch 4 times, most recently from 86d8c0b to 3347d42 Compare March 14, 2017 06:22

Initial acceptance test refactoring

90c8f08

move tests after content Move back tests for route, complex component, and service sections fix spelling errors another spelling fix fix lifecycle link Fix links More seperation between test and features

toddjordan force-pushed the more-gradual-testing-intro branch from 3347d42 to 90c8f08 Compare March 14, 2017 06:25

toddjordan changed the title ~~[WIP]More gradual testing intro~~ More gradual testing intro Mar 14, 2017

toddjordan mentioned this pull request Mar 17, 2017

Perspective of someone new to SPAs: Large tutorial in guides is incredibly confusing #1708

Closed

acorncom mentioned this pull request Mar 17, 2017

Inconsistency in Adding Nested Routes #1846

Open

theroncross reviewed Mar 18, 2017

View reviewed changes

toddjordan mentioned this pull request Mar 18, 2017

Fix glitch in Chrome with menu logo text toddjordan/ember-cli-tutorial-style#5

Merged

Feedback from theroncross

cace3d6

toddjordan force-pushed the more-gradual-testing-intro branch from fec6395 to cace3d6 Compare March 19, 2017 02:35

locks mentioned this pull request Mar 19, 2017

- #1848

Closed

This was referenced Mar 20, 2017

[LEADERSHIP] - Please Cleanup the Tutorial Mess #1851

Closed

- #1852

Closed

Additional tweaks and adjustments to the tutorial

c496a49

acorncom mentioned this pull request Mar 21, 2017

Additional tweaks and adjustments to the tutorial toddjordan/guides#5

Merged

Merge pull request #5 from acorncom/more-gradual-testing-intro

d291127

Additional tweaks and adjustments to the tutorial

This was referenced Mar 21, 2017

Fixed grammatically incorrect sentence in ember-data.md #1863

Merged

Tutorial: Highlight lines of interest. #1843

Merged

toddjordan added 2 commits March 21, 2017 17:01

Fix a couple of spelling errors from last merge

659de43

couple more minor updates

0dbf544

toddjordan merged commit 9202b8f into emberjs:master Mar 22, 2017

toddjordan deleted the more-gradual-testing-intro branch March 22, 2017 00:24

toddjordan mentioned this pull request Mar 22, 2017

Tutorial TDD #1718

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

More gradual testing intro #1818

More gradual testing intro #1818

toddjordan commented Feb 20, 2017 •

edited by locks

Loading

homu commented Mar 9, 2017

locks commented Mar 9, 2017

toddjordan commented Mar 18, 2017

theroncross Mar 18, 2017

toddjordan Mar 18, 2017

theroncross Mar 18, 2017

theroncross Mar 18, 2017

toddjordan Mar 18, 2017

theroncross Mar 18, 2017

theroncross left a comment

theroncross Mar 18, 2017

theroncross Mar 18, 2017

theroncross Mar 18, 2017

theroncross Mar 18, 2017

theroncross Mar 18, 2017

theroncross Mar 18, 2017

theroncross Mar 18, 2017

theroncross Mar 18, 2017

theroncross Mar 18, 2017

theroncross Mar 18, 2017

toddjordan commented Mar 18, 2017

toddjordan commented Mar 21, 2017

acorncom commented Mar 21, 2017

toddjordan commented Mar 21, 2017

More gradual testing intro #1818

More gradual testing intro #1818

Conversation

toddjordan commented Feb 20, 2017 • edited by locks Loading

homu commented Mar 9, 2017

locks commented Mar 9, 2017

toddjordan commented Mar 18, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

theroncross left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

toddjordan commented Mar 18, 2017

toddjordan commented Mar 21, 2017

acorncom commented Mar 21, 2017

toddjordan commented Mar 21, 2017

toddjordan commented Feb 20, 2017 •

edited by locks

Loading