<commit_before>define([
  'common/views/visualisations/conversion-graph/callout',
  'extensions/collections/collection',
  'extensions/models/model'
],
function (ConversionCallout, Collection, Model) {
  describe("ConversionCallout", function () {

    describe("rendering", function () {
      var d3 = ConversionCallout.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([
          {
            values: new Collection([
              { title: 'Stage 1', uniqueEvents:12, uniqueEventsNormalised:0.34},
              { title: 'Stage 2', uniqueEvents:15 , uniqueEventsNormalised:0.42},
              { title: 'Stage 3', uniqueEvents:18, uniqueEventsNormalised:0.51}
            ])
          },
          {
            values: new Collection([
              { title: 'Stage 1', uniqueEvents:21, uniqueEventsNormalised:0.29 },
              { title: 'Stage 2', uniqueEvents:24, uniqueEventsNormalised:0.33 },
              { title: 'Stage 3', uniqueEvents:27, uniqueEventsNormalised:0.37 }
            ])
          }
        ]);
        collection.at(0).get('values').query = new Model({
          start_at: collection.getMoment('2013-05-27'),
          end_at: collection.getMoment('2013-06-03')
        });
        collection.at(1).get('values').query = new Model({
          start_at: collection.getMoment('2013-06-03'),
          end_at: collection.getMoment('2013-06-10')
        });
        view = new ConversionCallout({
          wrapper:wrapper,
          collection:collection,
          blockMarginFraction: 0.2,
          barMarginFraction: 0.2,
          graph: {
            scaleFactor: jasmine.createSpy().andReturn(1)
          },
          margin: {
            top: 10,
            right: 20,
            bottom: 30,
            left: 40
          },
          scales:{
            x: function (v) {
              return v * 20;
            }
          }
        });
      });

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

      it("creates a callout with information about the currently selected item", function () {
        view.render();
        
        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(0), 0);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack0">27 May to 2 Jun 2013</span> Stage: Stage 1');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>12</dd>' +
                                               '<dt>Percentage relative to start:</dt><dd>34%</dd>');

        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(1), 1);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack0">27 May to 2 Jun 2013</span> Stage: Stage 2');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>15</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>42%</dd>');

        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(2), 2);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack0">27 May to 2 Jun 2013</span> Stage: Stage 3');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>18</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>51%</dd>');

        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(0), 0);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack1">3 to 9 Jun 2013</span> Stage: Stage 1');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>21</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>29%</dd>');

        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(1), 1);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack1">3 to 9 Jun 2013</span> Stage: Stage 2');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>24</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>33%</dd>');

        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(2), 2);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack1">3 to 9 Jun 2013</span> Stage: Stage 3');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>27</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>37%</dd>');
      });

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

        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(2), 2);
        expect(view.$el.find('.arrow').css('left')).toEqual('85px');
        
        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(0), 0);
        expect(view.$el.find('.arrow').css('left')).toEqual('55px');
        
        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(1), 1);
        expect(view.$el.find('.arrow').css('left')).toEqual('75px');

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

      it("positions an arrow element to point to the currently selected model", function () {
        collection.pop();

        view.render();
        
        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(0), 0);
        expect(view.$el.find('.arrow').css('left')).toEqual('50px');
        
        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(1), 1);
        expect(view.$el.find('.arrow').css('left')).toEqual('70px');

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

  });
});<commit_msg>Fix name of test<commit_after>define([
  'common/views/visualisations/conversion-graph/callout',
  'extensions/collections/collection',
  'extensions/models/model'
],
function (ConversionCallout, Collection, Model) {
  describe("ConversionCallout", function () {

    describe("rendering", function () {
      var d3 = ConversionCallout.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([
          {
            values: new Collection([
              { title: 'Stage 1', uniqueEvents:12, uniqueEventsNormalised:0.34},
              { title: 'Stage 2', uniqueEvents:15 , uniqueEventsNormalised:0.42},
              { title: 'Stage 3', uniqueEvents:18, uniqueEventsNormalised:0.51}
            ])
          },
          {
            values: new Collection([
              { title: 'Stage 1', uniqueEvents:21, uniqueEventsNormalised:0.29 },
              { title: 'Stage 2', uniqueEvents:24, uniqueEventsNormalised:0.33 },
              { title: 'Stage 3', uniqueEvents:27, uniqueEventsNormalised:0.37 }
            ])
          }
        ]);
        collection.at(0).get('values').query = new Model({
          start_at: collection.getMoment('2013-05-27'),
          end_at: collection.getMoment('2013-06-03')
        });
        collection.at(1).get('values').query = new Model({
          start_at: collection.getMoment('2013-06-03'),
          end_at: collection.getMoment('2013-06-10')
        });
        view = new ConversionCallout({
          wrapper:wrapper,
          collection:collection,
          blockMarginFraction: 0.2,
          barMarginFraction: 0.2,
          graph: {
            scaleFactor: jasmine.createSpy().andReturn(1)
          },
          margin: {
            top: 10,
            right: 20,
            bottom: 30,
            left: 40
          },
          scales:{
            x: function (v) {
              return v * 20;
            }
          }
        });
      });

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

      it("creates a callout with information about the currently selected item", function () {
        view.render();
        
        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(0), 0);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack0">27 May to 2 Jun 2013</span> Stage: Stage 1');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>12</dd>' +
                                               '<dt>Percentage relative to start:</dt><dd>34%</dd>');

        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(1), 1);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack0">27 May to 2 Jun 2013</span> Stage: Stage 2');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>15</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>42%</dd>');

        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(2), 2);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack0">27 May to 2 Jun 2013</span> Stage: Stage 3');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>18</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>51%</dd>');

        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(0), 0);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack1">3 to 9 Jun 2013</span> Stage: Stage 1');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>21</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>29%</dd>');

        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(1), 1);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack1">3 to 9 Jun 2013</span> Stage: Stage 2');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>24</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>33%</dd>');

        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(2), 2);
        expect(view.$el.find('h3')).toHaveHtml('<span class="date stack1">3 to 9 Jun 2013</span> Stage: Stage 3');
        expect(view.$el.find('dl')).toHaveHtml('<dt>Unique visitors to stage:</dt><dd>27</dd>' +
                                                '<dt>Percentage relative to start:</dt><dd>37%</dd>');
      });

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

        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(2), 2);
        expect(view.$el.find('.arrow').css('left')).toEqual('85px');
        
        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(0), 0);
        expect(view.$el.find('.arrow').css('left')).toEqual('55px');
        
        view.onChangeSelected(collection.at(1), 1, collection.at(1).get('values').at(1), 1);
        expect(view.$el.find('.arrow').css('left')).toEqual('75px');

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

      it("positions an arrow element to point to the currently selected model when there is only one series", function () {
        collection.pop();

        view.render();
        
        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(0), 0);
        expect(view.$el.find('.arrow').css('left')).toEqual('50px');
        
        view.onChangeSelected(collection.at(0), 0, collection.at(0).get('values').at(1), 1);
        expect(view.$el.find('.arrow').css('left')).toEqual('70px');

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

  });
});
{'fraction_non_alphanumeric': 0.18994159144352576, 'fraction_numerical': 0.03989987104604415, 'mean_word_length': 2.4603674540682414, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 127, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 24, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1090556', 'n_tokens_mistral': 4166, 'n_tokens_neox': 3905, 'n_words': 663}