feat(editors/substation/transformerwinding): add remove button (openscd#1157)

* feat(transformer-winding-editor):add_delete_butt

* fix(transformer-winding...):use_correct_element

Author: marcvanraalte

src/editors/substation/transformer-winding-editor.ts

@@ -18,7 +18,11 @@ import '../../action-icon.js';
 import '../../action-pane.js';
 
 import { styles } from './foundation.js';
-import { getChildElementsByTagName, newWizardEvent } from '../../foundation.js';
+import {
+  getChildElementsByTagName,
+  newActionEvent,
+  newWizardEvent,
+} from '../../foundation.js';
 import { wizards } from '../../wizards/wizard-library.js';
 
 @customElement('transformer-winding-editor')
@@ -56,6 +60,18 @@ export class TransformerWindingEditor extends LitElement {
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
+  remove(): void {
+    if (this.element.parentElement)
+      this.dispatchEvent(
+        newActionEvent({
+          old: {
+            parent: this.element.parentElement,
+            element: this.element,
+          },
+        })
+      );
+  }
+
   private renderLNodes(): TemplateResult {
     const lNodes = getChildElementsByTagName(this.element, 'LNode');
 
@@ -95,6 +111,12 @@ export class TransformerWindingEditor extends LitElement {
           @click=${() => this.openEditWizard()}
         ></mwc-icon-button>
       </abbr>
+      <abbr slot="action" title="${translate('remove')}">
+        <mwc-icon-button
+          icon="delete"
+          @click=${() => this.remove()}
+        ></mwc-icon-button>
+      </abbr>
       ${this.renderLNodes()} ${this.renderEqFunctions()}
     </action-pane> `;
   }

test/integration/editors/substation/transformer-winding-editor-wizard-editing.test.ts

@@ -29,7 +29,9 @@ describe('transformer-winding-editor wizarding editing integration', () => {
         await fixture(
           html`<mock-wizard-editor
             ><transformer-winding-editor
-              .element=${doc.querySelector('TransformerWinding')}
+              .element=${doc.querySelector(
+                'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
+              )}
             ></transformer-winding-editor
           ></mock-wizard-editor>`
         )
@@ -69,7 +71,11 @@ describe('transformer-winding-editor wizarding editing integration', () => {
       primaryAction.click();
       await parent.updateComplete;
       expect(
-        doc.querySelector('TransformerWinding')?.getAttribute('name')
+        doc
+          .querySelector(
+            'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
+          )
+          ?.getAttribute('name')
       ).to.equal(oldName);
     });
     it('changes desc attribute on primary action', async () => {
@@ -80,7 +86,11 @@ describe('transformer-winding-editor wizarding editing integration', () => {
       primaryAction.click();
       await parent.updateComplete;
       expect(
-        doc.querySelector('TransformerWinding')?.getAttribute('desc')
+        doc
+          .querySelector(
+            'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
+          )
+          ?.getAttribute('desc')
       ).to.equal('newDesc');
     });
     it('changes virtual attribute on primary action', async () => {
@@ -94,8 +104,39 @@ describe('transformer-winding-editor wizarding editing integration', () => {
       primaryAction.click();
       await parent.updateComplete;
       expect(
-        doc.querySelector('TransformerWinding')?.getAttribute('virtual')
+        doc
+          .querySelector(
+            'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
+          )
+          ?.getAttribute('virtual')
       ).to.equal('true');
     });
+
+    describe('has a delete icon button that', () => {
+      let deleteButton: HTMLElement;
+
+      beforeEach(async () => {
+        deleteButton = <HTMLElement>(
+          element?.shadowRoot?.querySelector('mwc-icon-button[icon="delete"]')
+        );
+        await parent.updateComplete;
+      });
+
+      it('removes the attached TransformerWinding element from the document', async () => {
+        expect(
+          doc.querySelector(
+            'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
+          )
+        ).to.exist;
+
+        await deleteButton.click();
+
+        expect(
+          doc.querySelector(
+            'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
+          )
+        ).to.not.exist;
+      });
+    });
   });
 });

test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js

@@ -13,6 +13,13 @@ snapshots["transformer-winding-editor with children when EqFunction elements are
     <mwc-icon-button icon="edit">
     </mwc-icon-button>
   </abbr>
+  <abbr
+    slot="action"
+    title="[remove]"
+  >
+    <mwc-icon-button icon="delete">
+    </mwc-icon-button>
+  </abbr>
   <div class="container lnode">
     <l-node-editor>
     </l-node-editor>
@@ -35,6 +42,13 @@ snapshots["transformer-winding-editor with children when hiding EqFunction eleme
     <mwc-icon-button icon="edit">
     </mwc-icon-button>
   </abbr>
+  <abbr
+    slot="action"
+    title="[remove]"
+  >
+    <mwc-icon-button icon="delete">
+    </mwc-icon-button>
+  </abbr>
   <div class="container lnode">
     <l-node-editor>
     </l-node-editor>
@@ -55,6 +69,13 @@ snapshots["transformer-winding-editor without children looks like the latest sna
     <mwc-icon-button icon="edit">
     </mwc-icon-button>
   </abbr>
+  <abbr
+    slot="action"
+    title="[remove]"
+  >
+    <mwc-icon-button icon="delete">
+    </mwc-icon-button>
+  </abbr>
 </action-pane>
 `;
 /* end snapshot transformer-winding-editor without children looks like the latest snapshot */