define([
  'common/views/visualisations/journey-graph/callout',
  'extensions/collections/collection',
  'extensions/models/model'
],
function (JourneyCallout, Collection, Model) {
  describe('JourneyCallout', function () {

    describe('rendering', function () {
      var d3 = JourneyCallout.prototype.d3;

      var el, wrapper, collection, view;
      beforeEach(function () {
        el = $('<div></div>').appendTo($('body'));
        wrapper = d3.select(el[0]).append('svg').append('g');
        collection = new Collection();
        collection.reset({
          data: [
            { title: 'Stage 1', uniqueEvents: 20 },
            { title: 'Stage 2', uniqueEvents: 15 },
            { title: 'Stage 3', uniqueEvents: 10 }
          ]
        }, { parse: true });
        collection.query = new Model({
          start_at: collection.getMoment('2013-05-27T00:00:00+00:00'),
          end_at: collection.getMoment('2013-06-03T00:00:00+00:00')
        });
        view = new JourneyCallout({
          wrapper: wrapper,
          collection: collection,
          blockMarginFraction: 0.2,
          barMarginFraction: 0.2,
          graph: {
            scaleFactor: jasmine.createSpy().andReturn(1),
            valueAttr: 'uniqueEvents'
          },
          margin: {
            top: 10,
            right: 20,
            bottom: 30,
            left: 40
          },
          scales: {
            x: function (v) {
              return v * 20;
            }
          }
        });
        view.render();
      });

      afterEach(function () {
        el.remove();
      });

      it('creates a callout with information about the currently selected item', function () {
        view.onChangeSelected(collection.at(0), 0);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack">27 May to 2 June 2013</span> Stage: Stage 1');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Number of users:</dt><dd>20</dd>' +
                                               '<dt>Percentage relative to start:</dt><dd>100%</dd>');

        view.onChangeSelected(collection.at(1), 1);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack">27 May to 2 June 2013</span> Stage: Stage 2');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Number of users:</dt><dd>15</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>75%</dd>');

        view.onChangeSelected(collection.at(2), 2);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack">27 May to 2 June 2013</span> Stage: Stage 3');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Number of users:</dt><dd>10</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>50%</dd>');
      });

      it('positions an arrow element to point to the currently selected model', function () {
        view.onChangeSelected(collection.at(0), 0);
        expect(view.$el.find('.arrow').css('left')).toEqual('48px');

        view.onChangeSelected(collection.at(1), 1);
        expect(view.$el.find('.arrow').css('left')).toEqual('68px');

        view.onChangeSelected(collection.at(2), 2);
        expect(view.$el.find('.arrow').css('left')).toEqual('88px');
      });
    });

  });
});

@@ -60,26 +60,22 @@
 ut',%0A  '
-extensi
+comm
 on
-s
 /collect
@@ -79,26 +79,30 @@
 ections/
-collection
+journey_series
 ',%0A  'ex
@@ -153,16 +153,29 @@
 allout, 
+JourneySeries
 Collecti
@@ -380,32 +380,33 @@
 h(function () %7B%0A
+%0A
         el = $('
@@ -506,44 +506,520 @@
 ');%0A
-        collection = new Collection(
+%0A        var Collection = JourneySeriesCollection.extend(%7B%0A          getMoment: function() %7B%0A            return JourneySeriesCollection.prototype.getMoment('2013-06-03T00:00:00+00:00');%0A          %7D%0A%0A        %7D);%0A%0A        collection = new Collection(%5B%5D, %7B%0A          matchingAttribute: 'title',%0A          valueAttr: 'uniqueEvents',%0A          axes: %7B%0A            y: %5B%0A              %7B groupId: 'Stage 1' %7D,%0A              %7B groupId: 'Stage 2' %7D,%0A              %7B groupId: 'Stage 3' %7D%0A            %5D%0A          %7D%0A        %7D
 );%0A 
@@ -1262,197 +1262,8 @@
 %7D);%0A
-        collection.query = new Model(%7B%0A          start_at: collection.getMoment('2013-05-27T00:00:00+00:00'),%0A          end_at: collection.getMoment('2013-06-03T00:00:00+00:00')%0A        %7D);
 %0A   

Fix JourneyCallout tests