feat(zeroline/ied-editor): add show report action (#438)

src/zeroline/ied-editor.ts

@@ -13,9 +13,10 @@ import { Fab } from '@material/mwc-fab';
 
 import '../action-icon.js';
 import { createClientLnWizard } from '../wizards/clientln.js';
-import { gooseIcon } from '../icons.js';
+import { gooseIcon, reportIcon } from '../icons.js';
 import { newWizardEvent } from '../foundation.js';
 import { selectGseControlWizard } from '../wizards/gsecontrol.js';
+import { selectReportControlWizard } from '../wizards/reportcontrol.js';
 
 /** [[`SubstationEditor`]] subeditor for a child-less `IED` element. */
 @customElement('ied-editor')
@@ -31,11 +32,8 @@ export class IedEditor extends LitElement {
 
   @query('.connectreport') connectReport!: Fab;
 
-  private openCommunicationMapping(): void {
-    const sendingIeds = Array.from(
-      this.element.closest('SCL')?.querySelectorAll('IED') ?? []
-    );
-    const wizard = createClientLnWizard(sendingIeds, this.element);
+  private openReportControlSelection(): void {
+    const wizard = selectReportControlWizard(this.element);
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
@@ -44,6 +42,14 @@ export class IedEditor extends LitElement {
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
+  private openCommunicationMapping(): void {
+    const sendingIeds = Array.from(
+      this.element.closest('SCL')?.querySelectorAll('IED') ?? []
+    );
+    const wizard = createClientLnWizard(sendingIeds, this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   render(): TemplateResult {
     return html`<action-icon label="${this.name}" icon="developer_board"
       ><mwc-fab
@@ -59,6 +65,12 @@ export class IedEditor extends LitElement {
         mini
         @click="${() => this.openGseControlSelection()}"
         ><mwc-icon slot="icon">${gooseIcon}</mwc-icon></mwc-fab
+      ><mwc-fab
+        slot="action"
+        class="selectreport"
+        mini
+        @click="${() => this.openReportControlSelection()}"
+        ><mwc-icon slot="icon">${reportIcon}</mwc-icon></mwc-fab
       ></action-icon
     > `;
   }

test/integration/zeroline/ied-editor-wizarding-integration.test.ts

@@ -0,0 +1,66 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import '../../mock-wizard-editor.js';
+import { MockWizardEditor } from '../../mock-wizard-editor.js';
+
+import '../../../src/zeroline/ied-editor.js';
+import { FilteredList } from '../../../src/filtered-list.js';
+import { IedEditor } from '../../../src/zeroline/ied-editor.js';
+
+describe('IED editor component wizarding editing integration', () => {
+  let doc: XMLDocument;
+  let parent: MockWizardEditor;
+  let iededitor: IedEditor;
+
+  beforeEach(async () => {
+    doc = await fetch('/test/testfiles/valid2007B4.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+    const ied = doc.querySelector('IED[name="IED2"]');
+
+    parent = <MockWizardEditor>(
+      await fixture(
+        html`<mock-wizard-editor
+          ><ied-editor .element=${ied}></ied-editor
+        ></mock-wizard-editor>`
+      )
+    );
+    iededitor = <IedEditor>parent.querySelector('ied-editor');
+    await parent.updateComplete;
+  });
+
+  it('opens select wizard showing GSEControl of one IED', async () => {
+    (<HTMLElement>(
+      iededitor.shadowRoot?.querySelector('mwc-fab[class="selectgse"]')
+    )).click();
+    await parent.updateComplete;
+
+    expect(parent.wizardUI.dialog).to.exist;
+    const gseControlList = <FilteredList>(
+      parent.wizardUI.dialog?.querySelector('filtered-list')
+    );
+    await gseControlList.updateComplete;
+
+    expect(gseControlList.items.length).to.equal(
+      doc.querySelectorAll('IED[name="IED2"] GSEControl').length
+    );
+  });
+
+  it('opens select wizard showing ReportControl of one IED', async () => {
+    (<HTMLElement>(
+      iededitor.shadowRoot?.querySelector('mwc-fab[class="selectreport"]')
+    )).click();
+    await parent.updateComplete;
+
+    expect(parent.wizardUI.dialog).to.exist;
+    const reportControlList = <FilteredList>(
+      parent.wizardUI.dialog?.querySelector('filtered-list')
+    );
+    await reportControlList.updateComplete;
+
+    expect(reportControlList.items.length).to.equal(
+      doc.querySelectorAll('IED[name="IED2"] ReportControl').length
+    );
+  });
+});

test/unit/zeroline/__snapshots__/ied-editor.test.snap.js

@@ -22,6 +22,14 @@ snapshots["A component to visualize SCL element IED looks like the latest snapsh
     <mwc-icon slot="icon">
     </mwc-icon>
   </mwc-fab>
+  <mwc-fab
+    class="selectreport"
+    mini=""
+    slot="action"
+  >
+    <mwc-icon slot="icon">
+    </mwc-icon>
+  </mwc-fab>
 </action-icon>
 `;
 /* end snapshot A component to visualize SCL element IED looks like the latest snapshot */

test/unit/zeroline/ied-editor.test.ts

@@ -50,6 +50,17 @@ describe('A component to visualize SCL element IED', () => {
     expect(wizardEvent.args[0][0].detail.wizard[0].title).to.contain('select');
   });
 
+  it('triggers select wizard for ReportControl element on action button click', async () => {
+    (<HTMLElement>(
+      element.shadowRoot?.querySelector('mwc-fab[class="selectreport"]')
+    )).click();
+
+    await element.requestUpdate();
+
+    expect(wizardEvent).to.have.be.calledOnce;
+    expect(wizardEvent.args[0][0].detail.wizard[0].title).to.contain('select');
+  });
+
   it('triggers create wizard for ClientLN element on action button click', async () => {
     (<HTMLElement>(
       element.shadowRoot?.querySelector('mwc-fab[class="connectreport"]')