Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[FIX] sap.m.Text: Normalisation and visualisation of line endings and…
… whitespace characters is now fixed

- Visual and QUnit tests added
- Property description is edited
- About section is edited
- Demokit and Testsuite samples are updated

New lines:
If you use JavaScript and you want to visualize new line you should use
\n. If you want to visualize, for example, “C:\NewFolder” you should
create it like “C:\NewFolder”.
If you use XML views and you want to visualize new line you should use

 Using ” \n” here will result in “\n” in the control.
If you use binding of the data and there is \n in the string it will be
visualized as new line.

 Tabs:
 If you use JavaScript and you want to visualize tab you should use \t.
 If you want to visualize, for example, “C:\TestFolder” you should
 create it like “C:\TestFolder”.
 If you use XML views and you want to visualize tab you should use 	
 Using ” \t” here will result in “\t” in the control.
 If you use binding of the data and there is \t in the string it will be
 visualized as tab.

BCP: 1870145637
BCP: 1870142134

Fixes: #1973

Change-Id: I6965ee0f58729291105ff7361c44b12d1a894458
CR-Id: 002075125900002138492018
  • Loading branch information
LidiyaGeorgieva committed May 18, 2018
1 parent 56d31e7 commit 991460d
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 44 deletions.
5 changes: 2 additions & 3 deletions src/sap.m/src/sap/m/Text.js
Expand Up @@ -28,7 +28,7 @@ sap.ui.define([
* @class
* The <code>Text</code> control can be used for embedding longer text paragraphs, that need text wrapping, into your app.
* If the configured text value contains HTML code or script tags, those will be escaped.<br>
* <b>Note: </b>Line breaks (\r\n, \n\r, \r, \n) will always be visualized except when the <code>wrapping</code> property is set to <code>false</code>. In addition, tabs (\t) and whitespace (" ") can be preserved by setting the <code>renderWhitespace</code> property to <code>true</code>
* <b>Note: </b>Line breaks will always be visualized except when the <code>wrapping</code> property is set to <code>false</code>. In addition, tabs and whitespace can be preserved by setting the <code>renderWhitespace</code> property to <code>true</code>
* @extends sap.ui.core.Control
* @implements sap.ui.core.IShrinkable, sap.ui.core.IFormContent
*
Expand Down Expand Up @@ -86,7 +86,6 @@ sap.ui.define([
* Specifies how whitespace and tabs inside the control are handled. If true, whitespace will be preserved by the browser.
* Depending on wrapping property text will either only wrap on line breaks or wrap when necessary, and on line breaks.
*
* <b>Note:</b> Special characters that can be used are : \t , \n and " " respectively Tab, New line and Space.
* @since 1.51
*/
renderWhitespace : {type : "boolean", group : "Appearance", defaultValue : false}
Expand Down Expand Up @@ -213,7 +212,7 @@ sap.ui.define([

// handle line ending characters for renderer
if (bNormalize) {
return sText.replace(/\\r\\n|\\n/g, "\n");
return sText.replace(/\r\n|\n\r|\r/g, "\n");
}

return sText;
Expand Down
2 changes: 1 addition & 1 deletion src/sap.m/src/sap/m/TextRenderer.js
Expand Up @@ -116,7 +116,7 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/library'],
* @param {sap.m.Text} oText An object representation of the control that should be rendered.
*/
TextRenderer.renderText = function(oRm, oText) {
var sText = oText.getText(true).replace(/\\t/g,"\t");
var sText = oText.getText(true);
oRm.writeEscaped(sText);
};

Expand Down
7 changes: 4 additions & 3 deletions src/sap.m/test/sap/m/Text.html
Expand Up @@ -34,7 +34,7 @@

// create and add a page with texts
var lorem = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
var loremLineBreaks = "Lorem ipsum dolor sit amet,\r consetetur sadipscing elitr,\n sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\r\n sed diam voluptua.";
var loremLineBreaks = "Lorem ipsum dolor sit amet\rNew line\nNew line\n\rNew line\r\nNew line";
var form = new sap.ui.layout.form.SimpleForm({
minWidth : 1024,
maxContainerCols : 2,
Expand Down Expand Up @@ -154,9 +154,10 @@
renderWhitespace:true,
wrapping:true
}),
new sap.m.Text("text13", {
text: "Text [13. Escaping characters examples] C:\\newFolder C:\\NewFolder C:\\TestFolder C:\\testFolder"
}),
form


]
});
app.addPage(initialPage);
Expand Down
22 changes: 11 additions & 11 deletions src/sap.m/test/sap/m/demokit/sample/TextRenderWhitespace/V.view.xml
Expand Up @@ -10,18 +10,18 @@
editable="true"
title="Text Properties"
adjustLabelSpan="false"
labelSpanXL="1"
labelSpanL="1"
labelSpanM="1"
labelSpanXL="2"
labelSpanL="2"
labelSpanM="2"
labelSpanS="4"
emptySpanXL="7"
emptySpanL="7"
emptySpanM="1"
emptySpanXL="4"
emptySpanL="4"
emptySpanM="2"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
columnsS="1">
columnsXL="2"
columnsL="2"
columnsM="2"
columnsS="2">
<Label text="Wrapping" />
<Switch state="true" change="onWrappingChange" />
<Label text="RenderWhitespace" />
Expand All @@ -35,6 +35,6 @@
<Text id="text"
renderWhitespace="true"
wrapping="true"
text="Lorem ipsum dolor sit amet,(1 line break follows)\nconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt (2 line breaks follow)\n\nut labore et dolore magna aliquyam erat, (4 tabs follow)\t\t\t\tsed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. (1 line break follows)\nStet clita kasd gubergren, no sea takimata sanctus est (7 spaces follow) Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,(7 spaces follow) sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. (7 spaces follow) Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem (6 tabs follow)\t\t\t\t\t\t\tipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet:"/>
text="Lorem ipsum dolor sit amet,(1 line break follows)&#xA;consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt (2 line breaks follow)&#xA;&#xA;ut labore et dolore magna aliquyam erat, (4 tabs follow)&#x9;&#x9;&#x9;&#x9;sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. (1 line break follows)&#xA;Stet clita kasd gubergren, no sea takimata sanctus est (7 spaces follow) Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,(7 spaces follow) sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. (7 spaces follow) Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem (6 tabs follow)&#x9;&#x9;&#x9;&#x9;&#x9;&#x9;ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet:"/>
</Panel>
</mvc:View>
86 changes: 84 additions & 2 deletions src/sap.m/test/sap/m/qunit/Text.qunit.html
Expand Up @@ -13,7 +13,34 @@
<script src="../../../../resources/sap/ui/thirdparty/qunit.js"></script>
<script src="../../../../resources/sap/ui/qunit/qunit-junit.js"></script>
<script src="../../../../resources/sap/ui/qunit/QUnitUtils.js"></script>

<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="myController">
<Text id="xmltext1" text="Should visualize tab&#009;and new line&#xA;and escaped \n and \t" renderWhitespace="true" width="100%"></Text>
<Text id="xmltext2" text="{/text}" renderWhitespace="true" width="100%"></Text>
</mvc:View>
</script>

<script>
sap.ui.controller("myController", {
doSomething: function() {
//something
}
});

var oData2 = {text: "Should visualize tab\tand new line\nand escaped \\n and \\t from binding"};
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html(), type:sap.ui.core.mvc.ViewType.XML});
var oModel2 = new sap.ui.model.json.JSONModel();

oModel2.setData(oData2);
myView.setModel(oModel2);

myView.placeAt('content64');
</script>
<script>
function countLines(oControl) {
return Math.round(oControl.$().height() / oControl.getLineHeight());
}

// add text instances
// ==================
Expand Down Expand Up @@ -150,10 +177,59 @@
assert.equal(oDom.innerHTML,"Hello World!", "Text entered again");
});

QUnit.test("New line characters in XML view", function(assert) {
myText64a = sap.ui.getCore().byId("__xmlview0--xmltext1");
assert.equal(countLines(myText64a), 2, "Text from XML view should be in 2 lines");

myText64b = sap.ui.getCore().byId("__xmlview0--xmltext2");
assert.equal(countLines(myText64b), 2, "Text from XML view with binding should be in 2 lines");
});

QUnit.test("New line characters with binding", function(assert) {
var oModel = new sap.ui.model.json.JSONModel();
var oData = {text: "Should visualize tab\tand new line\nand escaped \\n and \\t from binding"};
oModel.setData(oData);

var t65 = new sap.m.Text("Text65", {text: "{/text}", renderWhitespace: true}).setModel(oModel);
sap.ui.setRoot("content65", t65);
oCore.applyChanges();
assert.equal(countLines(t65), 2, "Text should be in 2 lines");
});

QUnit.test("New line characters", function(assert) {
//test normalization \r\n \r \n\r
var txt66 = "test\r\ntest\rtest\n\rtest";
var t66 = new sap.m.Text("Text66", {text: txt66});
sap.ui.setRoot("content66", t66);
oCore.applyChanges();
assert.equal(countLines(t66), 4, "Text should be in 4 lines");

//test \n
var txt67 = "C:\Temp\next.exe";
var t67 = new sap.m.Text("Text67", {text: txt67});
sap.ui.setRoot("content67", t67);
oCore.applyChanges();
assert.equal(countLines(t67), 2, "Text should be in 2 lines");

//test \\n
var txt68 = "C:\\Temp\\next.exe";
var t68 = new sap.m.Text("Text68", {text: txt68});
sap.ui.setRoot("content68", t68);
oCore.applyChanges();
assert.equal(countLines(t68), 1, "Text should be in 1 line");

//test \n\n\n
var txt69 = "test\n\n\ntest";
var t69 = new sap.m.Text("Text69", {text: txt69});
sap.ui.setRoot("content69", t69);
oCore.applyChanges();
assert.equal(countLines(t69), 4, "Text should be in 4 lines");
});

QUnit.test("wrapping & no-wrapping", function(assert) {
assert.strictEqual(t1.$().css("white-space"), "pre-line", "Text has correct white-spece style for wrapping");
assert.strictEqual(t1.$().css("white-space"), "pre-line", "Text has correct white-space style for wrapping");
assert.strictEqual(t4.$().hasClass("sapMTextNoWrap"), true, "Text has correct class for non-wrapping");
assert.strictEqual(t4.$().css("white-space"), "nowrap", "Text has correct white-spece style for non-wrapping");
assert.strictEqual(t4.$().css("white-space"), "nowrap", "Text has correct white-space style for non-wrapping");
assert.strictEqual(t4.$().css("word-wrap"), "normal", "Text has correct word-wrap style for non-wrapping");
});

Expand Down Expand Up @@ -297,5 +373,11 @@ <h2 id="qunit-userAgent"></h2>
<div id="content4"></div>
<div id="content5"></div>
<div id="content6"></div>
<div id="content64"></div>
<div id="content65"></div>
<div id="content66"></div>
<div id="content67"></div>
<div id="content68"></div>
<div id="content69"></div>
</body>
</html>
55 changes: 31 additions & 24 deletions src/sap.m/test/sap/m/visual/Text.spec.js
Expand Up @@ -24,45 +24,46 @@ describe("sap.m.Text", function() {
// fixed width in em
it("should vizualize text with fixed width in em", function () {
var txt3 = element(by.id('text3'));
expect(takeScreenshot(txt3)).toLookAs("3_fixed_width_in_em");
browser.executeScript('document.getElementById("text3").scrollIntoView()').then(function() {
expect(takeScreenshot(txt3)).toLookAs("3_fixed_width_in_em");
});
});

// fixed width in %
it("should vizualize text with fixed width in %", function () {
var txt3a = element(by.id('text3a'));
//next line is to move the view in the window
txt3a.click();
expect(takeScreenshot(txt3a)).toLookAs("3a_fixed_width_in_percentage");
browser.executeScript('document.getElementById("text3a").scrollIntoView()').then(function() {
expect(takeScreenshot(txt3a)).toLookAs("3a_fixed_width_in_percentage");
});
});

// fixed width in px
it("should vizualize text with fixed width in px", function () {
var txt3b = element(by.id('text3b'));
//next line is to move the view in the window
txt3b.click();
expect(takeScreenshot(txt3b)).toLookAs("3b_fixed_width_in_px");
browser.executeScript('document.getElementById("text3b").scrollIntoView()').then(function() {
expect(takeScreenshot(txt3b)).toLookAs("3b_fixed_width_in_px");
});
});

// styled
it("should vizualize styled text", function () {
var txt4 = element(by.id('text4'));
//next line is to move the view in the window
txt4.click();
expect(takeScreenshot(txt4)).toLookAs("4_styled");
browser.executeScript('document.getElementById("text4").scrollIntoView()').then(function() {
expect(takeScreenshot(txt4)).toLookAs("4_styled");
});
});

// align right
it("should vizualize right aligned text", function () {
var txt5 = element(by.id('text5'));
//next line is to move the view in the window
txt5.click();
expect(takeScreenshot(txt5)).toLookAs("5_align_right");
browser.executeScript('document.getElementById("text5").scrollIntoView()').then(function() {
expect(takeScreenshot(txt5)).toLookAs("5_align_right");
});
});

// align left
it("should vizualize left aligned text", function () {
var txt5a = element(by.id('text5a'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text5a").scrollIntoView()').then(function() {
expect(takeScreenshot(txt5a)).toLookAs("5a_align_left");
});
Expand All @@ -71,7 +72,6 @@ describe("sap.m.Text", function() {
// align end
it("should vizualize end aligned text", function () {
var txt5b = element(by.id('text5b'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text5b").scrollIntoView()').then(function() {
expect(takeScreenshot(txt5b)).toLookAs("5b_align_end");
});
Expand All @@ -80,7 +80,6 @@ describe("sap.m.Text", function() {
// align begin
it("should vizualize begin aligned text", function () {
var txt5c = element(by.id('text5c'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text5c").scrollIntoView()').then(function() {
expect(takeScreenshot(txt5c)).toLookAs("5c_align_begin");
});
Expand All @@ -89,7 +88,6 @@ describe("sap.m.Text", function() {
// align center
it("should vizualize center aligned text", function () {
var txt5d = element(by.id('text5d'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text5d").scrollIntoView()').then(function() {
expect(takeScreenshot(txt5d)).toLookAs("5d_align_center");
});
Expand All @@ -98,7 +96,6 @@ describe("sap.m.Text", function() {
// RTL (Right-to-left)
it("should vizualize text with RTL direction", function () {
var txt6 = element(by.id('text6'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text6").scrollIntoView()').then(function() {
expect(takeScreenshot(txt6)).toLookAs("6_RTL");
});
Expand All @@ -108,7 +105,6 @@ describe("sap.m.Text", function() {
// LTR (Left-to-right)
it("should vizualize text with LTR direction", function () {
var txt6a = element(by.id('text6a'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text6a").scrollIntoView()').then(function() {
expect(takeScreenshot(txt6a)).toLookAs("6a_LTR");
});
Expand All @@ -118,7 +114,6 @@ describe("sap.m.Text", function() {
// Direction Inherit
it("should vizualize text with direction inherit", function () {
var txt6b = element(by.id('text6b'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text6b").scrollIntoView()').then(function() {
expect(takeScreenshot(txt6b)).toLookAs("6b_Direction_Inherit");
});
Expand All @@ -127,7 +122,6 @@ describe("sap.m.Text", function() {
// line breaks
it("should vizualize text with line breaks", function () {
var txt7 = element(by.id('text7'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text7").scrollIntoView()').then(function() {
expect(takeScreenshot(txt7)).toLookAs("7_line_breaks");
});
Expand All @@ -137,7 +131,6 @@ describe("sap.m.Text", function() {
// max lines 3
it("should vizualize text in 3 lines", function () {
var txt9 = element(by.id('text9'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text9").scrollIntoView()').then(function() {
expect(takeScreenshot(txt9)).toLookAs("9_max_lines");
});
Expand All @@ -146,18 +139,32 @@ describe("sap.m.Text", function() {
// RTL + max lines 2
it("should vizualize text in RTL and in 2 lines", function () {
var txt10 = element(by.id('text10'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text10").scrollIntoView()').then(function() {
expect(takeScreenshot(txt10)).toLookAs("10_RTL_max_lines");
});
});

// Text with different line breaks
it("should vizualize text with different line breaks", function () {
var txt11 = element(by.id('text11'));
browser.executeScript('document.getElementById("text11").scrollIntoView()').then(function() {
expect(takeScreenshot(txt11)).toLookAs("11_different_line_breaks");
});
});

// Text with rendered white spaces
it("should vizualize text with preserved white spaces and tabs", function () {
var txt12 = element(by.id('text12'));
//next line is to move the view in the window
browser.executeScript('document.getElementById("text12").scrollIntoView()').then(function() {
expect(takeScreenshot(txt12)).toLookAs("12_preserve_white_spaces_and_tabs");
});
});

// Text with escaped characters
it("should vizualize text with escaped characters", function () {
var txt13 = element(by.id('text13'));
browser.executeScript('document.getElementById("text13").scrollIntoView()').then(function() {
expect(takeScreenshot(txt13)).toLookAs("13_escaped_characters");
});
});
});

0 comments on commit 991460d

Please sign in to comment.