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

@@ -37,8 +37,7 @@ export default class CommunicationPlugin extends LitElement {
 
   /** Opens a [[`WizardDialog`]] for creating a new `SubNetwork` element. */
   private openCreateSubNetworkWizard(): void {
-    const parent =
-      this.doc.querySelector(':root > Communication') ||
+    const parent =this.doc.querySelector(':root > Communication') ||
       this.createCommunication();
 
     this.dispatchEvent(newWizardEvent(createSubNetworkWizard(parent!)));

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

@@ -1,18 +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 () => {
@@ -45,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;
@@ -78,25 +81,28 @@ describe('Communication Plugin', () => {
 
     it('Should create a Communication Element', async () => {
           expect(parent.wizardUI.dialogs.length).to.equal(0);
-          fab.click();
+          expect(element.doc.querySelector('Communication')).is.null;
+
+          await fab.click();
+          await new Promise(resolve => setTimeout(resolve, 100)); // await animation
           await parent.updateComplete;
-          expect(parent.wizardUI.dialogs.length).to.equal(1);
 
-          const dialog: Dialog = parent.wizardUI.dialogs.item(0);
+          expect(parent.wizardUI.dialogs.length).to.equal(1);
+          
+          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
 
-          await parent.updateComplete;
-
-          saveButton.click();
-
-          await parent.updateComplete;
-
-          expect(parent.wizardUI.dialogs.length).to.equal(0);
+          expect(parent.wizardUI.dialog).not.to.exist;
+          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 */