Skip to content

Commit 2613b11

Browse files
matz3matz3
committed
[INTERNAL] Extract addInlineParameters from index.js
Reducing the monolithic index.js script to improve testability of individual functionalities rather then just testing the whole build based on input/output.
1 parent fe84fb0 commit 2613b11

File tree

4 files changed

+197
-31
lines changed

4 files changed

+197
-31
lines changed

‎lib/index.js

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const scope = require("./scope");
1010

1111
const fileUtilsFactory = require("./fileUtils");
1212

13+
const themingParametersDataUri = require("./themingParameters/dataUri");
14+
1315
// Plugins
1416
const ImportCollectorPlugin = require("./plugin/import-collector");
1517
const VariableCollectorPlugin = require("./plugin/variable-collector");
@@ -311,35 +313,7 @@ Builder.prototype.build = function(options) {
311313
}
312314

313315
async function addInlineParameters(result) {
314-
// Inline parameters can only be added when the library name is known
315-
if (typeof options.library !== "object" || typeof options.library.name !== "string") {
316-
return result;
317-
}
318-
319-
const parameters = JSON.stringify(result.variables);
320-
321-
// properly escape the parameters to be part of a data-uri
322-
// + escaping single quote (') as it is used to surround the data-uri: url('...')
323-
const escapedParameters = encodeURIComponent(parameters).replace(/'/g, function(char) {
324-
return escape(char);
325-
});
326-
327-
// embed parameter variables as plain-text string into css
328-
const parameterStyleRule = "\n/* Inline theming parameters */\n#sap-ui-theme-" +
329-
options.library.name.replace(/\./g, "\\.") +
330-
"{background-image:url('data:text/plain;utf-8," + escapedParameters + "')}\n";
331-
332-
// embed parameter variables as plain-text string into css
333-
result.css += parameterStyleRule;
334-
if (options.rtl) {
335-
result.cssRtl += parameterStyleRule;
336-
}
337-
if (options.cssVariables) {
338-
// for the css variables build we just add it to the variables
339-
result.cssVariables += parameterStyleRule;
340-
}
341-
342-
return result;
316+
return themingParametersDataUri.addInlineParameters({result, options});
343317
}
344318

345319
function getScopeVariables(options) {

‎lib/themingParameters/dataUri.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
module.exports = {
2+
addInlineParameters: function({result, options}) {
3+
// Inline parameters can only be added when the library name is known
4+
if (typeof options.library !== "object" || typeof options.library.name !== "string") {
5+
return result;
6+
}
7+
8+
const parameters = JSON.stringify(result.variables);
9+
10+
// properly escape the parameters to be part of a data-uri
11+
// + escaping single quote (') as it is used to surround the data-uri: url('...')
12+
const escapedParameters = encodeURIComponent(parameters).replace(/'/g, function(char) {
13+
return escape(char);
14+
});
15+
16+
// embed parameter variables as plain-text string into css
17+
const parameterStyleRule = "\n/* Inline theming parameters */\n#sap-ui-theme-" +
18+
options.library.name.replace(/\./g, "\\.") +
19+
"{background-image:url('data:text/plain;utf-8," + escapedParameters + "')}\n";
20+
21+
// embed parameter variables as plain-text string into css
22+
result.css += parameterStyleRule;
23+
if (options.rtl) {
24+
result.cssRtl += parameterStyleRule;
25+
}
26+
if (options.cssVariables) {
27+
// for the css variables build we just add it to the variables
28+
result.cssVariables += parameterStyleRule;
29+
}
30+
31+
return result;
32+
}
33+
};

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
},
2424
"scripts": {
2525
"lint": "eslint ./",
26-
"unit": "mocha test/*.js",
27-
"unit-debug": "mocha --inspect --inspect-brk test/*.js",
26+
"unit": "mocha test/*.js test/lib/**/*.js",
27+
"unit-debug": "mocha --inspect --inspect-brk test/*.js test/lib/**/*.js",
2828
"coverage": "nyc npm run unit",
2929
"test": "npm run lint && npm run coverage && npm run depcheck",
3030
"preversion": "npm test",

‎test/lib/themingParameters/dataUri.js

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
/* eslint-env mocha */
2+
3+
const assert = require("assert");
4+
// const sinon = require("sinon");
5+
6+
// tested module
7+
const themingParametersDataUri = require("../../../lib/themingParameters/dataUri");
8+
9+
describe("themingParameters/dataUri", function() {
10+
it("should not add theming parameters when library name is missing", function() {
11+
const result = {};
12+
const options = {};
13+
const returnedResult = themingParametersDataUri.addInlineParameters({result, options});
14+
15+
assert.equal(returnedResult, result, "result object reference should be returned");
16+
assert.deepEqual(result, {}, "result object should not be modified");
17+
});
18+
19+
it("should add theming parameters to css", function() {
20+
const result = {
21+
css: "/* css */",
22+
variables: {foo: "bar"}
23+
};
24+
const options = {
25+
library: {
26+
name: "sap.ui.test"
27+
}
28+
};
29+
const returnedResult = themingParametersDataUri.addInlineParameters({result, options});
30+
31+
assert.equal(returnedResult, result, "result object reference should be returned");
32+
assert.deepEqual(result, {
33+
variables: {foo: "bar"},
34+
css: `/* css */
35+
/* Inline theming parameters */
36+
#sap-ui-theme-sap\\.ui\\.test{background-image:url('data:text/plain;utf-8,%7B%22foo%22%3A%22bar%22%7D')}
37+
`
38+
}, "result.css should be enhanced");
39+
});
40+
41+
it("should encode variables to be included as data-uri", function() {
42+
const result = {
43+
css: "/* css */",
44+
variables: {
45+
foo: "50%",
46+
bar: "'\"'"
47+
}
48+
};
49+
const options = {
50+
library: {
51+
name: "sap.ui.test"
52+
}
53+
};
54+
const returnedResult = themingParametersDataUri.addInlineParameters({result, options});
55+
56+
assert.equal(returnedResult, result, "result object reference should be returned");
57+
assert.deepEqual(result, {
58+
variables: {
59+
foo: "50%",
60+
bar: "'\"'"
61+
},
62+
css: `/* css */
63+
/* Inline theming parameters */
64+
#sap-ui-theme-sap\\.ui\\.test{background-image:url('\
65+
data:text/plain;utf-8,%7B%22foo%22%3A%2250%25%22%2C%22bar%22%3A%22%27%5C%22%27%22%7D')}
66+
`
67+
}, "result.css should be enhanced");
68+
});
69+
70+
it("should add theming parameters to cssRtl when options.rtl=true", function() {
71+
const result = {
72+
css: "/* css */",
73+
cssRtl: "/* cssRtl */",
74+
variables: {foo: "bar"}
75+
};
76+
const options = {
77+
library: {
78+
name: "sap.ui.test"
79+
},
80+
rtl: true
81+
};
82+
const returnedResult = themingParametersDataUri.addInlineParameters({result, options});
83+
84+
assert.equal(returnedResult, result, "result object reference should be returned");
85+
assert.deepEqual(result, {
86+
variables: {foo: "bar"},
87+
css: `/* css */
88+
/* Inline theming parameters */
89+
#sap-ui-theme-sap\\.ui\\.test{background-image:url('data:text/plain;utf-8,%7B%22foo%22%3A%22bar%22%7D')}
90+
`,
91+
cssRtl: `/* cssRtl */
92+
/* Inline theming parameters */
93+
#sap-ui-theme-sap\\.ui\\.test{background-image:url('data:text/plain;utf-8,%7B%22foo%22%3A%22bar%22%7D')}
94+
`
95+
}, "result.css should be enhanced");
96+
});
97+
98+
it("should add theming parameters to cssVariables when options.cssVariables=true", function() {
99+
const result = {
100+
css: "/* css */",
101+
cssVariables: "/* cssVariables */",
102+
variables: {foo: "bar"}
103+
};
104+
const options = {
105+
library: {
106+
name: "sap.ui.test"
107+
},
108+
cssVariables: true
109+
};
110+
const returnedResult = themingParametersDataUri.addInlineParameters({result, options});
111+
112+
assert.equal(returnedResult, result, "result object reference should be returned");
113+
assert.deepEqual(result, {
114+
variables: {foo: "bar"},
115+
css: `/* css */
116+
/* Inline theming parameters */
117+
#sap-ui-theme-sap\\.ui\\.test{background-image:url('data:text/plain;utf-8,%7B%22foo%22%3A%22bar%22%7D')}
118+
`,
119+
cssVariables: `/* cssVariables */
120+
/* Inline theming parameters */
121+
#sap-ui-theme-sap\\.ui\\.test{background-image:url('data:text/plain;utf-8,%7B%22foo%22%3A%22bar%22%7D')}
122+
`
123+
}, "result.css should be enhanced");
124+
});
125+
126+
it("should add theming parameters to cssRtl / cssVariables when options.rtl/cssVariables=true", function() {
127+
const result = {
128+
css: "/* css */",
129+
cssRtl: "/* cssRtl */",
130+
cssVariables: "/* cssVariables */",
131+
variables: {foo: "bar"}
132+
};
133+
const options = {
134+
library: {
135+
name: "sap.ui.test"
136+
},
137+
rtl: true,
138+
cssVariables: true
139+
};
140+
const returnedResult = themingParametersDataUri.addInlineParameters({result, options});
141+
142+
assert.equal(returnedResult, result, "result object reference should be returned");
143+
assert.deepEqual(result, {
144+
variables: {foo: "bar"},
145+
css: `/* css */
146+
/* Inline theming parameters */
147+
#sap-ui-theme-sap\\.ui\\.test{background-image:url('data:text/plain;utf-8,%7B%22foo%22%3A%22bar%22%7D')}
148+
`,
149+
cssRtl: `/* cssRtl */
150+
/* Inline theming parameters */
151+
#sap-ui-theme-sap\\.ui\\.test{background-image:url('data:text/plain;utf-8,%7B%22foo%22%3A%22bar%22%7D')}
152+
`,
153+
cssVariables: `/* cssVariables */
154+
/* Inline theming parameters */
155+
#sap-ui-theme-sap\\.ui\\.test{background-image:url('data:text/plain;utf-8,%7B%22foo%22%3A%22bar%22%7D')}
156+
`
157+
}, "result.css should be enhanced");
158+
});
159+
});

0 commit comments

Comments
 (0)