Skip to content

Commit 8b3f7e0

Browse files
michielbdejongmichielbdejong
committed
Merge remote-tracking branch 'origin/master' into fieldFunction
2 parents 7d36350 + c916faf commit 8b3f7e0

8 files changed

Lines changed: 245 additions & 21 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

‎package-lock.json‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -660,8 +660,7 @@ describe('Comment', () => {
660660
store,
661661
callbackFunction
662662
)
663-
).toMatchSnapshot()
664-
})
663+
).toMatchSnapshot()
665664
})
666665

667666
describe('editFormButton', () => {

0 commit comments

Comments
 (0)