From d752b4c9ef3d07146a0ef17e24e6e5a847708a38 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Thu, 30 Dec 2021 23:27:41 +0100 Subject: [PATCH 01/18] Added basic DA container for DA/DAI show --- src/editors/ied/da-container.ts | 84 +++++++++++++++++++++++++++++++++ src/editors/ied/do-container.ts | 43 ++++++++++++++--- 2 files changed, 121 insertions(+), 6 deletions(-) create mode 100644 src/editors/ied/da-container.ts diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts new file mode 100644 index 0000000000..26e6bc1a0c --- /dev/null +++ b/src/editors/ied/da-container.ts @@ -0,0 +1,84 @@ +import { + customElement, + html, + LitElement, + property, + TemplateResult, +} from 'lit-element'; +import { nothing } from 'lit-html'; + +import '../../action-pane.js'; +import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js'; + +/** [[`IED`]] plugin subeditor for editing `(B)DA` element. */ +@customElement('da-container') +export class DAContainer extends LitElement { + /** + * The DA itself. + */ + @property({ attribute: false }) + element!: Element; + + /** + * The optional DAI of this (B)DA. + */ + @property({ attribute: false }) + instanceElement!: Element; + + private header(): TemplateResult { + const name = getNameAttribute(this.element); + const desc = getDescriptionAttribute(this.element); + + if (this.instanceElement != null) { + return html`${name}${desc ? html` — ${desc}` : nothing}`; + } else { + return html`${name}${desc ? html` — ${desc}` : nothing}`; + } + } + + /** + * Get an (optional) value of a DA(I). + * If there is a DAI, it get's priority. + * @returns + */ + private getDAValue(): TemplateResult { + if (this.instanceElement) { + return html`${this.getValueElement(this.instanceElement)}` + } + + return html`${this.getValueElement(this.element)}`; + } + + /** + * Get the 'Val' element of another element. + * @param element - The element to search for an 'Val' element. + * @returns the 'Val' element, or null if not found. + */ + private getValueElement(element: Element): Element | null { + return element.querySelector('Val') ?? null; + } + + /** + * Get the nested (B)DA element(s). + * @returns The nested (B)DA element(s) of this DO container. + */ + private getDAElements(): Element[] { + const type = this.element.getAttribute('type') ?? undefined; + const doType = this.element.closest('SCL')!.querySelector(`:root > DataTypeTemplates > DOType[id="${type}"]`); + if (doType != null) { + return Array.from(doType!.querySelectorAll(':scope > DA')) + } + return []; + } + + render(): TemplateResult { + return html` + ${this.getDAValue()} + ${this.getDAElements().map(da => + html` + `)} + + `; + } +} \ No newline at end of file diff --git a/src/editors/ied/do-container.ts b/src/editors/ied/do-container.ts index ef49c9e421..94b964d70a 100644 --- a/src/editors/ied/do-container.ts +++ b/src/editors/ied/do-container.ts @@ -1,5 +1,4 @@ import { - css, customElement, html, LitElement, @@ -9,6 +8,7 @@ import { import { nothing } from 'lit-html'; import '../../action-pane.js'; +import './da-container.js'; import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js'; /** [[`IED`]] plugin subeditor for editing `DO` element. */ @@ -51,24 +51,55 @@ export class DOContainer extends LitElement { } /** - * Get the instance element (SDI) of a SDO element (if available) - * @param sdo - The SDO object to search with. + * Get the nested (B)DA element(s). + * @returns The nested (B)DA element(s) of this DO container. + */ + private getDAElements(): Element[] { + const type = this.element.getAttribute('type') ?? undefined; + const doType = this.element.closest('SCL')!.querySelector(`:root > DataTypeTemplates > DOType[id="${type}"]`); + if (doType != null) { + return Array.from(doType!.querySelectorAll(':scope > DA')) + } + return []; + } + + /** + * Get the instance element (SDI) of a (S)DO element (if available) + * @param dO - The (S)DO object to search with. * @returns The optional SDI element. */ - private getInstanceElement(sdo: Element): Element | null { - const sdoName = getNameAttribute(sdo); + private getInstanceDOElement(dO: Element): Element | null { + const sdoName = getNameAttribute(dO); if (this.instanceElement) { return this.instanceElement.querySelector(`:scope > SDI[name="${sdoName}"]`) } return null; } + /** + * Get the instance element (DAI) of a DA element (if available) + * @param da - The (B)DA object to search with. + * @returns The optional DAI element. + */ + private getInstanceDAElement(da: Element): Element | null { + const daName = getNameAttribute(da); + if (this.instanceElement) { + return this.instanceElement.querySelector(`:scope > DAI[name="${daName}"]`) + } + return null; + } + render(): TemplateResult { return html` + ${this.getDAElements().map(da => + html` + `)} ${this.getDOElements().map(dO => html` + .instanceElement=${this.getInstanceDOElement(dO)}> `)} `; From fb9f8332ed0beab1dcc657637548ceadba7ae5e9 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Sun, 2 Jan 2022 23:15:03 +0100 Subject: [PATCH 02/18] Added BDA container --- src/editors/ied/da-container.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index 26e6bc1a0c..05eac6c15d 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -39,7 +39,7 @@ export class DAContainer extends LitElement { /** * Get an (optional) value of a DA(I). * If there is a DAI, it get's priority. - * @returns + * @returns TemplateResult containing the value of the instance, element or nothing. */ private getDAValue(): TemplateResult { if (this.instanceElement) { @@ -62,19 +62,19 @@ export class DAContainer extends LitElement { * Get the nested (B)DA element(s). * @returns The nested (B)DA element(s) of this DO container. */ - private getDAElements(): Element[] { + private getBDAElements(): Element[] { const type = this.element.getAttribute('type') ?? undefined; - const doType = this.element.closest('SCL')!.querySelector(`:root > DataTypeTemplates > DOType[id="${type}"]`); + const doType = this.element.closest('SCL')!.querySelector(`:root > DataTypeTemplates > DAType[id="${type}"]`); if (doType != null) { - return Array.from(doType!.querySelectorAll(':scope > DA')) + return Array.from(doType!.querySelectorAll(':scope > BDA')) } return []; } render(): TemplateResult { - return html` + return html` ${this.getDAValue()} - ${this.getDAElements().map(da => + ${this.getBDAElements().map(da => html` `)} From eb3712d6cf9ccf38f5b3c5f23bcb630fda63ac10 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Sun, 2 Jan 2022 23:20:07 +0100 Subject: [PATCH 03/18] Added value css --- src/editors/ied/da-container.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index 05eac6c15d..da9080438f 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -1,4 +1,5 @@ import { + css, customElement, html, LitElement, @@ -73,7 +74,7 @@ export class DAContainer extends LitElement { render(): TemplateResult { return html` - ${this.getDAValue()} +
${this.getDAValue()}
${this.getBDAElements().map(da => html` @@ -81,4 +82,17 @@ export class DAContainer extends LitElement { `; } + + static styles = css` + h6 { + color: var(--mdc-theme-on-surface); + font-family: 'Roboto', sans-serif; + font-weight: 300; + overflow: visible; + white-space: nowrap; + text-overflow: ellipsis; + margin: 0px; + padding-left: 0.3em; + } + `; } \ No newline at end of file From 0b3b88a05e0f12f1d29734253a4286c31f310e47 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 3 Jan 2022 09:11:46 +0100 Subject: [PATCH 04/18] Added Enum container --- src/editors/ied/da-container.ts | 19 +++++++++++++++++++ src/editors/ied/enum-container.ts | 26 ++++++++++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 src/editors/ied/enum-container.ts diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index da9080438f..3ef36af40b 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -9,6 +9,7 @@ import { import { nothing } from 'lit-html'; import '../../action-pane.js'; +import './enum-container.js'; import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js'; /** [[`IED`]] plugin subeditor for editing `(B)DA` element. */ @@ -60,6 +61,7 @@ export class DAContainer extends LitElement { } /** + * STRUCT. * Get the nested (B)DA element(s). * @returns The nested (B)DA element(s) of this DO container. */ @@ -72,6 +74,19 @@ export class DAContainer extends LitElement { return []; } + /** + * ENUM. + * @returns + */ + private getEnumElements(): Element[] { + const type = this.element.getAttribute('type') ?? undefined; + const doType = this.element.closest('SCL')!.querySelector(`:root > DataTypeTemplates > EnumType[id="${type}"]`); + if (doType != null) { + return Array.from(doType!.querySelectorAll(':scope > EnumVal')) + } + return []; + } + render(): TemplateResult { return html`
${this.getDAValue()}
@@ -79,6 +94,10 @@ export class DAContainer extends LitElement { html` `)} + ${this.getEnumElements().map(element => + html` + `)} `; } diff --git a/src/editors/ied/enum-container.ts b/src/editors/ied/enum-container.ts new file mode 100644 index 0000000000..931d35a3d1 --- /dev/null +++ b/src/editors/ied/enum-container.ts @@ -0,0 +1,26 @@ +import { + customElement, + html, + LitElement, + property, + TemplateResult, +} from 'lit-element'; + +import '../../action-pane.js'; + +/** [[`IED`]] plugin subeditor for editing `EnumVal` element. */ +@customElement('enum-container') +export class EnumContainer extends LitElement { + @property({ attribute: false }) + element!: Element; + + private header(): TemplateResult { + return html`${this.element.getAttribute('ord')} — ${this.element.textContent}`; + } + + render(): TemplateResult { + return html` + + `; + } +} \ No newline at end of file From d0234f7c355c00c406ce0afb4af953303d369933 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 3 Jan 2022 14:05:36 +0100 Subject: [PATCH 05/18] Refactoring --- src/editors/ied/da-container.ts | 41 ++++++++++++++++--------------- src/editors/ied/enum-container.ts | 6 ++--- 2 files changed, 23 insertions(+), 24 deletions(-) diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index 3ef36af40b..fbe1b4a328 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -10,7 +10,7 @@ import { nothing } from 'lit-html'; import '../../action-pane.js'; import './enum-container.js'; -import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js'; +import { getNameAttribute } from '../../foundation.js'; /** [[`IED`]] plugin subeditor for editing `(B)DA` element. */ @customElement('da-container') @@ -29,21 +29,21 @@ export class DAContainer extends LitElement { private header(): TemplateResult { const name = getNameAttribute(this.element); - const desc = getDescriptionAttribute(this.element); + const bType = this.element!.getAttribute('bType') ?? nothing; if (this.instanceElement != null) { - return html`${name}${desc ? html` — ${desc}` : nothing}`; + return html`${name} — ${bType}`; } else { - return html`${name}${desc ? html` — ${desc}` : nothing}`; + return html`${name} — ${bType}`; } } /** - * Get an (optional) value of a DA(I). - * If there is a DAI, it get's priority. + * Rendering an optional value of this (B)DA container. + * If there is a DAI, it get's priority on top of (B)DA values. * @returns TemplateResult containing the value of the instance, element or nothing. */ - private getDAValue(): TemplateResult { + private renderValue(): TemplateResult { if (this.instanceElement) { return html`${this.getValueElement(this.instanceElement)}` } @@ -61,9 +61,8 @@ export class DAContainer extends LitElement { } /** - * STRUCT. - * Get the nested (B)DA element(s). - * @returns The nested (B)DA element(s) of this DO container. + * Get the nested (B)DA element(s) if available. + * @returns The nested (B)DA element(s) of this (B)DA container. */ private getBDAElements(): Element[] { const type = this.element.getAttribute('type') ?? undefined; @@ -75,8 +74,8 @@ export class DAContainer extends LitElement { } /** - * ENUM. - * @returns + * Get the nested EnumVal element(s) if available. + * @returns The nested EnumVal element(s) of this (B)DA container. */ private getEnumElements(): Element[] { const type = this.element.getAttribute('type') ?? undefined; @@ -88,16 +87,18 @@ export class DAContainer extends LitElement { } render(): TemplateResult { - return html` -
${this.getDAValue()}
- ${this.getBDAElements().map(da => + const bType = this.element!.getAttribute('bType'); + + return html` +
${this.renderValue()}
+ ${bType == 'Struct' ? this.getBDAElements().map(element => html` - `)} - ${this.getEnumElements().map(element => + .element=${element}> + `) : nothing} + ${bType == 'Enum' ? this.getEnumElements().map(element => html` - `)} + `) : nothing} `; } @@ -106,7 +107,7 @@ export class DAContainer extends LitElement { h6 { color: var(--mdc-theme-on-surface); font-family: 'Roboto', sans-serif; - font-weight: 300; + font-weight: 400; overflow: visible; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/editors/ied/enum-container.ts b/src/editors/ied/enum-container.ts index 931d35a3d1..22a29b9b60 100644 --- a/src/editors/ied/enum-container.ts +++ b/src/editors/ied/enum-container.ts @@ -15,12 +15,10 @@ export class EnumContainer extends LitElement { element!: Element; private header(): TemplateResult { - return html`${this.element.getAttribute('ord')} — ${this.element.textContent}`; + return html`${this.element.textContent}`; } render(): TemplateResult { - return html` - - `; + return html``; } } \ No newline at end of file From c50ee5531388bd8dba488ca6897c923ec9fc3b0d Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 3 Jan 2022 15:37:30 +0100 Subject: [PATCH 06/18] Refactoring + Adding Unit Tests --- src/editors/ied/da-container.ts | 13 +-- .../__snapshots__/da-container.test.snap.js | 48 ++++++++++ .../__snapshots__/do-container.test.snap.js | 44 ++++++++-- test/unit/editors/ied/da-container.test.ts | 87 +++++++++++++++++++ 4 files changed, 180 insertions(+), 12 deletions(-) create mode 100644 test/unit/editors/ied/__snapshots__/da-container.test.snap.js create mode 100644 test/unit/editors/ied/da-container.test.ts diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index fbe1b4a328..62f9fcbec3 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -31,7 +31,7 @@ export class DAContainer extends LitElement { const name = getNameAttribute(this.element); const bType = this.element!.getAttribute('bType') ?? nothing; - if (this.instanceElement != null) { + if (this.instanceElement) { return html`${name} — ${bType}`; } else { return html`${name} — ${bType}`; @@ -65,8 +65,8 @@ export class DAContainer extends LitElement { * @returns The nested (B)DA element(s) of this (B)DA container. */ private getBDAElements(): Element[] { - const type = this.element.getAttribute('type') ?? undefined; - const doType = this.element.closest('SCL')!.querySelector(`:root > DataTypeTemplates > DAType[id="${type}"]`); + const type = this.element!.getAttribute('type') ?? undefined; + const doType = this.element!.closest('SCL')!.querySelector(`:root > DataTypeTemplates > DAType[id="${type}"]`); if (doType != null) { return Array.from(doType!.querySelectorAll(':scope > BDA')) } @@ -78,8 +78,8 @@ export class DAContainer extends LitElement { * @returns The nested EnumVal element(s) of this (B)DA container. */ private getEnumElements(): Element[] { - const type = this.element.getAttribute('type') ?? undefined; - const doType = this.element.closest('SCL')!.querySelector(`:root > DataTypeTemplates > EnumType[id="${type}"]`); + const type = this.element!.getAttribute('type') ?? undefined; + const doType = this.element!.closest('SCL')!.querySelector(`:root > DataTypeTemplates > EnumType[id="${type}"]`); if (doType != null) { return Array.from(doType!.querySelectorAll(':scope > EnumVal')) } @@ -107,7 +107,8 @@ export class DAContainer extends LitElement { h6 { color: var(--mdc-theme-on-surface); font-family: 'Roboto', sans-serif; - font-weight: 400; + font-weight: 500; + font-size: 0.8em; overflow: visible; white-space: nowrap; text-overflow: ellipsis; diff --git a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js new file mode 100644 index 0000000000..f2ed77b6dc --- /dev/null +++ b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js @@ -0,0 +1,48 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements"] = +` +
+
+ + + + + + + + + + + +`; +/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements */ + +snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI."] = +` +
+ + status-only + +
+ + + + + + + + + + + +`; +/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI. */ + diff --git a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js index 54435eba50..05284a0642 100644 --- a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js @@ -1,23 +1,55 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["do-container looks like the latest snapshot with a SDO element."] = +snapshots["do-container looks like the latest snapshot with a DO element."] = ` - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; -/* end snapshot do-container looks like the latest snapshot with a SDO element. */ +/* end snapshot do-container looks like the latest snapshot with a DO element. */ -snapshots["do-container looks like the latest snapshot with a DO element."] = +snapshots["do-container looks like the latest snapshot with a SDO element."] = ` + + + + + + `; -/* end snapshot do-container looks like the latest snapshot with a DO element. */ +/* end snapshot do-container looks like the latest snapshot with a SDO element. */ diff --git a/test/unit/editors/ied/da-container.test.ts b/test/unit/editors/ied/da-container.test.ts new file mode 100644 index 0000000000..8ef7473d50 --- /dev/null +++ b/test/unit/editors/ied/da-container.test.ts @@ -0,0 +1,87 @@ +import { html, fixture, expect } from '@open-wc/testing'; + +import '../../../../src/editors/ied/da-container.js'; +import { DAContainer } from '../../../../src/editors/ied/da-container.js'; + +describe('da-container', () => { + let element: DAContainer; + let validSCL: XMLDocument; + + beforeEach(async () => { + validSCL = await fetch('/test/testfiles/valid2007B4withIEDModifications.scd') + .then(response => response.text()) + .then(str => new DOMParser().parseFromString(str, 'application/xml')); + }); + + it('looks like the latest snapshot with a DA element containing other Enumeration elements', async () => { + element = await fixture(html` DOType[id="Dummy.XCBR1.Pos"] > DA[name="ctlModel"]')} + >`); + expect(element).shadowDom.to.equalSnapshot(); + }); + + it('looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI.', async () => { + element = await fixture(html` DOType[id="Dummy.XCBR1.Pos"] > DA[name="ctlModel"]')} + .instanceElement=${validSCL.querySelector( + ':root > IED[name="IED2"] > AccessPoint[name="P1"] > Server > LDevice[inst="CircuitBreaker_CB1"] > LN[lnType="Dummy.XCBR1"] > DOI[name="Pos"]> DAI[name="ctlModel"]')} + >`); + expect(element).shadowDom.to.equalSnapshot(); + }); + + it('looks like the latest snapshot with a DA element containing other BDA elements.', async () => { + element = await fixture(html` DOType[id="Dummy.LLN0.Mod"] > DA[name="SBOw"]')} + >`); + expect(element).shadowDom.to.equalSnapshot(); + }); + + describe('has a getBDAElements function ', () => { + it('which returns BDA elements if available', async () => { + element = await fixture(html` DOType[id="Dummy.LPHD1.Sim"] > DA[name="SBOw"]')} + >`); + + const bdaElements = element['getBDAElements'](); + expect(bdaElements.length).to.eql(6); + expect(bdaElements[4].getAttribute('name')).to.eql('Test'); + }); + + it('which returns no BDA elements if they are not available', async () => { + element = await fixture(html` DOType[id="Dummy.LPHD1.Sim"] > DA[name="SBO"]')} + >`); + + const bdaElements = element['getBDAElements'](); + expect(bdaElements).to.be.empty; + }); + }); + + describe('has a getEnumElements function ', () => { + it('which returns EnumVal elements if available', async () => { + element = await fixture(html` DOType[id="Dummy.LPHD1.Sim"] > DA[name="ctlModel"]')} + >`); + + const bdaElements = element['getEnumElements'](); + expect(bdaElements.length).to.eql(5); + expect(bdaElements[2].textContent).to.eql('sbo-with-normal-security'); + }); + + it('which returns no BDA elements if they are not available', async () => { + element = await fixture(html` DOType[id="Dummy.LPHD1.Sim"] > DA[name="q"]')} + >`); + + const bdaElements = element['getEnumElements'](); + expect(bdaElements).to.be.empty; + }); + }); +}); From 9a25d799a294e951b1f9a18121a400b183e9e540 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 3 Jan 2022 15:53:37 +0100 Subject: [PATCH 07/18] Added Enum Tests --- .../__snapshots__/da-container.test.snap.js | 23 +++++++++++++++++ .../__snapshots__/enum-container.test.snap.js | 9 +++++++ test/unit/editors/ied/enum-container.test.ts | 25 +++++++++++++++++++ 3 files changed, 57 insertions(+) create mode 100644 test/unit/editors/ied/__snapshots__/enum-container.test.snap.js create mode 100644 test/unit/editors/ied/enum-container.test.ts diff --git a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js index f2ed77b6dc..65164c6f3f 100644 --- a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js @@ -46,3 +46,26 @@ snapshots["da-container looks like the latest snapshot with a DA element contain `; /* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI. */ +snapshots["da-container looks like the latest snapshot with a DA element containing other BDA elements."] = +` +
+
+ + + + + + + + + + + + + +`; +/* end snapshot da-container looks like the latest snapshot with a DA element containing other BDA elements. */ + diff --git a/test/unit/editors/ied/__snapshots__/enum-container.test.snap.js b/test/unit/editors/ied/__snapshots__/enum-container.test.snap.js new file mode 100644 index 0000000000..00868f6351 --- /dev/null +++ b/test/unit/editors/ied/__snapshots__/enum-container.test.snap.js @@ -0,0 +1,9 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["enum-container looks like the latest snapshot with an EnumVal element."] = +` + +`; +/* end snapshot enum-container looks like the latest snapshot with an EnumVal element. */ + diff --git a/test/unit/editors/ied/enum-container.test.ts b/test/unit/editors/ied/enum-container.test.ts new file mode 100644 index 0000000000..38d8ab8a03 --- /dev/null +++ b/test/unit/editors/ied/enum-container.test.ts @@ -0,0 +1,25 @@ +import { html, fixture, expect } from '@open-wc/testing'; + +import '../../../../src/editors/ied/enum-container.js'; +import { EnumContainer } from '../../../../src/editors/ied/enum-container.js'; + +describe('enum-container', () => { + let element: EnumContainer; + let validSCL: XMLDocument; + + beforeEach(async () => { + validSCL = await fetch('/test/testfiles/valid2007B4withIEDModifications.scd') + .then(response => response.text()) + .then(str => new DOMParser().parseFromString(str, 'application/xml')); + }); + + it('looks like the latest snapshot with an EnumVal element.', async () => { + element = await fixture(html` EnumType[id="Dummy_ctlModel"] > EnumVal[ord="2"]')} + >`); + + expect(element).shadowDom.to.equalSnapshot(); + expect(element.shadowRoot!.querySelector('action-pane')?.shadowRoot?.innerHTML).to.include('sbo-with-normal-security'); + }); +}); From 1fa5abd9fe0e9f25609084738ba7f173d4bd3aae Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 3 Jan 2022 19:13:57 +0100 Subject: [PATCH 08/18] Small refactoring --- src/editors/ied/da-container.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index 62f9fcbec3..8eb6d88b56 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -88,7 +88,6 @@ export class DAContainer extends LitElement { render(): TemplateResult { const bType = this.element!.getAttribute('bType'); - return html`
${this.renderValue()}
${bType == 'Struct' ? this.getBDAElements().map(element => From ebc0dfe0f1b16124a002ddbd59f91b6764f32d68 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Thu, 6 Jan 2022 23:50:47 +0100 Subject: [PATCH 09/18] First review comments + Added toggle action --- src/editors/ied/da-container.ts | 38 +++++----- src/editors/ied/do-container.ts | 34 +++++++-- src/editors/ied/enum-container.ts | 24 ------- src/editors/ied/ln-container.ts | 25 ++++++- src/translations/de.ts | 1 + src/translations/en.ts | 3 +- .../__snapshots__/da-container.test.snap.js | 69 +++++++------------ .../__snapshots__/do-container.test.snap.js | 53 +++++++------- .../__snapshots__/enum-container.test.snap.js | 9 --- .../__snapshots__/ln-container.test.snap.js | 46 +++++++++---- test/unit/editors/ied/da-container.test.ts | 23 ------- test/unit/editors/ied/enum-container.test.ts | 25 ------- 12 files changed, 159 insertions(+), 191 deletions(-) delete mode 100644 src/editors/ied/enum-container.ts delete mode 100644 test/unit/editors/ied/__snapshots__/enum-container.test.snap.js delete mode 100644 test/unit/editors/ied/enum-container.test.ts diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index 8eb6d88b56..aa6a0fb7ed 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -4,12 +4,13 @@ import { html, LitElement, property, + query, TemplateResult, } from 'lit-element'; import { nothing } from 'lit-html'; +import { translate } from 'lit-translate'; import '../../action-pane.js'; -import './enum-container.js'; import { getNameAttribute } from '../../foundation.js'; /** [[`IED`]] plugin subeditor for editing `(B)DA` element. */ @@ -26,6 +27,8 @@ export class DAContainer extends LitElement { */ @property({ attribute: false }) instanceElement!: Element; + + @query('#toggleButton') toggleButton!: HTMLElement; private header(): TemplateResult { const name = getNameAttribute(this.element); @@ -73,31 +76,32 @@ export class DAContainer extends LitElement { return []; } - /** - * Get the nested EnumVal element(s) if available. - * @returns The nested EnumVal element(s) of this (B)DA container. - */ - private getEnumElements(): Element[] { - const type = this.element!.getAttribute('type') ?? undefined; - const doType = this.element!.closest('SCL')!.querySelector(`:root > DataTypeTemplates > EnumType[id="${type}"]`); - if (doType != null) { - return Array.from(doType!.querySelectorAll(':scope > EnumVal')) - } - return []; + private toggle(): void { + this.toggleButton.setAttribute('icon', + this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') + + this.shadowRoot!.querySelectorAll(':scope > action-pane > da-container').forEach(element => { + element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', '') + }) } render(): TemplateResult { const bType = this.element!.getAttribute('bType'); + return html` + ${bType == 'Struct' ? html` + this.toggle()} + > + ` : nothing}
${this.renderValue()}
${bType == 'Struct' ? this.getBDAElements().map(element => html` + .element=${element} + hidden> `) : nothing} - ${bType == 'Enum' ? this.getEnumElements().map(element => - html` - `) : nothing} `; } diff --git a/src/editors/ied/do-container.ts b/src/editors/ied/do-container.ts index 94b964d70a..c60c00ed4c 100644 --- a/src/editors/ied/do-container.ts +++ b/src/editors/ied/do-container.ts @@ -3,6 +3,7 @@ import { html, LitElement, property, + query, TemplateResult, } from 'lit-element'; import { nothing } from 'lit-html'; @@ -10,6 +11,7 @@ import { nothing } from 'lit-html'; import '../../action-pane.js'; import './da-container.js'; import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js'; +import { translate } from 'lit-translate'; /** [[`IED`]] plugin subeditor for editing `DO` element. */ @customElement('do-container') @@ -25,6 +27,8 @@ export class DOContainer extends LitElement { */ @property({ attribute: false }) instanceElement!: Element; + + @query('#toggleButton') toggleButton!: HTMLElement; private header(): TemplateResult { const name = getNameAttribute(this.element); @@ -89,17 +93,39 @@ export class DOContainer extends LitElement { return null; } + private toggle(): void { + this.toggleButton.setAttribute('icon', + this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') + + this.shadowRoot!.querySelectorAll(':scope > action-pane > do-container,da-container').forEach(element => { + element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', '') + }) + } + render(): TemplateResult { + const daElements = this.getDAElements(); + const doElements = this.getDOElements(); + return html` - ${this.getDAElements().map(da => + ${daElements.length > 0 || doElements.length > 0 ? + html` + this.toggle()} + > + ` : nothing} + ${daElements.map(da => html` + .instanceElement=${this.getInstanceDAElement(da)} + hidden> `)} - ${this.getDOElements().map(dO => + ${doElements.map(dO => html` + .instanceElement=${this.getInstanceDOElement(dO)} + hidden> `)} `; diff --git a/src/editors/ied/enum-container.ts b/src/editors/ied/enum-container.ts deleted file mode 100644 index 22a29b9b60..0000000000 --- a/src/editors/ied/enum-container.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { - customElement, - html, - LitElement, - property, - TemplateResult, -} from 'lit-element'; - -import '../../action-pane.js'; - -/** [[`IED`]] plugin subeditor for editing `EnumVal` element. */ -@customElement('enum-container') -export class EnumContainer extends LitElement { - @property({ attribute: false }) - element!: Element; - - private header(): TemplateResult { - return html`${this.element.textContent}`; - } - - render(): TemplateResult { - return html``; - } -} \ No newline at end of file diff --git a/src/editors/ied/ln-container.ts b/src/editors/ied/ln-container.ts index 34854e8fd7..9855df08b3 100644 --- a/src/editors/ied/ln-container.ts +++ b/src/editors/ied/ln-container.ts @@ -4,6 +4,7 @@ import { html, LitElement, property, + query, TemplateResult, } from 'lit-element'; import { nothing } from 'lit-html'; @@ -11,12 +12,15 @@ import { nothing } from 'lit-html'; import '../../action-pane.js'; import './do-container.js'; import { getInstanceAttribute, getNameAttribute } from '../../foundation.js'; +import { translate } from 'lit-translate'; /** [[`IED`]] plugin subeditor for editing `LN` and `LN0` element. */ @customElement('ln-container') export class LNContainer extends LitElement { @property({ attribute: false }) element!: Element; + + @query('#toggleButton') toggleButton!: HTMLElement; private header(): TemplateResult { const prefix = this.element.getAttribute('prefix'); @@ -51,11 +55,30 @@ export class LNContainer extends LitElement { return this.element.querySelector(`:scope > DOI[name="${doName}"]`) } + private toggle(): void { + this.toggleButton.setAttribute('icon', + this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') + + this.shadowRoot!.querySelectorAll(':scope > action-pane > do-container').forEach(element => { + element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', '') + }) + } + render(): TemplateResult { + const doElements = this.getDOElements(); + return html` + ${doElements.length > 0 ? html` + this.toggle()} + > + ` : nothing} ${this.getDOElements().map(dO => html` + .instanceElement=${this.getInstanceElement(dO)} + hidden> `)} `; diff --git a/src/translations/de.ts b/src/translations/de.ts index 34ab4b1d26..94413bc373 100644 --- a/src/translations/de.ts +++ b/src/translations/de.ts @@ -162,6 +162,7 @@ export const de: Translations = { searchHelper: 'IED auswählen', searchHelperDesc: '({{description}})', missing: 'Kein IED vorhanden', + toggleChildElements: "???" }, voltagelevel: { name: 'Spannungsebene', diff --git a/src/translations/en.ts b/src/translations/en.ts index 0e4cf58e4f..857c607542 100644 --- a/src/translations/en.ts +++ b/src/translations/en.ts @@ -158,7 +158,8 @@ export const en = { iededitor: { searchHelper: "Select IED", searchHelperDesc: "({{description}})", - missing: 'No IED' + missing: 'No IED', + toggleChildElements: "Toggle child elements" }, voltagelevel: { name: 'Voltage level', diff --git a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js index 65164c6f3f..b02f6ace54 100644 --- a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js @@ -1,26 +1,38 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements"] = +snapshots["da-container looks like the latest snapshot with a DA element containing other BDA elements."] = ` + + + +
- - - - - - - - - - + + + + + + `; -/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements */ +/* end snapshot da-container looks like the latest snapshot with a DA element containing other BDA elements. */ snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI."] = ` - - - - - - - - - - `; /* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI. */ -snapshots["da-container looks like the latest snapshot with a DA element containing other BDA elements."] = -` -
-
- - - - - - - - - - - - - -`; -/* end snapshot da-container looks like the latest snapshot with a DA element containing other BDA elements. */ - diff --git a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js index 05284a0642..990befd56e 100644 --- a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js @@ -6,50 +6,45 @@ snapshots["do-container looks like the latest snapshot with a DO element."] = icon="" tabindex="0" > - + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + `; /* end snapshot do-container looks like the latest snapshot with a DO element. */ -snapshots["do-container looks like the latest snapshot with a SDO element."] = -` - - - - - - - -`; -/* end snapshot do-container looks like the latest snapshot with a SDO element. */ - diff --git a/test/unit/editors/ied/__snapshots__/enum-container.test.snap.js b/test/unit/editors/ied/__snapshots__/enum-container.test.snap.js deleted file mode 100644 index 00868f6351..0000000000 --- a/test/unit/editors/ied/__snapshots__/enum-container.test.snap.js +++ /dev/null @@ -1,9 +0,0 @@ -/* @web/test-runner snapshot v1 */ -export const snapshots = {}; - -snapshots["enum-container looks like the latest snapshot with an EnumVal element."] = -` - -`; -/* end snapshot enum-container looks like the latest snapshot with an EnumVal element. */ - diff --git a/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js b/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js index 9aa4546e4e..2c8d271698 100644 --- a/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js @@ -3,17 +3,27 @@ export const snapshots = {}; snapshots["ln-container looks like the latest snapshot with a LN0 element."] = ` - + + + + + - + - + - + - + - + `; @@ -21,19 +31,29 @@ snapshots["ln-container looks like the latest snapshot with a LN0 element."] = snapshots["ln-container looks like the latest snapshot with a LN element."] = ` - + + + + + - + - + - + - + - + - + `; diff --git a/test/unit/editors/ied/da-container.test.ts b/test/unit/editors/ied/da-container.test.ts index 8ef7473d50..bc70c06272 100644 --- a/test/unit/editors/ied/da-container.test.ts +++ b/test/unit/editors/ied/da-container.test.ts @@ -61,27 +61,4 @@ describe('da-container', () => { expect(bdaElements).to.be.empty; }); }); - - describe('has a getEnumElements function ', () => { - it('which returns EnumVal elements if available', async () => { - element = await fixture(html` DOType[id="Dummy.LPHD1.Sim"] > DA[name="ctlModel"]')} - >`); - - const bdaElements = element['getEnumElements'](); - expect(bdaElements.length).to.eql(5); - expect(bdaElements[2].textContent).to.eql('sbo-with-normal-security'); - }); - - it('which returns no BDA elements if they are not available', async () => { - element = await fixture(html` DOType[id="Dummy.LPHD1.Sim"] > DA[name="q"]')} - >`); - - const bdaElements = element['getEnumElements'](); - expect(bdaElements).to.be.empty; - }); - }); }); diff --git a/test/unit/editors/ied/enum-container.test.ts b/test/unit/editors/ied/enum-container.test.ts deleted file mode 100644 index 38d8ab8a03..0000000000 --- a/test/unit/editors/ied/enum-container.test.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { html, fixture, expect } from '@open-wc/testing'; - -import '../../../../src/editors/ied/enum-container.js'; -import { EnumContainer } from '../../../../src/editors/ied/enum-container.js'; - -describe('enum-container', () => { - let element: EnumContainer; - let validSCL: XMLDocument; - - beforeEach(async () => { - validSCL = await fetch('/test/testfiles/valid2007B4withIEDModifications.scd') - .then(response => response.text()) - .then(str => new DOMParser().parseFromString(str, 'application/xml')); - }); - - it('looks like the latest snapshot with an EnumVal element.', async () => { - element = await fixture(html` EnumType[id="Dummy_ctlModel"] > EnumVal[ord="2"]')} - >`); - - expect(element).shadowDom.to.equalSnapshot(); - expect(element.shadowRoot!.querySelector('action-pane')?.shadowRoot?.innerHTML).to.include('sbo-with-normal-security'); - }); -}); From a7a4ab173738a96bc624ecd3a263be4883c3edf4 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Fri, 7 Jan 2022 16:12:04 +0100 Subject: [PATCH 10/18] Bugfix when showing DA data --- src/editors/ied/da-container.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index aa6a0fb7ed..27e0c5ac5c 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -48,10 +48,10 @@ export class DAContainer extends LitElement { */ private renderValue(): TemplateResult { if (this.instanceElement) { - return html`${this.getValueElement(this.instanceElement)}` + return html`${this.getValueElement(this.instanceElement)?.textContent}` } - return html`${this.getValueElement(this.element)}`; + return html`${this.getValueElement(this.element)?.textContent}`; } /** From eb1531214400574a4a928d096e2d8fa6343d6ae6 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Fri, 7 Jan 2022 22:57:40 +0100 Subject: [PATCH 11/18] Small refactoring --- src/editors/ied/da-container.ts | 4 ++-- src/editors/ied/do-container.ts | 4 ++-- src/editors/ied/ln-container.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index 27e0c5ac5c..3492d56150 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -78,10 +78,10 @@ export class DAContainer extends LitElement { private toggle(): void { this.toggleButton.setAttribute('icon', - this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') + this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'); this.shadowRoot!.querySelectorAll(':scope > action-pane > da-container').forEach(element => { - element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', '') + element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', ''); }) } diff --git a/src/editors/ied/do-container.ts b/src/editors/ied/do-container.ts index c60c00ed4c..150b7a15e7 100644 --- a/src/editors/ied/do-container.ts +++ b/src/editors/ied/do-container.ts @@ -95,10 +95,10 @@ export class DOContainer extends LitElement { private toggle(): void { this.toggleButton.setAttribute('icon', - this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') + this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'); this.shadowRoot!.querySelectorAll(':scope > action-pane > do-container,da-container').forEach(element => { - element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', '') + element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', ''); }) } diff --git a/src/editors/ied/ln-container.ts b/src/editors/ied/ln-container.ts index 9855df08b3..feb3e48156 100644 --- a/src/editors/ied/ln-container.ts +++ b/src/editors/ied/ln-container.ts @@ -57,10 +57,10 @@ export class LNContainer extends LitElement { private toggle(): void { this.toggleButton.setAttribute('icon', - this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') + this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'); this.shadowRoot!.querySelectorAll(':scope > action-pane > do-container').forEach(element => { - element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', '') + element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', ''); }) } From cbaac1417babc4a3983ec60e66a9c416a22b2c57 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Fri, 7 Jan 2022 23:56:50 +0100 Subject: [PATCH 12/18] Added toggle test for ln-container --- .../__snapshots__/da-container.test.snap.js | 27 +++++----- .../__snapshots__/do-container.test.snap.js | 27 +++++++++- .../__snapshots__/ln-container.test.snap.js | 30 +----------- test/unit/editors/ied/ln-container.test.ts | 49 +++++++++++++++++++ 4 files changed, 88 insertions(+), 45 deletions(-) diff --git a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js index b02f6ace54..de2c457538 100644 --- a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js @@ -1,6 +1,17 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; +snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements"] = +` +
+
+ +`; +/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements */ + snapshots["da-container looks like the latest snapshot with a DA element containing other BDA elements."] = ` -
- - status-only - -
- -`; -/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI. */ - diff --git a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js index 990befd56e..bcbd5e47c3 100644 --- a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js @@ -8,7 +8,7 @@ snapshots["do-container looks like the latest snapshot with a DO element."] = > + + + + + + + + +`; +/* end snapshot do-container looks like the latest snapshot with a SDO element. */ + diff --git a/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js b/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js index 2c8d271698..21b151b69a 100644 --- a/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js @@ -1,39 +1,11 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["ln-container looks like the latest snapshot with a LN0 element."] = -` - - - - - - - - - - - -`; -/* end snapshot ln-container looks like the latest snapshot with a LN0 element. */ - snapshots["ln-container looks like the latest snapshot with a LN element."] = ` { expect(element).shadowDom.to.equalSnapshot(); }); + it('looks like the latest snapshot with a LN0 element and child elements are toggled.', async () => { + element = await fixture(html` AccessPoint[name="P1"] > Server > LDevice[inst="CircuitBreaker_CB1"] > LN0[lnClass="LLN0"]')} + >`); + + expect(element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]')?.getAttribute('icon')).to.eql('keyboard_arrow_down'); + + (( + element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]') + )).click(); + + expect(element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]')?.getAttribute('icon')).to.eql('keyboard_arrow_up'); + expect(element.shadowRoot!.querySelectorAll('do-container[hidden=""]').length).to.eql(0); + expect(element).shadowDom.to.equalSnapshot(); + + (( + element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]') + )).click(); + + expect(element.shadowRoot!.querySelectorAll('do-container[hidden=""]').length).to.eql(6); + }); + it('looks like the latest snapshot with a LN element.', async () => { element = await fixture(html` { expect(element).shadowDom.to.equalSnapshot(); }); + it('looks like the latest snapshot with a LN element and child elements are toggled.', async () => { + element = await fixture(html` AccessPoint[name="P1"] > Server > LDevice[inst="CircuitBreaker_CB1"] > LN[lnClass="XCBR"]')} + >`); + + expect(element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]')?.getAttribute('icon')).to.eql('keyboard_arrow_down'); + + /** + * Click the toggle button. + */ + (( + element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]') + )).click(); + + expect(element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]')?.getAttribute('icon')).to.eql('keyboard_arrow_up'); + expect(element.shadowRoot!.querySelectorAll('do-container[hidden=""]').length).to.eql(0); + expect(element).shadowDom.to.equalSnapshot(); + + (( + element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]') + )).click(); + + expect(element.shadowRoot!.querySelectorAll('do-container[hidden=""]').length).to.eql(7); + }); + describe('has a getDOElements function ', () => { it('which return the DO containers underneath a given LN.', async () => { element = await fixture(html` Date: Sat, 8 Jan 2022 23:43:44 +0100 Subject: [PATCH 13/18] refactor(ied/da-container,do-container): code improvements --- src/editors/ied/da-container.ts | 27 +++++++++++---------------- src/editors/ied/do-container.ts | 28 ++++++++++++---------------- 2 files changed, 23 insertions(+), 32 deletions(-) diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index 3492d56150..fa57520609 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -10,6 +10,9 @@ import { import { nothing } from 'lit-html'; import { translate } from 'lit-translate'; +import '@material/mwc-icon-button-toggle'; +import { IconButtonToggle } from '@material/mwc-icon-button-toggle'; + import '../../action-pane.js'; import { getNameAttribute } from '../../foundation.js'; @@ -28,7 +31,7 @@ export class DAContainer extends LitElement { @property({ attribute: false }) instanceElement!: Element; - @query('#toggleButton') toggleButton!: HTMLElement; + @query('#toggleButton') toggleButton: IconButtonToggle | undefined; private header(): TemplateResult { const name = getNameAttribute(this.element); @@ -76,31 +79,23 @@ export class DAContainer extends LitElement { return []; } - private toggle(): void { - this.toggleButton.setAttribute('icon', - this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'); - - this.shadowRoot!.querySelectorAll(':scope > action-pane > da-container').forEach(element => { - element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', ''); - }) - } - render(): TemplateResult { const bType = this.element!.getAttribute('bType'); return html` ${bType == 'Struct' ? html` - this.toggle()} - > + onIcon="keyboard_arrow_up" + offIcon="keyboard_arrow_down" + @click=${() => this.requestUpdate()} + > ` : nothing}
${this.renderValue()}
${bType == 'Struct' ? this.getBDAElements().map(element => html``) : nothing} `; @@ -112,7 +107,7 @@ export class DAContainer extends LitElement { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.8em; - overflow: visible; + overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0px; diff --git a/src/editors/ied/do-container.ts b/src/editors/ied/do-container.ts index 150b7a15e7..f1813b1818 100644 --- a/src/editors/ied/do-container.ts +++ b/src/editors/ied/do-container.ts @@ -1,4 +1,5 @@ import { + css, customElement, html, LitElement, @@ -8,6 +9,9 @@ import { } from 'lit-element'; import { nothing } from 'lit-html'; +import '@material/mwc-icon-button-toggle'; +import { IconButtonToggle } from '@material/mwc-icon-button-toggle'; + import '../../action-pane.js'; import './da-container.js'; import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js'; @@ -28,7 +32,7 @@ export class DOContainer extends LitElement { @property({ attribute: false }) instanceElement!: Element; - @query('#toggleButton') toggleButton!: HTMLElement; + @query('#toggleButton') toggleButton: IconButtonToggle | undefined; private header(): TemplateResult { const name = getNameAttribute(this.element); @@ -93,15 +97,6 @@ export class DOContainer extends LitElement { return null; } - private toggle(): void { - this.toggleButton.setAttribute('icon', - this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'); - - this.shadowRoot!.querySelectorAll(':scope > action-pane > do-container,da-container').forEach(element => { - element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', ''); - }) - } - render(): TemplateResult { const daElements = this.getDAElements(); const doElements = this.getDOElements(); @@ -109,23 +104,24 @@ export class DOContainer extends LitElement { return html` ${daElements.length > 0 || doElements.length > 0 ? html` - this.toggle()} - > + onIcon="keyboard_arrow_up" + offIcon="keyboard_arrow_down" + @click=${()=>this.requestUpdate()} + > ` : nothing} ${daElements.map(da => html``)} ${doElements.map(dO => html``)} `; From 8a81df1d3fc330ef9a6f8bbcd112cb15fb0ba5f6 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 10 Jan 2022 13:56:28 +0100 Subject: [PATCH 14/18] Added consistent toggle functionality --- src/editors/ied/da-container.ts | 5 +- src/editors/ied/do-container.ts | 15 ++-- src/editors/ied/ln-container.ts | 28 +++---- .../__snapshots__/da-container.test.snap.js | 26 ++----- .../__snapshots__/do-container.test.snap.js | 60 ++------------- .../__snapshots__/ln-container.test.snap.js | 73 ++++++++++++++++--- test/unit/editors/ied/ln-container.test.ts | 39 ++++------ web-test-runner.config.mjs | 2 +- 8 files changed, 109 insertions(+), 139 deletions(-) diff --git a/src/editors/ied/da-container.ts b/src/editors/ied/da-container.ts index fa57520609..0929522054 100644 --- a/src/editors/ied/da-container.ts +++ b/src/editors/ied/da-container.ts @@ -92,10 +92,9 @@ export class DAContainer extends LitElement { > ` : nothing}
${this.renderValue()}
- ${bType == 'Struct' ? this.getBDAElements().map(element => + ${this.toggleButton?.on && bType == 'Struct' ? this.getBDAElements().map(element => html` + .element=${element}> `) : nothing} `; diff --git a/src/editors/ied/do-container.ts b/src/editors/ied/do-container.ts index f1813b1818..de16608199 100644 --- a/src/editors/ied/do-container.ts +++ b/src/editors/ied/do-container.ts @@ -1,5 +1,4 @@ import { - css, customElement, html, LitElement, @@ -111,18 +110,16 @@ export class DOContainer extends LitElement { @click=${()=>this.requestUpdate()} > ` : nothing} - ${daElements.map(da => + ${this.toggleButton?.on ? daElements.map(da => html` - `)} - ${doElements.map(dO => + .instanceElement=${this.getInstanceDAElement(da)}> + `) : nothing} + ${this.toggleButton?.on ? doElements.map(dO => html` - `)} + .instanceElement=${this.getInstanceDOElement(dO)}> + `) : nothing} `; } diff --git a/src/editors/ied/ln-container.ts b/src/editors/ied/ln-container.ts index feb3e48156..6d24bfb488 100644 --- a/src/editors/ied/ln-container.ts +++ b/src/editors/ied/ln-container.ts @@ -13,6 +13,7 @@ import '../../action-pane.js'; import './do-container.js'; import { getInstanceAttribute, getNameAttribute } from '../../foundation.js'; import { translate } from 'lit-translate'; +import { IconButtonToggle } from '@material/mwc-icon-button-toggle'; /** [[`IED`]] plugin subeditor for editing `LN` and `LN0` element. */ @customElement('ln-container') @@ -20,7 +21,7 @@ export class LNContainer extends LitElement { @property({ attribute: false }) element!: Element; - @query('#toggleButton') toggleButton!: HTMLElement; + @query('#toggleButton') toggleButton!: IconButtonToggle | undefined; private header(): TemplateResult { const prefix = this.element.getAttribute('prefix'); @@ -55,32 +56,23 @@ export class LNContainer extends LitElement { return this.element.querySelector(`:scope > DOI[name="${doName}"]`) } - private toggle(): void { - this.toggleButton.setAttribute('icon', - this.toggleButton.getAttribute('icon') == 'keyboard_arrow_down' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'); - - this.shadowRoot!.querySelectorAll(':scope > action-pane > do-container').forEach(element => { - element.hasAttribute('hidden') ? element.removeAttribute('hidden') : element.setAttribute('hidden', ''); - }) - } - render(): TemplateResult { const doElements = this.getDOElements(); return html` ${doElements.length > 0 ? html` - this.toggle()} - > + onIcon="keyboard_arrow_up" + offIcon="keyboard_arrow_down" + @click=${() => this.requestUpdate()} + > ` : nothing} - ${this.getDOElements().map(dO => html` html` - `)} + `) : nothing} `; } diff --git a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js index de2c457538..7022e71ccd 100644 --- a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js @@ -1,16 +1,17 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements"] = +snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI."] = `
+ status-only
`; -/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements */ +/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI. */ snapshots["da-container looks like the latest snapshot with a DA element containing other BDA elements."] = ` - - +
- - - - - - `; /* end snapshot da-container looks like the latest snapshot with a DA element containing other BDA elements. */ diff --git a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js index bcbd5e47c3..e03de0e9e4 100644 --- a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js @@ -10,66 +10,16 @@ snapshots["do-container looks like the latest snapshot with a DO element."] = slot="action" title="[iededitor.toggleChildElements]" > - - + - - - - - - - - - - - - - - `; /* end snapshot do-container looks like the latest snapshot with a DO element. */ -snapshots["do-container looks like the latest snapshot with a SDO element."] = -` - - - - - - - - -`; -/* end snapshot do-container looks like the latest snapshot with a SDO element. */ + diff --git a/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js b/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js index 21b151b69a..c7d739f3d5 100644 --- a/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js @@ -1,33 +1,82 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["ln-container looks like the latest snapshot with a LN element."] = +snapshots["ln-container looks like the latest snapshot with a LN0 element."] = ` - - + - +`; +/* end snapshot ln-container looks like the latest snapshot with a LN0 element. */ + +snapshots["ln-container looks like the latest snapshot with a LN0 element and child elements are toggled."] = +` + + + + + + + + + + + + + + + + + +`; +/* end snapshot ln-container looks like the latest snapshot with a LN0 element and child elements are toggled. */ + +snapshots["ln-container looks like the latest snapshot with a LN element and child elements are toggled."] = +` + + + + + - `; -/* end snapshot ln-container looks like the latest snapshot with a LN element. */ +/* end snapshot ln-container looks like the latest snapshot with a LN element and child elements are toggled. */ diff --git a/test/unit/editors/ied/ln-container.test.ts b/test/unit/editors/ied/ln-container.test.ts index c1c682843e..a9917ea72a 100644 --- a/test/unit/editors/ied/ln-container.test.ts +++ b/test/unit/editors/ied/ln-container.test.ts @@ -26,22 +26,20 @@ describe('ln-container', () => { .element=${validSCL.querySelector( 'IED[name="IED1"] > AccessPoint[name="P1"] > Server > LDevice[inst="CircuitBreaker_CB1"] > LN0[lnClass="LLN0"]')} >`); - - expect(element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]')?.getAttribute('icon')).to.eql('keyboard_arrow_down'); - + (( - element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]') + element.shadowRoot!.querySelector('mwc-icon-button-toggle') )).click(); - - expect(element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]')?.getAttribute('icon')).to.eql('keyboard_arrow_up'); - expect(element.shadowRoot!.querySelectorAll('do-container[hidden=""]').length).to.eql(0); + await element.requestUpdate(); + await element.updateComplete; expect(element).shadowDom.to.equalSnapshot(); (( - element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]') + element.shadowRoot!.querySelector('mwc-icon-button-toggle') )).click(); - - expect(element.shadowRoot!.querySelectorAll('do-container[hidden=""]').length).to.eql(6); + await element.requestUpdate(); + await element.updateComplete; + expect(element.shadowRoot!.querySelectorAll('do-container').length).to.eql(0); }); it('looks like the latest snapshot with a LN element.', async () => { @@ -57,25 +55,20 @@ describe('ln-container', () => { .element=${validSCL.querySelector( 'IED[name="IED1"] > AccessPoint[name="P1"] > Server > LDevice[inst="CircuitBreaker_CB1"] > LN[lnClass="XCBR"]')} >`); - - expect(element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]')?.getAttribute('icon')).to.eql('keyboard_arrow_down'); - - /** - * Click the toggle button. - */ + (( - element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]') + element.shadowRoot!.querySelector('mwc-icon-button-toggle') )).click(); - - expect(element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]')?.getAttribute('icon')).to.eql('keyboard_arrow_up'); - expect(element.shadowRoot!.querySelectorAll('do-container[hidden=""]').length).to.eql(0); + await element.requestUpdate(); + await element.updateComplete; expect(element).shadowDom.to.equalSnapshot(); (( - element.shadowRoot!.querySelector('mwc-icon-button[id="toggleButton"]') + element.shadowRoot!.querySelector('mwc-icon-button-toggle') )).click(); - - expect(element.shadowRoot!.querySelectorAll('do-container[hidden=""]').length).to.eql(7); + await element.requestUpdate(); + await element.updateComplete; + expect(element.shadowRoot!.querySelectorAll('do-container').length).to.eql(0); }); describe('has a getDOElements function ', () => { diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs index 5eea2baf7c..068393bd5a 100644 --- a/web-test-runner.config.mjs +++ b/web-test-runner.config.mjs @@ -12,7 +12,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ * Plugins have a fix URL and do not fit to the file structure in test environment. * Creating open-scd in the tests leads to error in the browser log - we had to disable the browser log */ - browserLogs: false, + browserLogs: true, /** specify groups for unit and integrations tests * hint: no --group definition runs all groups From fc39bb7a16ae76cc4d9971fd0b317124de525cfd Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 10 Jan 2022 14:15:02 +0100 Subject: [PATCH 15/18] Added da container unit tests --- .../__snapshots__/da-container.test.snap.js | 11 +++ .../__snapshots__/do-container.test.snap.js | 96 +++++++++++++++++++ .../__snapshots__/ln-container.test.snap.js | 17 ++++ test/unit/editors/ied/do-container.test.ts | 42 ++++++++ 4 files changed, 166 insertions(+) diff --git a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js index 7022e71ccd..09b97b8bd9 100644 --- a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js @@ -35,3 +35,14 @@ snapshots["da-container looks like the latest snapshot with a DA element contain `; /* end snapshot da-container looks like the latest snapshot with a DA element containing other BDA elements. */ +snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements"] = +` +
+
+ +`; +/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements */ + diff --git a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js index e03de0e9e4..ded699c080 100644 --- a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js @@ -23,3 +23,99 @@ snapshots["do-container looks like the latest snapshot with a DO element."] = +snapshots["do-container looks like the latest snapshot with a DO element and child elements are toggled."] = +` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; +/* end snapshot do-container looks like the latest snapshot with a DO element and child elements are toggled. */ + +snapshots["do-container looks like the latest snapshot with a SDO element."] = +` + + + + + +`; +/* end snapshot do-container looks like the latest snapshot with a SDO element. */ + +snapshots["do-container looks like the latest snapshot with a SDO element and child elements are toggled."] = +` + + + + + + + + + + + +`; +/* end snapshot do-container looks like the latest snapshot with a SDO element and child elements are toggled. */ + diff --git a/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js b/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js index c7d739f3d5..875757d8bf 100644 --- a/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js @@ -80,3 +80,20 @@ snapshots["ln-container looks like the latest snapshot with a LN element and chi `; /* end snapshot ln-container looks like the latest snapshot with a LN element and child elements are toggled. */ +snapshots["ln-container looks like the latest snapshot with a LN element."] = +` + + + + + +`; +/* end snapshot ln-container looks like the latest snapshot with a LN element. */ + diff --git a/test/unit/editors/ied/do-container.test.ts b/test/unit/editors/ied/do-container.test.ts index e477aa514e..b4c3b49801 100644 --- a/test/unit/editors/ied/do-container.test.ts +++ b/test/unit/editors/ied/do-container.test.ts @@ -21,6 +21,27 @@ describe('do-container', () => { expect(element).shadowDom.to.equalSnapshot(); }); + it('looks like the latest snapshot with a DO element and child elements are toggled.', async () => { + element = await fixture(html` LNodeType[id="Dummy.LLN0"] > DO[name="Mod"]')} + >`); + + (( + element.shadowRoot!.querySelector('mwc-icon-button-toggle') + )).click(); + await element.requestUpdate(); + await element.updateComplete; + expect(element).shadowDom.to.equalSnapshot(); + + (( + element.shadowRoot!.querySelector('mwc-icon-button-toggle') + )).click(); + await element.requestUpdate(); + await element.updateComplete; + expect(element.shadowRoot!.querySelectorAll('do-container').length).to.eql(0); + }); + it('looks like the latest snapshot with a SDO element.', async () => { element = await fixture(html` { expect(element).shadowDom.to.equalSnapshot(); }); + it('looks like the latest snapshot with a SDO element and child elements are toggled.', async () => { + element = await fixture(html` DOType[id="Dummy.LLN0.ExtendedMod"] > SDO[name="someSdo"]')} + >`); + + (( + element.shadowRoot!.querySelector('mwc-icon-button-toggle') + )).click(); + await element.requestUpdate(); + await element.updateComplete; + expect(element).shadowDom.to.equalSnapshot(); + + (( + element.shadowRoot!.querySelector('mwc-icon-button-toggle') + )).click(); + await element.requestUpdate(); + await element.updateComplete; + expect(element.shadowRoot!.querySelectorAll('do-container').length).to.eql(0); + }); + describe('has a getDOElements function ', () => { it('which return the (S)DO containers underneath a given DO.', async () => { element = await fixture(html` Date: Mon, 10 Jan 2022 14:24:07 +0100 Subject: [PATCH 16/18] Added da container unit tests --- .../__snapshots__/da-container.test.snap.js | 31 +++++++++++++------ test/unit/editors/ied/da-container.test.ts | 27 +++++++++++----- 2 files changed, 42 insertions(+), 16 deletions(-) diff --git a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js index 09b97b8bd9..c69d5ce885 100644 --- a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js +++ b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js @@ -1,19 +1,18 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI."] = +snapshots["da-container looks like the latest snapshot with a DA element"] = `
- status-only
`; -/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI. */ +/* end snapshot da-container looks like the latest snapshot with a DA element */ -snapshots["da-container looks like the latest snapshot with a DA element containing other BDA elements."] = +snapshots["da-container looks like the latest snapshot with a DA element and child elements are toggled."] = `
+ + + + + + + + + + + + `; -/* end snapshot da-container looks like the latest snapshot with a DA element containing other BDA elements. */ +/* end snapshot da-container looks like the latest snapshot with a DA element and child elements are toggled. */ -snapshots["da-container looks like the latest snapshot with a DA element containing other Enumeration elements"] = +snapshots["da-container looks like the latest snapshot with a DA element containing and a DAI."] = `
+ status-only
`; -/* end snapshot da-container looks like the latest snapshot with a DA element containing other Enumeration elements */ +/* end snapshot da-container looks like the latest snapshot with a DA element containing and a DAI. */ diff --git a/test/unit/editors/ied/da-container.test.ts b/test/unit/editors/ied/da-container.test.ts index bc70c06272..36e13c9cf0 100644 --- a/test/unit/editors/ied/da-container.test.ts +++ b/test/unit/editors/ied/da-container.test.ts @@ -13,7 +13,7 @@ describe('da-container', () => { .then(str => new DOMParser().parseFromString(str, 'application/xml')); }); - it('looks like the latest snapshot with a DA element containing other Enumeration elements', async () => { + it('looks like the latest snapshot with a DA element', async () => { element = await fixture(html` DOType[id="Dummy.XCBR1.Pos"] > DA[name="ctlModel"]')} @@ -21,20 +21,33 @@ describe('da-container', () => { expect(element).shadowDom.to.equalSnapshot(); }); - it('looks like the latest snapshot with a DA element containing other Enumeration elements and a DAI.', async () => { + it('looks like the latest snapshot with a DA element and child elements are toggled.', async () => { element = await fixture(html` DOType[id="Dummy.XCBR1.Pos"] > DA[name="ctlModel"]')} - .instanceElement=${validSCL.querySelector( - ':root > IED[name="IED2"] > AccessPoint[name="P1"] > Server > LDevice[inst="CircuitBreaker_CB1"] > LN[lnType="Dummy.XCBR1"] > DOI[name="Pos"]> DAI[name="ctlModel"]')} + 'DataTypeTemplates > DOType[id="Dummy.LPHD1.Sim"] > DA[name="SBOw"]')} >`); + + (( + element.shadowRoot!.querySelector('mwc-icon-button-toggle') + )).click(); + await element.requestUpdate(); + await element.updateComplete; expect(element).shadowDom.to.equalSnapshot(); + + (( + element.shadowRoot!.querySelector('mwc-icon-button-toggle') + )).click(); + await element.requestUpdate(); + await element.updateComplete; + expect(element.shadowRoot!.querySelectorAll('do-container').length).to.eql(0); }); - it('looks like the latest snapshot with a DA element containing other BDA elements.', async () => { + it('looks like the latest snapshot with a DA element containing and a DAI.', async () => { element = await fixture(html` DOType[id="Dummy.LLN0.Mod"] > DA[name="SBOw"]')} + 'DataTypeTemplates > DOType[id="Dummy.XCBR1.Pos"] > DA[name="ctlModel"]')} + .instanceElement=${validSCL.querySelector( + ':root > IED[name="IED2"] > AccessPoint[name="P1"] > Server > LDevice[inst="CircuitBreaker_CB1"] > LN[lnType="Dummy.XCBR1"] > DOI[name="Pos"]> DAI[name="ctlModel"]')} >`); expect(element).shadowDom.to.equalSnapshot(); }); From 6106c03a192104e19990d84234d307d6a2153932 Mon Sep 17 00:00:00 2001 From: Flurb Date: Mon, 10 Jan 2022 15:47:25 +0100 Subject: [PATCH 17/18] Small typo --- src/editors/ied/ln-container.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editors/ied/ln-container.ts b/src/editors/ied/ln-container.ts index 6d24bfb488..67e5c1832a 100644 --- a/src/editors/ied/ln-container.ts +++ b/src/editors/ied/ln-container.ts @@ -48,7 +48,7 @@ export class LNContainer extends LitElement { /** * Get the instance element (DOI) of a DO element (if available) - * @param dO - The DOI object to use. + * @param dO - The DO object to use. * @returns The optional DOI object. */ private getInstanceElement(dO: Element): Element | null { From b601f412368626db77a0be29f09ea7497baf3521 Mon Sep 17 00:00:00 2001 From: Flurb Date: Mon, 10 Jan 2022 21:40:11 +0100 Subject: [PATCH 18/18] Revert browserLogs to false --- web-test-runner.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs index 068393bd5a..5eea2baf7c 100644 --- a/web-test-runner.config.mjs +++ b/web-test-runner.config.mjs @@ -12,7 +12,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ * Plugins have a fix URL and do not fit to the file structure in test environment. * Creating open-scd in the tests leads to error in the browser log - we had to disable the browser log */ - browserLogs: true, + browserLogs: false, /** specify groups for unit and integrations tests * hint: no --group definition runs all groups