can't test ember component that appends a div to the dom

Question

I have a ember-cli-addon that adds a component which appends a div with a specific class to the consuming application. I'm trying to test this integration and having difficulty to setup the test.

I have tried to unit test the component as well but that doesn't work quite as expected. Here's what I've tried:

I've copied the component from my addon directory to tests/dummy/components/jquery-backstretch.js to make it available to the dummy test application:

jquery-backstretch.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'jquery-backstretch',
  image: null,
  selector: 'body',
  fade: 0,
  duration: 5000,
  centeredX: true,
  centeredY: true,

  setupJquerybackstretch: function() {
    var image = this.get('image');
    if (! Ember.isEmpty(image)) {
      var options = {
        fade: this.get('fade'),
        centeredX: this.get('centeredX'),
        centeredY: this.get('centeredY')
      };

      var jqbsImage;
      if (Ember.typeOf(image) === 'string') {
        jqbsImage = 'assets/' + image;
      } else if (Ember.isArray(image)) {
        options.duration = this.get('duration');
        jqbsImage = image.map(function(img) {return 'assets/' + img;});
      } else {
        Ember.Logger.error('Ember JQuery-Backstretch: Unsupported "image" format.');
      }

      Ember.$(this.get('selector')).backstretch(jqbsImage, options);
    } else {
      Ember.Logger.error('Ember JQuery-Backstretch: image not supplied.');
    }
  }.on('didInsertElement'),

  teardownJquerybackstretch: function() {
    Ember.$(this.get('selector')).backstretch('destroy');
  }.on('willDestroyElement')
});

this causes the component to append the img to the body of the test page and not to #ember-testing-container, changing the selector to #ember-testingn-container puts the img in the right place but the test can't find it:

tests/acceptance/jquery-backstretch.js

import Ember from 'ember';
import {
  module,
  test
} from 'qunit';
import startApp from '../../tests/helpers/start-app';

var application;

module('Acceptance: JqueryBackstretch', {
  beforeEach: function() {
    application = startApp();
  },

  afterEach: function() {
    // Ember.run(application, 'destroy');
  }
});


test('backstretch added to body tag', function(assert) {
  visit('/');

  andThen(function() {
    assert.equal(find('.backstretch > img').length, 1, 'Backstretch found');
  });
});

application.hbs

<h2 id="title">Welcome to Ember.js</h2>
{{jquery-backstretch image="img/emberjs.png"}}
{{outlet}}

the test is not passing, it can't find the image, I also tried to test the component and append it to the DOM then test to see if it's in the DOM but that didn't yield better results.

How can I test this please?