Skip to content

Instantly share code, notes, and snippets.

View jonpitch's full-sized avatar

Jon Pitcherella jonpitch

View GitHub Profile
import Ember from 'ember';
export default Ember.Component.extend({
theme: Ember.inject.service()
// ...
});
@jonpitch
jonpitch / themes.scss
Last active April 2, 2016 13:45
Ember Theming - SASS
// theme map
$themes: (
default: (
first: (
primary: #58b15f,
secondary: #e3f0d8
),
second: (
primary: #287f6e,
secondary: #83e5d2
@jonpitch
jonpitch / theme.js
Last active April 2, 2016 13:53
Ember Theming - Service
import Ember from 'ember';
export default Ember.Service.extend({
base: 'default',
theme: 'first',
// the property used as a reference for styles
name: Ember.computed('base', function() {
const base = this.get('base');
@jonpitch
jonpitch / some-route.js
Created April 2, 2016 13:47
Ember Theming - Route Example
import Ember from 'ember';
export default Ember.Route.extend({
theme: Ember.inject.service(),
// set theme to "second" when hitting route
beforeModel: function() {
this._super(...arguments);
this.get('theme').setTheme('second');
},
@jonpitch
jonpitch / some-component.hbs
Created April 2, 2016 13:49
Ember Theming - Component
<div class="my-awesome-class" data-theme="{{theme.name}}">
stuff goes here
</div>
@jonpitch
jonpitch / some-component.scss
Created April 2, 2016 13:49
Ember Theming - Component SASS
// usage:
div.my-awesome-class {
@include theme('color', 'primary');
}
// results in the output:
div.my-awesome-class[data-theme="default-first"] {
color: #58b15f;
}
div.my-awesome-class[data-theme="default-second"] {
@jonpitch
jonpitch / assertion-message.js
Last active July 27, 2016 19:06
write better ember tests - be verbose
test('this is a dummy test', function(assert) {
const a = true;
const b = true;
// a developer can quickly scan these messages to understand what
// needs to happen and why.
assert.ok(a, 'A is true when X');
assert.equal(a, b, 'A and B are equal when X');
});
@jonpitch
jonpitch / basic-page-object.js
Last active July 27, 2016 19:24
write better ember tests - page object
// without page object - bad
test('here is a test that does not use a page object', function(assert) {
this.render(hbs`{{my-component}}`);
const $button = this.$('#some-button-id');
const $description = this.$('p');
assert.ok($button.is(':visible'), 'I see the button');
assert.equal($description.text().trim(), 'Some text', 'The text is shown correctly');
});
@jonpitch
jonpitch / ember-cli-mirage-override.js
Last active July 27, 2016 20:27
write better ember tests - mirage scenario
test('a test demonstrating a scenario based api response', function(assert) {
// override the request made in this test
server.get('/api/things', function({ db }, request) {
return {
// some different response
};
});
// assertions
});
@jonpitch
jonpitch / test-name.js
Created July 28, 2016 22:03
write better ember tests - be verbose
// bad - what part of login are we testing?
test('login', function(assert) {
// ...
});
// good - i know exactly what this test is doing
test('user can successfully log in', function(assert) {
// ...
});