/*
This file is part of the Juju GUI, which lets users view and manage Juju
environments within a graphical interface (https://launchpad.net/juju-gui).
Copyright (C) 2015 Canonical Ltd.

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU Affero General Public License version 3, as published by
the Free Software Foundation.

This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
General Public License for more details.

You should have received a copy of the GNU Affero General Public License along
with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

'use strict';

var juju = {components: {}}; // eslint-disable-line no-unused-vars

chai.config.includeStack = true;
chai.config.truncateThreshold = 0;

describe('StringConfig', function() {

  beforeAll(function(done) {
    // By loading this file it adds the component to the juju components.
    YUI().use('string-config', function() { done(); });
  });

  it('renders a string config', function() {
    var option = {
      key: 'testconfig',
      type: 'text',
      description: 'test config for strings'
    };
    var config = 'the value';
    var output = jsTestUtils.shallowRender(
      <juju.components.StringConfig
        config={config}
        option={option} />);
    var typeString = ` (${option.type})`;
    var expected = (
      <div className="string-config">
        <span>{option.key}{typeString}</span>
        <div
          className="string-config--value"
          contentEditable="true"
          onInput={output.props.children[1].props.onInput}
          onBlur={output.props.children[1].props.onBlur}
          dangerouslySetInnerHTML={{__html: config}}>
        </div>
        <span className="string-config--description"
          dangerouslySetInnerHTML={{__html: option.description}}>
        </span>
      </div>);

    assert.deepEqual(output, expected);
  });

  it('can update when new config is provided', function() {
    var option = {
      key: 'testconfig',
      type: 'text',
      description: 'test config for strings'
    };
    var shallowRenderer = jsTestUtils.shallowRender(
      <juju.components.StringConfig
        config="initial"
        option={option} />, true);
    var instance = shallowRenderer.getMountedInstance();
    assert.equal(instance.state.value, 'initial');
    shallowRenderer.render(
      <juju.components.StringConfig
        config="updated"
        option={option} />);
    assert.equal(instance.state.value, 'updated');
  });

  it('does not show a type if none is provided', function() {
    var option = {
      key: 'testconfig',
      description: 'test config for strings'
    };
    var output = jsTestUtils.shallowRender(
      <juju.components.StringConfig
        config="initial"
        option={option} />);
    assert.deepEqual(
      output.props.children[0].props.children, ['testconfig', '']);
  });
});

@@ -2077,24 +2077,214 @@
 ed);%0A  %7D);%0A%0A
+  function stubGetDomNode(instance) %7B%0A    instance.getDOMNode = _ =%3E %7B%0A      return %7B%0A        querySelector: _ =%3E %7B%0A          return %7B innerText: 'initial' %7D;%0A        %7D%0A      %7D;%0A    %7D;%0A  %7D%0A%0A
   it('can up
@@ -2323,32 +2323,32 @@
 ', function() %7B%0A
-
     var option =
@@ -2653,16 +2653,120 @@
 ance();%0A
+    // Overwrtiting the getDOMNode method because this is shallowRendered%0A    stubGetDomNode(instance);%0A
     asse
@@ -2918,32 +2918,32 @@
 n=%7Boption%7D /%3E);%0A
-
     assert.equal
@@ -2980,24 +2980,1081 @@
 d');%0A  %7D);%0A%0A
+  it('only updates the input on state change if values differ', function() %7B%0A    var option = %7B%0A      key: 'testconfig',%0A      type: 'text',%0A      description: 'test config for strings'%0A    %7D;%0A    var renderer = jsTestUtils.shallowRender(%0A      %3Cjuju.components.StringConfig%0A        config=%22initial%22%0A        option=%7Boption%7D /%3E, true);%0A    var instance = renderer.getMountedInstance();%0A    // Overwrtiting the getDOMNode method because this is shallowRendered%0A    stubGetDomNode(instance);%0A    // It should update if state and the value differ%0A    assert.equal(%0A      instance.shouldComponentUpdate(null, %7B%0A        value: 'not initial'%0A      %7D),%0A      true,%0A      'Component should have updated');%0A    // It should not update if the state and the value are the same. This is%0A    // bedcause in FireFox it does not maintain the cursor position when%0A    // re-rendering the content editable field.%0A    assert.equal(%0A      instance.shouldComponentUpdate(null, %7B%0A        value: 'initial'%0A      %7D),%0A      false,%0A      'Component should not have updated');%0A  %7D);%0A%0A
   it('does n

Add test to make sure that component updates are properly limited with the string config component