fix: Adding Subnetwork to a configuration without a Communication Ele…

src/editors/Communication.ts

@@ -18,21 +18,27 @@ export default class CommunicationPlugin extends LitElement {
   @property()
   doc!: XMLDocument;
 
-  private createCommunication(): void {
+  /**
+   * Creates the Communication Element and returns the created Element
+   * @returns {Element} Communication `Element`
+   */
+  private createCommunication(): Element {
+    const element: Element = createElement(this.doc, 'Communication', {});
     this.dispatchEvent(
       newActionEvent({
         new: {
           parent: this.doc.documentElement,
-          element: createElement(this.doc, 'Communication', {}),
+          element: element,
         },
       })
     );
+    return element;
   }
 
   /** Opens a [[`WizardDialog`]] for creating a new `SubNetwork` element. */
   private openCreateSubNetworkWizard(): void {
-    const parent = this.doc.querySelector(':root > Communication');
-    if (!parent) this.createCommunication();
+    const parent =this.doc.querySelector(':root > Communication') ||
+      this.createCommunication();
 
     this.dispatchEvent(newWizardEvent(createSubNetworkWizard(parent!)));
   }

test/integration/editors/communication/Communication.test.ts

@@ -1,16 +1,16 @@
 import { html, fixture, expect } from '@open-wc/testing';
 
-import '../../../mock-wizard.js';
-import { MockWizard } from '../../../mock-wizard.js';
+import '../../../mock-wizard-editor.js';
+import { MockWizardEditor } from '../../../mock-wizard-editor.js';
 
-import Communication from '../../../../src/editors/Communication.js';
-import { Editing } from '../../../../src/Editing.js';
-import { Wizarding } from '../../../../src/Wizarding.js';
+import Communication from '../../../../src/editors/Communication.js'; 
+import { Dialog } from '@material/mwc-dialog';
+import { WizardTextField } from '../../../../src/wizard-textfield.js';
 
 describe('Communication Plugin', () => {
   customElements.define(
     'communication-plugin',
-    Wizarding(Editing(Communication))
+    Communication
   );
   let element: Communication;
   beforeEach(async () => {
@@ -43,18 +43,23 @@ describe('Communication Plugin', () => {
 
   describe('with a doc loaded missing a communication section', () => {
     let doc: XMLDocument;
-    let parent: MockWizard;
+    let parent: MockWizardEditor;
     let fab: HTMLElement;
+    let element: Communication;
 
     beforeEach(async () => {
       doc = await fetch('/test/testfiles/missingCommunication.scd')
         .then(response => response.text())
         .then(str => new DOMParser().parseFromString(str, 'application/xml'));
-      parent = <MockWizard>(
+
+      element = await fixture(
+        html`<communication-plugin .doc="${doc}"></communication-plugin>`
+      );
+
+      parent = <MockWizardEditor>(
         await fixture(
-          html`<mock-wizard
-            ><communication-plugin .doc=${doc}></communication-plugin
-          ></mock-wizard>`
+          html`<mock-wizard-editor
+            >${element}/mock-wizard-editor>`
         )
       );
       await element.updateComplete;
@@ -73,5 +78,28 @@ describe('Communication Plugin', () => {
       await parent.updateComplete;
       expect(parent.wizardUI.dialogs.length).to.equal(1);
     });
+
+    it('Should create a Communication Element', async () => {
+          expect(parent.wizardUI.dialogs.length).to.equal(0);
+          expect(element.doc.querySelector('Communication')).is.null;
+
+          await fab.click();
+          await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+          await parent.updateComplete;
+
+          const dialog: Dialog = parent.wizardUI.dialog!;
+          expect(dialog).to.not.be.undefined;
+
+          const nameInput: WizardTextField = dialog.querySelector<WizardTextField>('wizard-textfield[label="name"]')!;
+          nameInput.value = 'Test';
+          await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+          const saveButton: HTMLElement = dialog.querySelector('mwc-button[slot="primaryAction"]')!;
+          await saveButton.click();
+          await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+          expect(element.doc.querySelector('Communication')).not.is.null;
+          expect(element.doc.querySelector('Communication > SubNetwork[name="Test"]')).to.exist;
+    });
   });
 });

test/integration/editors/communication/__snapshots__/Communication.test.snap.js

@@ -13,8 +13,6 @@ snapshots["Communication Plugin without a doc loaded looks like the latest snaps
   >
   </mwc-fab>
 </h1>
-<wizard-dialog>
-</wizard-dialog>
 `;
 /* end snapshot Communication Plugin without a doc loaded looks like the latest snapshot */