Skip to content

Commit d00da0f

Browse files
michielbdejongmichielbdejong
committed
1 parent 001ed33 commit d00da0f

5 files changed

Lines changed: 85 additions & 16 deletions

File tree

‎examples/error/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<meta charset='UTF-8'>
5+
<title>solid-ui UI.widgets.error examples page</title>
6+
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
7+
<script>
8+
function showSource(widgetName) {
9+
const scriptText = document.getElementById(`script-${widgetName}`).innerText
10+
.replace(/&/g, "&amp;")
11+
.replace(/</g, "&lt;")
12+
.replace(/>/g, "&gt;")
13+
.replace(/"/g, "&quot;")
14+
.replace(/'/g, "&#039;")
15+
document.getElementById(`viewSource-${widgetName}`).innerHTML = scriptText
16+
}
17+
</script>
18+
</head>
19+
<body>
20+
<h2 id="errorMessageBlock"><a href="#errorMessageBlock">errorMessageBlock</a></h2>
21+
<script id="script-errorMessageBlock">
22+
window.addEventListener('DOMContentLoaded', (event) => {
23+
const result = UI.widgets.errorMessageBlock(document, 'my error message', '#f0f')
24+
document.getElementById('div-errorMessageBlock').appendChild(result)
25+
})
26+
</script>
27+
<pre id="viewSource-errorMessageBlock"></pre><script>showSource('errorMessageBlock')</script>
28+
<div id="div-errorMessageBlock"></div>
29+
</body>
30+
</html>

‎src/widgets/error.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/widgets/error.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Create an error message block
3+
* @param dom The DOM on which dom.createElement will be called
4+
* @param msg The error message string to display
5+
* @param backgroundColor Background color. Default: '#fee'
6+
* @returns A div element with the msg string
7+
*/
8+
export function errorMessageBlock (dom: HTMLDocument, msg: string, backgroundColor?: string): HTMLDivElement {
9+
var div = dom.createElement('div')
10+
div.setAttribute(
11+
'style',
12+
'margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; background-color: ' +
13+
(backgroundColor || '#fee') +
14+
'; color:black;'
15+
)
16+
div.textContent = msg
17+
return div
18+
}

‎test/unit/widgets/__snapshots__/error.test.ts.snap‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`errorMessageBlock creates an error message div 1`] = `
4+
<div
5+
style="margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; background-color: #fee; color:black;"
6+
>
7+
my error message
8+
</div>
9+
`;
10+
11+
exports[`errorMessageBlock escapes the HTML 1`] = `
12+
<div
13+
style="margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; background-color: #fee; color:black;"
14+
>
15+
my &lt;script&gt; kiddie &lt;/script&gt; message
16+
</div>
17+
`;
18+
19+
exports[`errorMessageBlock sets the background color 1`] = `
20+
<div
21+
style="margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; background-color: #0ff; color:black;"
22+
>
23+
my colored message
24+
</div>
25+
`;

‎test/unit/widgets/error.test.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,20 @@ import { errorMessageBlock } from '../../../src/widgets/error'
55
jest.mock('solid-auth-client')
66
const dom = new JSDOM('<!DOCTYPE html><p>Hello world</p>').window.document
77

8-
describe('button', () => {
8+
describe('errorMessageBlock', () => {
99
it('exists', () => {
1010
expect(errorMessageBlock).toBeInstanceOf(Function)
1111
})
12-
it('runs', () => {
13-
expect(errorMessageBlock(dom, '', undefined)).toBeTruthy()
12+
it('creates an error message div', () => {
13+
expect(errorMessageBlock(dom, 'my error message')).toMatchSnapshot()
14+
})
15+
it('escapes the HTML', () => {
16+
const result = errorMessageBlock(dom, 'my <script> kiddie </script> message')
17+
expect(result).toMatchSnapshot()
18+
expect(result.innerHTML.indexOf('<script>')).toEqual(-1)
19+
expect(result.innerHTML.indexOf('&lt;script&gt;')).toEqual(3)
20+
})
21+
it('sets the background color', () => {
22+
expect(errorMessageBlock(dom, 'my colored message', '#0ff')).toMatchSnapshot()
1423
})
1524
})

0 commit comments

Comments
 (0)