describe("common.geo.ui.Legend", function() {

  describe("Legend", function() {

    var data, legend, map;

    afterEach(function() {
      legend.clean();
    });

    beforeEach(function() {

      map = new cdb.geo.Map();

      data = [
        { name: "Category 1", value: "#f1f1f1" },
        { name: "Category 2", value: "red" },
        { name: "Category 3", value: "#f1f1f1" },
        { name: "Category 4", value: "#ccc" },
      ];

      legend = new cdb.geo.ui.Legend({
        data: data,
        map: map
      });

      $("body").append(legend.render().$el);

    });

    it("should have a 'none' type set by default", function() {
      expect(legend.model.get("type")).toEqual("none");
    });

    it("should use the provided model", function() {

      var legend = new cdb.geo.ui.Legend({
        data: data,
        map: map
      });

      expect(legend.model).toBeDefined();
      expect(legend.model.get("type")).toEqual("none");

    });

    it("should generate a model if no model is provided", function() {

      expect(legend.model).toBeDefined();
      expect(legend.model.get("type")).toEqual("none");

    });

    it("should allow to change type", function() {
      legend.model.set({ type: "bubble" });
      expect(legend.model.get("type")).toEqual('bubble');
    });

    it("should have a collection", function() {
      expect(legend.items instanceof cdb.geo.ui.LegendItems).toEqual(true);
    });

    it("should populate the collection", function() {
      legend.model.set("type", "custom");
      expect(legend.model.items.length).toEqual(4);

      for (var i = 0; i < data.length; i++) {
        expect(legend.model.items.at(i).get("name")).toEqual(data[i].name);
      }

    });

    it("should set the type of the legend in the element", function() {
      legend.model.set({ type: "bubble" });
      legend.render();
      expect(legend.$el.hasClass("bubble")).toEqual(true);
    });

    it("should create the specific legend based on the type", function() {
      legend.model.set({ type: "bubble" });
      expect(legend.view instanceof cdb.geo.ui.BubbleLegend).toEqual(true);
      expect(legend.$el.hasClass("bubble")).toEqual(true);
      expect(legend.$el.hasClass("custom")).toEqual(false);
    });

    it("shouldn't create the legend if the type is unknown", function() {
      legend.model.set({ type: "the_legend_of_santana" });
      expect(legend.view instanceof cdb.geo.ui.CustomLegend).toEqual(false);
      expect(legend.$el.hasClass("custom")).toEqual(false);
    });

    it("should update the legend when the name of an item is changed", function() {
      legend.render();
      legend.model.set({ type: "custom" });
      expect(legend.$el.find("li:first-child").text().trim()).toEqual('Category 1');

      legend.items.at(0).set("name", "New Category 1")
      expect(legend.$el.find("li:first-child").text().trim()).toEqual('New Category 1');
    });

    it("should update the legend when the value of an item is changed", function() {
      legend.render();
      legend.model.set({ type: "custom" });
      expect(legend.$el.find("li:first-child .bullet").css("background-color")).toEqual('rgb(241, 241, 241)');

      legend.items.at(0).set("value", "red")
      expect(legend.$el.find("li:first-child .bullet").css("background-color")).toEqual('rgb(255, 0, 0)');
    });


    it("should have a title defined", function() {
      expect(legend.model.get("title")).toBeDefined();
    });

    it("should have a show_title defined", function() {
      legend.model.set({ type: "custom" });
      expect(legend.model.get("show_title")).toBeDefined();
    });

    it("should show the legend", function() {
      legend.model.set({ type: "custom" });
      legend.show();
      expect(legend.$el.css('display')).toEqual('block');
    });
    it("shouldn't show the 'none' legend", function() {
      legend.show();
      expect(legend.$el.css('display')).toEqual('none');
    });

    it("should hide the legend", function(done) {

      legend.model.set({ type: "bubble" });

      legend.show();
      legend.hide();

      setTimeout(function () {
        expect(legend.$el.css('display')).toEqual('none');
        done();
      }, 300);

    });

    it("should show/hide the legend when the visible attribute changes", function() {
      legend.model.set({ type: "custom" });

      legend.render();

      expect(legend.$el.css('display')).toEqual('block');

      legend.model.set({ visible: false });

      expect(legend.$el.css('display')).toEqual('none');

      legend.model.set({ visible: true });

      expect(legend.$el.css('display')).toEqual('block');
    });

    it("should render the title if title and show_title are set", function() {
      var title = "Hi, I'm a title";
      legend.model.set({ type: "custom", title: title, show_title: true });
      expect(legend.$el.find('.legend-title').text()).toEqual(title);

      legend.model.set({ type: "bubble", title: title, show_title: true });
      expect(legend.$el.find('.legend-title').text()).toEqual(title);

      legend.model.set({ type: "density", title: title, show_title: true });
      expect(legend.$el.find('.legend-title').text()).toEqual(title);

      legend.model.set({ type: "intensity", title: title, show_title: true });
      expect(legend.$el.find('.legend-title').text()).toEqual(title);

      legend.model.set({ type: "color", title: title, show_title: true });
      expect(legend.$el.find('.legend-title').text()).toEqual(title);

      legend.model.set({ type: "category", title: title, show_title: true });
      expect(legend.$el.find('.legend-title').text()).toEqual(title);

      legend.model.set({ type: "choropleth", title: title, show_title: true });
      expect(legend.$el.find('.legend-title').text()).toEqual(title);
    });

    it("shouldn't render the title if show_title is not true", function() {
      var title = "Hi, I'm a title";
      legend.model.set({ type: "custom", title: title, show_title: false });
      expect(legend.$el.find('.legend-title').text()).not.toEqual(title);

      legend.model.set({ type: "bubble", title: title, show_title: false });
      expect(legend.$el.find('.legend-title').text()).not.toEqual(title);

      legend.model.set({ type: "density", title: title, show_title: false });
      expect(legend.$el.find('.legend-title').text()).not.toEqual(title);

      legend.model.set({ type: "intensity", title: title, show_title: false });
      expect(legend.$el.find('.legend-title').text()).not.toEqual(title);

      legend.model.set({ type: "color", title: title, show_title: false });
      expect(legend.$el.find('.legend-title').text()).not.toEqual(title);

      legend.model.set({ type: "category", title: title, show_title: false });
      expect(legend.$el.find('.legend-title').text()).not.toEqual(title);

      legend.model.set({ type: "choropleth", title: title, show_title: false });
      expect(legend.$el.find('.legend-title').text()).not.toEqual(title);
    });

  });

  describe("StackedLegend", function() {

    var data, legends, legendA, legendB, stackedLegend;

    afterEach(function() {
      stackedLegend.clean();
    });

    beforeEach(function() {

      data = [
        { name: "Category 1", value: "#f1f1f1" },
        { name: "Category 2", value: "red" },
        { name: "Category 3", value: "#f1f1f1" },
        { name: "Category 4", value: "#ccc" },
      ];

      legendA = new cdb.geo.ui.Legend({
        data: data
      });

      legendB = new cdb.geo.ui.Legend({
        data: data
      });

      legends = [ legendA, legendB ];

      stackedLegend = new cdb.geo.ui.StackedLegend({
        legends: legends
      });

      $("body").append(stackedLegend.render().$el);

    });

  });

  describe("ColorLegend", function() {
    var legend;
    beforeEach(function() {
      var data = [
        { name: true, value: "red" },
        { name: false, value: "red"  },
        { name: "#f1f1f1", value: "red"  },
        { name: null, value: "red"  },
      ];

      var model = new cdb.core.Model({
        type: "color",
        title: "title",
        show_title: false,
      });
      model.items = new Backbone.Collection(data)

      legend = new cdb.geo.ui.ColorLegend({
        model: model
      });
    });

    it("should render boolean values and nulls", function() {
      legend.render();
      var bullets = legend.$('li');
      expect(bullets.length).toEqual(4);
      expect($(bullets[0]).text()).toEqual("		 true");
      expect($(bullets[1]).text()).toEqual("		 false");
      expect($(bullets[2]).text()).toEqual("		 #f1f1f1");
      expect($(bullets[3]).text()).toEqual("		 null");
    });
  });


  describe("Legend (public interface)", function() {

    var custom_data;

    afterEach(function() {
      $(".legend_playground").remove();
    });

    beforeEach(function() {

      custom_data = [
        { name: "Natural Parks",  value: "#58A062" },
        { name: "Villages",       value: "https://carto.com/assets/logos/logos_full_cartodb_light.png", type: "image" },
        { name: "Rivers",         value: "#54BFDE" },
        { name: "Fields",         value: "#9BC562" },
        { name: "Caves",          value: "#FABB5C" }
      ];

    });

    it("should allow to show/hide the title", function() {

      var title = "Custom title";

      var legend = new cdb.geo.ui.Legend.Custom({
        title: title,
        data: custom_data
      });

      legend.render();
      legend.model.set("show_title", false);

      expect(legend.$el.find(".legend-title").html()).toEqual(null);

      legend.model.set("show_title", true);
      expect(legend.$el.find(".legend-title").html()).toEqual(title);

      legend.hideTitle();
      expect(legend.$el.find(".legend-title").html()).toEqual(null);

      legend.showTitle();
      expect(legend.$el.find(".legend-title").html()).toEqual(title);

    });

    it("should have a method to render the legend", function() {

      $("body").append("<div class='legend_playground' />");

      var legend = new cdb.geo.ui.Legend.Custom({
        title: "Custom title",
        data: custom_data
      });

      legend.addTo(".legend_playground");
      expect($(".legend_playground .cartodb-legend").length).toEqual(1);
    });

    it("should render the title", function() {

      var legend = new cdb.geo.ui.Legend.Custom({
        title: "Custom title",
        data: custom_data
      });

      legend.render();

      expect(legend.$el.find(".legend-title").html()).toEqual("Custom title");

    });

    it("shouldn't render the title if it's not provided", function() {

      var legend = new cdb.geo.ui.Legend.Custom({
        data: custom_data
      });

      legend.render();

      expect(legend.$el.find(".legend-title").html()).toEqual(null);

    });


    describe("Custom Legend", function() {

      var properties, legend;

      beforeEach(function() {

        properties = { title: "Custom title", data: custom_data };
        legend     = new cdb.geo.ui.Legend.Custom( properties );

        legend.render();

      });

      it("should generate a legend", function() {
        expect(legend.model.get("type")).toEqual("custom");
      });

      it("should show the items", function() {
        expect(legend.items.length).toEqual(custom_data.length);
        expect(legend.items.at(0).get("name")).toEqual(custom_data[0].name);
        expect(legend.items.at(0).get("value")).toEqual(custom_data[0].value);

        expect(legend.$el.find("li:first-child").text().trim()).toEqual(custom_data[0].name);
        expect(legend.$el.find("li:first-child .bullet").css("background")).toEqual("rgb(88, 160, 98)");
      });

      it("should show a title", function() {
        expect(legend.model.get("title")).toEqual(properties.title);
        expect(legend.$el.find(".legend-title").text()).toEqual(properties.title);
      });

      it("should allow to change the title", function() {
        legend.setTitle("New title");
        expect(legend.model.get("show_title")).toEqual(true);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
      });

      it("should allow to change the items", function() {

        var new_data = [
          { name: "One", value: "#F1F1F1" },
          { name: "Too", value: "#FF00FF" }
        ];

        legend.setData(new_data);

        expect(legend.items.length).toEqual(new_data.length);

        expect(legend.items.at(0).get("name")).toEqual(new_data[0].name);
        expect(legend.items.at(0).get("value")).toEqual(new_data[0].value);

        expect(legend.$el.find("li:first-child").text().trim()).toEqual(new_data[0].name);
        expect(legend.$el.find("li:first-child .bullet").css("background")).toEqual("rgb(241, 241, 241)");

        expect(legend.$el.find("li:last-child").text().trim()).toEqual(new_data[1].name);
        expect(legend.$el.find("li:last-child .bullet").css("background")).toEqual("rgb(255, 0, 255)");
      });

      it("should allow to specify a custom template for the items", function() {

        var title = "Custom title";

        var legend = new cdb.geo.ui.Legend.Custom({
          title: title,
          data: custom_data,
          itemTemplate: '<div class="myCustomClass" style="background:#f1f1f1;"></div><%= name %>: <%= value %>'
        });

        legend.render();

        expect(legend.$el.find("li:first-child").html()).toEqual('<div class="myCustomClass" style="background:#f1f1f1;"></div>Natural Parks: #58A062');
      });

    });

    describe("Category Legend", function() {

      var properties, legend;

      beforeEach(function() {

        properties = { title: "Category title", data: custom_data };
        legend     = new cdb.geo.ui.Legend.Category( properties );
        legend.render();

      });

      it("should generate the legend", function() {
        expect(legend.model.get("type")).toEqual("category");
      });

      it("should show the items", function() {
        expect(legend.items.length).toEqual(custom_data.length);
        expect(legend.items.at(0).get("name")).toEqual(custom_data[0].name);
        expect(legend.items.at(0).get("value")).toEqual(custom_data[0].value);

        expect(legend.$el.find("li:first-child").text().trim()).toEqual(custom_data[0].name);
        expect(legend.$el.find("li:first-child .bullet").css("background")).toEqual("rgb(88, 160, 98)");

        expect(legend.$el.find("li:nth-child(2)").text().trim()).toEqual(custom_data[1].name);
        expect(legend.$el.find("li:nth-child(2) .bullet").css("background")).toEqual("url(https://carto.com/assets/logos/logos_full_cartodb_light.png)");
      });

      it("should show a title", function() {
        expect(legend.model.get("title")).toEqual(properties.title);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
      });

      it("should allow to change the title", function() {
        legend.setTitle("New title");
        expect(legend.model.get("show_title")).toEqual(true);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
      });

      it("shouldn't evaluate name 0 to null", function() {
        custom_data = [
          { name: 0,  value: "#58A062" },
          { name: 2,  value: "#54BFDE" },
          { name: 3,  value: "#9BC562" },
          { name: 4,  value: "#FABB5C" }
        ];
        properties = { title: "Category title", data: custom_data };
        legend     = new cdb.geo.ui.Legend.Category( properties );
        legend.render();
        expect(legend.$el.find("li:first-child").text().trim()).toEqual("" + custom_data[0].name);
      });

    });

    describe("Bubble Legend", function() {

      var properties, legend;

      beforeEach(function() {

        properties = { title: "Bubble legend", type: "bubble", color: "#FF0000", min: 1, max: 120 };
        legend = new cdb.geo.ui.Legend.Bubble( properties );

        legend.render();

      });

      it("should generate the legend", function() {
        expect(legend.model.get("type")).toEqual(properties.type);
      });

      it("should show a graph with the right color", function() {
        expect(legend.$el.find(".graph").css("background-color")).toEqual("rgb(255, 0, 0)");
      });

      it("should show min and max values", function() {
        expect(legend.model.get("min")).toEqual(properties.min);
        expect(legend.model.get("max")).toEqual(properties.max);
      });

      it("should show a title", function() {
        expect(legend.model.get("title")).toEqual(properties.title);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
      });

      it("should allow to change the title", function() {
        legend.setTitle("New title");
        expect(legend.model.get("show_title")).toEqual(true);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
      });

      it("should allow to show the title", function() {
        legend.hideTitle();
        legend.showTitle();
        expect(legend.$el.find(".legend-title").html()).toEqual(properties.title);
      });

      it("should allow to hide the title", function() {
        legend.hideTitle();
        expect(legend.$el.find(".legend-title").html()).toEqual(null);
      });

      it("should allow to change the color", function() {
        legend.setColor("#CCC");
        expect(legend.$el.find(".graph").css("background-color")).toEqual("rgb(204, 204, 204)");
      });

      it("should allow to change the min value", function() {
        var value = "3";

        legend.setMinValue(value)
        expect(legend.model.get("min")).toEqual(value);
        expect(legend.$el.find("ul li:nth-child(1)").text().trim()).toEqual(value);
      });

      it("should allow to change the max value", function() {
        var value = "10000";

        legend.setMaxValue(value)
        expect(legend.model.get("max")).toEqual(value);
        expect(legend.$el.find("ul li:nth-child(3)").text().trim()).toEqual(value);
      });

    });

    describe("Choropleth Legend", function() {

      var properties, legend;

      beforeEach(function() {

        properties = { title: "Choropleth title", type: "choropleth", colors: ["#DDD", "#FF000", "#F1F1F1"], left: "Left value", right: "Right value" };
        legend = new cdb.geo.ui.Legend.Choropleth(properties);
        legend.render();

      });

      it("should generate a legend", function() {
        expect(legend.model.get("type")).toEqual(properties.type);
      });

      it("should show left and right values", function() {
        expect(legend.model.get("leftLabel")).toEqual(properties.left);
        expect(legend.model.get("rightLabel")).toEqual(properties.right);
      });

      it("should show colors", function() {
        expect(legend.model.get("colors").length).toEqual(properties.colors.length);
        expect(legend.$el.find(".quartile").length).toEqual(properties.colors.length);
      });

      it("should show a title", function() {
        expect(legend.model.get("title")).toEqual(properties.title);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
      });

      it("should allow to change the title", function() {
        legend.setTitle("New title");
        expect(legend.model.get("show_title")).toEqual(true);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
      });

      it("should allow to hide the title", function() {
        legend.hideTitle();
        expect(legend.$el.find(".legend-title").html()).toEqual(null);
      });

      it("should allow to show the title", function() {
        legend.hideTitle();
        legend.showTitle();
        expect(legend.$el.find(".legend-title").html()).toEqual(properties.title);
      });

      it("should allow change colors", function() {
        var newColors = ["red", "white", "blue"];

        legend.setColors(newColors);
        expect(legend.model.get("colors").length).toEqual(newColors.length);
        expect(legend.$el.find(".quartile").length).toEqual(newColors.length);
      });

      it("should allow change the left label", function() {
        var label = "New left label";

        legend.setLeftLabel(label)
        expect(legend.model.get("leftLabel")).toEqual(label);
        expect(legend.$el.find("li:nth-child(1)").text().trim()).toEqual(label);
      });

      it("should allow change the right label", function() {
        var label = "New right label";

        legend.setRightLabel(label)
        expect(legend.model.get("rightLabel")).toEqual(label);
        expect(legend.$el.find("li:nth-child(2)").text().trim()).toEqual(label);
      });

    });

    describe("Density Legend", function() {

      var properties, legend;

      beforeEach(function() {

        properties = { title: "Density title", type: "density", colors: ["#DDD", "#FF000", "#F1F1F1"], left: "Left value", right: "Right value" };
        legend = new cdb.geo.ui.Legend.Density(properties);
        legend.render();

      });

      it("should generate a legend", function() {
        expect(legend.model.get("type")).toEqual(properties.type);
      });

      it("should show left and right values", function() {
        expect(legend.model.get("leftLabel")).toEqual(properties.left);
        expect(legend.model.get("rightLabel")).toEqual(properties.right);
      });

      it("should show colors", function() {
        expect(legend.model.get("colors").length).toEqual(properties.colors.length);
        expect(legend.$el.find(".quartile").length).toEqual(properties.colors.length);
      });

      it("should show a title", function() {
        expect(legend.model.get("title")).toEqual(properties.title);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
      });

      it("should allow to change the title", function() {
        legend.setTitle("New title");
        expect(legend.model.get("show_title")).toEqual(true);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
      });

      it("should allow to hide the title", function() {
        legend.hideTitle();
        expect(legend.$el.find(".legend-title").html()).toEqual(null);
      });

      it("should allow to show the title", function() {
        legend.hideTitle();
        legend.showTitle();
        expect(legend.$el.find(".legend-title").html()).toEqual(properties.title);
      });

      it("should allow change colors", function() {
        var newColors = ["red", "white", "blue"];

        legend.setColors(newColors);
        expect(legend.model.get("colors").length).toEqual(newColors.length);
        expect(legend.$el.find(".quartile").length).toEqual(newColors.length);
      });

      it("should allow change the left label", function() {
        legend.setLeftLabel("Hello!")
        expect(legend.model.get("leftLabel")).toEqual("Hello!");
        expect(legend.$el.find("li:nth-child(1)").text().trim()).toEqual("Hello!");
      });

      it("should allow change the right label", function() {
        legend.setRightLabel("Hi!")
        expect(legend.model.get("rightLabel")).toEqual("Hi!");
        expect(legend.$el.find("li:nth-child(2)").text().trim()).toEqual("Hi!");
      });

    });

    describe("Intensity Legend", function() {

      var properties, legend;

      beforeEach(function() {

        properties = { title: "Intensity legend", type: "intensity", color: "#FF0000", min: 1, max: 120 };
        legend = new cdb.geo.ui.Legend.Intensity( properties );

        legend.render();

      });

      it("should generate the legend", function() {
        expect(legend.model.get("type")).toEqual(properties.type);
      });

      it("should show a graph with the right color", function() {
        var gradient = "-webkit-linear-gradient(left, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 100%)";
        expect(legend.$el.find(".graph").css("background")).toEqual(gradient);
      });

      it("should show left and right values", function() {
        expect(legend.model.get("leftLabel")).toEqual(properties.left);
        expect(legend.model.get("rightLabel")).toEqual(properties.right);
      });

      it("should show a title", function() {
        expect(legend.model.get("title")).toEqual(properties.title);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
      });

      it("should allow to change the title", function() {
        legend.setTitle("New title");
        expect(legend.model.get("show_title")).toEqual(true);
        expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
      });

      it("should allow to show the title", function() {
        legend.hideTitle();
        legend.showTitle();
        expect(legend.$el.find(".legend-title").html()).toEqual(properties.title);
      });

      it("should allow to hide the title", function() {
        legend.hideTitle();
        expect(legend.$el.find(".legend-title").html()).toEqual(null);
      });

      it("should allow to change the color", function() {
        legend.setColor("#CCC");
        var gradient = "-webkit-linear-gradient(left, rgb(204, 204, 204) 0%, rgb(255, 255, 255) 100%)";
        expect(legend.$el.find(".graph").css("background")).toEqual(gradient);
      });

      it("should allow change the left label", function() {
        var label = "New left label";

        legend.setLeftLabel(label)
        expect(legend.model.get("leftLabel")).toEqual(label);
        expect(legend.$el.find("li:nth-child(1)").text().trim()).toEqual(label);
      });

      it("should allow change the right label", function() {
        var label = "New right label";

        legend.setRightLabel(label)
        expect(legend.model.get("rightLabel")).toEqual(label);
        expect(legend.$el.find("li:nth-child(2)").text().trim()).toEqual(label);
      });

    });

    describe("Stacked Legend (using data)", function() {

      afterEach(function() {
        $(".legend_playground").remove();
      });

      var stacked, properties, legendA, legendB, custom_data;

      var custom_data = [
        { name: "Natural Parks",  value: "#58A062" },
        { name: "Villages",       value: "#F07971" },
        { name: "Rivers",         value: "#54BFDE" },
        { name: "Fields",         value: "#9BC562" },
        { name: "Caves",          value: "#FABB5C" }
      ];

      beforeEach(function() {

        var legendA = { title: "Intensity legend", type: "intensity", color: "#FF0000", min: 1, max: 120 };
        var legendB = { title: "Custom title", type:"custom", data: custom_data };

        stacked = new cdb.geo.ui.Legend.Stacked({ data: [legendA, legendB] });

        stacked.render();

      });

      it("should have a method to render the stacked legend", function() {

        $("body").append("<div class='legend_playground' />");

        var legendA = { title: "Intensity legend", type: "intensity", color: "#FF0000", min: 1, max: 120 };
        var legendB = { title: "Custom title", type:"custom", data: custom_data };

        var stacked = new cdb.geo.ui.Legend.Stacked({ data: [legendA, legendB] });

        stacked.addTo(".legend_playground");
        expect($(".legend_playground .cartodb-legend-stack").length).toEqual(1);
      });

      it("should render", function() {
        expect(stacked.legends.length).toEqual(2);
        expect(stacked.$el.find(".cartodb-legend").length).toEqual(2);
        expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
        expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);
      });

      it("should allow to add a legend", function() {

        var properties = { title: "Density title", type: "density", colors: ["#DDD", "#FF000", "#F1F1F1"], left: "Left value", right: "Right value" };

        stacked.addLegend(properties);

        expect(stacked.legends.length).toEqual(3);

        expect(stacked.$el.find(".cartodb-legend").length).toEqual(3);
        expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
        expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);
        expect(stacked.$el.find(".cartodb-legend.density").length).toEqual(1);

      });

      it("should allow to remove a legend", function() {

        stacked.removeLegendAt(0);

        expect(stacked.legends.length).toEqual(1);

        expect(stacked.$el.find(".cartodb-legend").length).toEqual(1);
        expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(0);
        expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);

      });

      it("should allow to get a legend", function() {

        var legend = stacked.getLegendAt(1);

        expect(legend.model.get("title")).toEqual("Custom title");
        expect(legend.$el.find(".legend-title").html()).toEqual("Custom title");

        var legend = stacked.legends[0];

        expect(legend.model.get("title")).toEqual("Intensity legend");
        expect(legend.$el.find(".legend-title").html()).toEqual("Intensity legend");

      });

    });

    describe("Stacked Legend (using legends)", function() {

      var stacked, properties, legendA, legendB, custom_data;

      var custom_data = [
        { name: "Natural Parks",  value: "#58A062" },
        { name: "Villages",       value: "#F07971" },
        { name: "Rivers",         value: "#54BFDE" },
        { name: "Fields",         value: "#9BC562" },
        { name: "Caves",          value: "#FABB5C" }
      ];

      var customLegend = new cdb.geo.ui.Legend.Custom({
        title: "Custom Legend",
        data: custom_data
      });

      var intensityLegend = new cdb.geo.ui.Legend.Intensity({
        title: "Intensity Legend",
        left: "10", right: "20", color: "#f1f1f1"
      });

      beforeEach(function() {

        stacked = new cdb.geo.ui.Legend.Stacked({ legends: [ customLegend, intensityLegend ] });
        stacked.render();

      });

      it("should render", function() {
        expect(stacked.legends.length).toEqual(2);
        expect(stacked.$el.find(".cartodb-legend").length).toEqual(2);
        expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
        expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);
      });

      it("should allow to add a legend", function() {

        var properties = { title: "Density title", type: "density", colors: ["#DDD", "#FF000", "#F1F1F1"], left: "Left value", right: "Right value" };

        stacked.addLegend(properties);

        expect(stacked.legends.length).toEqual(3);

        expect(stacked.$el.find(".cartodb-legend").length).toEqual(3);
        expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
        expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);
        expect(stacked.$el.find(".cartodb-legend.density").length).toEqual(1);

      });

      it("should allow to remove a legend", function() {

        stacked.removeLegendAt(0);

        expect(stacked.legends.length).toEqual(1);

        expect(stacked.$el.find(".cartodb-legend").length).toEqual(1);
        expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
        expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(0);

      });

      it("should allow to get a legend", function() {

        var legend = stacked.getLegendAt(0);

        expect(legend.model.get("title")).toEqual("Custom Legend");
        expect(legend.$el.find(".legend-title").html()).toEqual("Custom Legend");

        var legend = stacked.legends[1];

        expect(legend.model.get("title")).toEqual("Intensity Legend");
        expect(legend.$el.find(".legend-title").html()).toEqual("Intensity Legend");

      });

    });

  });

});