Skip to content

Commit a926402

Browse files
nnaydenownnaydenow
committed
chore: improve test pages
1 parent 4c48618 commit a926402

2 files changed

Lines changed: 104 additions & 42 deletions

File tree

‎packages/base/test/pages/ThemeRoot.html‎

Lines changed: 52 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,76 +7,107 @@
77

88
<script src="../../bundle.esm.js" type="module"></script>
99

10+
<style>
11+
.result { margin-left: 8px; font-weight: bold; }
12+
.result.allowed { color: green; }
13+
.result.blocked { color: red; }
14+
</style>
1015
</head>
1116

1217
<body>
1318
<h1>Without meta tag</h1>
19+
<a href="./ThemeRoot.html">Reset URL</a>
1420
<ul>
1521
<li>❌ <a
1622
href="?sap-ui-theme=sap_horizon@http://example2.com/themes/">?sap-ui-theme=sap_horizon@http://example2.com/themes/</a>
1723
<br /> http://example2.com/ — no meta tag present, blocked
24+
<br /> <button onclick="testSetThemeRoot('http://example2.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
1825
</li>
1926
<li>❌ <a
2027
href="?sap-ui-theme=sap_horizon@https://example.com/themes/">?sap-ui-theme=sap_horizon@https://example.com/themes/</a>
2128
<br /> https://example.com/ — no meta tag present, blocked
29+
<br /> <button onclick="testSetThemeRoot('https://example.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
2230
</li>
2331
<li>❌ <a
2432
href="?sap-ui-theme=sap_horizon@http://example:9090.com/themes/">?sap-ui-theme=sap_horizon@http://example:9090.com/themes/</a>
2533
<br /> http://example:9090.com/ — no meta tag present, blocked
34+
<br /> <button onclick="testSetThemeRoot('http://example:9090.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
2635
</li>
2736
<li>❌ <a
2837
href="?sap-ui-theme=sap_horizon@http://example.com/themes/">?sap-ui-theme=sap_horizon@http://example.com/themes/</a>
2938
<br /> http://example.com/ — no meta tag present, blocked
39+
<br /> <button onclick="testSetThemeRoot('http://example.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
3040
</li>
3141
<li>❌ <a
3242
href="?sap-ui-theme=sap_horizon@//example2.com/themes/">?sap-ui-theme=sap_horizon@//example2.com/themes/</a>
3343
<br /> //example2.com/ — inherits current page protocol (e.g. http://example2.com/) — no meta tag present, blocked
44+
<br /> <button onclick="testSetThemeRoot('//example2.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
3445
</li>
3546
<li>❌ <a
3647
href="?sap-ui-theme=sap_horizon@//example:9090.com/themes/">?sap-ui-theme=sap_horizon@//example:9090.com/themes/</a>
3748
<br /> //example:9090.com/ — inherits current page protocol (e.g. http://example:9090.com/) — no meta tag present, blocked
49+
<br /> <button onclick="testSetThemeRoot('//example:9090.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
3850
</li>
3951
<li>❌ <a
4052
href="?sap-ui-theme=sap_horizon@//example.com/themes/">?sap-ui-theme=sap_horizon@//example.com/themes/</a>
4153
<br /> //example.com/ — inherits current page protocol (e.g. http://example.com/) — no meta tag present, blocked
54+
<br /> <button onclick="testSetThemeRoot('//example.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
4255
</li>
4356
<li>✅ <a href="?sap-ui-theme=sap_horizon@/themes/">?sap-ui-theme=sap_horizon@/themes/</a><br /> /themes/
4457
<br /> (resolves to the current page's origin, e.g. http://localhost:8080/themes/) <br /> Same-origin — expected link element
58+
<br /> <button onclick="testSetThemeRoot('/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
4559
</li>
4660
<li>✅ <a href="?sap-ui-theme=sap_horizon@./themes/">?sap-ui-theme=sap_horizon@./themes/</a><br /> ./themes/
4761
<br /> (resolves relative to the current page's URL, e.g. http://localhost:8080/test/pages/themes/) <br /> Same-origin — expected link element
62+
<br /> <button onclick="testSetThemeRoot('./themes/', this)">Test setThemeRoot</button> <span class="result"></span>
4863
</li>
4964
<li>✅ <a href="?sap-ui-theme=sap_horizon@../themes/">?sap-ui-theme=sap_horizon@../themes/</a><br /> ../themes/
5065
<br /> (resolves relative to the current page's URL, e.g. http://localhost:8080/test/themes/) <br /> Same-origin — expected link element
66+
<br /> <button onclick="testSetThemeRoot('../themes/', this)">Test setThemeRoot</button> <span class="result"></span>
5167
</li>
5268
</ul>
53-
<script>
54-
setTimeout(async () => {
55-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("http://example2.com/themes/") // ❌ no meta tag present, blocked
56-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("https://example.com/themes/") // ❌ no meta tag present, blocked
57-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("http://example:9090.com/themes/") // ❌ no meta tag present, blocked
58-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("http://example.com/themes/") // ❌ no meta tag present, blocked
59-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("//example2.com/themes/") // ❌ inherits current page protocol (e.g. http://example2.com/) — no meta tag present, blocked
60-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("//example:9090.com/themes/") // ❌ inherits current page protocol (e.g. http://example:9090.com/) — no meta tag present, blocked
61-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("//example.com/themes/") // ❌ inherits current page protocol (e.g. http://example.com/) — no meta tag present, blocked
62-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("/themes") // ✅ resolves to current page's origin — same-origin, no meta tag present, blocked
63-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("./themes") // ✅ resolves relative to current page's URL — same-origin, no meta tag present, blocked
64-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("../themes") // ✅ resolves relative to current page's URL — same-origin, no meta tag present, blocked
69+
<script type="module">
70+
const bundle = window["sap-ui-webcomponents-bundle"];
6571

66-
if (window.location.search.includes("sap-ui-theme")) {
67-
await window["sap-ui-webcomponents-bundle"].boot();
72+
if (window.location.search.includes("sap-ui-theme")) {
73+
await bundle.boot();
74+
const link = document.head.querySelector('link[sap-ui-webcomponents-theme]');
75+
if (link) {
76+
alert(`✅ Link created: ${link.href}`);
77+
} else {
78+
alert("❌ Blocked — no link element created");
6879
}
80+
}
6981

70-
const links = document.head.querySelectorAll('link');
71-
72-
console.log(links)
82+
window.testSetThemeRoot = async (themeRoot, btn) => {
83+
if (window.location.search.includes("sap-ui-theme")) {
84+
alert("Please remove the 'sap-ui-theme' URL parameter before testing setThemeRoot.");
85+
return;
86+
}
7387

74-
if (links.length) {
75-
alert(`Link tag(s) exist: ${[...links].map((link) => link.href).join(', ')}`);
88+
const resultEl = btn.nextElementSibling;
89+
await bundle.configuration.setThemeRoot(themeRoot);
90+
const link = document.head.querySelector('link[sap-ui-webcomponents-theme]');
91+
if (link) {
92+
resultEl.textContent = `✅ Link created: ${link.href}`;
93+
resultEl.className = "result allowed";
94+
} else {
95+
resultEl.textContent = "❌ Blocked — no link element created";
96+
resultEl.className = "result blocked";
7697
}
98+
};
7799

78-
}, 1000)
100+
// ❌ await bundle.configuration.setThemeRoot("http://example2.com/themes/") // no meta tag present, blocked
101+
// ❌ await bundle.configuration.setThemeRoot("https://example.com/themes/") // no meta tag present, blocked
102+
// ❌ await bundle.configuration.setThemeRoot("http://example:9090.com/themes/") // no meta tag present, blocked
103+
// ❌ await bundle.configuration.setThemeRoot("http://example.com/themes/") // no meta tag present, blocked
104+
// ❌ await bundle.configuration.setThemeRoot("//example2.com/themes/") // inherits current page protocol (e.g. http://example2.com/) — no meta tag present, blocked
105+
// ❌ await bundle.configuration.setThemeRoot("//example:9090.com/themes/") // inherits current page protocol (e.g. http://example:9090.com/) — no meta tag present, blocked
106+
// ❌ await bundle.configuration.setThemeRoot("//example.com/themes/") // inherits current page protocol (e.g. http://example.com/) — no meta tag present, blocked
107+
// ✅ await bundle.configuration.setThemeRoot("/themes/") // resolves to current page's origin — same-origin, no meta tag present, blocked
108+
// ✅ await bundle.configuration.setThemeRoot("./themes/") // resolves relative to current page's URL — same-origin, no meta tag present, blocked
109+
// ✅ await bundle.configuration.setThemeRoot("../themes/") // resolves relative to current page's URL — same-origin, no meta tag present, blocked
79110
</script>
80111
</body>
81112

82-
</html>
113+
</html>

‎packages/base/test/pages/ThemeRoot2.html‎

Lines changed: 52 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,77 +8,108 @@
88

99
<script src="../../bundle.esm.js" type="module"></script>
1010

11+
<style>
12+
.result { margin-left: 8px; font-weight: bold; }
13+
.result.allowed { color: green; }
14+
.result.blocked { color: red; }
15+
</style>
1116
</head>
1217

1318
<body>
1419
<h1>With meta tag</h1>
20+
<a href="./ThemeRoot2.html">Reset URL</a>
1521
<p>Following page is using the meta tag <code>sap-allowed-theme-origins</code> to specify allowed theme origins with <code>http://example.com</code> as the allowed origin.</p>
1622
<ul>
1723
<li>❌ <a
1824
href="?sap-ui-theme=sap_horizon@http://example2.com/themes/">?sap-ui-theme=sap_horizon@http://example2.com/themes/</a>
1925
<br /> http://example2.com/ vs http://example.com/ — different origin, blocked
26+
<br /> <button onclick="testSetThemeRoot('http://example2.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
2027
</li>
2128
<li>❌ <a
2229
href="?sap-ui-theme=sap_horizon@https://example.com/themes/">?sap-ui-theme=sap_horizon@https://example.com/themes/</a>
2330
<br /> https://example.com/ vs http://example.com/ — different protocol, blocked
31+
<br /> <button onclick="testSetThemeRoot('https://example.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
2432
</li>
2533
<li>❌ <a
2634
href="?sap-ui-theme=sap_horizon@http://example:9090.com/themes/">?sap-ui-theme=sap_horizon@http://example:9090.com/themes/</a>
2735
<br /> http://example:9090.com/ vs http://example.com/ — different port, blocked
36+
<br /> <button onclick="testSetThemeRoot('http://example:9090.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
2837
</li>
2938
<li>✅ <a
3039
href="?sap-ui-theme=sap_horizon@http://example.com/themes/">?sap-ui-theme=sap_horizon@http://example.com/themes/</a>
3140
<br /> http://example.com/ vs http://example.com/ — matches allowed origin. <br /> Expected link element
41+
<br /> <button onclick="testSetThemeRoot('http://example.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
3242
</li>
3343
<li>❌ <a
3444
href="?sap-ui-theme=sap_horizon@//example2.com/themes/">?sap-ui-theme=sap_horizon@//example2.com/themes/</a>
3545
<br /> //example2.com/ — inherits current page protocol (e.g. http://example2.com/) vs http://example.com/ — different origin, blocked
46+
<br /> <button onclick="testSetThemeRoot('//example2.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
3647
</li>
3748
<li>❌ <a
3849
href="?sap-ui-theme=sap_horizon@//example:9090.com/themes/">?sap-ui-theme=sap_horizon@//example:9090.com/themes/</a>
3950
<br /> //example:9090.com/ — inherits current page protocol (e.g. http://example:9090.com/) vs http://example.com/ — different port, blocked
51+
<br /> <button onclick="testSetThemeRoot('//example:9090.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
4052
</li>
4153
<li>✅ <a
4254
href="?sap-ui-theme=sap_horizon@//example.com/themes/">?sap-ui-theme=sap_horizon@//example.com/themes/</a>
4355
<br /> //example.com/ — inherits current page protocol (e.g. http://example.com/) vs http://example.com/ — matches allowed origin. <br /> Expected link element
56+
<br /> <button onclick="testSetThemeRoot('//example.com/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
4457
</li>
4558
<li>✅ <a href="?sap-ui-theme=sap_horizon@/themes/">?sap-ui-theme=sap_horizon@/themes/</a><br /> /themes/
4659
<br /> (resolves to the current page's origin, e.g. http://localhost:8080/themes/) <br /> Same-origin — expected link element
60+
<br /> <button onclick="testSetThemeRoot('/themes/', this)">Test setThemeRoot</button> <span class="result"></span>
4761
</li>
4862
<li>✅ <a href="?sap-ui-theme=sap_horizon@./themes/">?sap-ui-theme=sap_horizon@./themes/</a><br /> ./themes/
4963
<br /> (resolves relative to the current page's URL, e.g. http://localhost:8080/test/pages/themes/) <br /> Same-origin — expected link element
64+
<br /> <button onclick="testSetThemeRoot('./themes/', this)">Test setThemeRoot</button> <span class="result"></span>
5065
</li>
5166
<li>✅ <a href="?sap-ui-theme=sap_horizon@../themes/">?sap-ui-theme=sap_horizon@../themes/</a><br /> ../themes/
5267
<br /> (resolves relative to the current page's URL, e.g. http://localhost:8080/test/themes/) <br /> Same-origin — expected link element
68+
<br /> <button onclick="testSetThemeRoot('../themes/', this)">Test setThemeRoot</button> <span class="result"></span>
5369
</li>
5470
</ul>
55-
<script>
56-
setTimeout(async () => {
57-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("http://example2.com/themes/") // ❌ different origin, blocked
58-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("https://example.com/themes/") // ❌ different protocol, blocked
59-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("http://example:9090.com/themes/") // ❌ different port, blocked
60-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("http://example.com/themes/") // ✅ matches allowed origin — expected link element
61-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("//example2.com/themes/") // ❌ inherits current page protocol (e.g. http://example2.com/) — different origin, blocked
62-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("//example:9090.com/themes/") // ❌ inherits current page protocol (e.g. http://example:9090.com/) — different port, blocked
63-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("//example.com/themes/") // ✅ inherits current page protocol (e.g. http://example.com/) — matches allowed origin — expected link element
64-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("/themes") // ✅ resolves to current page's origin — same-origin — expected link element
65-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("./themes") // ✅ resolves relative to current page's URL — same-origin — expected link element
66-
// await window["sap-ui-webcomponents-bundle"].configuration.setThemeRoot("../themes") // ✅ resolves relative to current page's URL — same-origin — expected link element
71+
<script type="module">
72+
const bundle = window["sap-ui-webcomponents-bundle"];
6773

68-
if (window.location.search.includes("sap-ui-theme")) {
69-
await window["sap-ui-webcomponents-bundle"].boot();
74+
if (window.location.search.includes("sap-ui-theme")) {
75+
await bundle.boot();
76+
const link = document.head.querySelector('link[sap-ui-webcomponents-theme]');
77+
if (link) {
78+
alert(`✅ Link created: ${link.href}`);
79+
} else {
80+
alert("❌ Blocked — no link element created");
7081
}
82+
}
7183

72-
const links = document.head.querySelectorAll('link');
73-
74-
console.log(links)
84+
window.testSetThemeRoot = async (themeRoot, btn) => {
85+
if (window.location.search.includes("sap-ui-theme")) {
86+
alert("Please remove the 'sap-ui-theme' URL parameter before testing setThemeRoot.");
87+
return;
88+
}
7589

76-
if (links.length) {
77-
alert(`Link tag(s) exist: ${[...links].map((link) => link.href).join(', ')}`);
90+
const resultEl = btn.nextElementSibling;
91+
await bundle.configuration.setThemeRoot(themeRoot);
92+
const link = document.head.querySelector('link[sap-ui-webcomponents-theme]');
93+
if (link) {
94+
resultEl.textContent = `✅ Link created: ${link.href}`;
95+
resultEl.className = "result allowed";
96+
} else {
97+
resultEl.textContent = "❌ Blocked — no link element created";
98+
resultEl.className = "result blocked";
7899
}
100+
};
79101

80-
}, 1000)
102+
// ❌ await bundle.configuration.setThemeRoot("http://example2.com/themes/") // different origin, blocked
103+
// ❌ await bundle.configuration.setThemeRoot("https://example.com/themes/") // different protocol, blocked
104+
// ❌ await bundle.configuration.setThemeRoot("http://example:9090.com/themes/") // different port, blocked
105+
// ✅ await bundle.configuration.setThemeRoot("http://example.com/themes/") // matches allowed origin — expected link element
106+
// ❌ await bundle.configuration.setThemeRoot("//example2.com/themes/") // inherits current page protocol (e.g. http://example2.com/) — different origin, blocked
107+
// ❌ await bundle.configuration.setThemeRoot("//example:9090.com/themes/") // inherits current page protocol (e.g. http://example:9090.com/) — different port, blocked
108+
// ✅ await bundle.configuration.setThemeRoot("//example.com/themes/") // inherits current page protocol (e.g. http://example.com/) — matches allowed origin — expected link element
109+
// ✅ await bundle.configuration.setThemeRoot("/themes/") // resolves to current page's origin — same-origin — expected link element
110+
// ✅ await bundle.configuration.setThemeRoot("./themes/") // resolves relative to current page's URL — same-origin — expected link element
111+
// ✅ await bundle.configuration.setThemeRoot("../themes/") // resolves relative to current page's URL — same-origin — expected link element
81112
</script>
82113
</body>
83114

84-
</html>
115+
</html>

0 commit comments

Comments
 (0)