feat(editors/substation): add read-only eq-sub-function-editor

src/editors/substation/eq-function-editor.ts

@@ -8,8 +8,10 @@ import {
 } from 'lit-element';
 
 import '../../action-pane.js';
+import './eq-sub-function-editor.js';
+import { getChildElementsByTagName } from '../../foundation.js';
 
-/** Pane rendering `Function` element with its children */
+/** Pane rendering `EqFunction` element with its children */
 @customElement('eq-function-editor')
 export class EqFunctionEditor extends LitElement {
   /** The edited `EqFunction` element */
@@ -24,12 +26,26 @@ export class EqFunctionEditor extends LitElement {
     return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
   }
 
+  renderEqSubFunctions(): TemplateResult {
+    const eqSubFunctions = getChildElementsByTagName(
+      this.element,
+      'EqSubFunction'
+    );
+    return html` ${eqSubFunctions.map(
+      eqSubFunction =>
+        html`<eq-sub-function-editor
+          .element=${eqSubFunction}
+        ></eq-sub-function-editor>`
+    )}`;
+  }
+
   render(): TemplateResult {
     return html`<action-pane
       label="${this.header}"
       icon="functions"
       secondary
       highlighted
-    ></action-pane>`;
+      >${this.renderEqSubFunctions()}</action-pane
+    >`;
   }
 }

src/editors/substation/eq-sub-function-editor.ts

@@ -0,0 +1,46 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  state,
+} from 'lit-element';
+
+import '../../action-pane.js';
+import { getChildElementsByTagName } from '../../foundation.js';
+
+/** Pane rendering `EqSubFunction` element with its children */
+@customElement('eq-sub-function-editor')
+export class EqSubFunctionEditor extends LitElement {
+  /** The edited `EqSubFunction` element */
+  @property({ attribute: false })
+  element!: Element;
+  @state()
+  get header(): string {
+    const name = this.element.getAttribute('name');
+    const desc = this.element.getAttribute('desc');
+    const type = this.element.getAttribute('type');
+
+    return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
+  }
+
+  renderEqSubFunctions(): TemplateResult {
+    const eqSubFunctions = getChildElementsByTagName(
+      this.element,
+      'EqSubFunction'
+    );
+    return html` ${eqSubFunctions.map(
+      eqSubFunction =>
+        html`<eq-sub-function-editor
+          .element=${eqSubFunction}
+        ></eq-sub-function-editor>`
+    )}`;
+  }
+
+  render(): TemplateResult {
+    return html`<action-pane label="${this.header}" icon="functions" secondary
+      >${this.renderEqSubFunctions()}</action-pane
+    >`;
+  }
+}

test/testfiles/zeroline/functions.scd

@@ -35,7 +35,9 @@
 				<PowerTransformer name="myPtr3" type="PTR"/>
                 <ConductingEquipment name="QA1" desc="some desc" type="CRB">
                     <EqFunction name="myEqFuncQA1" desc="funcForQA1" type="eqFuncType">
-                        <EqSubFunction name="myEqSubFunc"/> 
+                        <EqSubFunction name="myEqSubFunc">
+							<EqSubFunction name="myEqSubSubFunction" desc="my desc" type="sometype"/>
+						</EqSubFunction> 
                     </EqFunction> 
                 </ConductingEquipment>
 				<ConductingEquipment name="QB1" type="DIS">

test/unit/editors/substation/__snapshots__/eq-function-editor.test.snap.js

@@ -9,6 +9,8 @@ snapshots["web component rendering EqFunction element with complete attribute se
   secondary=""
   tabindex="0"
 >
+  <eq-sub-function-editor>
+  </eq-sub-function-editor>
 </action-pane>
 `;
 /* end snapshot web component rendering EqFunction element with complete attribute set and existing children looks like the latest snapshot */
@@ -21,6 +23,8 @@ snapshots["web component rendering EqFunction element with missing desc and type
   secondary=""
   tabindex="0"
 >
+  <eq-sub-function-editor>
+  </eq-sub-function-editor>
 </action-pane>
 `;
 /* end snapshot web component rendering EqFunction element with missing desc and type attribute looks like the latest snapshot */

test/unit/editors/substation/__snapshots__/eq-sub-function-editor.test.snap.js

@@ -0,0 +1,27 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["web component rendering EqSubFunction element with complete attribute set and existing children looks like the latest snapshot"] = 
+`<action-pane
+  icon="functions"
+  label="myEqSubSubFunction - my desc (sometype)"
+  secondary=""
+  tabindex="0"
+>
+</action-pane>
+`;
+/* end snapshot web component rendering EqSubFunction element with complete attribute set and existing children looks like the latest snapshot */
+
+snapshots["web component rendering EqSubFunction element with missing desc and type attribute looks like the latest snapshot"] = 
+`<action-pane
+  icon="functions"
+  label="myEqSubFunc"
+  secondary=""
+  tabindex="0"
+>
+  <eq-sub-function-editor>
+  </eq-sub-function-editor>
+</action-pane>
+`;
+/* end snapshot web component rendering EqSubFunction element with missing desc and type attribute looks like the latest snapshot */
+

test/unit/editors/substation/eq-sub-function-editor.test.ts

@@ -0,0 +1,45 @@
+import { fixture, html, expect } from '@open-wc/testing';
+
+import '../../../../src/editors/substation/eq-sub-function-editor.js';
+import { EqSubFunctionEditor } from '../../../../src/editors/substation/eq-sub-function-editor.js';
+
+describe('web component rendering EqSubFunction element', () => {
+  let element: EqSubFunctionEditor;
+  let doc: XMLDocument;
+
+  beforeEach(async () => {
+    doc = await fetch('/test/testfiles/zeroline/functions.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+  });
+
+  describe('with complete attribute set and existing children', () => {
+    beforeEach(async () => {
+      element = <EqSubFunctionEditor>(
+        await fixture(
+          html`<eq-sub-function-editor
+            .element=${doc.querySelector('EqSubFunction > EqSubFunction')}
+          ></eq-sub-function-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () =>
+      await expect(element).shadowDom.to.equalSnapshot());
+  });
+
+  describe('with missing desc and type attribute', () => {
+    beforeEach(async () => {
+      element = <EqSubFunctionEditor>(
+        await fixture(
+          html`<eq-sub-function-editor
+            .element=${doc.querySelector('ConductingEquipment EqSubFunction')}
+          ></eq-sub-function-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () =>
+      await expect(element).shadowDom.to.equalSnapshot());
+  });
+});