confident refactoring - ember sf meetup

Confident Refactoring


Jade Applegate


Tests


- Ember QUnit- Ember CLI Mirage- PhantomJS- Custom test helpers

What we use


// 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);})();


// 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})`);}


//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')); });});


Refactoring


An Example


// 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);

}


// 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);

},


// 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);

}


// 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);

}


// 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')); });});


- Rely on tests to guide refactoring- Write test helpers, but don’t overdo it! - Refactoring best practices:

1. Code smells2. Adding new features3. Three times rule4. Upgrading your application

Recap


Thank you! Questions?

confident refactoring - ember sf meetup

Technology