goog.ui.textarea_test.js Maven / Gradle / Ivy

Go to download
// Copyright 2010 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

goog.provide('goog.ui.TextareaTest');
goog.setTestOnly('goog.ui.TextareaTest');

goog.require('goog.dom');
goog.require('goog.dom.classlist');
goog.require('goog.events');
goog.require('goog.style');
goog.require('goog.testing.ExpectedFailures');
goog.require('goog.testing.events.EventObserver');
goog.require('goog.testing.jsunit');
goog.require('goog.ui.Textarea');
goog.require('goog.ui.TextareaRenderer');
goog.require('goog.userAgent');
goog.require('goog.userAgent.product');

var sandbox;
var textarea;
var demoTextareaElement;
var expectedFailures;

function setUp() {
  sandbox = goog.dom.getElement('sandbox');
  textarea = new goog.ui.Textarea();
  demoTextareaElement = goog.dom.getElement('demo-textarea');
  expectedFailures = new goog.testing.ExpectedFailures();
}

function tearDown() {
  expectedFailures.handleTearDown();
  textarea.dispose();
  goog.dom.removeChildren(sandbox);
}


/**
 * @return {boolean} Whether we're on Mac Safari 3.x.
 */
function isMacSafari3() {
  return goog.userAgent.WEBKIT && goog.userAgent.MAC &&
      !goog.userAgent.isVersionOrHigher('527');
}


/**
 * @return {boolean} Whether we're on Linux Firefox 3.6.3.
 */
function isLinuxFirefox() {
  return goog.userAgent.product.FIREFOX && goog.userAgent.LINUX;
}


/**
 * @return {boolean} Whether we're on Firefox 3.0.
 */
function isFirefox3() {
  return goog.userAgent.GECKO && !goog.userAgent.isVersionOrHigher('1.9.1');
}

function testConstructor() {
  assertNotNull('Textarea must not be null', textarea);
  assertEquals(
      'Renderer must default to expected value',
      goog.ui.TextareaRenderer.getInstance(), textarea.getRenderer());

  var fakeDomHelper = {'getDocument': function() { return true; }};
  var testTextarea = new goog.ui.Textarea(
      'Hello', goog.ui.TextareaRenderer.getInstance(), fakeDomHelper);
  assertEquals(
      'Content must have expected content', 'Hello', testTextarea.getContent());
  assertEquals(
      'Renderer must have expected value',
      goog.ui.TextareaRenderer.getInstance(), testTextarea.getRenderer());
  assertEquals(
      'DOM helper must have expected value', fakeDomHelper,
      testTextarea.getDomHelper());
  testTextarea.dispose();
}

function testConstructorWithDecorator() {
  var decoratedTextarea = new goog.ui.Textarea();
  decoratedTextarea.decorate(demoTextareaElement);
  assertEquals(
      'Textarea should have current content after decoration', 'Foo',
      decoratedTextarea.getContent());
  var initialHeight = decoratedTextarea.getHeight_();
  var initialOffsetHeight = decoratedTextarea.getElement().offsetHeight;
  // focus() will trigger the grow/shrink flow.
  decoratedTextarea.getElement().focus();
  assertEquals(
      'Height should not have changed without content change', initialHeight,
      decoratedTextarea.getHeight_());
  assertEquals(
      'offsetHeight should not have changed without content ' +
          'change',
      initialOffsetHeight, decoratedTextarea.getElement().offsetHeight);
  decoratedTextarea.dispose();
}

function testGetSetContent() {
  textarea.render(sandbox);
  assertEquals(
      'Textarea\'s content must default to an empty string', '',
      textarea.getContent());
  textarea.setContent(17);
  assertEquals(
      'Textarea element must have expected content', '17',
      textarea.getElement().value);
  textarea.setContent('foo');
  assertEquals(
      'Textarea element must have updated content', 'foo',
      textarea.getElement().value);
}

function testGetSetValue() {
  textarea.render(sandbox);
  assertEquals(
      'Textarea\'s content must default to an empty string', '',
      textarea.getValue());
  textarea.setValue(17);
  assertEquals(
      'Textarea element must have expected content', '17', textarea.getValue());
  textarea.setValue('17');
  assertEquals(
      'Textarea element must have expected content', '17', textarea.getValue());
}

function testBasicTextareaBehavior() {
  var observer = new goog.testing.events.EventObserver();
  goog.events.listen(textarea, goog.ui.Textarea.EventType.RESIZE, observer);
  textarea.render(sandbox);
  var el = textarea.getElement();
  var heightBefore = textarea.getHeight_();
  assertTrue(
      'One resize event should be fired during render',
      observer.getEvents().length == 1);
  textarea.setContent(
      'Lorem ipsum dolor sit amet, consectetuer ' +
      'elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac ' +
      'est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia ' +
      'lorem, in fermentum purus ligula quis nunc.');
  var heightAfter = textarea.getHeight_();
  assertTrue(
      'With this much content, height should have grown.',
      heightAfter > heightBefore);
  assertTrue(
      'With a height change, a resize event should have fired.',
      observer.getEvents().length == 2);
  textarea.setContent('');
  heightAfter = textarea.getHeight_();
  assertTrue(
      'Textarea should shrink with no content.', heightAfter <= heightBefore);
  assertTrue(
      'With a height change, a resize event should have fired.',
      observer.getEvents().length == 3);
  goog.events.unlisten(textarea, goog.ui.Textarea.EventType.RESIZE, observer);
}

function testMinHeight() {
  textarea.render(sandbox);
  textarea.setMinHeight(50);
  assertEquals(
      'offsetHeight should be 50 initially', 50,
      textarea.getElement().offsetHeight);
  textarea.setContent(
      'Lorem ipsum dolor sit amet, consectetuer  ' +
      'elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac ' +
      'est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia ' +
      'lorem, in fermentum purus ligula quis nunc.');
  assertTrue('getHeight_() should be > 50', textarea.getHeight_() > 50);

  textarea.setContent('');
  assertEquals(
      'With no content, offsetHeight should go back to 50, ' +
          'the minHeight.',
      50, textarea.getElement().offsetHeight);

  expectedFailures.expectFailureFor(isMacSafari3());
  try {
    textarea.setMinHeight(0);
    assertTrue(
        'After setting minHeight to 0, offsetHeight should ' +
            'now be < 50, but it is ' + textarea.getElement().offsetHeight,
        textarea.getElement().offsetHeight < 50);
  } catch (e) {
    expectedFailures.handleException(e);
  }
}

function testMouseUpListener() {
  textarea.render(sandbox);
  textarea.setMinHeight(100);
  textarea.setMaxHeight(200);
  textarea.mouseUpListener_({});
  assertEquals(
      'After a mouseup which is not a resize, minHeight should ' +
          'still be 100',
      100, textarea.minHeight_);

  // We need to test how CSS drop shadows effect this too.
  goog.dom.classlist.add(textarea.getElement(), 'drop-shadowed');
  textarea.mouseUpListener_({});
  assertEquals(
      'After a mouseup which is not a resize, minHeight should ' +
          'still be 100 even with a shadow',
      100, textarea.minHeight_);
}

function testMaxHeight() {
  textarea.render(sandbox);
  textarea.setMaxHeight(50);
  assertTrue(
      'Initial offsetHeight should be less than 50',
      textarea.getElement().offsetHeight < 50);
  var newContent = 'Lorem ipsum dolor sit amet, consectetuer adipiscing ' +
      'elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac ' +
      'est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia ' +
      'lorem, in fermentum purus ligula quis nunc.';
  textarea.setContent(newContent);

  assertTrue(
      'With lots of content, getHeight_() should be > 50',
      textarea.getHeight_() > 50);
  assertEquals(
      'Even with lots of content, offsetHeight should be 50 ' +
          'with maxHeight set',
      50, textarea.getElement().offsetHeight);
  textarea.setMaxHeight(0);
  assertTrue(
      'After setting maxHeight to 0, offsetHeight should now ' +
          'be > 50',
      textarea.getElement().offsetHeight > 50);
}

function testMaxHeight_canShrink() {
  textarea.render(sandbox);
  textarea.setMaxHeight(50);
  assertTrue(
      'Initial offsetHeight should be less than 50',
      textarea.getElement().offsetHeight < 50);
  var newContent = 'Lorem ipsum dolor sit amet, consectetuer adipiscing ' +
      'elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac ' +
      'est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia ' +
      'lorem, in fermentum purus ligula quis nunc.';
  textarea.setContent(newContent);

  assertEquals(
      'Even with lots of content, offsetHeight should be 50 ' +
          'with maxHeight set',
      50, textarea.getElement().offsetHeight);
  textarea.setContent('');
  assertTrue(
      'With no content, offsetHeight should be back to < 50',
      textarea.getElement().offsetHeight < 50);
}

function testSetPlaceholder() {
  textarea.setPlaceholder('Some default text here.');
  textarea.setPlaceholder('new default text...');
  textarea.render(sandbox);
  if (textarea.supportsNativePlaceholder_()) {
    assertEquals('new default text...', textarea.getElement().placeholder);
  }
  assertEquals('', textarea.getValue());
  textarea.setValue('some value');
  assertEquals('some value', textarea.getValue());
  // ensure setting a new placeholder doesn't replace the value.
  textarea.setPlaceholder('some new placeholder');
  assertEquals('some value', textarea.getValue());
}

function testSetPlaceholderForInitialContent() {
  var testTextarea = new goog.ui.Textarea('initial content');
  testTextarea.render(sandbox);
  assertEquals('initial content', testTextarea.getValue());
  testTextarea.setPlaceholder('new default text...');
  assertEquals('initial content', testTextarea.getValue());
  testTextarea.setValue('new content');
  assertEquals('new content', testTextarea.getValue());
  testTextarea.setValue('');
  assertEquals('', testTextarea.getValue());
  if (!testTextarea.supportsNativePlaceholder_()) {
    // Pretend we leave the textarea. When that happens, the
    // placeholder text should appear.
    assertEquals('', testTextarea.getElement().value);
    testTextarea.blur_();
    assertEquals('new default text...', testTextarea.getElement().value);
  }
}

function testMinAndMaxHeight() {
  textarea.render(sandbox);
  textarea.setMinHeight(50);
  textarea.setMaxHeight(150);
  assertEquals(
      'offsetHeight should be 50 initially', 50,
      textarea.getElement().offsetHeight);

  textarea.setContent(
      'Lorem ipsum dolor sit amet, consectetuer  ' +
      'elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac ' +
      'est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia ' +
      'lorem, in fermentum purus ligula quis nunc.');

  var height = textarea.getHeight_();
  // For some reason Mac Safari 3 has 136 and Linux FF has 146 here.
  expectedFailures.expectFailureFor(isMacSafari3() || isLinuxFirefox());
  try {
    assertTrue(
        'With lots of content, getHeight_() should be > 150 ' +
            '(it is ' + height + ')',
        height > 150);
    assertEquals(
        'Even with lots of content, offsetHeight should be 150 ' +
            'with maxHeight set',
        150, textarea.getElement().offsetHeight);

    textarea.setMaxHeight(0);
    assertTrue(
        'After setting maxHeight to 0, offsetHeight should now ' +
            'be > 150 (it is ' + textarea.getElement().offsetHeight + ')',
        textarea.getElement().offsetHeight > 150);

    textarea.setContent('');
    textarea.setMinHeight(0);
    assertTrue(
        'After setting minHeight to 0, with no contents, ' +
            'offsetHeight should now be < 50',
        textarea.getElement().offsetHeight < 50);
  } catch (e) {
    expectedFailures.handleException(e);
  }
}

function testSetValueWhenInvisible() {
  textarea.render(sandbox);
  var content = 'Lorem ipsum dolor sit amet, consectetuer  ' +
      'elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac ' +
      'est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia ' +
      'lorem, in fermentum purus ligula quis nunc.';
  textarea.setValue(content);
  var height = textarea.getHeight_();
  var elementHeight = goog.style.getStyle(textarea.getElement(), 'height');
  assertEquals(height + 'px', elementHeight);

  // Hide the element, height_ should be invalidate when setValue().
  goog.style.setElementShown(textarea.getElement(), false);
  textarea.setValue(content);

  // Show the element again.
  goog.style.setElementShown(textarea.getElement(), true);
  textarea.setValue(content);
  height = textarea.getHeight_();
  elementHeight = goog.style.getStyle(textarea.getElement(), 'height');
  assertEquals(height + 'px', elementHeight);
}

function testSetAriaLabel() {
  assertNull(
      'Textarea must not have aria label by default', textarea.getAriaLabel());
  textarea.setAriaLabel('My textarea');
  textarea.render(sandbox);
  var element = textarea.getElementStrict();
  assertNotNull('Element must not be null', element);
  assertEquals(
      'Item element must have expected aria-label', 'My textarea',
      element.getAttribute('aria-label'));
  textarea.setAriaLabel('My new textarea');
  assertEquals(
      'Item element must have updated aria-label', 'My new textarea',
      element.getAttribute('aria-label'));
}