15988747166

Committed 01 Jul 2025 03:01AM UTC coverage: 78.121% (+4.3%) from 73.786%

Build # 15988747166

Build Type

push

github

Committed by

apowers313

Commit Message

test: fix test types and mocks

Run Details

319 of 434 branches covered (73.5%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

202 existing lines in 8 files now uncovered.

2284 of 2898 relevant lines covered (78.81%)

886.86 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

92.68

/src/graphty-element.ts

import {LitElement} from "lit";
import {customElement, property} from "lit/decorators.js";

import {Graph, GraphOptsType, StyleSchema} from "../index.ts";

/**
 * Graphty creates a graph
 */
@customElement("graphty-element")
export class Graphty extends LitElement {
    #graph: Graph;
    #element: Element;

    constructor() {
        super();

        this.#element = document.createElement("div");
        const opts: GraphOptsType = {};

        this.#graph = new Graph(this.#element, opts);
    }

    // connectedCallback() {
    //     super.connectedCallback();
    //     this.renderRoot.appendChild(this.#element);
    // }

    // update(changedProperties: Map<string, unknown>) {
    //     super.update(changedProperties);
    //     // console.log(`update: ${[... changedProperties.keys()].join(", ")}`);
    // }

    firstUpdated(changedProperties: Map<string, unknown>): void {
        super.firstUpdated(changedProperties);
        // console.log(`firstUpdated: ${[... changedProperties.keys()].join(", ")}`);

        this.asyncFirstUpdated(changedProperties)
            .catch((e: unknown) => {
                throw e;
            });
    }

    async asyncFirstUpdated(changedProperties: Map<string, unknown>): Promise<void> {
        if (changedProperties.has("layout2d") && this.layout2d !== undefined) {
            if (this.layout2d) {
                this.#graph.createCamera(2);
            } else {
                this.#graph.createCamera(3);
            }
        }

        if (changedProperties.has("runAlgorithmsOnLoad") && this.runAlgorithmsOnLoad !== undefined) {
            this.#graph.runAlgorithmsOnLoad = true;
        }

        if (changedProperties.has("layout") && this.layout) {
            const layoutConfig = this.layoutConfig ?? {};
            await this.#graph.setLayout(this.layout, layoutConfig);
        }

        if (changedProperties.has("nodeIdPath") && this.nodeIdPath) {
            this.#graph.config.knownFields.nodeIdPath = this.nodeIdPath;
        }

        if (changedProperties.has("edgeSrcIdPath") && this.edgeSrcIdPath) {
            this.#graph.config.knownFields.edgeSrcIdPath = this.edgeSrcIdPath;
        }

        if (changedProperties.has("edgeDstIdPath") && this.edgeDstIdPath) {
            this.#graph.config.knownFields.edgeDstIdPath = this.edgeDstIdPath;
        }

        if (changedProperties.has("nodeData") && Array.isArray(this.nodeData)) {
            this.#graph.addNodes(this.nodeData);
        }

        if (changedProperties.has("edgeData") && Array.isArray(this.edgeData)) {
            this.#graph.addEdges(this.edgeData);
        }

        if (changedProperties.has("dataSource") && this.dataSource) {
            const sourceOpts = this.dataSourceConfig ?? {};
            await this.#graph.addDataFromSource(this.dataSource, sourceOpts);
        }

        if (changedProperties.has("styleTemplate") && this.styleTemplate) {
            await this.#graph.setStyleTemplate(this.styleTemplate);
        }

        await this.#graph.init();
        this.#graph.engine.resize();
    }

    render(): Element {
        return this.#element;
    }

    disconnectedCallback(): void {
        this.#graph.shutdown();
    }

    /**
     * An array of objects describing the node data.
     * The path to the unique ID for the node is `.id` unless
     * otherwise specified in `known-properties`.
     */
    @property({attribute: "node-data"})
    nodeData?: Record<string, unknown>[];

    /**
     * An array of objects describing the edge data.
     * The path to the source node ID and destination node ID are `src` and
     * `dst` (respectively) unless otherwise specified in `known-properties`.
     */
    @property({attribute: "edge-data"})
    edgeData?: Record<string, unknown>[];

    /**
     * The type of data source (e.g. "json"). See documentation for
     * data sources for more information.
     */
    @property({attribute: "data-source"})
    dataSource?: string;

    /**
     * The configuration for the data source. See documentation for
     * data sources for more information.
     */
    @property({attribute: "data-source-config"})
    dataSourceConfig?: Record<string, unknown>;

    /**
     * A jmespath string that can be used to select the unique node identifier
     * for each node. Defaults to "id", as in `{id: 42}` is the identifier of
     * the node.
     */
    @property({attribute: "node-id-path"})
    nodeIdPath?: string;

    /**
     * Similar to the nodeIdPath property / node-id-path attribute, this is a
     * jmespath that describes where to find the source node identifier for this edge.
     * Defaults to "src", as in `{src: 42, dst: 31337}`
     */
    @property({attribute: "edge-src-id-path"})
    edgeSrcIdPath?: string;

    /**
     * Similar to the nodeIdPath property / node-id-path attribute, this is a
     * jmespath that describes where to find the desination node identifier for this edge.
     * Defaults to "dst", as in `{src: 42, dst: 31337}`
     */
    @property({attribute: "edge-src-id-path"})
    edgeDstIdPath?: string;

    /**
     * Specifies which type of layout to use. See the layout documentation for
     * more information.
     */
    @property()
    layout?: string;

    /**
     * Specifies which type of layout to use. See the layout documentation for
     * more information.
     */
    @property({attribute: "layout-config"})
    layoutConfig?: Record<string, unknown>;

    /**
     * Specifies that the layout should be rendered in two dimensions (as
     * opposed to 3D)
     */
    @property({attribute: "layout-2d"})
    layout2d?: boolean;

    /**
     * Specifies that the layout should be rendered in two dimensions (as
     * opposed to 3D)
     */
    @property({attribute: "style-template"})
    styleTemplate?: StyleSchema;

    /**
     * Whether or not to run all algorithims in a style template when the
     * template is loaded
     */
    @property({attribute: "run-algorithms-on-load"})
    runAlgorithmsOnLoad?: boolean;

    /**
     * The color to use for the background. Accepts any CSS 4 color specifier.
     */
    // @property({attribute: "background"})
    // background?: string;

    /**
     * Use a skybox image for the background. This can be a URL or base64
     * encoded data for the image.
     */
    // @property({attribute: "skybox"})
    // skybox?: string;
}

1	import {LitElement} from "lit";	1✔
2	import {customElement, property} from "lit/decorators.js";	1✔
3
4	import {Graph, GraphOptsType, StyleSchema} from "../index.ts";	1✔
5
6	/**
7	* Graphty creates a graph
8	*/
9	@customElement("graphty-element")	1✔
10	export class Graphty extends LitElement {	1✔
11	#graph: Graph;	1✔
12	#element: Element;	1✔
13
14	constructor() {	1✔
15	super();	32✔
16
17	this.#element = document.createElement("div");	32✔
18	const opts: GraphOptsType = {};	32✔
19
20	this.#graph = new Graph(this.#element, opts);	32✔
21	}	32✔
22
23	// connectedCallback() {
24	// super.connectedCallback();
25	// this.renderRoot.appendChild(this.#element);
26	// }
27
28	// update(changedProperties: Map<string, unknown>) {
29	// super.update(changedProperties);
30	// // console.log(`update: ${[... changedProperties.keys()].join(", ")}`);
31	// }
32
33	firstUpdated(changedProperties: Map<string, unknown>): void {	1✔
34	super.firstUpdated(changedProperties);	32✔
35	// console.log(`firstUpdated: ${[... changedProperties.keys()].join(", ")}`);
36
37	this.asyncFirstUpdated(changedProperties)	32✔
38	.catch((e: unknown) => {	32✔
39	throw e;	×
40	});	32✔
41	}	32✔
42
43	async asyncFirstUpdated(changedProperties: Map<string, unknown>): Promise<void> {	1✔
44	if (changedProperties.has("layout2d") && this.layout2d !== undefined) {	32✔
45	if (this.layout2d) {	1✔
46	this.#graph.createCamera(2);	1✔
47	} else {	1!
48	this.#graph.createCamera(3);	×
49	}	×
50	}	1✔
51
52	if (changedProperties.has("runAlgorithmsOnLoad") && this.runAlgorithmsOnLoad !== undefined) {	32✔
53	this.#graph.runAlgorithmsOnLoad = true;	1✔
54	}	1✔
55
56	if (changedProperties.has("layout") && this.layout) {	32✔
57	const layoutConfig = this.layoutConfig ?? {};	13✔
58	await this.#graph.setLayout(this.layout, layoutConfig);	13✔
59	}	13✔
60
61	if (changedProperties.has("nodeIdPath") && this.nodeIdPath) {	32!
UNCOV 62	this.#graph.config.knownFields.nodeIdPath = this.nodeIdPath;	×
UNCOV 63	}	×
64
65	if (changedProperties.has("edgeSrcIdPath") && this.edgeSrcIdPath) {	32✔
66	this.#graph.config.knownFields.edgeSrcIdPath = this.edgeSrcIdPath;	1✔
67	}	1✔
68
69	if (changedProperties.has("edgeDstIdPath") && this.edgeDstIdPath) {	32✔
70	this.#graph.config.knownFields.edgeDstIdPath = this.edgeDstIdPath;	1✔
71	}	1✔
72
73	if (changedProperties.has("nodeData") && Array.isArray(this.nodeData)) {	32✔
74	this.#graph.addNodes(this.nodeData);	16✔
75	}	16✔
76
77	if (changedProperties.has("edgeData") && Array.isArray(this.edgeData)) {	32✔
78	this.#graph.addEdges(this.edgeData);	16✔
79	}	16✔
80
81	if (changedProperties.has("dataSource") && this.dataSource) {	32✔
82	const sourceOpts = this.dataSourceConfig ?? {};	16!
83	await this.#graph.addDataFromSource(this.dataSource, sourceOpts);	16✔
84	}	15✔
85
86	if (changedProperties.has("styleTemplate") && this.styleTemplate) {	32✔
87	await this.#graph.setStyleTemplate(this.styleTemplate);	14✔
88	}	14✔
89
90	await this.#graph.init();	31✔
91	this.#graph.engine.resize();	16✔
92	}	32✔
93
94	render(): Element {	1✔
95	return this.#element;	32✔
96	}	32✔
97
98	disconnectedCallback(): void {	1✔
99	this.#graph.shutdown();	24✔
100	}	24✔
101
102	/**
103	* An array of objects describing the node data.
104	* The path to the unique ID for the node is `.id` unless
105	* otherwise specified in `known-properties`.
106	*/
107	@property({attribute: "node-data"})	1✔
108	nodeData?: Record<string, unknown>[];	1✔
109
110	/**
111	* An array of objects describing the edge data.
112	* The path to the source node ID and destination node ID are `src` and
113	* `dst` (respectively) unless otherwise specified in `known-properties`.
114	*/
115	@property({attribute: "edge-data"})	1✔
116	edgeData?: Record<string, unknown>[];	1✔
117
118	/**
119	* The type of data source (e.g. "json"). See documentation for
120	* data sources for more information.
121	*/
122	@property({attribute: "data-source"})	1✔
123	dataSource?: string;	1✔
124
125	/**
126	* The configuration for the data source. See documentation for
127	* data sources for more information.
128	*/
129	@property({attribute: "data-source-config"})	1✔
130	dataSourceConfig?: Record<string, unknown>;	1✔
131
132	/**
133	* A jmespath string that can be used to select the unique node identifier
134	* for each node. Defaults to "id", as in `{id: 42}` is the identifier of
135	* the node.
136	*/
137	@property({attribute: "node-id-path"})	1✔
138	nodeIdPath?: string;	1✔
139
140	/**
141	* Similar to the nodeIdPath property / node-id-path attribute, this is a
142	* jmespath that describes where to find the source node identifier for this edge.
143	* Defaults to "src", as in `{src: 42, dst: 31337}`
144	*/
145	@property({attribute: "edge-src-id-path"})	1✔
146	edgeSrcIdPath?: string;	1✔
147
148	/**
149	* Similar to the nodeIdPath property / node-id-path attribute, this is a
150	* jmespath that describes where to find the desination node identifier for this edge.
151	* Defaults to "dst", as in `{src: 42, dst: 31337}`
152	*/
153	@property({attribute: "edge-src-id-path"})	1✔
154	edgeDstIdPath?: string;	1✔
155
156	/**
157	* Specifies which type of layout to use. See the layout documentation for
158	* more information.
159	*/
160	@property()	1✔
161	layout?: string;	1✔
162
163	/**
164	* Specifies which type of layout to use. See the layout documentation for
165	* more information.
166	*/
167	@property({attribute: "layout-config"})	1✔
168	layoutConfig?: Record<string, unknown>;	1✔
169
170	/**
171	* Specifies that the layout should be rendered in two dimensions (as
172	* opposed to 3D)
173	*/
174	@property({attribute: "layout-2d"})	1✔
175	layout2d?: boolean;	1✔
176
177	/**
178	* Specifies that the layout should be rendered in two dimensions (as
179	* opposed to 3D)
180	*/
181	@property({attribute: "style-template"})	1✔
182	styleTemplate?: StyleSchema;	1✔
183
184	/**
185	* Whether or not to run all algorithims in a style template when the
186	* template is loaded
187	*/
188	@property({attribute: "run-algorithms-on-load"})	1✔
189	runAlgorithmsOnLoad?: boolean;	1✔
190
191	/**
192	* The color to use for the background. Accepts any CSS 4 color specifier.
193	*/
194	// @property({attribute: "background"})
195	// background?: string;
196
197	/**
198	* Use a skybox image for the background. This can be a URL or base64
199	* encoded data for the image.
200	*/
201	// @property({attribute: "skybox"})
202	// skybox?: string;
203	}	1✔

graphty-org / graphty-element / 15988747166

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous