| // 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')); |
| } |