Fix hashtag display

This updates gr-limited-text to handle cases where there is no limit
provided. Previously, the parent element handled this case in a dom-if,
however, the dom-if was not evaluated because the value was undefined.

Change-Id: Iae598c6afe4be7ca1fe96a2baf02ec13629bd962
This commit is contained in:
Becky Siegel
2017-09-25 15:44:43 -07:00
parent c88e961847
commit 1a08f61a52
3 changed files with 20 additions and 15 deletions

View File

@@ -29,7 +29,10 @@
text: String, text: String,
/** The maximum length for the text to display before truncating. */ /** The maximum length for the text to display before truncating. */
limit: Number, limit: {
type: Number,
value: null,
},
/** Boolean property used by Gerrit.TooltipBehavior. */ /** Boolean property used by Gerrit.TooltipBehavior. */
hasTooltip: { hasTooltip: {
@@ -51,7 +54,7 @@
* enabled. * enabled.
*/ */
_updateTitle(text, limit) { _updateTitle(text, limit) {
this.hasTooltip = text.length > limit; this.hasTooltip = !!limit && text.length > limit;
if (this.hasTooltip) { if (this.hasTooltip) {
this.setAttribute('title', text); this.setAttribute('title', text);
} else { } else {
@@ -60,7 +63,7 @@
}, },
_computeDisplayText(text, limit) { _computeDisplayText(text, limit) {
if (text.length > limit) { if (!!limit && text.length > limit) {
return text.substr(0, limit - 1) + '…'; return text.substr(0, limit - 1) + '…';
} }
return text; return text;

View File

@@ -50,25 +50,31 @@ limitations under the License.
const updateSpy = sandbox.spy(element, '_updateTitle'); const updateSpy = sandbox.spy(element, '_updateTitle');
element.text = 'abc 123'; element.text = 'abc 123';
flushAsynchronousOperations(); flushAsynchronousOperations();
assert.isFalse(updateSpy.called); assert.isTrue(updateSpy.calledOnce);
assert.isNotOk(element.getAttribute('title')); assert.isNotOk(element.getAttribute('title'));
assert.isFalse(element.hasTooltip); assert.isFalse(element.hasTooltip);
element.limit = 10; element.limit = 10;
flushAsynchronousOperations(); flushAsynchronousOperations();
assert.isTrue(updateSpy.calledOnce); assert.isTrue(updateSpy.calledTwice);
assert.isNotOk(element.getAttribute('title')); assert.isNotOk(element.getAttribute('title'));
assert.isFalse(element.hasTooltip); assert.isFalse(element.hasTooltip);
element.limit = 3; element.limit = 3;
flushAsynchronousOperations(); flushAsynchronousOperations();
assert.isTrue(updateSpy.calledTwice); assert.isTrue(updateSpy.calledThrice);
assert.equal(element.getAttribute('title'), 'abc 123'); assert.equal(element.getAttribute('title'), 'abc 123');
assert.isTrue(element.hasTooltip); assert.isTrue(element.hasTooltip);
element.limit = 100; element.limit = 100;
flushAsynchronousOperations(); flushAsynchronousOperations();
assert.isTrue(updateSpy.calledThrice); assert.equal(updateSpy.callCount, 4);
assert.isNotOk(element.getAttribute('title'));
assert.isFalse(element.hasTooltip);
element.limit = null;
flushAsynchronousOperations();
assert.equal(updateSpy.callCount, 5);
assert.isNotOk(element.getAttribute('title')); assert.isNotOk(element.getAttribute('title'));
assert.isFalse(element.hasTooltip); assert.isFalse(element.hasTooltip);
}); });
@@ -76,6 +82,7 @@ limitations under the License.
test('_computeDisplayText', () => { test('_computeDisplayText', () => {
assert.equal(element._computeDisplayText('foo bar', 100), 'foo bar'); assert.equal(element._computeDisplayText('foo bar', 100), 'foo bar');
assert.equal(element._computeDisplayText('foo bar', 4), 'foo…'); assert.equal(element._computeDisplayText('foo bar', 4), 'foo…');
assert.equal(element._computeDisplayText('foo bar', null), 'foo bar');
}); });
}); });
</script> </script>

View File

@@ -63,14 +63,9 @@ limitations under the License.
} }
</style> </style>
<div class$="container [[_getBackgroundClass(transparentBackground)]]"> <div class$="container [[_getBackgroundClass(transparentBackground)]]">
<template is="dom-if" if="[[limit]]">
<a href$="[[href]]"> <a href$="[[href]]">
<gr-limited-text limit="[[limit]]" text="[[text]]"></gr-limited-text> <gr-limited-text limit="[[limit]]" text="[[text]]"></gr-limited-text>
</a> </a>
</template>
<template is="dom-if" if="[[!limit]]">
<a href$="[[href]]">[[text]]</a>
</template>
<gr-button <gr-button
id="remove" id="remove"
hidden$="[[!removable]]" hidden$="[[!removable]]"