We are loading async content and embedding a canvas element when the component is `didInsertElement`d. We created this test waiter to make sure the canvas element is on the page and ready to go (and everything works!), but if we run more than one test at a time, it fails..!

tests.acceptance.arcade-test.js

import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from '../helpers/start-app';
import StudentProgress from "../helpers/student-progress";

var application = null;

module('Acceptance: ArcadeAuthorization', {
  beforeEach () {
    application = startApp();

    StudentProgress.setupStudent(); // setups some mirage user objects

    return;
  },

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

// #arcade/index
test('arcade/index', function (assert) {
  visit('/arcade');

  andThen(function() {
    assert.equal(currentURL(), '/arcade', "takes you to the main arcade page");
    assert.equal(Ember.$("canvas").data('loaded'), true, "canvas is loaded");
  });
});

// #arcade/game/:arcade_wheres_my_shadow
test('arcade/game/arcade_wheres_my_shadow', function (assert) {
  visit('/arcade/game/arcade_wheres_my_shadow');

  andThen(function() {
    assert.equal(currentURL(), '/arcade', "takes you to the lobby if token is not set");
    assert.equal(Ember.$("canvas").data('loaded'), true, "canvas is loaded");
  });
});

test('arcade/index - clicking around', function(assert) {
  visit('/arcade');

  andThen(function() {
    assert.equal(currentURL(), '/arcade', "takes you to the main arcade page");
    assert.equal(Ember.$("canvas").data('loaded'), true, "canvas is loaded");
  });
})

tests.helpers.wait-for-caper-game.js

import Ember from 'ember';

function interval () {
  let hasCanvas = Ember.$("canvas").size() === 1,
      canvasLoaded = Ember.$('canvas').data('loaded');

  if ( hasCanvas && canvasLoaded ) {
    Ember.Test.unregisterWaiter(interval);
    return true;
  }
}

Ember.Test.registerWaiter(interval);