diff --git a/src/editors/substation/l-node-editor.ts b/src/editors/substation/l-node-editor.ts
index 01dcd8b248..3dcc6260ce 100644
--- a/src/editors/substation/l-node-editor.ts
+++ b/src/editors/substation/l-node-editor.ts
@@ -8,7 +8,7 @@ import {
} from 'lit-element';
import '../../action-icon.js';
-import { identity } from '../../foundation.js';
+import { identity, newActionEvent } from '../../foundation.js';
import {
automationLogicalNode,
controlLogicalNode,
@@ -75,15 +75,30 @@ export class LNodeEditor extends LitElement {
return this.element.getAttribute('iedName') === 'None' ?? false;
}
+ remove(): void {
+ if (this.element)
+ this.dispatchEvent(
+ newActionEvent({
+ old: {
+ parent: this.element.parentElement!,
+ element: this.element,
+ },
+ })
+ );
+ }
+
render(): TemplateResult {
return html`${getLNodeIcon(this.element)}`;
+ >${getLNodeIcon(this.element)} this.remove()}}"
+ >`;
}
}
diff --git a/test/integration/editors/substation/l-node-editor-wizarding-editing.test.ts b/test/integration/editors/substation/l-node-editor-wizarding-editing.test.ts
new file mode 100644
index 0000000000..c926a68d6c
--- /dev/null
+++ b/test/integration/editors/substation/l-node-editor-wizarding-editing.test.ts
@@ -0,0 +1,51 @@
+import { fixture, html, expect } from '@open-wc/testing';
+
+import '../../../mock-wizard-editor.js';
+import { MockWizardEditor } from '../../../mock-wizard-editor.js';
+
+import '../../../../src/editors/substation/l-node-editor.js';
+import { LNodeEditor } from '../../../../src/editors/substation/l-node-editor.js';
+
+describe('l-node-editor wizarding editing integration', () => {
+ let doc: XMLDocument;
+ let parent: MockWizardEditor;
+ let element: LNodeEditor | null;
+
+ beforeEach(async () => {
+ doc = await fetch('/test/testfiles/zeroline/functions.scd')
+ .then(response => response.text())
+ .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+ parent = (
+ await fixture(
+ html` LNode[lnClass="CSWI"]')}
+ >`
+ )
+ );
+
+ element = parent.querySelector('l-node-editor');
+ });
+
+ describe('has a delete icon button that', () => {
+ let deleteButton: HTMLElement;
+
+ beforeEach(async () => {
+ deleteButton = (
+ element?.shadowRoot?.querySelector('mwc-fab[icon="delete"]')
+ );
+ await parent.updateComplete;
+ });
+
+ it('removes the attached LNode element from the document', async () => {
+ expect(doc.querySelector('Substation > LNode[lnClass="CSWI"]')).to.exist;
+
+ await deleteButton.click();
+
+ expect(doc.querySelector('Substation > LNode[lnClass="CSWI"]')).to.not
+ .exist;
+ });
+ });
+});
diff --git a/test/unit/editors/substation/__snapshots__/l-node-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/l-node-editor.test.snap.js
index 3a0f0fc09c..8f552702f5 100644
--- a/test/unit/editors/substation/__snapshots__/l-node-editor.test.snap.js
+++ b/test/unit/editors/substation/__snapshots__/l-node-editor.test.snap.js
@@ -3,19 +3,23 @@ export const snapshots = {};
snapshots["web component rendering LNode element as reference to a LN/LN0 within IED looks like the latest snapshot"] =
`
+
+
`;
/* end snapshot web component rendering LNode element as reference to a LN/LN0 within IED looks like the latest snapshot */
snapshots["web component rendering LNode element as instance of a LNodeType only looks like the latest snapshot"] =
`
+
+
`;
/* end snapshot web component rendering LNode element as instance of a LNodeType only looks like the latest snapshot */