Skip to content

Commit 74af6db

Browse files
michielbdejongmichielbdejong
committed
Split out commentField
1 parent e48561e commit 74af6db

7 files changed

Lines changed: 237 additions & 36 deletions

File tree

‎examples/forms/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ <h2 id="fieldFunction"><a href="#fieldFunction">fieldFunction</a></h2>
6868
<pre id="viewSource-fieldFunction"></pre><script>showSource('fieldFunction')</script>
6969
<div id="div-fieldFunction"></div>
7070

71-
<h2 id="appendFormTrivial"><a href="#appendFormTrivial">appendForm, trivial</a></h2>
71+
<h2 id="appendFormTrivial"><a href="#appendFormTrivial">appendForm, trivial / Comment Field</a></h2>
72+
<p>This example shows a trivial use of the `appendForm` function, in conjunction with a Comment field.</p>
7273
<script id="script-appendFormTrivial">
7374
window.addEventListener('DOMContentLoaded', async (event) => {
7475
const dom = document

‎src/widgets/forms/comment.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import store from '../../store'
2+
import ns from '../../ns'
3+
import { mostSpecificClassURI } from '../forms'
4+
import { fieldParams } from './fieldParams'
5+
6+
/**
7+
* A [[FieldFunction]] for a simple comment box. It will look for
8+
* the first (form, ns.ui('contents'), ?) triple it can find in
9+
* UI.store and use the value of the object of that triple as
10+
* the comment text.
11+
*
12+
* @param dom The DOM
13+
* @param container If set, the result will be appended to it as a child
14+
* @param already Unused
15+
* @param subject Unused
16+
* @param form RDF node with `ns.ui('contents')` attribute
17+
* @param _doc Unused
18+
* @param _callbackFunction Unused
19+
*
20+
* @returns a DOM element containing the comment.
21+
*/
22+
export function commentField (
23+
dom: HTMLDocument,
24+
container: HTMLElement | undefined,
25+
already: any,
26+
subject: any,
27+
form,
28+
_doc,
29+
_callbackFunction
30+
) {
31+
const kb = store
32+
let contents = kb.any(form, ns.ui('contents'))
33+
if (!contents) contents = 'Error: No contents in comment field.'
34+
35+
const uri = mostSpecificClassURI(form)
36+
let params = fieldParams[uri]
37+
console.log(uri, params, Object.keys(fieldParams))
38+
if (params === undefined) {
39+
console.log('no params!')
40+
params = {}
41+
} else {
42+
console.log('yes params!')
43+
} // non-bottom field types can do this
44+
45+
const box = dom.createElement('div')
46+
if (container) container.appendChild(box)
47+
const p = box.appendChild(dom.createElement(params.element || 'p'))
48+
p.textContent = contents
49+
50+
let style = kb.any(form, ns.ui('style'))
51+
if (style === undefined) {
52+
style = params.style ? params.style : ''
53+
}
54+
if (style) p.setAttribute('style', style)
55+
56+
return box
57+
}

‎test/unit/helpers/clearStore.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import store from '../../../src/store'
22

33
export function clearStore () {
4-
store.statements.forEach(statement => store.remove(statement))
4+
// FIXME: https://github.com/solid/solid-ui/issues/265
5+
6+
while (store.statements.length) {
7+
console.log('Clearing store...')
8+
store.statements.forEach(store.remove.bind(store))
9+
}
510
}

‎test/unit/widgets/forms/__snapshots__/comment.test.ts.snap‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Comment deals with custom style 1`] = `
4+
<div>
5+
<p
6+
style="custom: true;"
7+
>
8+
&lt;http://example.com/#bla&gt;
9+
</p>
10+
</div>
11+
`;
12+
13+
exports[`Comment deals with missing container 1`] = `
14+
<div>
15+
<p
16+
style="padding: 0.1em 1.5em; color: #888888; white-space: pre-wrap;"
17+
>
18+
&lt;http://example.com/#bla&gt;
19+
</p>
20+
</div>
21+
`;
22+
23+
exports[`Comment deals with missing content 1`] = `
24+
<div>
25+
<p
26+
style="padding: 0.1em 1.5em; color: #888888; white-space: pre-wrap;"
27+
>
28+
Error: No contents in comment field.
29+
</p>
30+
</div>
31+
`;
32+
33+
exports[`Comment deals with missing field params in non-bottom field type 1`] = `
34+
<div>
35+
<p>
36+
&lt;http://example.com/#bla&gt;
37+
</p>
38+
</div>
39+
`;
40+
41+
exports[`Comment runs 1`] = `
42+
<div>
43+
<p
44+
style="padding: 0.1em 1.5em; color: #888888; white-space: pre-wrap;"
45+
>
46+
&lt;http://example.com/#bla&gt;
47+
</p>
48+
</div>
49+
`;

‎test/unit/widgets/forms/__snapshots__/index.test.ts.snap‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,6 @@ exports[`ColorField runs 1`] = `
4747
</tr>
4848
`;
4949

50-
exports[`Comment runs 1`] = `
51-
<div>
52-
<undefined>
53-
&lt;http://example.com/#bla&gt;
54-
</undefined>
55-
</div>
56-
`;
57-
5850
exports[`DateField runs 1`] = `
5951
<tr>
6052
<td

‎test/unit/widgets/forms/comment.test.ts‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { namedNode } from 'rdflib'
2+
import ns from '../../../../src/ns'
3+
import uiStore from '../../../../src/store'
4+
5+
import {
6+
commentField
7+
} from '../../../../src/widgets/forms/comment'
8+
import { clearStore } from '../../helpers/clearStore'
9+
10+
afterEach(clearStore)
11+
12+
describe('Comment', () => {
13+
14+
it('exists', () => {
15+
expect(commentField).toBeInstanceOf(Object)
16+
})
17+
it('runs', () => {
18+
const container = document.createElement('div')
19+
const already = {}
20+
const subject = namedNode('http://example.com/#this')
21+
const form = namedNode('http://example.com/#form')
22+
const store = namedNode('http://example.com/#store')
23+
const callbackFunction = jest.fn() // TODO: https://github.com/solid/solid-ui/issues/263
24+
uiStore.add(form, ns.rdf('type'), ns.ui('Comment'), namedNode('http://example.com/'))
25+
uiStore.add(form, ns.ui('contents'), namedNode('http://example.com/#bla'), namedNode('http://example.com/'))
26+
expect(
27+
commentField(
28+
document,
29+
container,
30+
already,
31+
subject,
32+
form,
33+
store,
34+
callbackFunction
35+
)
36+
).toMatchSnapshot()
37+
})
38+
it('deals with missing content', () => {
39+
const container = document.createElement('div')
40+
const already = {}
41+
const subject = namedNode('http://example.com/#this')
42+
const form = namedNode('http://example.com/#form')
43+
const store = namedNode('http://example.com/#store')
44+
const callbackFunction = jest.fn() // TODO: https://github.com/solid/solid-ui/issues/263
45+
uiStore.add(form, ns.rdf('type'), ns.ui('Comment'), namedNode('http://example.com/'))
46+
expect(
47+
commentField(
48+
document,
49+
container,
50+
already,
51+
subject,
52+
form,
53+
store,
54+
callbackFunction
55+
)
56+
).toMatchSnapshot()
57+
})
58+
it('deals with missing field params in non-bottom field type', () => {
59+
const container = document.createElement('div')
60+
const already = {}
61+
const subject = namedNode('http://example.com/#this')
62+
const form = namedNode('http://example.com/#form')
63+
const store = namedNode('http://example.com/#store')
64+
const callbackFunction = jest.fn() // TODO: https://github.com/solid/solid-ui/issues/263
65+
uiStore.add(form, ns.rdf('type'), namedNode('http://example.com/#custom2'), namedNode('http://example.com/'))
66+
uiStore.add(namedNode('http://example.com/#custom2'), ns.rdfs('subClassOf'), namedNode('http://example.com/#custom1'), namedNode('http://example.com/'))
67+
uiStore.add(form, ns.ui('contents'), namedNode('http://example.com/#bla'), namedNode('http://example.com/'))
68+
69+
expect(
70+
commentField(
71+
document,
72+
container,
73+
already,
74+
subject,
75+
form,
76+
store,
77+
callbackFunction
78+
)
79+
).toMatchSnapshot()
80+
})
81+
it('deals with missing container', () => {
82+
const already = {}
83+
const subject = namedNode('http://example.com/#this')
84+
const form = namedNode('http://example.com/#form')
85+
const store = namedNode('http://example.com/#store')
86+
const callbackFunction = jest.fn() // TODO: https://github.com/solid/solid-ui/issues/263
87+
uiStore.add(form, ns.rdf('type'), ns.ui('Comment'), namedNode('http://example.com/'))
88+
uiStore.add(form, ns.ui('contents'), namedNode('http://example.com/#bla'), namedNode('http://example.com/'))
89+
expect(
90+
commentField(
91+
document,
92+
undefined,
93+
already,
94+
subject,
95+
form,
96+
store,
97+
callbackFunction
98+
)
99+
).toMatchSnapshot()
100+
})
101+
it('deals with custom style', () => {
102+
const already = {}
103+
const subject = namedNode('http://example.com/#this')
104+
const form = namedNode('http://example.com/#form')
105+
const store = namedNode('http://example.com/#store')
106+
const callbackFunction = jest.fn() // TODO: https://github.com/solid/solid-ui/issues/263
107+
uiStore.add(form, ns.rdf('type'), ns.ui('Comment'), namedNode('http://example.com/'))
108+
uiStore.add(form, ns.ui('style'), 'custom: true;', namedNode('http://example.com/'))
109+
uiStore.add(form, ns.ui('contents'), namedNode('http://example.com/#bla'), namedNode('http://example.com/'))
110+
expect(
111+
commentField(
112+
document,
113+
undefined,
114+
already,
115+
subject,
116+
form,
117+
store,
118+
callbackFunction
119+
)
120+
).toMatchSnapshot()
121+
})
122+
})
123+

‎test/unit/widgets/forms/index.test.ts‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -640,32 +640,6 @@ describe('Heading', () => {
640640
})
641641
})
642642

643-
describe('Comment', () => {
644-
it('exists', () => {
645-
expect(field[ns.ui('Comment').uri]).toBeInstanceOf(Object)
646-
})
647-
it('runs', () => {
648-
const container = document.createElement('div')
649-
const already = {}
650-
const subject = namedNode('http://example.com/#this')
651-
const form = namedNode('http://example.com/#form')
652-
const store = namedNode('http://example.com/#store')
653-
const callbackFunction = jest.fn() // TODO: https://github.com/solid/solid-ui/issues/263
654-
uiStore.add(form, ns.ui('contents'), namedNode('http://example.com/#bla'), namedNode('http://example.com/'))
655-
expect(
656-
field[ns.ui('Comment').uri](
657-
document,
658-
container,
659-
already,
660-
subject,
661-
form,
662-
store,
663-
callbackFunction
664-
)
665-
).toMatchSnapshot()
666-
})
667-
})
668-
669643
describe('mostSpecificClassURI', () => {
670644
it('exists', () => {
671645
expect(mostSpecificClassURI).toBeInstanceOf(Function)

0 commit comments

Comments
 (0)