Skip to content

Commit 213da79

Browse files
tcannonfoddertcannonfodder
committed
Add fieldset/rendering utility functions & tests
1 parent 6032dd9 commit 213da79

File tree

4 files changed

+233
-2
lines changed

4 files changed

+233
-2
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"./rendering": "./src/rendering.js",
1313
"./request-processing": "./src/request-processing.js",
1414
"./plugins/mrujs": "./src/plugins/mrujs.js",
15-
"./utils": "./src/util.js"
15+
"./utils": "./src/util.js",
16+
"./fieldset/rendering": "./src/fieldset/rendering.js"
1617
},
1718
"scripts": {
1819
"start": "web-dev-server --open demo/ --node-resolve",

‎src/fieldset/rendering.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {
2+
hasErrorContainer,
3+
getErrorList,
4+
hasPreservedErrorForType,
5+
} from '../error-containers.js'
6+
7+
import {
8+
errorMessageListItem,
9+
clearErrorList,
10+
markErrorTypeAsVisible,
11+
} from '../rendering.js'
12+
13+
14+
/**
15+
* calls {@link clearErrorList } for the given `fieldset`.
16+
17+
* @param {FieldsetElement} fieldset
18+
*/
19+
export function clearErrorListForFieldset(fieldset) {
20+
if(!hasErrorContainer(fieldset)){ return }
21+
22+
const errorListElement = getErrorList(fieldset)
23+
24+
clearErrorList(errorListElement)
25+
}
26+
27+
/**
28+
* Renders the given custom message + type pair for the given fieldset
29+
* calls {@link clearErrorList } for the given `fieldset`
30+
*
31+
* replaces the error list to include that message (marked as `data-visible`) and any `preserved` errors
32+
*
33+
* @param {FieldsetElement} fieldset
34+
*/
35+
export function renderCustomErrorMessageForFieldset(fieldset, message, type) {
36+
clearErrorListForFieldset(fieldset)
37+
38+
const errorListElement = getErrorList(fieldset)
39+
40+
if(!hasPreservedErrorForType(errorListElement, type)){
41+
let listItem = errorMessageListItem(message, type)
42+
errorListElement.append(listItem)
43+
}
44+
45+
markErrorTypeAsVisible(errorListElement, type)
46+
}

‎test/fieldset/rendering.test.js‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import { html, fixture, assert } from '@open-wc/testing';
2+
3+
import * as FieldsetRendering from '@practical-computer/error-handling/fieldset/rendering';
4+
5+
suite('Fieldset Rendering', async () => {
6+
test(`clearErrorListForFieldset: Removes all errors from the fieldset's error container`, async () => {
7+
const container = await fixture(html`
8+
<div>
9+
<fieldset aria-describedby="terms-fieldset-errors">
10+
<input type="checkbox" name="privacy" required>
11+
<input type="checkbox" name="service" required>
12+
13+
<section id="terms-fieldset-errors" data-error-container>
14+
<ul>
15+
<li data-visible data-error-type="error_1">An ad-hoc error from the initial load</li>
16+
<li data-visible data-error-type="error_2">Another ad-hoc error from the initial load</li>
17+
</ul>
18+
</section>
19+
</fieldset>
20+
21+
<template id="pf-error-list-item-template">
22+
<li><span>‼️</span> <span data-error-message></span></li>
23+
</template>
24+
</div>
25+
`);
26+
27+
assert.equal(2, document.querySelectorAll(`#terms-fieldset-errors li`).length)
28+
29+
const fieldset = container.querySelector(`fieldset`)
30+
31+
FieldsetRendering.clearErrorListForFieldset(fieldset)
32+
33+
assert.equal(0, document.querySelectorAll(`#terms-fieldset-errors li`).length)
34+
})
35+
36+
test(`clearErrorListForFieldset: keeps the given preserved message, removing the data-visible attribute`, async () => {
37+
const container = await fixture(html`
38+
<div>
39+
<fieldset aria-describedby="terms-fieldset-errors">
40+
<input type="checkbox" name="privacy" required>
41+
<input type="checkbox" name="service" required>
42+
43+
<section id="terms-fieldset-errors" data-error-container>
44+
<ul>
45+
<li data-preserve data-error-type="required">The preserved message</li>
46+
<li data-visible data-error-type="error_1">An ad-hoc error from the initial load</li>
47+
<li data-visible data-error-type="error_2">Another ad-hoc error from the initial load</li>
48+
</ul>
49+
</section>
50+
</fieldset>
51+
52+
<template id="pf-error-list-item-template">
53+
<li><span>‼️</span> <span data-error-message></span></li>
54+
</template>
55+
</div>
56+
`);
57+
58+
assert.equal(3, document.querySelectorAll(`#terms-fieldset-errors li`).length)
59+
60+
const fieldset = container.querySelector(`fieldset`)
61+
62+
FieldsetRendering.clearErrorListForFieldset(fieldset)
63+
64+
assert.equal(1, document.querySelectorAll(`#terms-fieldset-errors li`).length)
65+
66+
const errorElement = document.querySelector(`#terms-fieldset-errors li[data-error-type="required"]`)
67+
68+
assert.equal(false, errorElement.hasAttribute(`data-visible`))
69+
assert.equal(true, errorElement.hasAttribute(`data-preserve`))
70+
assert.equal("The preserved message", errorElement.textContent)
71+
})
72+
73+
test(`renderCustomErrorMessageForFieldset: ad-hoc messages initially loaded are cleared out`, async () => {
74+
const container = await fixture(html`
75+
<div>
76+
<fieldset aria-describedby="terms-fieldset-errors">
77+
<input type="checkbox" name="privacy" required>
78+
<input type="checkbox" name="service" required>
79+
80+
<section id="terms-fieldset-errors" data-error-container>
81+
<ul>
82+
<li data-visible data-error-type="error_1">An ad-hoc error from the initial load</li>
83+
<li data-visible data-error-type="error_2">Another ad-hoc error from the initial load</li>
84+
</ul>
85+
</section>
86+
</fieldset>
87+
88+
<template id="pf-error-list-item-template">
89+
<li><span>‼️</span> <span data-error-message></span></li>
90+
</template>
91+
</div>
92+
`);
93+
94+
assert.equal(2, document.querySelectorAll(`#terms-fieldset-errors li`).length)
95+
96+
const fieldset = container.querySelector(`fieldset`)
97+
98+
const message = "Please accept all terms"
99+
const type = "required"
100+
101+
FieldsetRendering.renderCustomErrorMessageForFieldset(fieldset, message, type)
102+
103+
assert.equal(1, document.querySelectorAll(`#terms-fieldset-errors li`).length)
104+
105+
const errorElement = document.querySelector(`#terms-fieldset-errors li[data-visible][data-error-type="required"]`)
106+
107+
assert.isNotNull(errorElement)
108+
assert.equal("‼️ Please accept all terms", errorElement.textContent)
109+
})
110+
111+
test(`renderCustomErrorMessageForFieldset: empty error list`, async () => {
112+
const container = await fixture(html`
113+
<div>
114+
<fieldset aria-describedby="terms-fieldset-errors">
115+
<input type="checkbox" name="privacy" required>
116+
<input type="checkbox" name="service" required>
117+
118+
<section id="terms-fieldset-errors" data-error-container>
119+
<ul></ul>
120+
</section>
121+
</fieldset>
122+
123+
<template id="pf-error-list-item-template">
124+
<li><span>‼️</span> <span data-error-message></span></li>
125+
</template>
126+
</div>
127+
`);
128+
129+
assert.equal(0, document.querySelectorAll(`#terms-fieldset-errors li`).length)
130+
131+
const fieldset = container.querySelector(`fieldset`)
132+
133+
const message = "Please accept all terms"
134+
const type = "required"
135+
136+
FieldsetRendering.renderCustomErrorMessageForFieldset(fieldset, message, type)
137+
138+
assert.equal(1, document.querySelectorAll(`#terms-fieldset-errors li`).length)
139+
140+
const errorElement = document.querySelector(`#terms-fieldset-errors li[data-visible][data-error-type="required"]`)
141+
142+
assert.isNotNull(errorElement)
143+
assert.equal("‼️ Please accept all terms", errorElement.textContent)
144+
})
145+
146+
test(`renderCustomErrorMessageForFieldset: uses the given preserved message`, async () => {
147+
const container = await fixture(html`
148+
<div>
149+
<fieldset aria-describedby="terms-fieldset-errors">
150+
<input type="checkbox" name="privacy" required>
151+
<input type="checkbox" name="service" required>
152+
153+
<section id="terms-fieldset-errors" data-error-container>
154+
<ul>
155+
<li data-preserve data-error-type="required">The preserved message</li>
156+
<li data-visible data-error-type="error_2">Another ad-hoc error from the initial load</li>
157+
</ul>
158+
</section>
159+
</fieldset>
160+
161+
<template id="pf-error-list-item-template">
162+
<li><span>‼️</span> <span data-error-message></span></li>
163+
</template>
164+
</div>
165+
`);
166+
167+
assert.equal(2, document.querySelectorAll(`#terms-fieldset-errors li`).length)
168+
169+
const fieldset = container.querySelector(`fieldset`)
170+
171+
const message = "Please accept all terms"
172+
const type = "required"
173+
174+
FieldsetRendering.renderCustomErrorMessageForFieldset(fieldset, message, type)
175+
176+
assert.equal(1, document.querySelectorAll(`#terms-fieldset-errors li`).length)
177+
178+
const errorElement = document.querySelector(`#terms-fieldset-errors li[data-visible][data-error-type="required"]`)
179+
180+
assert.isNotNull(errorElement)
181+
assert.equal("The preserved message", errorElement.textContent)
182+
})
183+
})

‎test/test-runner.test.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ import './util.test.js';
77
import './error-mapping.test.js';
88
import './request-processing.test.js';
99
import './event-handlers.test.js';
10-
import './plugins/mrujs.test.js';
10+
import './plugins/mrujs.test.js';
11+
import './fieldset/rendering.test.js';

0 commit comments

Comments
 (0)