Jackson Morgan
8 months ago
parent
0f35c7c7a8
commit
16376a4e7f
@ -0,0 +1,3 @@ |
|||||||
|
export const RDF_TYPE = "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"; |
||||||
|
export const TYPE_REGISTRATION = |
||||||
|
"http://www.w3.org/ns/solid/terms#TypeRegistration"; |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
import type { ContainerUri, LeafUri, SolidLdoDataset } from "@ldo/solid"; |
||||||
|
import { createSolidLdoDataset } from "@ldo/solid"; |
||||||
|
import type { TypeRegistration } from "./.ldo/typeIndex.typings"; |
||||||
|
import { guaranteeFetch } from "@ldo/solid/dist/util/guaranteeFetch"; |
||||||
|
import type { TypeIndexProfile } from "./.ldo/profile.typings"; |
||||||
|
import { TypeIndexProfileShapeType } from "./.ldo/profile.shapeTypes"; |
||||||
|
import { TypeRegistrationShapeType } from "./.ldo/typeIndex.shapeTypes"; |
||||||
|
import { RDF_TYPE, TYPE_REGISTRATION } from "./constants"; |
||||||
|
|
||||||
|
interface GetInstanceUrisOptions { |
||||||
|
solidLdoDataset?: SolidLdoDataset; |
||||||
|
fetch?: typeof fetch; |
||||||
|
} |
||||||
|
|
||||||
|
export async function getTypeRegistrations( |
||||||
|
webId: string, |
||||||
|
options?: GetInstanceUrisOptions, |
||||||
|
): Promise<TypeRegistration[]> { |
||||||
|
const fetch = guaranteeFetch(options?.fetch); |
||||||
|
const dataset = options?.solidLdoDataset ?? createSolidLdoDataset({ fetch }); |
||||||
|
|
||||||
|
// Get Profile
|
||||||
|
const profileResource = dataset.getResource(webId); |
||||||
|
const readResult = await profileResource.readIfUnfetched(); |
||||||
|
if (readResult.isError) throw readResult; |
||||||
|
const profile = dataset |
||||||
|
.usingType(TypeIndexProfileShapeType) |
||||||
|
.fromSubject(webId); |
||||||
|
|
||||||
|
// Get Type Indexes
|
||||||
|
const typeIndexUris = getTypeIndexesUrisFromProfile(profile); |
||||||
|
|
||||||
|
// Fetch the type Indexes
|
||||||
|
await Promise.all( |
||||||
|
typeIndexUris.map(async (typeIndexUri) => { |
||||||
|
const typeIndexResource = dataset.getResource(typeIndexUri); |
||||||
|
const readResult = await typeIndexResource.readIfUnfetched(); |
||||||
|
if (readResult.isError) throw readResult; |
||||||
|
}), |
||||||
|
); |
||||||
|
|
||||||
|
// Get Type Registrations
|
||||||
|
return dataset |
||||||
|
.usingType(TypeRegistrationShapeType) |
||||||
|
.matchSubject(RDF_TYPE, TYPE_REGISTRATION); |
||||||
|
} |
||||||
|
|
||||||
|
export function getTypeIndexesUrisFromProfile( |
||||||
|
profile: TypeIndexProfile, |
||||||
|
): LeafUri[] { |
||||||
|
const uris: LeafUri[] = []; |
||||||
|
profile.privateTypeIndex?.forEach((indexNode) => { |
||||||
|
uris.push(indexNode["@id"] as LeafUri); |
||||||
|
}); |
||||||
|
profile.publicTypeIndex?.forEach((indexNode) => { |
||||||
|
uris.push(indexNode["@id"] as LeafUri); |
||||||
|
}); |
||||||
|
return uris; |
||||||
|
} |
||||||
|
|
||||||
|
export async function getInstanceUris( |
||||||
|
classUri: string, |
||||||
|
typeRegistrations: TypeRegistration[], |
||||||
|
options?: GetInstanceUrisOptions, |
||||||
|
): Promise<LeafUri[]> { |
||||||
|
const fetch = guaranteeFetch(options?.fetch); |
||||||
|
const dataset = options?.solidLdoDataset ?? createSolidLdoDataset({ fetch }); |
||||||
|
|
||||||
|
const leafUris = new Set<LeafUri>(); |
||||||
|
await Promise.all( |
||||||
|
typeRegistrations.map(async (registration) => { |
||||||
|
if (registration.forClass["@id"] === classUri) { |
||||||
|
// Individual registrations
|
||||||
|
registration.instance?.forEach((instance) => |
||||||
|
leafUris.add(instance["@id"] as LeafUri), |
||||||
|
); |
||||||
|
// Container registrations
|
||||||
|
await Promise.all( |
||||||
|
registration.instanceContainer?.map(async (instanceContainer) => { |
||||||
|
const containerResource = dataset.getResource( |
||||||
|
instanceContainer["@id"] as ContainerUri, |
||||||
|
); |
||||||
|
await containerResource.readIfUnfetched(); |
||||||
|
containerResource.children().forEach((child) => { |
||||||
|
if (child.type === "leaf") leafUris.add(child.uri); |
||||||
|
}); |
||||||
|
}) ?? [], |
||||||
|
); |
||||||
|
} |
||||||
|
}), |
||||||
|
); |
||||||
|
return Array.from(leafUris); |
||||||
|
} |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import type { LeafUri } from "@ldo/solid"; |
||||||
|
import { useTypeIndexProfile } from "./useTypeIndexProfile"; |
||||||
|
import { useEffect, useMemo, useState } from "react"; |
||||||
|
import { useSubscribeToUris } from "./util/useSubscribeToUris"; |
||||||
|
import { useLdo, useMatchSubject } from "@ldo/solid-react"; |
||||||
|
import { TypeRegistrationShapeType } from "../.ldo/typeIndex.shapeTypes"; |
||||||
|
import { RDF_TYPE, TYPE_REGISTRATION } from "../constants"; |
||||||
|
import { |
||||||
|
getInstanceUris, |
||||||
|
getTypeIndexesUrisFromProfile, |
||||||
|
} from "../getTypeIndex"; |
||||||
|
|
||||||
|
/** |
||||||
|
* Provides the LeafUris of everything in a type node for a specific class uri |
||||||
|
* |
||||||
|
* @param classUri - the class uri |
||||||
|
* @returns - URIs of all resources registered with this node |
||||||
|
*/ |
||||||
|
export function useInstanceUris(classUri: string): LeafUri[] { |
||||||
|
const { dataset } = useLdo(); |
||||||
|
const profile = useTypeIndexProfile(); |
||||||
|
|
||||||
|
const typeIndexUris: string[] = useMemo( |
||||||
|
() => (profile ? getTypeIndexesUrisFromProfile(profile) : []), |
||||||
|
[profile], |
||||||
|
); |
||||||
|
|
||||||
|
useSubscribeToUris(typeIndexUris); |
||||||
|
|
||||||
|
const [leafUris, setLeafUris] = useState<LeafUri[]>([]); |
||||||
|
|
||||||
|
const typeRegistrations = useMatchSubject( |
||||||
|
TypeRegistrationShapeType, |
||||||
|
RDF_TYPE, |
||||||
|
TYPE_REGISTRATION, |
||||||
|
); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
getInstanceUris(classUri, typeRegistrations, { |
||||||
|
solidLdoDataset: dataset, |
||||||
|
}).then(setLeafUris); |
||||||
|
}, [typeRegistrations]); |
||||||
|
|
||||||
|
return leafUris; |
||||||
|
} |
||||||
@ -1,23 +0,0 @@ |
|||||||
import type { LeafUri } from "@ldo/solid"; |
|
||||||
import { useTypeIndexProfile } from "./useTypeIndexProfile"; |
|
||||||
import { useMemo } from "react"; |
|
||||||
import { useSubscribeToUris } from "./util/useSubscribeToUris"; |
|
||||||
|
|
||||||
export function useTypeIndex(classUri: string): Promise<LeafUri[]> { |
|
||||||
const profile = useTypeIndexProfile(); |
|
||||||
|
|
||||||
const typeIndexUris: string[] = useMemo(() => { |
|
||||||
const uris: string[] = []; |
|
||||||
profile?.privateTypeIndex?.forEach((indexNode) => { |
|
||||||
uris.push(indexNode["@id"]); |
|
||||||
}); |
|
||||||
profile?.publicTypeIndex?.forEach((indexNode) => { |
|
||||||
uris.push(indexNode["@id"]); |
|
||||||
}); |
|
||||||
return uris; |
|
||||||
}, [profile]); |
|
||||||
|
|
||||||
useSubscribeToUris(typeIndexUris); |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,32 +0,0 @@ |
|||||||
import { ContextDefinition } from "jsonld"; |
|
||||||
|
|
||||||
/** |
|
||||||
* ============================================================================= |
|
||||||
* postContext: JSONLD Context for post |
|
||||||
* ============================================================================= |
|
||||||
*/ |
|
||||||
export const postContext: ContextDefinition = { |
|
||||||
type: { |
|
||||||
"@id": "@type", |
|
||||||
}, |
|
||||||
SocialMediaPosting: "http://schema.org/SocialMediaPosting", |
|
||||||
CreativeWork: "http://schema.org/CreativeWork", |
|
||||||
Thing: "http://schema.org/Thing", |
|
||||||
articleBody: { |
|
||||||
"@id": "http://schema.org/articleBody", |
|
||||||
"@type": "http://www.w3.org/2001/XMLSchema#string", |
|
||||||
}, |
|
||||||
uploadDate: { |
|
||||||
"@id": "http://schema.org/uploadDate", |
|
||||||
"@type": "http://www.w3.org/2001/XMLSchema#date", |
|
||||||
}, |
|
||||||
image: { |
|
||||||
"@id": "http://schema.org/image", |
|
||||||
"@type": "@id", |
|
||||||
}, |
|
||||||
publisher: { |
|
||||||
"@id": "http://schema.org/publisher", |
|
||||||
"@type": "@id", |
|
||||||
"@container": "@set", |
|
||||||
}, |
|
||||||
}; |
|
||||||
@ -1,155 +0,0 @@ |
|||||||
import { Schema } from "shexj"; |
|
||||||
|
|
||||||
/** |
|
||||||
* ============================================================================= |
|
||||||
* postSchema: ShexJ Schema for post |
|
||||||
* ============================================================================= |
|
||||||
*/ |
|
||||||
export const postSchema: Schema = { |
|
||||||
type: "Schema", |
|
||||||
shapes: [ |
|
||||||
{ |
|
||||||
id: "https://example.com/PostSh", |
|
||||||
type: "ShapeDecl", |
|
||||||
shapeExpr: { |
|
||||||
type: "Shape", |
|
||||||
expression: { |
|
||||||
type: "EachOf", |
|
||||||
expressions: [ |
|
||||||
{ |
|
||||||
type: "TripleConstraint", |
|
||||||
predicate: "http://www.w3.org/1999/02/22-rdf-syntax-ns#type", |
|
||||||
valueExpr: { |
|
||||||
type: "NodeConstraint", |
|
||||||
values: [ |
|
||||||
"http://schema.org/SocialMediaPosting", |
|
||||||
"http://schema.org/CreativeWork", |
|
||||||
"http://schema.org/Thing", |
|
||||||
], |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: "TripleConstraint", |
|
||||||
predicate: "http://schema.org/articleBody", |
|
||||||
valueExpr: { |
|
||||||
type: "NodeConstraint", |
|
||||||
datatype: "http://www.w3.org/2001/XMLSchema#string", |
|
||||||
}, |
|
||||||
min: 0, |
|
||||||
max: 1, |
|
||||||
annotations: [ |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#label", |
|
||||||
object: { |
|
||||||
value: "articleBody", |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#comment", |
|
||||||
object: { |
|
||||||
value: "The actual body of the article. ", |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: "TripleConstraint", |
|
||||||
predicate: "http://schema.org/uploadDate", |
|
||||||
valueExpr: { |
|
||||||
type: "NodeConstraint", |
|
||||||
datatype: "http://www.w3.org/2001/XMLSchema#date", |
|
||||||
}, |
|
||||||
annotations: [ |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#label", |
|
||||||
object: { |
|
||||||
value: "uploadDate", |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#comment", |
|
||||||
object: { |
|
||||||
value: |
|
||||||
"Date when this media object was uploaded to this site.", |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: "TripleConstraint", |
|
||||||
predicate: "http://schema.org/image", |
|
||||||
valueExpr: { |
|
||||||
type: "NodeConstraint", |
|
||||||
nodeKind: "iri", |
|
||||||
}, |
|
||||||
min: 0, |
|
||||||
max: 1, |
|
||||||
annotations: [ |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#label", |
|
||||||
object: { |
|
||||||
value: "image", |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#comment", |
|
||||||
object: { |
|
||||||
value: |
|
||||||
"A media object that encodes this CreativeWork. This property is a synonym for encoding.", |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: "TripleConstraint", |
|
||||||
predicate: "http://schema.org/publisher", |
|
||||||
valueExpr: { |
|
||||||
type: "NodeConstraint", |
|
||||||
nodeKind: "iri", |
|
||||||
}, |
|
||||||
annotations: [ |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#label", |
|
||||||
object: { |
|
||||||
value: "publisher", |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#comment", |
|
||||||
object: { |
|
||||||
value: "The publisher of the creative work.", |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
annotations: [ |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#label", |
|
||||||
object: { |
|
||||||
value: "SocialMediaPost", |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: "Annotation", |
|
||||||
predicate: "http://www.w3.org/2000/01/rdf-schema#comment", |
|
||||||
object: { |
|
||||||
value: |
|
||||||
"A post to a social media platform, including blog posts, tweets, Facebook posts, etc.", |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
import { ShapeType } from "@ldo/ldo"; |
|
||||||
import { postSchema } from "./post.schema"; |
|
||||||
import { postContext } from "./post.context"; |
|
||||||
import { PostSh } from "./post.typings"; |
|
||||||
|
|
||||||
/** |
|
||||||
* ============================================================================= |
|
||||||
* LDO ShapeTypes post |
|
||||||
* ============================================================================= |
|
||||||
*/ |
|
||||||
|
|
||||||
/** |
|
||||||
* PostSh ShapeType |
|
||||||
*/ |
|
||||||
export const PostShShapeType: ShapeType<PostSh> = { |
|
||||||
schema: postSchema, |
|
||||||
shape: "https://example.com/PostSh", |
|
||||||
context: postContext, |
|
||||||
}; |
|
||||||
@ -1,45 +0,0 @@ |
|||||||
import { ContextDefinition } from "jsonld"; |
|
||||||
|
|
||||||
/** |
|
||||||
* ============================================================================= |
|
||||||
* Typescript Typings for post |
|
||||||
* ============================================================================= |
|
||||||
*/ |
|
||||||
|
|
||||||
/** |
|
||||||
* PostSh Type |
|
||||||
*/ |
|
||||||
export interface PostSh { |
|
||||||
"@id"?: string; |
|
||||||
"@context"?: ContextDefinition; |
|
||||||
type: |
|
||||||
| { |
|
||||||
"@id": "SocialMediaPosting"; |
|
||||||
} |
|
||||||
| { |
|
||||||
"@id": "CreativeWork"; |
|
||||||
} |
|
||||||
| { |
|
||||||
"@id": "Thing"; |
|
||||||
}; |
|
||||||
/** |
|
||||||
* The actual body of the article. |
|
||||||
*/ |
|
||||||
articleBody?: string; |
|
||||||
/** |
|
||||||
* Date when this media object was uploaded to this site. |
|
||||||
*/ |
|
||||||
uploadDate: string; |
|
||||||
/** |
|
||||||
* A media object that encodes this CreativeWork. This property is a synonym for encoding. |
|
||||||
*/ |
|
||||||
image?: { |
|
||||||
"@id": string; |
|
||||||
}; |
|
||||||
/** |
|
||||||
* The publisher of the creative work. |
|
||||||
*/ |
|
||||||
publisher: { |
|
||||||
"@id": string; |
|
||||||
}[]; |
|
||||||
} |
|
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import { createSolidLdoDataset } from "@ldo/solid"; |
||||||
|
import { |
||||||
|
MY_BOOKMARKS_1_URI, |
||||||
|
MY_BOOKMARKS_2_URI, |
||||||
|
setUpServer, |
||||||
|
WEB_ID, |
||||||
|
} from "./setUpServer"; |
||||||
|
import { getInstanceUris, getTypeRegistrations } from "../src/getTypeIndex"; |
||||||
|
|
||||||
|
// Use an increased timeout, since the CSS server takes too much setup time.
|
||||||
|
jest.setTimeout(40_000); |
||||||
|
|
||||||
|
describe("General Tests", () => { |
||||||
|
setUpServer(); |
||||||
|
|
||||||
|
it("gets the current typeindex", async () => { |
||||||
|
const solidLdoDataset = createSolidLdoDataset(); |
||||||
|
const typeRegistrations = await getTypeRegistrations(WEB_ID, { |
||||||
|
solidLdoDataset, |
||||||
|
}); |
||||||
|
const addressBookUris = await getInstanceUris( |
||||||
|
"http://www.w3.org/2006/vcard/ns#AddressBook", |
||||||
|
typeRegistrations, |
||||||
|
{ solidLdoDataset }, |
||||||
|
); |
||||||
|
expect(addressBookUris).toEqual( |
||||||
|
expect.arrayContaining([ |
||||||
|
"https://example.com/myPrivateAddressBook.ttl", |
||||||
|
"https://example.com/myPublicAddressBook.ttl", |
||||||
|
]), |
||||||
|
); |
||||||
|
const bookmarkUris = await getInstanceUris( |
||||||
|
"http://www.w3.org/2002/01/bookmark#Bookmark", |
||||||
|
typeRegistrations, |
||||||
|
{ solidLdoDataset }, |
||||||
|
); |
||||||
|
expect(bookmarkUris).toEqual( |
||||||
|
expect.arrayContaining([MY_BOOKMARKS_1_URI, MY_BOOKMARKS_2_URI]), |
||||||
|
); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -1,431 +0,0 @@ |
|||||||
import React, { useCallback, useEffect, useState } from "react"; |
|
||||||
import type { FunctionComponent } from "react"; |
|
||||||
import { render, screen, fireEvent, act } from "@testing-library/react"; |
|
||||||
import { |
|
||||||
SAMPLE_BINARY_URI, |
|
||||||
SAMPLE_DATA_URI, |
|
||||||
SERVER_DOMAIN, |
|
||||||
setUpServer, |
|
||||||
} from "./setUpServer"; |
|
||||||
import { UnauthenticatedSolidLdoProvider } from "../src/UnauthenticatedSolidLdoProvider"; |
|
||||||
import { useResource } from "../src/useResource"; |
|
||||||
import { useRootContainerFor } from "../src/useRootContainer"; |
|
||||||
import { useLdo } from "../src/SolidLdoProvider"; |
|
||||||
import { PostShShapeType } from "./.ldo/post.shapeTypes"; |
|
||||||
import type { PostSh } from "./.ldo/post.typings"; |
|
||||||
import { useSubject } from "../src/useSubject"; |
|
||||||
|
|
||||||
// Use an increased timeout, since the CSS server takes too much setup time.
|
|
||||||
jest.setTimeout(40_000); |
|
||||||
|
|
||||||
describe("Integration Tests", () => { |
|
||||||
setUpServer(); |
|
||||||
|
|
||||||
/** |
|
||||||
* =========================================================================== |
|
||||||
* useResource |
|
||||||
* =========================================================================== |
|
||||||
*/ |
|
||||||
describe("useResource", () => { |
|
||||||
it("Fetches a resource and indicates it is loading while doing so", async () => { |
|
||||||
const UseResourceTest: FunctionComponent = () => { |
|
||||||
const resource = useResource(SAMPLE_DATA_URI); |
|
||||||
if (resource?.isLoading()) return <p>Loading</p>; |
|
||||||
return <p role="status">{resource.status.type}</p>; |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<UseResourceTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
await screen.findByText("Loading"); |
|
||||||
const resourceStatus = await screen.findByRole("status"); |
|
||||||
expect(resourceStatus.innerHTML).toBe("dataReadSuccess"); |
|
||||||
}); |
|
||||||
|
|
||||||
it("returns undefined when no uri is provided, then rerenders when one is", async () => { |
|
||||||
const UseResourceUndefinedTest: FunctionComponent = () => { |
|
||||||
const [uri, setUri] = useState<string | undefined>(undefined); |
|
||||||
const resource = useResource(uri, { suppressInitialRead: true }); |
|
||||||
if (!resource) |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<p>Undefined</p> |
|
||||||
<button onClick={() => setUri(SAMPLE_DATA_URI)}>Next</button> |
|
||||||
</div> |
|
||||||
); |
|
||||||
return <p role="status">{resource.status.type}</p>; |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<UseResourceUndefinedTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
await screen.findByText("Undefined"); |
|
||||||
fireEvent.click(screen.getByText("Next")); |
|
||||||
const resourceStatus = await screen.findByRole("status"); |
|
||||||
expect(resourceStatus.innerHTML).toBe("unfetched"); |
|
||||||
}); |
|
||||||
|
|
||||||
it("Reloads the data on mount", async () => { |
|
||||||
const ReloadTest: FunctionComponent = () => { |
|
||||||
const resource = useResource(SAMPLE_DATA_URI, { reloadOnMount: true }); |
|
||||||
if (resource?.isLoading()) return <p>Loading</p>; |
|
||||||
return <p role="status">{resource.status.type}</p>; |
|
||||||
}; |
|
||||||
const ReloadParent: FunctionComponent = () => { |
|
||||||
const [showComponent, setShowComponent] = useState(true); |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<button onClick={() => setShowComponent(!showComponent)}> |
|
||||||
Show Component |
|
||||||
</button> |
|
||||||
{showComponent ? <ReloadTest /> : <p>Hidden</p>} |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<ReloadParent /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
await screen.findByText("Loading"); |
|
||||||
const resourceStatus1 = await screen.findByRole("status"); |
|
||||||
expect(resourceStatus1.innerHTML).toBe("dataReadSuccess"); |
|
||||||
fireEvent.click(screen.getByText("Show Component")); |
|
||||||
await screen.findByText("Hidden"); |
|
||||||
fireEvent.click(screen.getByText("Show Component")); |
|
||||||
await screen.findByText("Loading"); |
|
||||||
const resourceStatus2 = await screen.findByRole("status", undefined, { |
|
||||||
timeout: 5000, |
|
||||||
}); |
|
||||||
expect(resourceStatus2.innerHTML).toBe("dataReadSuccess"); |
|
||||||
}); |
|
||||||
|
|
||||||
it("handles swapping to a new resource", async () => { |
|
||||||
const SwapResourceTest: FunctionComponent = () => { |
|
||||||
const [uri, setUri] = useState(SAMPLE_DATA_URI); |
|
||||||
const resource = useResource(uri); |
|
||||||
if (resource?.isLoading()) return <p>Loading</p>; |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<p role="status">{resource.status.type}</p> |
|
||||||
<button onClick={() => setUri(SAMPLE_BINARY_URI)}> |
|
||||||
Update URI |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<SwapResourceTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
await screen.findByText("Loading"); |
|
||||||
const resourceStatus1 = await screen.findByRole("status"); |
|
||||||
expect(resourceStatus1.innerHTML).toBe("dataReadSuccess"); |
|
||||||
fireEvent.click(screen.getByText("Update URI")); |
|
||||||
await screen.findByText("Loading"); |
|
||||||
const resourceStatus2 = await screen.findByRole("status"); |
|
||||||
expect(resourceStatus2.innerHTML).toBe("binaryReadSuccess"); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
/** |
|
||||||
* =========================================================================== |
|
||||||
* useRootContainer |
|
||||||
* =========================================================================== |
|
||||||
*/ |
|
||||||
describe("useRootContainer", () => { |
|
||||||
it("gets the root container for a sub-resource", async () => { |
|
||||||
const RootContainerTest: FunctionComponent = () => { |
|
||||||
const rootContainer = useRootContainerFor(SAMPLE_DATA_URI, { |
|
||||||
suppressInitialRead: true, |
|
||||||
}); |
|
||||||
return rootContainer ? <p role="root">{rootContainer?.uri}</p> : <></>; |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<RootContainerTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
const container = await screen.findByRole("root"); |
|
||||||
expect(container.innerHTML).toBe(SERVER_DOMAIN); |
|
||||||
}); |
|
||||||
|
|
||||||
it("returns undefined when a URI is not provided", async () => { |
|
||||||
const RootContainerTest: FunctionComponent = () => { |
|
||||||
const rootContainer = useRootContainerFor(undefined, { |
|
||||||
suppressInitialRead: true, |
|
||||||
}); |
|
||||||
return rootContainer ? ( |
|
||||||
<p role="root">{rootContainer?.uri}</p> |
|
||||||
) : ( |
|
||||||
<p role="undefined">Undefined</p> |
|
||||||
); |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<RootContainerTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
const container = await screen.findByRole("undefined"); |
|
||||||
expect(container.innerHTML).toBe("Undefined"); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
/** |
|
||||||
* =========================================================================== |
|
||||||
* useLdoMethods |
|
||||||
* =========================================================================== |
|
||||||
*/ |
|
||||||
describe("useLdoMethods", () => { |
|
||||||
it("uses get subject to get a linked data object", async () => { |
|
||||||
const GetSubjectTest: FunctionComponent = () => { |
|
||||||
const [subject, setSubject] = useState<PostSh | undefined>(); |
|
||||||
const { getSubject } = useLdo(); |
|
||||||
useEffect(() => { |
|
||||||
const someSubject = getSubject( |
|
||||||
PostShShapeType, |
|
||||||
"https://example.com/subject", |
|
||||||
); |
|
||||||
setSubject(someSubject); |
|
||||||
}, []); |
|
||||||
return subject ? <p role="subject">{subject["@id"]}</p> : <></>; |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<GetSubjectTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
const container = await screen.findByRole("subject"); |
|
||||||
expect(container.innerHTML).toBe("https://example.com/subject"); |
|
||||||
}); |
|
||||||
|
|
||||||
it("uses createData to create a new data object", async () => { |
|
||||||
const GetSubjectTest: FunctionComponent = () => { |
|
||||||
const [subject, setSubject] = useState<PostSh | undefined>(); |
|
||||||
const { createData, getResource } = useLdo(); |
|
||||||
useEffect(() => { |
|
||||||
const someSubject = createData( |
|
||||||
PostShShapeType, |
|
||||||
"https://example.com/subject", |
|
||||||
getResource("https://example.com/"), |
|
||||||
); |
|
||||||
someSubject.articleBody = "Cool Article"; |
|
||||||
setSubject(someSubject); |
|
||||||
}, []); |
|
||||||
return subject ? <p role="subject">{subject.articleBody}</p> : <></>; |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<GetSubjectTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
const container = await screen.findByRole("subject"); |
|
||||||
expect(container.innerHTML).toBe("Cool Article"); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
/** |
|
||||||
* =========================================================================== |
|
||||||
* useSubject |
|
||||||
* =========================================================================== |
|
||||||
*/ |
|
||||||
describe("useSubject", () => { |
|
||||||
it("renders the article body from the useSubject value", async () => { |
|
||||||
const UseSubjectTest: FunctionComponent = () => { |
|
||||||
useResource(SAMPLE_DATA_URI); |
|
||||||
const post = useSubject(PostShShapeType, `${SAMPLE_DATA_URI}#Post1`); |
|
||||||
|
|
||||||
return <p role="article">{post.articleBody}</p>; |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<UseSubjectTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
|
|
||||||
await screen.findByText("test"); |
|
||||||
}); |
|
||||||
|
|
||||||
it("renders the array value from the useSubject value", async () => { |
|
||||||
const UseSubjectTest: FunctionComponent = () => { |
|
||||||
const resource = useResource(SAMPLE_DATA_URI); |
|
||||||
const post = useSubject(PostShShapeType, `${SAMPLE_DATA_URI}#Post1`); |
|
||||||
if (resource.isLoading() || !post) return <p>loading</p>; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<p role="single">{post.publisher[0]["@id"]}</p> |
|
||||||
<ul role="list"> |
|
||||||
{post.publisher.map((publisher) => { |
|
||||||
return <li key={publisher["@id"]}>{publisher["@id"]}</li>; |
|
||||||
})} |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<UseSubjectTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
|
|
||||||
const single = await screen.findByRole("single"); |
|
||||||
expect(single.innerHTML).toBe("https://example.com/Publisher1"); |
|
||||||
const list = await screen.findByRole("list"); |
|
||||||
expect(list.children[0].innerHTML).toBe("https://example.com/Publisher1"); |
|
||||||
expect(list.children[1].innerHTML).toBe("https://example.com/Publisher2"); |
|
||||||
}); |
|
||||||
|
|
||||||
it("returns undefined in the subject URI is undefined", async () => { |
|
||||||
const UseSubjectTest: FunctionComponent = () => { |
|
||||||
useResource(SAMPLE_DATA_URI, { suppressInitialRead: true }); |
|
||||||
const post = useSubject(PostShShapeType, undefined); |
|
||||||
|
|
||||||
return ( |
|
||||||
<p role="article"> |
|
||||||
{post === undefined ? "Undefined" : "Not Undefined"} |
|
||||||
</p> |
|
||||||
); |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<UseSubjectTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
|
|
||||||
const article = await screen.findByRole("article"); |
|
||||||
expect(article.innerHTML).toBe("Undefined"); |
|
||||||
}); |
|
||||||
|
|
||||||
it("returns nothing if a symbol key is provided", async () => { |
|
||||||
const UseSubjectTest: FunctionComponent = () => { |
|
||||||
const resource = useResource(SAMPLE_DATA_URI); |
|
||||||
const post = useSubject(PostShShapeType, `${SAMPLE_DATA_URI}#Post1`); |
|
||||||
if (resource.isLoading() || !post) return <p>loading</p>; |
|
||||||
|
|
||||||
return <p role="value">{typeof post[Symbol.hasInstance]}</p>; |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<UseSubjectTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
|
|
||||||
const article = await screen.findByRole("value"); |
|
||||||
expect(article.innerHTML).toBe("undefined"); |
|
||||||
}); |
|
||||||
|
|
||||||
it("returns an id if an id key is provided", async () => { |
|
||||||
const UseSubjectTest: FunctionComponent = () => { |
|
||||||
const resource = useResource(SAMPLE_DATA_URI); |
|
||||||
const post = useSubject(PostShShapeType, `${SAMPLE_DATA_URI}#Post1`); |
|
||||||
if (resource.isLoading() || !post) return <p>loading</p>; |
|
||||||
|
|
||||||
return <p role="value">{post["@id"]}</p>; |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<UseSubjectTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
|
|
||||||
const article = await screen.findByRole("value"); |
|
||||||
expect(article.innerHTML).toBe(`${SAMPLE_DATA_URI}#Post1`); |
|
||||||
}); |
|
||||||
|
|
||||||
it("does not set a value if a value is attempted to be set", async () => { |
|
||||||
const warn = jest.spyOn(console, "warn").mockImplementation(() => {}); |
|
||||||
const UseSubjectTest: FunctionComponent = () => { |
|
||||||
const resource = useResource(SAMPLE_DATA_URI); |
|
||||||
const post = useSubject(PostShShapeType, `${SAMPLE_DATA_URI}#Post1`); |
|
||||||
if (resource.isLoading() || !post) return <p>loading</p>; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<p role="value">{post.articleBody}</p> |
|
||||||
<button onClick={() => (post.articleBody = "bad")}> |
|
||||||
Attempt Change |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<UseSubjectTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
|
|
||||||
const article = await screen.findByRole("value"); |
|
||||||
expect(article.innerHTML).toBe(`test`); |
|
||||||
fireEvent.click(screen.getByText("Attempt Change")); |
|
||||||
expect(article.innerHTML).not.toBe("bad"); |
|
||||||
expect(warn).toHaveBeenCalledWith( |
|
||||||
"You've attempted to set a value on a Linked Data Object from the useSubject, useMatchingSubject, or useMatchingObject hooks. These linked data objects should only be used to render data, not modify it. To modify data, use the `changeData` function.", |
|
||||||
); |
|
||||||
warn.mockReset(); |
|
||||||
}); |
|
||||||
|
|
||||||
it("rerenders when asked to subscribe to a resource", async () => { |
|
||||||
const NotificationTest: FunctionComponent = () => { |
|
||||||
const resource = useResource(SAMPLE_DATA_URI, { subscribe: true }); |
|
||||||
const post = useSubject(PostShShapeType, `${SAMPLE_DATA_URI}#Post1`); |
|
||||||
|
|
||||||
const addPublisher = useCallback(async () => { |
|
||||||
await fetch(SAMPLE_DATA_URI, { |
|
||||||
method: "PATCH", |
|
||||||
body: `INSERT DATA { <${SAMPLE_DATA_URI}#Post1> <http://schema.org/publisher> <https://example.com/Publisher3> . }`, |
|
||||||
headers: { |
|
||||||
"Content-Type": "application/sparql-update", |
|
||||||
}, |
|
||||||
}); |
|
||||||
}, []); |
|
||||||
|
|
||||||
if (resource.isLoading() || !post) return <p>loading</p>; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<ul role="list"> |
|
||||||
{post.publisher.map((publisher) => { |
|
||||||
return <li key={publisher["@id"]}>{publisher["@id"]}</li>; |
|
||||||
})} |
|
||||||
</ul> |
|
||||||
<button onClick={addPublisher}>Add Publisher</button> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
const { unmount } = render( |
|
||||||
<UnauthenticatedSolidLdoProvider> |
|
||||||
<NotificationTest /> |
|
||||||
</UnauthenticatedSolidLdoProvider>, |
|
||||||
); |
|
||||||
|
|
||||||
const list = await screen.findByRole("list"); |
|
||||||
expect(list.children[0].innerHTML).toBe("https://example.com/Publisher1"); |
|
||||||
expect(list.children[1].innerHTML).toBe("https://example.com/Publisher2"); |
|
||||||
|
|
||||||
// Wait for subscription to connect
|
|
||||||
await act(async () => { |
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000)); |
|
||||||
}); |
|
||||||
|
|
||||||
// Click button to add a publisher
|
|
||||||
await fireEvent.click(screen.getByText("Add Publisher")); |
|
||||||
await screen.findByText("https://example.com/Publisher3"); |
|
||||||
|
|
||||||
// Verify the new publisher is in the list
|
|
||||||
const updatedList = await screen.findByRole("list"); |
|
||||||
expect(updatedList.children[2].innerHTML).toBe( |
|
||||||
"https://example.com/Publisher3", |
|
||||||
); |
|
||||||
|
|
||||||
unmount(); |
|
||||||
|
|
||||||
await act(async () => { |
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000)); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import { setUpServer } from "./setUpServer"; |
||||||
|
|
||||||
|
// Use an increased timeout, since the CSS server takes too much setup time.
|
||||||
|
jest.setTimeout(40_000); |
||||||
|
|
||||||
|
describe("React Tests", () => { |
||||||
|
setUpServer(); |
||||||
|
}); |
||||||
Loading…
Reference in new issue