var tape = require("tape"),
    jsdom = require("jsdom"),
    d3 = Object.assign(require("../"), require("d3-selection"));

/*************************************
 ************ Components *************
 *************************************/

// Basic component.
var paragraph = d3.component("p")
  .render(function (selection, props){
    selection.text(props.text);
  });

var paragraphOptionalText = d3.component("p", "optional-text")
  .render(function (selection, props){
    selection.text(props.text || "");
  });

/*************************************
 ************** Tests ****************
 *************************************/
tape("A component should render a single instance.", function(test) {
  var div = d3.select(jsdom.jsdom().body).append("div");
  div.call(paragraph, { text: "Hello Component" });
  test.equal(div.html(), "<p>Hello Component</p>");
  test.end();
});


tape("A component should render multiple instances.", function(test) {
  var div = d3.select(jsdom.jsdom().body).append("div");

  // Enter
  div.call(paragraph, [
    { text: "foo" },
    { text: "bar" }
  ]);
  test.equal(div.html(), "<p>foo</p><p>bar</p>");

  // Update + Enter
  div.call(paragraph, [
    { text: "fooz" },
    { text: "barz" },
    { text: "baz" }
  ])
  test.equal(div.html(), "<p>fooz</p><p>barz</p><p>baz</p>");

  // Exit
  div.call(paragraph, []);
  test.equal(div.html(), "");

  test.end();
});


tape("A component should be passed props as {} when not specified.", function(test) {
  var div = d3.select(jsdom.jsdom().body).append("div");
  div.call(paragraphOptionalText, { text: "Hello Component" });
  test.equal(div.html(), '<p class="optional-text">Hello Component</p>');
  div.call(paragraphOptionalText);
  test.equal(div.html(), '<p class="optional-text"></p>');
  test.end();
});


//tape("A component should be passed props as {} when not specified.", function(test) {
//  var div = d3.select(jsdom.jsdom().body).append("div");
//  div
//      .call(paragraphOptionalText, { text: "Hello Component" })
//      .call(paragraphOptionalText, { text: "Hello Component" })
//  test.equal(div.html(), "<p>Hello Component</p>");
//  div.call(paragraphOptionalText);
//  test.equal(div.html(), "<p></p>");
//  test.end();
//});

@@ -875,33 +875,32 @@
 est.end();%0A%7D);%0A%0A
-%0A
 tape(%22A componen
@@ -1408,17 +1408,16 @@
 );%0A%7D);%0A%0A
-%0A
 tape(%22A 
@@ -1806,76 +1806,25 @@
 );%0A%0A
-%0A//
 tape(%22
-A component should be passed props as %7B%7D when not s
+S
 pecifi
-ed
+city
 .%22, 
@@ -1840,18 +1840,16 @@
 test) %7B%0A
-//
   var di
@@ -1899,20 +1899,9 @@
 iv%22)
-;%0A//  div%0A//
+%0A
     
@@ -1933,107 +1933,34 @@
 Text
-, %7B text: %22Hello Component%22 %7D)%0A//      .call(paragraphOptionalText, %7B text: %22Hello Component%22 %7D)%0A//
+)%0A      .call(paragraph);%0A
   te
@@ -1984,113 +1984,49 @@
 (), 
-%22%3Cp%3EHello Component%3C/p%3E%22);%0A//  div.call(paragraphOptionalText);%0A//  test.equal(div.html(), %22
+'%3Cp class=%22optional-text%22%3E%3C/p%3E
 %3Cp%3E%3C/p%3E
-%22
+'
 );%0A
-//
   te
@@ -2035,14 +2035,12 @@
 .end();%0A
-//
 %7D);%0A

Add failing test for specificity