How to use the link-lib.LinkedRenderStore.registerRenderer function in link-lib

it("sets a class name", () => {
        const opts = ctx.multipleCW(iri, { second: { id: "resources/10" } });
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            createTestElement("normalRendered"),
            defaultNS.schema("CreativeWork"),
        ));

        // tslint:disable-next-line max-classes-per-file
        class ClassNameProvider extends TopologyProvider {
            constructor(props) {
                super(props);
                this.className = "test-class";
            }
        }

        const comp = createElement(
            ClassNameProvider,
            null,
            createElement("span", null),

it("renders default when set", () => {
        const opts = ctx.type(undefined);
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            createComponent("thing"),
            defaultNS.schema("Thing"),
        ));

        const elem = mount(opts.wrapComponent(createElement(Type)));

        expect(elem.find("span")).toHaveClassName("thing");
    });

it("renders the literal renderer", () => {
        const opts = ctx.fullCW();
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            ({ linkedProp }) => React.createElement(
                "div",
                { className: "integerRenderer", children: linkedProp.value },
            ),
            defaultNS.rdfs("Literal"),
            defaultNS.xsd("integer"),
        ));

        const comp = React.createElement(
            Property,
            { label: defaultNS.ex("timesRead"), ...opts.contextProps() },
        );
        const elem = mount(opts.wrapComponent(comp));

        expect(elem).toContainMatchingElement(".integerRenderer");
        expect(elem.find(".integerRenderer")).toHaveText("5");

it("renders the children and association renderer when data is not present with forceRender and children", () => {
        const opts = ctx.fullCW();
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            ({ children }) => React.createElement("div", { className: "association" }, children),
            defaultNS.schema("CreativeWork"),
            defaultNS.rdf("predicate"),
        ));
        const elem = mount(opts.wrapComponent(React.createElement(
            Property,
            {
                children: React.createElement("span", { className: "child-elem" }),
                forceRender: true,
                label: defaultNS.ex("nonexistent"),
                subject,
                ...opts.contextProps(),
            },
        )));
        expect(elem).toContainMatchingElement(".association");
        expect(elem).toContainMatchingElement(".child-elem");

it("renders default topology through children", () => {
        const opts = ctx.multipleCW(iri, { second: { id: "resources/10" } });
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            createTestElement("normalRendered"),
            defaultNS.schema("CreativeWork"),
        ));
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            createTestElement("collectionRendered"),
            defaultNS.schema("CreativeWork"),
            RENDER_CLASS_NAME,
            defaultNS.argu("collection"),
        ));

        const comp = createElement(
            LinkedResourceContainer,
            { loadLinkedObject, subject: iri },
            createElement
            (LinkedResourceContainer,
                { loadLinkedObject, subject: iri },

it("renders default topology through children", () => {
        const opts = ctx.multipleCW(iri, { second: { id: "resources/10" } });
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            createTestElement("normalRendered"),
            defaultNS.schema("CreativeWork"),
        ));
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            createTestElement("collectionRendered"),
            defaultNS.schema("CreativeWork"),
            RENDER_CLASS_NAME,
            defaultNS.argu("collection"),
        ));

        const comp = createElement(
            LinkedResourceContainer,
            { loadLinkedObject, subject: iri },
            createElement
            (LinkedResourceContainer,
                { loadLinkedObject, subject: iri },
                createElement(
                    LinkedResourceContainer,
                    { loadLinkedObject, subject: defaultNS.example("resources/10") },
                ),

it("renders a LRC when rendering a NamedNode", () => {
        const opts = ctx.fullCW(subject);
        opts.lrs.registerAll(
            LinkedRenderStore.registerRenderer(
                () => React.createElement("p", null, "loading"),
                defaultNS.ll("LoadingResource"),
            ),
        );

        const comp = React.createElement(
            Property,
            { label: defaultNS.schema("author"), ...opts.contextProps() },
        );
        const elem = mount(opts.wrapComponent(comp));

        expect(elem.find("Property")).toHaveText("loading");
    });

it("renders blank nodes", () => {
        const bn = new BlankNode();
        const opts = ctx.chargeLRS(
            [
                new Statement(bn, defaultNS.rdf("type"), defaultNS.schema("Thing")),
                new Statement(bn, defaultNS.schema("name"), new Literal("title")),
            ],
            bn,
        );

        const comp = createTestElement();
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(comp, defaultNS.schema("Thing")));
        const elem = mount(
            opts.wrapComponent(createElement(LinkedResourceContainer, {
                loadLinkedObject,
                subject: bn,
            })),
        );

        expect(elem.find("span.testComponent")).toExist();
    });

it("passes object with custom options", () => {
            const opts = ctx.fullCW(iri);

            const comp = link({
                author: defaultNS.schema("author"),
                name: [defaultNS.schema("name"), defaultNS.rdfs("label")],
                tags: {
                    label: defaultNS.example("tags"),
                    limit: Infinity,
                },
                text: defaultNS.schema("text"),
            })(TestComponent);
            opts.lrs.registerAll(LinkedRenderStore.registerRenderer(comp, defaultNS.schema("Thing")));

            const elem = mount(opts.wrapComponent());

            expect(elem.find(TestComponent)).toHaveLength(1);
            expect(elem.find(TestComponent)).not.toHaveProp("label");
            expect(elem.find(TestComponent)).toHaveProp("name", new Literal("title"));
            expect(elem.find(TestComponent)).toHaveProp("text", new Literal("text"));
            expect(elem.find(TestComponent)).toHaveProp("author", new NamedNode("http://example.org/people/0"));
            expect(elem.find(TestComponent)).toHaveProp("tags", [
                defaultNS.example("tag/0"),
                defaultNS.example("tag/1"),
                defaultNS.example("tag/2"),
                defaultNS.example("tag/3"),
            ]);
        });

it("renders the view", () => {
        const title = "The title";
        const opts = ctx.name(subject, title);
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            () => React.createElement("div", { className: "nameProp" }),
            defaultNS.schema("Thing"),
            defaultNS.schema("name"),
        ));

        const comp = React.createElement(
            Property,
            { label: defaultNS.schema("name"), ...opts.contextProps() },
        );
        const elem = mount(opts.wrapComponent(comp));

        expect(elem.find(Property).children()).toHaveLength(1);
        expect(elem.find(".nameProp")).toExist();
    });