From bae7366ddab08230a363435c0cecab9e74e6e757 Mon Sep 17 00:00:00 2001 From: Jakob Vogelsang Date: Wed, 4 May 2022 14:05:31 +0200 Subject: [PATCH 1/3] feat(editors/substation/eqfunction): add action-pane based editor --- src/editors/substation/eqfunction-editor.ts | 35 +++++++++++++++ .../substation/eqfunction-editor.test.ts | 45 +++++++++++++++++++ 2 files changed, 80 insertions(+) create mode 100644 src/editors/substation/eqfunction-editor.ts create mode 100644 test/unit/editors/substation/eqfunction-editor.test.ts diff --git a/src/editors/substation/eqfunction-editor.ts b/src/editors/substation/eqfunction-editor.ts new file mode 100644 index 0000000000..2940025093 --- /dev/null +++ b/src/editors/substation/eqfunction-editor.ts @@ -0,0 +1,35 @@ +import { + html, + LitElement, + TemplateResult, + property, + customElement, + state, +} from 'lit-element'; + +import '../../action-pane.js'; + +/** Pane rendering `Function` element with its children */ +@customElement('eqfunction-editor') +export class EqFunctionEditor extends LitElement { + /** The edited `EqFunction` 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})` : ''}`; + } + + render(): TemplateResult { + return html``; + } +} diff --git a/test/unit/editors/substation/eqfunction-editor.test.ts b/test/unit/editors/substation/eqfunction-editor.test.ts new file mode 100644 index 0000000000..a5a0b99f56 --- /dev/null +++ b/test/unit/editors/substation/eqfunction-editor.test.ts @@ -0,0 +1,45 @@ +import { fixture, html, expect } from '@open-wc/testing'; + +import '../../../../src/editors/substation/eqfunction-editor.js'; +import { EqFunctionEditor } from '../../../../src/editors/substation/eqfunction-editor.js'; + +describe('web component rendering EqFunction element', () => { + let element: EqFunctionEditor; + 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 = ( + await fixture( + html`` + ) + ); + }); + + it('looks like the latest snapshot', async () => + await expect(element).shadowDom.to.equalSnapshot()); + }); + + describe('with missing desc and type attribute', () => { + beforeEach(async () => { + element = ( + await fixture( + html`` + ) + ); + }); + + it('looks like the latest snapshot', async () => + await expect(element).shadowDom.to.equalSnapshot()); + }); +}); From 2b55e5d886097831ae1d7d9320f2439480fa9ded Mon Sep 17 00:00:00 2001 From: Jakob Vogelsang Date: Wed, 4 May 2022 14:06:31 +0200 Subject: [PATCH 2/3] feat(editors/substation): show read-only eqfunction --- .../substation/conducting-equipment-editor.ts | 19 +++++- .../substation/powertransformer-editor.ts | 18 +++++- test/testfiles/zeroline/functions.scd | 25 +++++++- .../__snapshots__/bay-editor.test.snap.js | 6 ++ .../conducting-equipment-editor.test.snap.js | 60 +++++++++++++++++++ .../eqfunction-editor.test.snap.js | 27 +++++++++ .../powertransformer-editor.test.snap.js | 60 +++++++++++++++++++ .../conducting-equipment-editor.test.ts | 16 +++++ .../powertransformer-editor.test.ts | 14 +++++ 9 files changed, 238 insertions(+), 7 deletions(-) create mode 100644 test/unit/editors/substation/__snapshots__/eqfunction-editor.test.snap.js diff --git a/src/editors/substation/conducting-equipment-editor.ts b/src/editors/substation/conducting-equipment-editor.ts index de44ccb07f..d815bcd385 100644 --- a/src/editors/substation/conducting-equipment-editor.ts +++ b/src/editors/substation/conducting-equipment-editor.ts @@ -14,8 +14,13 @@ import '@material/mwc-icon-button'; import '../../action-icon.js'; import '../../action-pane.js'; +import './eqfunction-editor.js'; import { startMove, getIcon } from './foundation.js'; -import { newActionEvent, newWizardEvent } from '../../foundation.js'; +import { + getChildElementsByTagName, + newActionEvent, + newWizardEvent, +} from '../../foundation.js'; import { BayEditor } from './bay-editor.js'; import { wizards } from '../../wizards/wizard-library.js'; @@ -57,6 +62,16 @@ export class ConductingEquipmentEditor extends LitElement { ); } + renderEqFunctions(): TemplateResult { + if (!this.showfunctions) return html``; + + const eqFunctions = getChildElementsByTagName(this.element, 'EqFunction'); + return html` ${eqFunctions.map( + eqFunction => + html`` + )}`; + } + renderContentPane(): TemplateResult { return html`${getIcon(this.element)}${this.renderContentPane()}${this.renderContentPane()}${this.renderEqFunctions()}`; return html` + html`` + )}`; + } + renderContentPane(): TemplateResult { return html`${powerTransformerTwoWindingIcon}${this.renderContentPane()}${this.renderContentPane()}${this.renderEqFunctions()} `; return html` - + + + + + @@ -29,8 +33,23 @@ - - + + + + + + + + + + + + + + + + + diff --git a/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js index c5554720a4..c9cf9629b7 100644 --- a/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js +++ b/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js @@ -300,6 +300,12 @@ snapshots["bay-editor with function filter deactivated looks like the latest sna + + + + + + `; diff --git a/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js index 458d05d8a9..df0dc3a23c 100644 --- a/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js +++ b/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js @@ -94,3 +94,63 @@ snapshots["conducting-equipment-editor rendered as action pane looks like the la `; /* end snapshot conducting-equipment-editor rendered as action pane looks like the latest snapshot */ +snapshots["conducting-equipment-editor rendered as action pane with EqFunction children looks like the latest snapshot"] = +` + + + + + + + + + + + + + + + + + + + + + +`; +/* end snapshot conducting-equipment-editor rendered as action pane with EqFunction children looks like the latest snapshot */ + diff --git a/test/unit/editors/substation/__snapshots__/eqfunction-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/eqfunction-editor.test.snap.js new file mode 100644 index 0000000000..674815ab52 --- /dev/null +++ b/test/unit/editors/substation/__snapshots__/eqfunction-editor.test.snap.js @@ -0,0 +1,27 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["web component rendering EqFunction element with complete attribute set and existing children looks like the latest snapshot"] = +` + +`; +/* end snapshot web component rendering EqFunction element with complete attribute set and existing children looks like the latest snapshot */ + +snapshots["web component rendering EqFunction element with missing desc and type attribute looks like the latest snapshot"] = +` + +`; +/* end snapshot web component rendering EqFunction element with missing desc and type attribute looks like the latest snapshot */ + diff --git a/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js index 0b834d83de..0e00df7b08 100644 --- a/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js +++ b/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js @@ -95,3 +95,63 @@ snapshots["powertransformer-editor rendered as action pane looks like the latest `; /* end snapshot powertransformer-editor rendered as action pane looks like the latest snapshot */ +snapshots["powertransformer-editor rendered as action pane with EqFunction childrend looks like the latest snapshot"] = +` + + + + + + + + + + + + + + + + + + + + + +`; +/* end snapshot powertransformer-editor rendered as action pane with EqFunction childrend looks like the latest snapshot */ + diff --git a/test/unit/editors/substation/conducting-equipment-editor.test.ts b/test/unit/editors/substation/conducting-equipment-editor.test.ts index 91809e5b39..b0546d5e2a 100644 --- a/test/unit/editors/substation/conducting-equipment-editor.test.ts +++ b/test/unit/editors/substation/conducting-equipment-editor.test.ts @@ -98,6 +98,22 @@ describe('conducting-equipment-editor', () => { await expect(element).shadowDom.to.equalSnapshot(); }); + describe('with EqFunction children', () => { + beforeEach(async () => { + const doc = await fetch('/test/testfiles/zeroline/functions.scd') + .then(response => response.text()) + .then(str => new DOMParser().parseFromString(str, 'application/xml')); + + element.element = doc.querySelector( + 'Bay[name="COUPLING_BAY"] > ConductingEquipment[name="QA1"]' + )!; + await element.requestUpdate(); + }); + + it('looks like the latest snapshot', async () => + await expect(element).shadowDom.to.equalSnapshot()); + }); + it('renders empty string in case ConductingEquipment name attribute is missing', async () => { const condEq = validSCL.querySelector('ConductingEquipment'); condEq?.removeAttribute('name'); diff --git a/test/unit/editors/substation/powertransformer-editor.test.ts b/test/unit/editors/substation/powertransformer-editor.test.ts index 7d33257c1d..75fa0f4751 100644 --- a/test/unit/editors/substation/powertransformer-editor.test.ts +++ b/test/unit/editors/substation/powertransformer-editor.test.ts @@ -91,6 +91,20 @@ describe('powertransformer-editor', () => { await expect(element).shadowDom.to.equalSnapshot(); }); + describe('with EqFunction childrend', () => { + beforeEach(async () => { + const doc = await fetch('/test/testfiles/zeroline/functions.scd') + .then(response => response.text()) + .then(str => new DOMParser().parseFromString(str, 'application/xml')); + + element.element = doc.querySelector('PowerTransformer[name="myPtr2"]')!; + await element.requestUpdate(); + }); + + it('looks like the latest snapshot', async () => + await expect(element).shadowDom.to.equalSnapshot()); + }); + it('triggers edit wizard for Linking LNode element on action button click', async () => { (( element.shadowRoot?.querySelector( From 6318b8ed2058273db964e016747c2231ef1e01fd Mon Sep 17 00:00:00 2001 From: Jakob Vogelsang Date: Thu, 5 May 2022 14:00:59 +0200 Subject: [PATCH 3/3] refactor: review request --- .../substation/conducting-equipment-editor.ts | 4 ++-- .../{eqfunction-editor.ts => eq-function-editor.ts} | 2 +- src/editors/substation/powertransformer-editor.ts | 2 +- .../conducting-equipment-editor.test.snap.js | 4 ++-- ....test.snap.js => eq-function-editor.test.snap.js} | 0 .../powertransformer-editor.test.snap.js | 4 ++-- ...ion-editor.test.ts => eq-function-editor.test.ts} | 12 ++++++------ 7 files changed, 14 insertions(+), 14 deletions(-) rename src/editors/substation/{eqfunction-editor.ts => eq-function-editor.ts} (95%) rename test/unit/editors/substation/__snapshots__/{eqfunction-editor.test.snap.js => eq-function-editor.test.snap.js} (100%) rename test/unit/editors/substation/{eqfunction-editor.test.ts => eq-function-editor.test.ts} (83%) diff --git a/src/editors/substation/conducting-equipment-editor.ts b/src/editors/substation/conducting-equipment-editor.ts index d815bcd385..19629c4e9d 100644 --- a/src/editors/substation/conducting-equipment-editor.ts +++ b/src/editors/substation/conducting-equipment-editor.ts @@ -14,7 +14,7 @@ import '@material/mwc-icon-button'; import '../../action-icon.js'; import '../../action-pane.js'; -import './eqfunction-editor.js'; +import './eq-function-editor.js'; import { startMove, getIcon } from './foundation.js'; import { getChildElementsByTagName, @@ -68,7 +68,7 @@ export class ConductingEquipmentEditor extends LitElement { const eqFunctions = getChildElementsByTagName(this.element, 'EqFunction'); return html` ${eqFunctions.map( eqFunction => - html`` + html`` )}`; } diff --git a/src/editors/substation/eqfunction-editor.ts b/src/editors/substation/eq-function-editor.ts similarity index 95% rename from src/editors/substation/eqfunction-editor.ts rename to src/editors/substation/eq-function-editor.ts index 2940025093..f3c26a0177 100644 --- a/src/editors/substation/eqfunction-editor.ts +++ b/src/editors/substation/eq-function-editor.ts @@ -10,7 +10,7 @@ import { import '../../action-pane.js'; /** Pane rendering `Function` element with its children */ -@customElement('eqfunction-editor') +@customElement('eq-function-editor') export class EqFunctionEditor extends LitElement { /** The edited `EqFunction` element */ @property({ attribute: false }) diff --git a/src/editors/substation/powertransformer-editor.ts b/src/editors/substation/powertransformer-editor.ts index 9d25a0e531..6f6b97700a 100644 --- a/src/editors/substation/powertransformer-editor.ts +++ b/src/editors/substation/powertransformer-editor.ts @@ -71,7 +71,7 @@ export class PowerTransformerEditor extends LitElement { const eqFunctions = getChildElementsByTagName(this.element, 'EqFunction'); return html` ${eqFunctions.map( eqFunction => - html`` + html`` )}`; } diff --git a/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js index df0dc3a23c..8e145f8b9f 100644 --- a/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js +++ b/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js @@ -148,8 +148,8 @@ snapshots["conducting-equipment-editor rendered as action pane with EqFunction c > - - + + `; /* end snapshot conducting-equipment-editor rendered as action pane with EqFunction children looks like the latest snapshot */ diff --git a/test/unit/editors/substation/__snapshots__/eqfunction-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/eq-function-editor.test.snap.js similarity index 100% rename from test/unit/editors/substation/__snapshots__/eqfunction-editor.test.snap.js rename to test/unit/editors/substation/__snapshots__/eq-function-editor.test.snap.js diff --git a/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js index 0e00df7b08..bb06c2da07 100644 --- a/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js +++ b/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js @@ -149,8 +149,8 @@ snapshots["powertransformer-editor rendered as action pane with EqFunction child > - - + + `; /* end snapshot powertransformer-editor rendered as action pane with EqFunction childrend looks like the latest snapshot */ diff --git a/test/unit/editors/substation/eqfunction-editor.test.ts b/test/unit/editors/substation/eq-function-editor.test.ts similarity index 83% rename from test/unit/editors/substation/eqfunction-editor.test.ts rename to test/unit/editors/substation/eq-function-editor.test.ts index a5a0b99f56..22b53d46b6 100644 --- a/test/unit/editors/substation/eqfunction-editor.test.ts +++ b/test/unit/editors/substation/eq-function-editor.test.ts @@ -1,7 +1,7 @@ import { fixture, html, expect } from '@open-wc/testing'; -import '../../../../src/editors/substation/eqfunction-editor.js'; -import { EqFunctionEditor } from '../../../../src/editors/substation/eqfunction-editor.js'; +import '../../../../src/editors/substation/eq-function-editor.js'; +import { EqFunctionEditor } from '../../../../src/editors/substation/eq-function-editor.js'; describe('web component rendering EqFunction element', () => { let element: EqFunctionEditor; @@ -17,9 +17,9 @@ describe('web component rendering EqFunction element', () => { beforeEach(async () => { element = ( await fixture( - html`` + >` ) ); }); @@ -32,9 +32,9 @@ describe('web component rendering EqFunction element', () => { beforeEach(async () => { element = ( await fixture( - html`` + >` ) ); });