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)}`; } } 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 */