fix: Adding Subnetwork to a configuration without a Communication Element failed for the first time

When creating a `Communication` Element in Communication.ts, the created Element is also returned to use it as a parent for the wizard

The `Should create a Communication Element` integration test is extended to also check that the Wizard is closed properly

Signed-off-by: Pascal Wilbrink <[email protected]>

Author: pascalwilbrink

src/editors/Communication.ts

@@ -18,21 +18,28 @@ 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

@@ -6,6 +6,8 @@ import { MockWizard } from '../../../mock-wizard.js';
 import Communication from '../../../../src/editors/Communication.js';
 import { Editing } from '../../../../src/Editing.js';
 import { Wizarding } from '../../../../src/Wizarding.js';
+import { Dialog } from '@material/mwc-dialog';
+import { WizardTextField } from '../../../../src/wizard-textfield.js';
 
 describe('Communication Plugin', () => {
   customElements.define(
@@ -73,5 +75,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);
+          fab.click();
+          await parent.updateComplete;
+          expect(parent.wizardUI.dialogs.length).to.equal(1);
+
+          const dialog: Dialog = parent.wizardUI.dialogs.item(0);
+
+          const nameInput: WizardTextField = dialog.querySelector<WizardTextField>('wizard-textfield[label="name"]')!;
+
+          nameInput.value = 'Test';
+
+          const saveButton: HTMLElement = dialog.querySelector('mwc-button[slot="primaryAction"]')!;
+
+          await parent.updateComplete;
+
+          saveButton.click();
+
+          await parent.updateComplete;
+
+          expect(parent.wizardUI.dialogs.length).to.equal(0);
+    });
   });
 });