moved createNewGroup back to PeoplePicker and changed tests for it
MODIFY
src/widgets/peoplePicker.js
src/widgets/peoplePicker.js
@@ -28,7 +28,6 @@ export class PeoplePicker {
this.groupPickedCb = groupPickedCb
this.selectedgroup = this.options.selectedgroup // current selected group if any
this.onSelectGroup = this.onSelectGroup.bind(this)
-
}
render () {
@@ -66,7 +65,7 @@ export class PeoplePicker {
createNewGroupButton.textContent = escape('Create a new group')
createNewGroupButton.style.margin = 'auto'
createNewGroupButton.addEventListener('click', _event => {
- createNewGroup(book, this.options.defaultNewGroupName)
+ this.createNewGroup(book, this.options.defaultNewGroupName)
.then(({ group }) => {
new GroupBuilder(
this.element,
@@ -140,6 +139,46 @@ export class PeoplePicker {
})
}
+ createNewGroup (book, defaultNewGroupName) {
+ const { groupIndex, groupContainer } = indexes(book)
+ const group = rdf.sym(
+ `${groupContainer.uri}${uuid.v4().slice(0, 8)}.ttl#this`
+ )
+ const name = defaultNewGroupName || 'Untitled Group'
+
+ // NOTE that order matters here. Unfortunately this type of update is
+ // non-atomic in that solid requires us to send two PATCHes, either of which
+ // might fail.
+ const patchPromises = [group.doc(), groupIndex].map(doc => {
+ const typeStatement = rdf.st(group, ns.rdf('type'), ns.vcard('Group'), doc)
+ const nameStatement = rdf.st(group, ns.vcard('fn'), name, group.doc(), doc)
+ const includesGroupStatement = rdf.st(
+ book,
+ ns.vcard('includesGroup'),
+ group,
+ doc
+ )
+ const toIns = doc.equals(groupIndex)
+ ? [typeStatement, nameStatement, includesGroupStatement]
+ : [typeStatement, nameStatement]
+ return patch(doc.uri, { toIns }).then(() => {
+ toIns.forEach(st => {
+ kb.add(st)
+ })
+ })
+ })
+ return Promise.all(patchPromises)
+ .then(() => ({ group }))
+ .catch(err => {
+ console.log('Could not create new group. PATCH failed ' + err)
+ throw new Error(
+ `Couldn't create new group. PATCH failed for (${
+ err.xhr ? err.xhr.responseURL : ''
+ } )`
+ )
+ })
+ }
+
onSelectGroup (group) {
this.selectedgroup = group
this.groupPickedCb(group)
@@ -475,43 +514,3 @@ function indexes(book) {
groupContainer: kb.sym(book.dir().uri + 'Group/')
}
}
-
-export function createNewGroup(book, defaultNewGroupName) {
- const { groupIndex, groupContainer } = indexes(book)
- const group = rdf.sym(
- `${groupContainer.uri}${uuid.v4().slice(0, 8)}.ttl#this`
- )
- const name = defaultNewGroupName || 'Untitled Group'
-
- // NOTE that order matters here. Unfortunately this type of update is
- // non-atomic in that solid requires us to send two PATCHes, either of which
- // might fail.
- const patchPromises = [group.doc(), groupIndex].map(doc => {
- const typeStatement = rdf.st(group, ns.rdf('type'), ns.vcard('Group'), doc)
- const nameStatement = rdf.st(group, ns.vcard('fn'), name, group.doc(), doc)
- const includesGroupStatement = rdf.st(
- book,
- ns.vcard('includesGroup'),
- group,
- doc
- )
- const toIns = doc.equals(groupIndex)
- ? [typeStatement, nameStatement, includesGroupStatement]
- : [typeStatement, nameStatement]
- return patch(doc.uri, { toIns }).then(() => {
- toIns.forEach(st => {
- kb.add(st)
- })
- })
- })
- return Promise.all(patchPromises)
- .then(() => ({ group }))
- .catch(err => {
- console.log('Could not create new group. PATCH failed ' + err)
- throw new Error(
- `Couldn't create new group. PATCH failed for (${
- err.xhr ? err.xhr.responseURL : ''
- } )`
- )
- })
-}

MODIFY
test/unit/widgets/__snapshots__/peoplePicker.test.ts.snap
test/unit/widgets/__snapshots__/peoplePicker.test.ts.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`GroupBuilder.add runs: Promise {} 1`] = `Promise {}`;
+exports[`GroupBuilder.add runs 1`] = `Promise {}`;
-exports[`GroupBuilder.handleRemove runs: [Function] 1`] = `[Function]`;
+exports[`GroupBuilder.handleRemove runs 1`] = `[Function]`;
-exports[`GroupBuilder.render runs:
-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],
-}
- 1`] = `
+exports[`GroupBuilder.render runs 1`] = `
GroupBuilder {
"book": Object {
"dir": [Function],
@@ -80,31 +43,15 @@ GroupBuilder {
}
`;
-exports[`GroupBuilder.setGroupName runs: Promise {} 1`] = `Promise {}`;
+exports[`GroupBuilder.setGroupName runs 1`] = `Promise {}`;
-exports[`PeoplePicker.render .. type index ...:
- 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": Object {},
- },
- "selectedgroup": undefined,
- "typeIndex": "publicTypeIndex",
- }
- 1`] = `
+exports[`PeoplePicker.render .. type index ... 1`] = `
PeoplePicker {
"element": <p>
<div
style="max-width: 350px; min-height: 200px; outline: 1px solid black; display: flex;"
/>
</p>,
- "findAddressBook": [Function],
"groupPickedCb": [Function],
"onSelectGroup": [Function],
"options": Object {
@@ -115,29 +62,13 @@ PeoplePicker {
}
`;
-exports[`PeoplePicker.render mocking kb any for book:
-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 {},
-}
- 1`] = `
+exports[`PeoplePicker.render mocking kb any for book 1`] = `
PeoplePicker {
"element": <p>
<div
style="max-width: 350px; min-height: 200px; outline: 1px solid black; display: flex;"
/>
</p>,
- "findAddressBook": [Function],
"groupPickedCb": [Function],
"onSelectGroup": [Function],
"options": Object {
@@ -148,7 +79,7 @@ PeoplePicker {
}
`;
-exports[`PeoplePicker.render runs 2:
+exports[`PeoplePicker.render runs 1`] = `
PeoplePicker {
"element": <p>
<div
@@ -158,30 +89,14 @@ exports[`PeoplePicker.render runs 2:
"groupPickedCb": [Function],
"onSelectGroup": [Function],
"options": Object {
- "selectedGroup": true,
- },
- "selectedgroup": undefined,
- "typeIndex": Object {},
- }
- 1`] = `
-PeoplePicker {
- "element": <p>
- <div
- style="max-width: 350px; min-height: 200px; outline: 1px solid black; display: flex;"
- />
- </p>,
- "findAddressBook": [Function],
- "groupPickedCb": [Function],
- "onSelectGroup": [Function],
- "options": Object {
- "selectedGroup": true,
+ "selectedGroup": false,
},
"selectedgroup": undefined,
"typeIndex": Object {},
}
`;
-exports[`PeoplePicker.render runs:
+exports[`PeoplePicker.render runs 2 1`] = `
PeoplePicker {
"element": <p>
<div
@@ -191,57 +106,14 @@ exports[`PeoplePicker.render runs:
"groupPickedCb": [Function],
"onSelectGroup": [Function],
"options": Object {
- "selectedGroup": false,
- },
- "selectedgroup": undefined,
- "typeIndex": Object {},
- }
- 1`] = `
-PeoplePicker {
- "element": <p>
- <div
- style="max-width: 350px; min-height: 200px; outline: 1px solid black; display: flex;"
- />
- </p>,
- "findAddressBook": [Function],
- "groupPickedCb": [Function],
- "onSelectGroup": [Function],
- "options": Object {
- "selectedGroup": false,
+ "selectedGroup": true,
},
"selectedgroup": undefined,
"typeIndex": Object {},
}
`;
-exports[`Person.render runs:
-Person {
- "element": <div>
- <div
- style="display: flex;"
- >
- <img
- height="50"
- src="undefined"
- style="margin: 5px;"
- width="50"
- />
- <span
- style="flex-grow: 1; margin: auto 0px;"
- >
- undefined
- </span>
- <button
- style="margin: 5px;"
- >
- Remove
- </button>
- </div>
- </div>,
- "handleRemove": true,
- "webIdNode": <div />,
-}
- 1`] = `
+exports[`Person.render runs 1`] = `
Person {
"element": <div>
<div

MODIFY
test/unit/widgets/peoplePicker.test.ts
test/unit/widgets/peoplePicker.test.ts
@@ -6,8 +6,7 @@ import {
GroupPicker,
Group,
GroupBuilder,
- Person,
- createNewGroup
+ Person
} from '../../../src/widgets/peoplePicker'
import ns from '../../../src/ns'
jest.mock('rdflib')
@@ -96,13 +95,13 @@ describe('FindAddressBook', () => {
// expect(spyOnNowOrWhenFetched).toThrowError()
})
})
-describe('createNewGroup', () => {
+describe('PeoplePicker.createNewGroup', () => {
it('exists', () => {
- expect(createNewGroup).toBeInstanceOf(Function)
+ expect(new PeoplePicker().createNewGroup).toBeInstanceOf(Function)
})
// @@ TODO something about doc within the function has a problem
it.skip('runs', () => {
- expect(createNewGroup(RdfLib.sym('book'))).toMatchInlineSnapshot()
+ expect(new PeoplePicker().createNewGroup(RdfLib.sym('book'))).toMatchSnapshot()
})
})
describe('PeoplePicker', () => {
@@ -126,22 +125,7 @@ describe('PeoplePicker.render', () => {
groupPickedCb,
options
)
- expect(peoplePicker.render()).toMatchSnapshot(`
- 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 {},
- }
- `)
+ expect(peoplePicker.render()).toMatchSnapshot()
})
it('.. type index ...', () => {
@@ -170,22 +154,7 @@ describe('PeoplePicker.render', () => {
// expect(spySecondAny).toBeCalled()
// expect(spyLoad).toBeCalled()
- expect(peoplePicker.render()).toMatchSnapshot(`
- 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": Object {},
- },
- "selectedgroup": undefined,
- "typeIndex": "publicTypeIndex",
- }
- `)
+ expect(peoplePicker.render()).toMatchSnapshot()
})
it('create Element is called .. ', () => {
@@ -216,22 +185,7 @@ describe('PeoplePicker.render', () => {
groupPickedCb,
options
)
- expect(peoplePicker.render()).toMatchSnapshot(`
- 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 {},
- }
- `)
+ expect(peoplePicker.render()).toMatchSnapshot()
})
it('mocking kb any for book', () => {
const mockKbAny: jest.SpyInstance = require('../../../src/store').any
@@ -246,22 +200,7 @@ describe('PeoplePicker.render', () => {
groupPickedCb,
options
)
- expect(peoplePicker.render()).toMatchSnapshot(`
-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 {},
-}
-`)
+ expect(peoplePicker.render()).toMatchSnapshot()
})
})
@@ -426,44 +365,7 @@ describe('GroupBuilder.render', () => {
// @@ TODO just trying to touch the code at this point. I want
// to make the test better than toBe(undefined)
expect(groupBuilder.onGroupChanged()).toBe(undefined)
- expect(groupBuilder.render()).toMatchSnapshot(`
-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],
-}
-`)
+ expect(groupBuilder.render()).toMatchSnapshot()
})
})
@@ -501,7 +403,7 @@ describe('GroupBuilder.add', () => {
handler,
handler
)
- expect(groupBuilder.add()).toMatchSnapshot(`Promise {}`)
+ expect(groupBuilder.add()).toMatchSnapshot()
})
// need to to nowOrWhenFetched
it('not okay it returns an error -- callback false', () => {
@@ -567,7 +469,7 @@ describe('GroupBuilder.handleRemove', () => {
handler,
handler
)
- expect(groupBuilder.handleRemove()).toMatchSnapshot('[Function]')
+ expect(groupBuilder.handleRemove()).toMatchSnapshot()
})
})
@@ -590,7 +492,7 @@ describe('GroupBuilder.setGroupName', () => {
handler,
handler
)
- expect(groupBuilder.setGroupName()).toMatchSnapshot('Promise {}')
+ expect(groupBuilder.setGroupName()).toMatchSnapshot()
})
})
@@ -610,33 +512,6 @@ describe('Person.render', () => {
const element = document.createElement('div')
const handleRemove = true
const person = new Person(webIdNode, element, handleRemove)
- expect(person.render()).toMatchSnapshot(`
-Person {
- "element": <div>
- <div
- style="display: flex;"
- >
- <img
- height="50"
- src="undefined"
- style="margin: 5px;"
- width="50"
- />
- <span
- style="flex-grow: 1; margin: auto 0px;"
- >
- undefined
- </span>
- <button
- style="margin: 5px;"
- >
- Remove
- </button>
- </div>
- </div>,
- "handleRemove": true,
- "webIdNode": <div />,
-}
-`)
+ expect(person.render()).toMatchSnapshot()
})
})

moved createNewGroup back to PeoplePicker and changed tests for it