lincd/lib/tests/components.test.js

LINCD is a JavaScript library for building user interfaces with linked data (also known as 'structured data', or RDF)

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PersonNetwork = exports.PersonOverviewWithChildRenderFn = exports.PersonOverviewFixedGrid = exports.PersonOverviewWithConfigurableChildren = exports.PersonOverview = exports.Card = exports.Grid = exports.Person = exports.knows = exports.depiction = exports.name = exports.FoafPerson = void 0;
const buffer_1 = require("buffer");
const react_1 = __importDefault(require("react"));
const test_utils_1 = require("react-dom/test-utils");
const package_1 = require("../package");
const Shape_1 = require("../shapes/Shape");
const globals_1 = require("@jest/globals");
const models_1 = require("../models");
const ShapeDecorators_1 = require("../utils/ShapeDecorators");
const NameSpace_1 = require("../utils/NameSpace");
let foaf = (0, NameSpace_1.createNameSpace)('http://xmlns.com/foaf/0.1/');
const client_1 = require("react-dom/client");
const globals_2 = require("@jest/globals");
//these were needed to get react components to work with the testing environment. Maybe one of them can go?
buffer_1.Buffer && true;
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
exports.FoafPerson = foaf('Person');
exports.name = foaf('name');
exports.depiction = foaf('depiction');
exports.knows = foaf('knows');
let Person = class Person extends Shape_1.Shape {
    get name() {
        return this.getValue(exports.name);
    }
    set name(val) {
        this.overwrite(exports.name, new models_1.Literal(val));
    }
    get depiction() {
        return this.getValue(exports.depiction);
    }
    set depiction(val) {
        this.overwrite(exports.depiction, new models_1.Literal(val));
    }
    get knows() {
        return this.getAll(exports.knows);
    }
};
exports.Person = Person;
Person.targetClass = exports.FoafPerson;
__decorate([
    (0, ShapeDecorators_1.literalProperty)({
        path: exports.name,
        required: true,
        maxCount: 1,
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], Person.prototype, "name", null);
__decorate([
    (0, ShapeDecorators_1.literalProperty)({
        path: exports.depiction,
        maxCount: 1,
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], Person.prototype, "depiction", null);
__decorate([
    (0, ShapeDecorators_1.literalProperty)({
        path: exports.knows,
        shape: Person,
    }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], Person.prototype, "knows", null);
exports.Person = Person = __decorate([
    package_1.linkedShape
], Person);
exports.Grid = (0, package_1.linkedSetComponent)(Shape_1.Shape, ({ sources, children, ChildComponent }) => {
    return (react_1.default.createElement("div", null, ChildComponent
        ? sources.map((source) => {
            return react_1.default.createElement(ChildComponent, { of: source, key: source.node.toString() });
        })
        : children));
});
exports.Card = (0, package_1.linkedComponent)(Person.request((person) => ({
    name: person.name,
    depiction: person.depiction,
})), ({ linkedData: { name, depiction } }) => {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement("span", null, name)));
});
exports.PersonOverview = (0, package_1.linkedSetComponent)(Person.requestForEachInSet((person) => () => exports.Card.of(person)), ({ sources, getLinkedData }) => {
    return (react_1.default.createElement("div", null, sources.map((source) => {
        let Profile = getLinkedData(source);
        return (react_1.default.createElement("div", { key: source.toString() },
            react_1.default.createElement(Profile, null)));
    })));
});
exports.PersonOverviewWithConfigurableChildren = (0, package_1.linkedSetComponent)(Person, ({ sources, children, ChildComponent }) => {
    return (react_1.default.createElement("div", null, ChildComponent
        ? sources.map((source) => {
            return react_1.default.createElement(ChildComponent, { of: source, key: source.node.toString() });
        })
        : children));
});
exports.PersonOverviewFixedGrid = (0, package_1.linkedSetComponent)(Person.requestSet((persons) => ({
    PersonGrid: () => exports.Grid.of(persons, exports.Card),
})), ({ linkedData: { PersonGrid } }) => {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(PersonGrid, null)));
});
exports.PersonOverviewWithChildRenderFn = (0, package_1.linkedSetComponent)(Person.requestSet((persons) => ({
    PersonGrid: () => exports.Grid.of(persons, (person) => ({ Profile: () => exports.Card.of(person) })),
})), ({ linkedData: { PersonGrid } }) => {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(PersonGrid, null, (_a) => {
            var { linkedData: { Profile } } = _a, props = __rest(_a, ["linkedData"]);
            //with this setup we can choose to customise our child render function, add tags/props etc.
            return react_1.default.createElement(Profile, Object.assign({}, props));
        })));
});
exports.PersonNetwork = (0, package_1.linkedComponent)(Person.request((person) => ({
    Card: () => exports.Card.of(person),
    Friends: () => exports.PersonOverview.of(person.knows),
})), (props) => {
    let { Card, Friends } = props.linkedData;
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Card, null),
        react_1.default.createElement("p", null, " knows "),
        react_1.default.createElement(Friends, null)));
});
let container = null;
let root;
(0, globals_1.beforeEach)(() => {
    // setup a DOM element as a render target
    // container = document.createElement('div');
    // root = createRoot(container);
    // document.body.appendChild(container);
    container = document.createElement('div');
    document.body.appendChild(container);
});
(0, globals_1.afterEach)(() => {
    // cleanup on exiting
    // unmountComponentAtNode(container);
    // root.unmount(container);
    // container.remove();
    // container = null;
    document.body.removeChild(container);
    container = null;
});
let person = new Person();
let person2 = new Person();
let person3 = new Person();
person.knows.add(person2.node);
person.knows.add(person3.node);
person.name = 'Rene';
person2.name = 'Carlen';
person3.name = 'Diggy';
person.depiction = 'pic';
person2.depiction = 'pic2';
person3.depiction = 'pic3';
(0, globals_2.it)('renders a SetComponent with controlled children by using Shape.requestForEachInSet()', () => __awaiter(void 0, void 0, void 0, function* () {
    yield (0, test_utils_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
        root = (0, client_1.createRoot)(container).render(react_1.default.createElement(exports.PersonNetwork, { of: person }));
    }));
    (0, globals_1.expect)(container.textContent).toBe(`${person.name} knows ${person2.name + person3.name}`);
}));
(0, globals_2.it)('renders a SetComponent with controlled children using < SetComponent of={.. } />', () => __awaiter(void 0, void 0, void 0, function* () {
    yield (0, test_utils_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
        root = (0, client_1.createRoot)(container).render(react_1.default.createElement(exports.PersonOverview, { of: person.knows }));
    }));
    (0, globals_1.expect)(container.textContent).toBe(person2.name + person3.name);
}));
(0, globals_2.it)('renders a SetComponent with configurable children using < SetComponent as={.. } />', () => __awaiter(void 0, void 0, void 0, function* () {
    yield (0, test_utils_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
        root = (0, client_1.createRoot)(container).render(react_1.default.createElement(exports.PersonOverviewWithConfigurableChildren, { of: person.knows, as: exports.Card }));
    }));
    (0, globals_1.expect)(container.textContent).toBe(person2.name + person3.name);
}));
(0, globals_2.it)('renders a SetComponent that passes on its sources to another SetComponent using Shape.requestSet() with SetComponent.of(source,ChildComponent)', () => __awaiter(void 0, void 0, void 0, function* () {
    yield (0, test_utils_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
        root = (0, client_1.createRoot)(container).render(react_1.default.createElement(exports.PersonOverviewFixedGrid, { of: person.knows }));
    }));
    (0, globals_1.expect)(container.textContent).toBe(person2.name + person3.name);
}));
(0, globals_2.it)('renders a SetComponent that passes on its sources to another SetComponent using Shape.requestSet() with a child render function', () => __awaiter(void 0, void 0, void 0, function* () {
    yield (0, test_utils_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
        root = (0, client_1.createRoot)(container).render(react_1.default.createElement(exports.PersonOverviewWithChildRenderFn, { of: person.knows }));
    }));
    (0, globals_1.expect)(container.textContent).toBe(person2.name + person3.name);
}));
//# sourceMappingURL=components.test.js.map