text: import { moduleForComponent, test } from 'ember-qunit';
  import hbs from 'htmlbars-inline-precompile';
  
  moduleForComponent('pretty-color', 'Integration | Component | pretty color', {
    integration: true
  });
  
  test('should be rendered with its color name', function(assert) {
    assert.expect(2);
  
    this.set('colorValue', 'orange');
  
    this.render(hbs`{{pretty-color name=colorValue}}`);
  
    assert.equal(this.$().text().trim(), 'Pretty Color: orange', 'text starts as orange');
  
    this.set('colorValue', 'green');
  
    assert.equal(this.$().text().trim(), 'Pretty Color: green', 'text switches to green');
  
  });
  
  test('should change colors', function(assert) {
    assert.expect(2);
  
    // set the outer context to red
    this.set('colorValue', 'red');
  
    this.render(hbs`{{pretty-color name=colorValue}}`);
  
    assert.equal(this.$('div').attr('style'), 'color: red', 'starts as red');
  
    this.set('colorValue', 'blue');
  
    assert.equal(this.$('div').attr('style'), 'color: blue', 'updates to blue');
  });
  