Added to peoplePicker.test.ts and forms
MODIFY
package-lock.json
package-lock.json
"@types/node": {
"version": "13.7.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-13.7.0.tgz",
- "integrity": "sha512-GnZbirvmqZUzMgkFn70c74OQpTTUcCzlhQliTzYjQMqg+hVKcDnxdL19Ne3UdYzdMA/+W3eb646FWn/ZaT1NfQ==",
- "dev": true
+ "integrity": "sha512-GnZbirvmqZUzMgkFn70c74OQpTTUcCzlhQliTzYjQMqg+hVKcDnxdL19Ne3UdYzdMA/+W3eb646FWn/ZaT1NfQ=="
},
"@types/normalize-package-data": {
"version": "2.4.0",
"integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
"dev": true
},
+ "prettier": {
+ "version": "1.19.1",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+ "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+ "dev": true
+ },
"pretty-format": {
"version": "25.1.0",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.1.0.tgz",

MODIFY
src/widgets/forms.js
src/widgets/forms.js
@@ -49,17 +49,30 @@ const dashCharacter = '-'
**
** @returns {Element} The HTML widget created
*/
-forms.field[ns.ui('Form').uri] = forms.field[
- ns.ui('Group').uri
-] = function (dom, container, already, subject, form, store, callbackFunction) {
+forms.field[ns.ui('Form').uri] = forms.field[ns.ui('Group').uri] = function(
+ dom,
+ container,
+ already,
+ subject,
+ form,
+ store,
+ callbackFunction
+) {
const kb = UI.store
var box = dom.createElement('div')
- box.setAttribute('style', `padding-left: 2em; border: 0.05em solid ${UI.style.formBorderColor};`) // Indent a group
+ box.setAttribute(
+ 'style',
+ `padding-left: 2em; border: 0.05em solid ${UI.style.formBorderColor};`
+ ) // Indent a group
const ui = UI.ns.ui
+ console.log(ui)
if (container) container.appendChild(box)
// Prevent loops
var key = subject.toNT() + '|' + form.toNT()
+ console.log(subject.toNT())
+ console.log(form.toNT())
+ console.log('key ' + key)
if (already[key]) {
// been there done that
box.appendChild(dom.createTextNode('Group: see above ' + key))
@@ -238,7 +251,7 @@ forms.field[ns.ui('Multiple').uri] = function (
/** Diagnostic function
*/
function debugString(values) {
- return values.map(x => x.toString().slice(-7)).join(', ')
+ return values.map((x) => x.toString().slice(-7)).join(', ')
}
/** Add an item to the local quadstore not the UI or the web
@@ -338,7 +351,8 @@ forms.field[ns.ui('Multiple').uri] = function (
*/
function itemDone(uri, ok, message) {
console.log(`Item ${uri} done callback for item ${object.uri.slice(-7)}`)
- if (!ok) { // when does this happen? errors typically deal with upstream
+ if (!ok) {
+ // when does this happen? errors typically deal with upstream
console.error(' Item done callback: Error: ' + message)
} else {
linkDone(uri, ok, message)
@@ -389,18 +403,28 @@ forms.field[ns.ui('Multiple').uri] = function (
// delete button and move buttons
if (kb.updater.editable(store.uri)) {
- buttons.deleteButtonWithCheck(dom, subField, utils.label(property),
- deleteThisItem)
+ buttons.deleteButtonWithCheck(
+ dom,
+ subField,
+ utils.label(property),
+ deleteThisItem
+ )
if (ordered) {
subField.appendChild(
buttons.button(
- dom, UI.icons.iconBase + 'noun_1369237.svg', 'Move Up',
- async event => moveThisItem(event, true))
+ dom,
+ UI.icons.iconBase + 'noun_1369237.svg',
+ 'Move Up',
+ async (event) => moveThisItem(event, true)
+ )
)
subField.appendChild(
buttons.button(
- dom, UI.icons.iconBase + 'noun_1369241.svg', 'Move Down',
- async event => moveThisItem(event, false))
+ dom,
+ UI.icons.iconBase + 'noun_1369241.svg',
+ 'Move Down',
+ async (event) => moveThisItem(event, false)
+ )
)
}
}
@@ -471,9 +495,13 @@ forms.field[ns.ui('Multiple').uri] = function (
prompt.textContent =
(values.length === 0 ? 'Add one or more ' : 'Add more ') +
utils.label(property)
- tail.addEventListener('click', async _eventNotUsed => {
+ tail.addEventListener(
+ 'click',
+ async (_eventNotUsed) => {
await addItem()
- }, true)
+ },
+ true
+ )
}
function createListIfNecessary() {
@@ -526,8 +554,12 @@ forms.field[ns.ui('Multiple').uri] = function (
// }
}
asyncStuff().then(
- () => { console.log(' Multiple render: async stuff ok') },
- (err) => { console.error(' Multiple render: async stuff fails. #### ', err) }
+ () => {
+ console.log(' Multiple render: async stuff ok')
+ },
+ (err) => {
+ console.error(' Multiple render: async stuff fails. #### ', err)
+ }
) // async
return box
@@ -664,7 +696,10 @@ function basicField (
var uri = forms.mostSpecificClassURI(form)
var params = forms.fieldParams[uri]
if (params === undefined) params = {} // non-bottom field types can do this
- var style = params.style || UI.style.textInputStyle || 'font-size: 100%; margin: 0.1em; padding: 0.1em;'
+ var style =
+ params.style ||
+ UI.style.textInputStyle ||
+ 'font-size: 100%; margin: 0.1em; padding: 0.1em;'
// box.appendChild(dom.createTextNode(' uri='+uri+', pattern='+ params.pattern))
var field = dom.createElement('input')
field.style = UI.style.textInputStyle // Do we have to override length etc?
@@ -740,7 +775,7 @@ function basicField (
result = new $rdf.Literal(field.value)
}
}
- var is = ds.map(st => $rdf.st(st.subject, st.predicate, result, st.why)) // can include >1 doc
+ var is = ds.map((st) => $rdf.st(st.subject, st.predicate, result, st.why)) // can include >1 doc
if (is.length === 0) {
// or none
is = [$rdf.st(subject, property, result, store)]
@@ -748,10 +783,10 @@ function basicField (
function updateMany(ds, is, callback) {
var docs = []
- is.forEach(st => {
+ is.forEach((st) => {
if (!docs.includes(st.why.uri)) docs.push(st.why.uri)
})
- ds.forEach(st => {
+ ds.forEach((st) => {
if (!docs.includes(st.why.uri)) docs.push(st.why.uri)
})
if (docs.length === 0) {
@@ -763,10 +798,10 @@ function basicField (
// return kb.updater.update(ds, is, callback)
const doc = docs.pop()
- const is1 = is.filter(st => st.why.uri === doc)
- const is2 = is.filter(st => st.why.uri !== doc)
- const ds1 = ds.filter(st => st.why.uri === doc)
- const ds2 = ds.filter(st => st.why.uri !== doc)
+ const is1 = is.filter((st) => st.why.uri === doc)
+ const is2 = is.filter((st) => st.why.uri !== doc)
+ const ds1 = ds.filter((st) => st.why.uri === doc)
+ const ds2 = ds.filter((st) => st.why.uri !== doc)
kb.updater.update(ds1, is1, function(uri, ok, body) {
if (ok) {
updateMany(ds2, is2, callback)
@@ -1162,13 +1197,7 @@ forms.fieldFunction = function (dom, field) {
// When editing forms, make it yellow, when editing thr form form, pink
// Help people understand how many levels down they are.
//
-forms.editFormButton = function (
- dom,
- container,
- form,
- store,
- callbackFunction
-) {
+forms.editFormButton = function(dom, container, form, store, callbackFunction) {
var b = dom.createElement('button')
b.setAttribute('type', 'button')
b.innerHTML = 'Edit ' + utils.label(ns.ui('Form'))
@@ -1421,7 +1450,10 @@ forms.promptForNew = function (
form = lists[0] // Pick any one
}
UI.log.debug('form is ' + form)
- box.setAttribute('style', `border: 0.05em solid ${UI.style.formBorderColor}; color: ${UI.style.formBorderColor}`) // @@color?
+ box.setAttribute(
+ 'style',
+ `border: 0.05em solid ${UI.style.formBorderColor}; color: ${UI.style.formBorderColor}`
+ ) // @@color?
box.innerHTML = '<h3>New ' + utils.label(theClass) + '</h3>'
var formFunction = forms.fieldFunction(dom, form)
@@ -1480,7 +1512,8 @@ forms.makeDescription = function (
group.appendChild(field)
field.rows = desc ? desc.split('\n').length + 2 : 2
field.cols = 80
- var style = UI.style.multilineTextInputStyle ||
+ var style =
+ UI.style.multilineTextInputStyle ||
'font-size:100%; white-space: pre-wrap; background-color: white;' +
' border: 0.07em solid gray; padding: 1em 0.5em; margin: 1em 1em;'
field.setAttribute('style', style)
@@ -1586,7 +1619,10 @@ forms.makeSelectForOptions = function (
for (var i = 0; i < possible.length; i++) {
var sub = possible[i] // @@ Maybe; make this so it works with blank nodes too
- if (!sub.uri) console.warn(`makeSelectForOptions: option does not have an uri: ${sub}, with predicate: ${predicate}`)
+ if (!sub.uri)
+ console.warn(
+ `makeSelectForOptions: option does not have an uri: ${sub}, with predicate: ${predicate}`
+ )
if (!sub.uri || sub.uri in uris) continue
uris[sub.uri] = true
n++
@@ -1920,7 +1956,7 @@ function buildCheckboxForm (dom, kb, lab, del, ins, form, store, tristate) {
function holdsAll(a) {
const missing = a.filter(
- st => !kb.holds(st.subject, st.predicate, st.object, st.why)
+ (st) => !kb.holds(st.subject, st.predicate, st.object, st.why)
)
return missing.length === 0
}
@@ -1992,9 +2028,7 @@ function buildCheckboxForm (dom, kb, lab, del, ins, form, store, tristate) {
box.appendChild(
error.errorMessageBlock(
dom,
- `Checkbox: Error updating store from ${input.state} to ${
- input.newState
- }:\n\n${errorBody}`
+ `Checkbox: Error updating store from ${input.state} to ${input.newState}:\n\n${errorBody}`
)
)
} else {

MODIFY
test/unit/widgets/forms.test.ts
test/unit/widgets/forms.test.ts
@@ -24,8 +24,8 @@ import {
sortBySequence
} from '../../../src/widgets/forms'
-jest.mock('rdflib')
-jest.mock('solid-auth-client')
+// jest.mock('rdflib')
+// jest.mock('solid-auth-client')
describe('field', () => {
it('exists', () => {
@@ -41,9 +41,21 @@ describe('Form field', () => {
const container = document.createElement('div')
const already = {}
const subject = RdfLib.sym('')
+ debugger
const form = document.createElement('form')
const store = RdfLib.graph()
const callbackFunction = () => {}
+ console.log(ns.ui('Form').uri)
+ field[ns.ui('Form').uri](
+ document,
+ container,
+ already,
+ subject,
+ form,
+ store,
+ callbackFunction
+ )
+ // @@ TODO goes to comment instead of Form...
expect(
field[ns.ui('Form').uri](
document,

MODIFY
test/unit/widgets/peoplePicker.test.ts
test/unit/widgets/peoplePicker.test.ts
import * as RdfLib from 'rdflib'
import { JSDOM } from 'jsdom'
-import { PeoplePicker, GroupPicker, Group, GroupBuilder } from '../../../src/widgets/peoplePicker'
+import {
+ PeoplePicker,
+ GroupPicker,
+ Group,
+ GroupBuilder
+} from '../../../src/widgets/peoplePicker'
jest.mock('rdflib')
jest.mock('solid-auth-client')
+// jest.mock('../../../src/store')
+
const dom = new JSDOM('<!DOCTYPE html><p>Hello world</p>').window.document
const element = dom.createElement('div')
@@ -17,12 +24,111 @@ describe('PeoplePicker.render', () => {
it('exists', () => {
expect(new PeoplePicker().render).toBeInstanceOf(Function)
})
- it.skip('runs', () => {
+ it('runs', () => {
const typeIndex = {}
const groupPickedCb = () => {}
- const options = {}
- const peoplePicker = new PeoplePicker(element, typeIndex, groupPickedCb, options)
- expect(peoplePicker.render()).toBeTruthy()
+ const options = { selectedGroup: false }
+ const element = document.createElement('p')
+ const peoplePicker = new PeoplePicker(
+ element,
+ typeIndex,
+ groupPickedCb,
+ options
+ )
+ // debugger
+ peoplePicker.render()
+ expect(peoplePicker.render()).toMatchInlineSnapshot(`
+ PeoplePicker {
+ "element": <p>
+ <div
+ style="max-width: 350px; min-height: 200px; outline: 1px solid black; display: flex;"
+ />
+ </p>,
+ "groupPickedCb": [Function],
+ "onSelectGroup": [Function],
+ "options": Object {
+ "selectedGroup": false,
+ },
+ "selectedgroup": undefined,
+ "typeIndex": Object {},
+ }
+ `)
+ })
+ it('create Element is called .. ', () => {
+ const spy = jest.spyOn(document, 'createElement')
+ const typeIndex = {}
+ const groupPickedCb = () => {}
+ const options = { selectedGroup: true }
+ const element = document.createElement('button')
+ const peoplePicker = new PeoplePicker(
+ element,
+ typeIndex,
+ groupPickedCb,
+ options
+ )
+ debugger
+ peoplePicker.render()
+ expect(spy).toHaveBeenCalledTimes(2)
+ })
+ it('runs 2', () => {
+ const typeIndex = {}
+ const groupPickedCb = () => {}
+ const options = { selectedGroup: true }
+ const element = document.createElement('p')
+ const peoplePicker = new PeoplePicker(
+ element,
+ typeIndex,
+ groupPickedCb,
+ options
+ )
+ // debugger
+ // peoplePicker.render()
+ expect(peoplePicker.render()).toMatchInlineSnapshot(`
+ PeoplePicker {
+ "element": <p>
+ <div
+ style="max-width: 350px; min-height: 200px; outline: 1px solid black; display: flex;"
+ />
+ </p>,
+ "groupPickedCb": [Function],
+ "onSelectGroup": [Function],
+ "options": Object {
+ "selectedGroup": true,
+ },
+ "selectedgroup": undefined,
+ "typeIndex": Object {},
+ }
+ `)
+ })
+ it.skip('mocking kb any for book', () => {
+ const mockKbAny: jest.SpyInstance = require('../../../src/store').any
+ mockKbAny.mockReturnValueOnce(null)
+ const typeIndex = {}
+ const groupPickedCb = () => {}
+ const options = { selectedGroup: true }
+ const element = document.createElement('p')
+ const peoplePicker = new PeoplePicker(
+ element,
+ typeIndex,
+ groupPickedCb,
+ options
+ )
+ expect(peoplePicker.render()).toMatchInlineSnapshot(`
+PeoplePicker {
+ "element": <p>
+ <div
+ style="max-width: 350px; min-height: 200px; outline: 1px solid black; display: flex;"
+ />
+ </p>,
+ "groupPickedCb": [Function],
+ "onSelectGroup": [Function],
+ "options": Object {
+ "selectedGroup": true,
+ },
+ "selectedgroup": undefined,
+ "typeIndex": Object {},
+}
+`)
})
})
@@ -34,7 +140,12 @@ describe('PeoplePicker.findAddressBook', () => {
const typeIndex = {}
const groupPickedCb = () => {}
const options = {}
- const peoplePicker = new PeoplePicker(element, typeIndex, groupPickedCb, options)
+ const peoplePicker = new PeoplePicker(
+ element,
+ typeIndex,
+ groupPickedCb,
+ options
+ )
expect(peoplePicker.findAddressBook()).toBeTruthy()
})
})
@@ -43,11 +154,18 @@ describe('PeoplePicker.createNewGroup', () => {
it('exists', () => {
expect(new PeoplePicker().createNewGroup).toBeInstanceOf(Function)
})
+ // @@ TODO something about doc within the function has a problem
it.skip('runs', () => {
const typeIndex = {}
const groupPickedCb = () => {}
const options = {}
- const peoplePicker = new PeoplePicker(element, typeIndex, groupPickedCb, options)
+ const element = document.createElement('p')
+ const peoplePicker = new PeoplePicker(
+ element,
+ typeIndex,
+ groupPickedCb,
+ options
+ )
expect(peoplePicker.createNewGroup(RdfLib.sym(''))).toBeTruthy()
})
})
@@ -56,11 +174,17 @@ describe('PeoplePicker.onSelectGroup', () => {
it('exists', () => {
expect(new PeoplePicker().onSelectGroup).toBeInstanceOf(Function)
})
- it.skip('runs', () => {
+ it('runs', () => {
const typeIndex = {}
const groupPickedCb = () => {}
const options = {}
- const peoplePicker = new PeoplePicker(element, typeIndex, groupPickedCb, options)
+ const element = document.createElement('p')
+ const peoplePicker = new PeoplePicker(
+ element,
+ typeIndex,
+ groupPickedCb,
+ options
+ )
expect(peoplePicker.onSelectGroup(RdfLib.sym(''))).toEqual(undefined)
})
})
@@ -120,8 +244,9 @@ describe('Group.render', () => {
it('exists', () => {
expect(new Group().render).toBeInstanceOf(Function)
})
- it.skip('runs', () => {
+ it('runs', () => {
const groupArg = RdfLib.sym('')
+ const element = document.createElement('p')
const group = new Group(element, groupArg)
expect(group.render()).toBeTruthy()
})
@@ -137,12 +262,56 @@ describe('GroupBuilder.render', () => {
it('exists', () => {
expect(new GroupBuilder().render).toBeInstanceOf(Function)
})
- it.skip('runs', () => {
+ it('runs', () => {
const groupArg = RdfLib.sym('')
const book = RdfLib.sym('')
const handler = () => {}
- const groupBuilder = new GroupBuilder(element, book, groupArg, handler, handler)
- expect(groupBuilder.render()).toBeTruthy()
+ const element = document.createElement('p')
+ const groupBuilder = new GroupBuilder(
+ element,
+ book,
+ groupArg,
+ handler,
+ handler
+ )
+ expect(groupBuilder.render()).toMatchInlineSnapshot(`
+GroupBuilder {
+ "book": Object {
+ "dir": [Function],
+ "doc": [Function],
+ "elements": Array [],
+ "sameTerm": [Function],
+ "uri": "uri",
+ "value": "",
+ },
+ "doneBuildingCb": [Function],
+ "element": <p>
+ <div
+ style="max-width: 350px; min-height: 200px; outline: 1px solid black; display: flex; flex-direction: column;"
+ >
+ <label>
+ Group Name:
+ <input
+ type="text"
+ />
+ </label>
+ <button>
+ Done
+ </button>
+ </div>
+ </p>,
+ "group": Object {
+ "dir": [Function],
+ "doc": [Function],
+ "elements": Array [],
+ "sameTerm": [Function],
+ "uri": "uri",
+ "value": "",
+ },
+ "groupChangedCb": [Function],
+ "onGroupChanged": [Function],
+}
+`)
})
})
@@ -154,7 +323,13 @@ describe('GroupBuilder.refresh', () => {
const groupArg = RdfLib.sym('')
const book = RdfLib.sym('')
const handler = () => {}
- const groupBuilder = new GroupBuilder(element, book, groupArg, handler, handler)
+ const groupBuilder = new GroupBuilder(
+ element,
+ book,
+ groupArg,
+ handler,
+ handler
+ )
expect(groupBuilder.refresh()).toEqual(undefined)
})
})
@@ -167,7 +342,13 @@ describe('GroupBuilder.add', () => {
const groupArg = RdfLib.sym('')
const book = RdfLib.sym('')
const handler = () => {}
- const groupBuilder = new GroupBuilder(element, book, groupArg, handler, handler)
+ const groupBuilder = new GroupBuilder(
+ element,
+ book,
+ groupArg,
+ handler,
+ handler
+ )
expect(groupBuilder.add()).toBeTruthy()
})
})
@@ -180,8 +361,15 @@ describe('GroupBuilder.handleRemove', () => {
const groupArg = RdfLib.sym('')
const book = RdfLib.sym('')
const handler = () => {}
- const groupBuilder = new GroupBuilder(element, book, groupArg, handler, handler)
- expect(groupBuilder.handleRemove()).toBeTruthy()
+ const element = document.createElement('p')
+ const groupBuilder = new GroupBuilder(
+ element,
+ book,
+ groupArg,
+ handler,
+ handler
+ )
+ expect(groupBuilder.handleRemove()).toMatchInlineSnapshot(`[Function]`)
})
})
@@ -193,7 +381,14 @@ describe('GroupBuilder.setGroupName', () => {
const groupArg = RdfLib.sym('')
const book = RdfLib.sym('')
const handler = () => {}
- const groupBuilder = new GroupBuilder(element, book, groupArg, handler, handler)
- expect(groupBuilder.setGroupName()).toBeTruthy()
+ const element = document.createElement('p')
+ const groupBuilder = new GroupBuilder(
+ element,
+ book,
+ groupArg,
+ handler,
+ handler
+ )
+ expect(groupBuilder.setGroupName()).toMatchInlineSnapshot(`Promise {}`)
})
})

Added to peoplePicker.test.ts and forms