feat(editor/substation/l-node-editor): add remove button (openscd#771)

* feat(editor/substation/l-node-editor): add remmove button

* refactor(editors/substation/l-node-editor): better naming

Author: JakobVogelsang

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`<action-icon
       label="${this.header}"
       ?secondary=${this.missingIedReference}
       ?highlighted=${this.missingIedReference}
-      hideActions
-      ><mwc-icon slot="icon"
-        >${getLNodeIcon(this.element)}</mwc-icon
-      ></action-icon
-    >`;
+      ><mwc-icon slot="icon">${getLNodeIcon(this.element)}</mwc-icon
+      ><mwc-fab
+        slot="action"
+        mini
+        icon="delete"
+        @click="${() => this.remove()}}"
+      ></mwc-fab
+    ></action-icon>`;
   }
 }

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 = <MockWizardEditor>(
+      await fixture(
+        html`<mock-wizard-editor
+          ><l-node-editor
+            .element=${doc.querySelector('Substation > LNode[lnClass="CSWI"]')}
+          ></l-node-editor
+        ></mock-wizard-editor>`
+      )
+    );
+
+    element = parent.querySelector('l-node-editor');
+  });
+
+  describe('has a delete icon button that', () => {
+    let deleteButton: HTMLElement;
+
+    beforeEach(async () => {
+      deleteButton = <HTMLElement>(
+        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;
+    });
+  });
+});

test/unit/editors/substation/__snapshots__/l-node-editor.test.snap.js

@@ -3,26 +3,36 @@ export const snapshots = {};
 
 snapshots["web component rendering LNode element as reference to a LN/LN0 within IED  looks like the latest snapshot"] = 
 `<action-icon
-  hideactions=""
   label="IED1 CircuitBreaker_CB1/ XCBR 1"
   tabindex="0"
 >
   <mwc-icon slot="icon">
   </mwc-icon>
+  <mwc-fab
+    icon="delete"
+    mini=""
+    slot="action"
+  >
+  </mwc-fab>
 </action-icon>
 `;
 /* 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"] = 
 `<action-icon
-  hideactions=""
   highlighted=""
   label="DC XSWI 1"
   secondary=""
   tabindex="0"
 >
   <mwc-icon slot="icon">
   </mwc-icon>
+  <mwc-fab
+    icon="delete"
+    mini=""
+    slot="action"
+  >
+  </mwc-fab>
 </action-icon>
 `;
 /* end snapshot web component rendering LNode element as instance of a LNodeType only looks like the latest snapshot */