Merge pull request ember-learn#594 from muziejus/octane-testing

Reading/Editing/Octaning “Testing” section

Author: rwjblue

guides/release/testing/acceptance.md

@@ -83,22 +83,22 @@ your application, making it much easier to write deterministic tests.
 
 Some of these handy helpers are:
 
-* [`click(selector)`][1]
-  - Clicks an element and triggers any actions triggered by the element's `click`
-    event and returns a promise that fulfills when all resulting async behavior
-    is complete.
-* [`fillIn(selector, value)`][2]
-  - Fills in the selected input with the given value and returns a promise that
-     fulfills when all resulting async behavior is complete. Works with `<select>` elements as well as `<input>` elements. Keep in mind that with `<select>` elements, `value` must be set to the _value_ of the `<option>` tag, rather than its _content_ (for example, `true` rather than `"Yes"`).
-* [`triggerKeyEvent(selector, type, keyCode)`][3]
-  - Simulates a key event type, e.g. `keypress`, `keydown`, `keyup` with the
-    desired keyCode on element found by the selector.
-* [`triggerEvent(selector, type, options)`][4]
-  - Triggers the given event, e.g. `blur`, `dblclick` on the element identified
-    by the provided selector.
-* [`visit(url)`][5]
-  - Visits the given route and returns a promise that fulfills when all resulting
-     async behavior is complete.
+* [`click(selector)`][1]: clicks an element and triggers any actions triggered
+by the element's `click` event and returns a promise that fulfills when all
+resulting async behavior is complete.
+* [`fillIn(selector, value)`][2]: fills in the selected input with the given
+value and returns a promise that fulfills when all resulting async behavior is
+complete. Works with `<select>` elements as well as `<input>` elements. Keep
+in mind that with `<select>` elements, `value` must be set to the _value_ of
+the `<option>` tag, rather than its _content_ (for example, `true` rather than
+`"Yes"`).
+* [`triggerKeyEvent(selector, type, keyCode)`][3]: simulates a key event type,
+e.g. `keypress`, `keydown`, `keyup` with the desired keyCode on element found
+by the selector.
+* [`triggerEvent(selector, type, options)`][4]: triggers the given event, e.g.
+`blur`, `dblclick` on the element identified by the provided selector.
+* [`visit(url)`][5]: visits the given route and returns a promise that
+fulfills when all resulting async behavior is complete.
 
 You can find the full list of helpers in the [API Documentation of ember-test-helpers](https://github.com/emberjs/ember-test-helpers/blob/master/API.md).
 

guides/release/testing/testing-components.md

@@ -8,20 +8,19 @@ The `style` attribute of the component is bound to its `style` property.
 > component pretty-color`.
 
 ```javascript {data-filename="app/components/pretty-color.js"}
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
 
-export default Component.extend({
-  attributeBindings: ['style'],
-
-  style: computed('name', function() {
-    return `color: ${this.name}`;
-  })
-});
+export default class PrettyColorComponent extends Component {
+  get style() {
+    return `color: ${this.args.name}`;
+  }
+}
 ```
 
 ```handlebars {data-filename="app/templates/components/pretty-color.hbs"}
-Pretty Color: {{this.name}}
+<div style={{this.style}}>
+  Pretty Color: {{@name}}
+</div>
 ```
 
 The `module` from QUnit will scope your tests into groups of tests which can be configured and run independently.
@@ -156,23 +155,23 @@ Imagine you have the following component that changes its title when a button is
 > component magic-title`.
 
 ```javascript {data-filename="app/components/magic-title.js"}
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
-export default Component.extend({
-  title: 'Hello World',
+export default class MagicTitleComponent extends Component {
+  title = 'Hello World';
 
-  actions: {
-    updateTitle() {
-      this.set('title', 'This is Magic');
-    }
+  @action
+  updateTitle() {
+    this.set('title', 'This is Magic');
   }
-});
+}
 ```
 
 ```handlebars {data-filename="app/templates/components/magic-title.hbs"}
 <h2>{{this.title}}</h2>
 
-<button class="title-button" {{action "updateTitle"}}>
+<button class="title-button" {{action this.updateTitle}}>
   Update Title
 </button>
 ```
@@ -218,21 +217,21 @@ passing along the form's data:
 > component comment-form`.
 
 ```javascript {data-filename="app/components/comment-form.js"}
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
-export default Component.extend({
-  comment: '',
+export default class CommentFormComponent extends Component {
+  comment = '';
 
-  actions: {
-    submitComment() {
-      this.submitComment({ comment: this.comment });;
-    }
+  @action
+  submitComment() {
+    this.args.submitComment({ comment: this.comment });;
   }
-});
+}
 ```
 
 ```handlebars {data-filename="app/templates/components/comment-form.hbs"}
-<form {{action "submitComment" on="submit"}}>
+<form {{action this.submitComment on="submit"}}>
   <label>Comment:</label>
   {{textarea value=this.comment}}
 
@@ -285,22 +284,21 @@ Imagine you have the following component that uses a location service to display
 > component location-indicator`.
 
 ```javascript {data-filename="app/components/location-indicator.js"}
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 
-export default Component.extend({
-  locationService: service('location-service'),
+export default class LocationIndicatorComponent extends Component {
+  @service location;
 
   // when the coordinates change, call the location service to get the current city and country
-  city: computed('locationService.currentLocation', function () {
-    return this.locationService.getCurrentCity();
-  }),
+  get city() {
+    return this.location.getCurrentCity();
+  }
 
-  country: computed('locationService.currentLocation', function () {
-    return this.locationService.getCurrentCountry();
-  })
-});
+  get country() {
+    return this.location.getCurrentCountry();
+  }
+};
 ```
 
 ```handlebars {data-filename="app/templates/components/location-indicator.hbs"}
@@ -465,17 +463,17 @@ Imagine you have a typeahead component that uses [`Ember.run.debounce`](https://
 > component delayed-typeahead`.
 
 ```javascript {data-filename="app/components/delayed-typeahead.js"}
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
 
-export default Component.extend({
-  actions: {
-    handleTyping() {
-      //the fetchResults function is passed into the component from its parent
-      debounce(this, this.fetchResults, this.searchValue, 250);
-    }
+export default class DelayedTypeaheadComponent extends Component {
+  @action 
+  handleTyping() {
+    //the fetchResults function is passed into the component from its parent
+    debounce(this, this.fetchResults, this.searchValue, 250);
   }
-});
+};
 ```
 
 ```handlebars {data-filename="app/templates/components/delayed-typeahead.hbs"}

guides/release/testing/testing-controllers.md

@@ -15,22 +15,22 @@ sets one of those properties, and an action named `setProps`.
 
 ```javascript {data-filename=app/controllers/posts.js}
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 
-export default Controller.extend({
-  propA: 'You need to write tests',
-  propB: 'And write one for me too',
+export default class PostsController extends Controller {
+  propA = 'You need to write tests';
+  propB = 'And write one for me too';
 
   setPropB(str) {
     this.set('propB', str);
-  },
+  }
 
-  actions: {
-    setProps(str) {
-      this.set('propA', 'Testing is cool');
-      this.setPropB(str);
-    }
+  @action
+  setProps(str) {
+    this.set('propA', 'Testing is cool');
+    this.setPropB(str);
   }
-});
+};
 ```
 
 The `setProps` action directly sets one property, and calls the method to set the other.

guides/release/testing/testing-models.md

@@ -11,20 +11,20 @@ new `levelName` when the player reaches level 5.
 > model player`.
 
 ```javascript {data-filename=app/models/player.js}
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
+import DS from 'ember-data';
+const { Model, attr } = DS;
 
-export default Model.extend({
-  level: attr('number', { defaultValue: 0 }),
-  levelName: attr('string', { defaultValue: 'Noob' }),
+export default class Player extends Model {
+  @attr('number', { defaultValue: 0 }) level;
+  @attr('string', { defaultValue: 'Noob' }) levelName;
 
   levelUp() {
     let newLevel = this.incrementProperty('level');
     if (newLevel === 5) {
       this.set('levelName', 'Professional');
     }
   }
-});
+};
 ```
 
 Now let's create a test which will call `levelUp` on the player when they are
@@ -65,19 +65,20 @@ Assume that a `User` can own a `Profile`.
 > generate model user` and `ember generate model profile`.
 
 ```javascript {data-filename=app/models/profile.js}
-import Model from 'ember-data/model';
+import DS from 'ember-data';
+const { Model } = DS;
 
-export default Model.extend({
-});
+export default class Profile extends Model {
+};
 ```
 
 ```javascript {data-filename=app/models/user.js}
-import Model from 'ember-data/model';
-import { belongsTo } from 'ember-data/relationships';
+import DS from 'ember-data';
+const { Model, belongsTo } = DS;
 
-export default Model.extend({
-  profile: belongsTo('profile')
-});
+export default class User extends Model {
+  @belongsTo('profile') profile;
+};
 ```
 
 Then you could test that the relationship by looking it up on the `user` model which it is part of.

guides/release/testing/unit-testing-basics.md

@@ -16,14 +16,15 @@ based on a `foo` property.
 ```javascript {data-filename=app/services/some-thing.js}
 import Service from '@ember/service';
 import { computed } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-export default Service.extend({
-  foo: 'bar',
+export default class SomeThingService extends Service {
+  @tracked foo = 'bar';
 
-  computedFoo: computed('foo', function() {
+  get computedFoo() {
     return `computed ${this.foo}`;
-  })
-});
+  }
+};
 ```
 
 Within the test for this object, we'll lookup the service instance, update the `foo` property (which
@@ -64,14 +65,15 @@ the `foo` property).
 
 ```javascript {data-filename=app/services/some-thing.js}
 import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
-export default Service.extend({
-  foo: 'bar',
+export default class SomeThingService extends Service {
+  @tracked foo = 'bar';
 
   testMethod() {
-    this.set('foo', 'baz');
+    this.foo = 'baz';
   }
-});
+}
 ```
 
 To test it, we create an instance of our class `SomeThing` as defined above,
@@ -101,15 +103,16 @@ that returns a value based on some internal state.
 
 ```javascript {data-filename=app/services/some-thing.js}
 import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
-export default Service.extend({
-  count: 0,
+export default class SomeThingService extends Service {
+  @tracked count = 0;
 
   calc() {
-    this.incrementProperty('count');
+    this.count += 1;
     return `count: ${this.count}`;
   }
-});
+};
 ```
 
 The test would call the `calc` method and assert it gets back the correct value.
@@ -130,43 +133,6 @@ module('Unit | Service | some thing', function(hooks) {
 });
 ```
 
-### Testing Observers
-
-Suppose we have an object that has a property and a method observing that property.
-
-```javascript {data-filename=app/services/some-thing.js}
-import Service from '@ember/service';
-import { observer } from "@ember/object";
-
-export default Service.extend({
-  foo: 'bar',
-  other: 'no',
-
-  doSomething: observer('foo', function() {
-    this.set('other', 'yes');
-  })
-});
-```
-
-In order to test the `doSomething` method we create an instance of `SomeThing`,
-update the observed property (`foo`), and assert that the expected effects are present.
-
-```javascript {data-filename=tests/unit/services/some-thing-test.js}
-import { module, test } from 'qunit';
-import { setupTest } from 'ember-qunit';
-
-module('Unit | Service | some thing', function(hooks) {
-  setupTest(hooks);
-
-  test('should set other prop to yes when foo changes', function(assert) {
-    const someThing = this.owner.lookup('service:some-thing');
-
-    someThing.set('foo', 'baz');
-    assert.equal(someThing.get('other'), 'yes');
-  });
-});
-```
-
 ### Skipping tests
 
 Some times you might be working on a feature, but know that a certain test will fail so you might want to skip it.