This document discusses refactoring techniques for Ember applications. It describes using tests to guide refactoring, including custom test helpers for things like finding elements. An example shows refactoring a service for making requests by version into a more generic resource service. The recap encourages relying on tests, writing targeted helpers, addressing code smells, adding features, applying the "three times rule" of repetition, and refactoring during upgrades.

1. Confident Refactoring
Confident
Refactoring
Jade Applegate

2. Confident Refactoring
Tests

3. Confident Refactoring

4. Confident Refactoring
Tests

5. Confident Refactoring
- Ember QUnit
- Ember CLI Mirage
- PhantomJS
- Custom test helpers
What we use

6. Confident Refactoring
// tests/helpers/find.js
import Ember from 'ember';
function findButton(app, text) {
return find(app, 'input[type="submit"],input[type="
button"],button,a.button').filter(`:contains(${text})`);
}
const customHelpers = (function() {
Test.registerHelper('findIcon', findIcon);
})();

7. Confident Refactoring
// tests/helpers/find.js
import Ember from 'ember';
function findOrFalse(app, text) {
const results = find(text);
return results.length > 0 ? results : false;
}
function findInlineValidation(app, text = 'Required') {
return findOrFalse(app, `.help-inline:contains(${text})
`);
}

8. Confident Refactoring
//tests/acceptance/sign-in-test.js
test('fail to enter credentials', function(assert) {
notSignedIn();
visit('/authentication/sign-in');
andThen(function() {
click(findButton('Login'));
});
andThen(function() {
expectElement(findInlineValidation('Please enter your
email address'));
});
});

9. Confident Refactoring

10. Confident Refactoring
Refactoring

11. Confident Refactoring

12. Confident Refactoring

13. Confident Refactoring

14. Confident Refactoring

15. Confident Refactoring
An Example

16. Confident Refactoring
// app/services/version-requests.js
createNewDomain(payload, serviceVersion) {
return this._serviceVersionRequest('POST',
serviceVersion, "domain", null, payload);
},
createHost(payload, serviceVersion) {
return this._serviceVersionRequest('POST',
serviceVersion, 'backend', null, payload);
},
createHeader(payload, serviceVersion) {
return this._serviceVersionRequest("POST",
serviceVersion, "header", null, payload);
}

17. Confident Refactoring
// app/services/version-requests.js continued...
editDomain(payload, serviceVersion, id) {
return this._serviceVersionRequest('PUT', serviceVersion,
"domain", id, payload);
},
editHost(payload, serviceVersion, id) {
return this._serviceVersionRequest('PUT', serviceVersion,
"backend", id, payload);
},
editDefaultSettings(payload, serviceVersion) {
return this._serviceVersionRequest("PUT", serviceVersion,
"settings", null, payload);
},

18. Confident Refactoring
// app/services/version-requests.js continued...
deleteDomain(id, serviceVersion) {
return this._serviceVersionRequest('DELETE',
serviceVersion, "domain", id);
},
deleteHost(id, serviceVersion) {
return this._serviceVersionRequest('DELETE',
serviceVersion, "backend", id);
},
deleteHeader(id, serviceVersion) {
return this._serviceVersionRequest('DELETE',
serviceVersion, "header", id);
}

19. Confident Refactoring
// app/services/version-requests.js
createResource(type, payload, serviceVersion) {
return this._serviceVersionRequest('POST',
serviceVersion, type, null, payload);
},
deleteResource(type, id, serviceVersion) {
return this._serviceVersionRequest('DELETE',
serviceVersion, type, id);
},
editResource(type, payload, serviceVersion, id) {
return this._serviceVersionRequest('PUT',
serviceVersion, type, id, payload);
}

20. Confident Refactoring
// tests/acceptance/manage-hosts.js
test('can delete a host', function(assert) {
visit('/hosts/my-host');
andThen(() => {
expectElement(findResource('.host', 'My Host'));
click(findLink('Delete'));
});
visit('/hosts');
andThen(() => {
expectNoElement(findResource('.host', 'My Host'));
});
});

21. Confident Refactoring

22. Confident Refactoring
- Rely on tests to guide refactoring
- Write test helpers, but don’t overdo it!
- Refactoring best practices:
1. Code smells
2. Adding new features
3. Three times rule
4. Upgrading your application
Recap

23. Confident Refactoring
Thank you!
Questions?