feat(foundation): allow dynamic wizards (openscd#471)

* feat(foundation): allow dynamic wizards

* test: adapt tests

Author: JakobVogelsang

src/Wizarding.ts

@@ -3,8 +3,8 @@ import {
   ifImplemented,
   LitElementConstructor,
   Mixin,
-  Wizard,
   WizardEvent,
+  WizardFactory,
 } from './foundation.js';
 
 import './wizard-dialog.js';
@@ -18,13 +18,12 @@ export function Wizarding<TBase extends LitElementConstructor>(Base: TBase) {
   class WizardingElement extends Base {
     /** FIFO queue of [[`Wizard`]]s to display. */
     @internalProperty()
-    workflow: Wizard[] = [];
+    workflow: WizardFactory[] = [];
 
     @query('wizard-dialog') wizardUI!: WizardDialog;
 
     private onWizard(we: WizardEvent) {
       const wizard = we.detail.wizard;
-      if (wizard?.length === 0) return;
       if (wizard === null) this.workflow.shift();
       else if (we.detail.subwizard) this.workflow.unshift(wizard);
       else this.workflow.push(wizard);
@@ -49,7 +48,7 @@ export function Wizarding<TBase extends LitElementConstructor>(Base: TBase) {
 
     render(): TemplateResult {
       return html`${ifImplemented(super.render())}
-        <wizard-dialog .wizard=${this.workflow[0] ?? []}></wizard-dialog>`;
+        <wizard-dialog .wizard=${this.workflow[0]?.() ?? []}></wizard-dialog>`;
     }
   }
 

src/foundation.ts

@@ -142,7 +142,7 @@ export type WizardInput =
   | Select
   | WizardSelect;
 
-export type WizardAction = EditorAction | (() => Wizard);
+export type WizardAction = EditorAction | WizardFactory;
 
 /** @returns [[`EditorAction`]]s to dispatch on [[`WizardDialog`]] commit. */
 export type WizardActor = (
@@ -151,10 +151,10 @@ export type WizardActor = (
   list?: List | null
 ) => WizardAction[];
 
-export function isWizard(
-  wizardAction: WizardAction
-): wizardAction is () => Wizard {
-  return typeof wizardAction === 'function';
+export function isWizardFactory(
+  maybeFactory: WizardAction | Wizard | null
+): maybeFactory is WizardFactory {
+  return typeof maybeFactory === 'function';
 }
 
 /** @returns the validity of `input` depending on type. */
@@ -203,17 +203,30 @@ export interface WizardPage {
   element?: Element;
 }
 export type Wizard = WizardPage[];
+export type WizardFactory = () => Wizard;
 
 /** If `wizard === null`, close the current wizard, else queue `wizard`. */
 export interface WizardDetail {
-  wizard: Wizard | null;
+  wizard: WizardFactory | null;
   subwizard?: boolean;
 }
 export type WizardEvent = CustomEvent<WizardDetail>;
 export function newWizardEvent(
-  wizard: Wizard | null = null,
+  wizardOrFactory?: Wizard | WizardFactory,
   eventInitDict?: CustomEventInit<Partial<WizardDetail>>
 ): WizardEvent {
+  if (!wizardOrFactory)
+    return new CustomEvent<WizardDetail>('wizard', {
+      bubbles: true,
+      composed: true,
+      ...eventInitDict,
+      detail: { wizard: null, ...eventInitDict?.detail },
+    });
+
+  const wizard = isWizardFactory(wizardOrFactory)
+    ? wizardOrFactory
+    : () => wizardOrFactory;
+
   return new CustomEvent<WizardDetail>('wizard', {
     bubbles: true,
     composed: true,

src/wizard-dialog.ts

@@ -25,7 +25,7 @@ import {
   newWizardEvent,
   WizardActor,
   wizardInputSelector,
-  isWizard,
+  isWizardFactory,
   checkValidity,
   reportValidity,
   Delete,
@@ -143,8 +143,8 @@ export class WizardDialog extends LitElement {
       this.dispatchEvent(newWizardEvent());
     }
     wizardActions.forEach(wa =>
-      isWizard(wa)
-        ? this.dispatchEvent(newWizardEvent(wa()))
+      isWizardFactory(wa)
+        ? this.dispatchEvent(newWizardEvent(wa))
         : this.dispatchEvent(newActionEvent(wa))
     );
     return true;

test/integration/editors/substation/guess-wizarding-editing.test.ts

@@ -16,7 +16,9 @@ describe('guess-wizard-integration', () => {
       .then(str => new DOMParser().parseFromString(str, 'application/xml'));
     validSCL.querySelector('Substation')!.innerHTML = '';
     element = <MockWizard>await fixture(html`<mock-wizard></mock-wizard>`);
-    element.workflow.push(guessVoltageLevel(validSCL));
+
+    const wizard = guessVoltageLevel(validSCL);
+    element.workflow.push(() => wizard);
     await element.requestUpdate();
   });
 
@@ -78,8 +80,11 @@ describe('guess-wizarding-editing-integration', () => {
     element = <MockWizardEditor>(
       await fixture(html`<mock-wizard-editor></mock-wizard-editor>`)
     );
-    element.workflow.push(guessVoltageLevel(validSCL));
+
+    const wizard = guessVoltageLevel(validSCL);
+    element.workflow.push(() => wizard);
     await element.requestUpdate();
+
     (<HTMLElement>(
       element.wizardUI.dialog!.querySelector(
         '#ctlModelList > mwc-check-list-item:nth-child(5)'

test/integration/editors/substation/lnodewizard.test.ts

@@ -21,7 +21,8 @@ describe('lnodewizard', () => {
     element = <MockWizardEditor>(
       await fixture(html`<mock-wizard-editor></mock-wizard-editor>`)
     );
-    element.workflow.push(lNodeWizard(doc.querySelector('Bay')!));
+    const wizard = lNodeWizard(doc.querySelector('Bay')!);
+    element.workflow.push(() => wizard);
     await element.requestUpdate();
   });
 

test/integration/wizards/dataset-wizarding-editing-integration.test.ts

@@ -25,7 +25,7 @@ describe('dataset wizards', () => {
       const wizard = editDataSetWizard(
         doc.querySelector('IED[name="IED2"] DataSet[name="GooseDataSet1"]')!
       );
-      element.workflow.push(wizard);
+      element.workflow.push(() => wizard);
       await element.requestUpdate();
       primaryAction = <HTMLElement>(
         element.wizardUI.dialog?.querySelector(

test/integration/wizards/fcda-wizarding-editing-integration.test.ts

@@ -19,7 +19,7 @@ describe('FCDA editing wizarding integration', () => {
       .then(str => new DOMParser().parseFromString(str, 'application/xml'));
 
     const wizard = createFCDAsWizard(doc.querySelector('DataSet')!);
-    element.workflow.push(wizard!);
+    element.workflow.push(() => wizard!);
     await element.requestUpdate();
 
     finder = element.wizardUI.dialog!.querySelector<FinderList>('finder-list')!;

test/integration/wizards/gse-wizarding-editing-integration.test.ts

@@ -25,7 +25,7 @@ describe('gse wizarding editing integration', () => {
       const wizard = editGseWizard(
         doc.querySelector('GSE[ldInst="CircuitBreaker_CB1"][cbName="GCB"]')!
       );
-      element.workflow.push(wizard);
+      element.workflow.push(() => wizard);
       await element.requestUpdate();
       primaryAction = <HTMLElement>(
         element.wizardUI.dialog?.querySelector(

test/integration/wizards/gsecontrolwizarding-editing.test.ts

@@ -29,7 +29,7 @@ describe('gsecontrol wizarding editing integration', () => {
 
     beforeEach(async () => {
       const wizard = selectGseControlWizard(doc.documentElement);
-      element.workflow.push(wizard);
+      element.workflow.push(() => wizard);
       await element.requestUpdate();
       gseControlList = <FilteredList>(
         element.wizardUI.dialog?.querySelector('filtered-list')
@@ -66,7 +66,7 @@ describe('gsecontrol wizarding editing integration', () => {
       beforeEach(async () => {
         gseControl = doc.querySelector('GSEControl[name="GCB"]')!;
         const wizard = editGseControlWizard(gseControl);
-        element.workflow.push(wizard);
+        element.workflow.push(() => wizard);
         await element.requestUpdate();
         nameField = element.wizardUI.dialog!.querySelector(
           'wizard-textfield[label="name"]'
@@ -157,7 +157,7 @@ describe('gsecontrol wizarding editing integration', () => {
       beforeEach(async () => {
         gseControl = doc.querySelector('GSEControl[name="GCB2"]')!;
         const wizard = editGseControlWizard(gseControl);
-        element.workflow.push(wizard);
+        element.workflow.push(() => wizard);
         await element.requestUpdate();
       });
 
@@ -177,7 +177,7 @@ describe('gsecontrol wizarding editing integration', () => {
           'IED[name="IED2"] GSEControl[name="GCB"]'
         )!;
         const wizard = editGseControlWizard(gseControl);
-        element.workflow.push(wizard);
+        element.workflow.push(() => wizard);
         await element.requestUpdate();
       });
 

test/unit/Wizarding.test.ts

@@ -19,23 +19,23 @@ describe('WizardingElement', () => {
   it('shows no wizard-dialog', async () =>
     await expect(element).shadowDom.to.be.empty);
 
-  it('adds a wizard to the workflow on non-null WizardEvent', () => {
+  it('adds a wizard factory to the workflow on non-null WizardEvent', () => {
     element.dispatchEvent(newWizardEvent([{ title: 'Test Page 1' }]));
     expect(element).property('workflow').to.have.lengthOf(1);
   });
 
-  describe('with a wizard in its workflow', () => {
+  describe('with a wizard factory in its workflow', () => {
     beforeEach(async () => {
       element.dispatchEvent(newWizardEvent([{ title: 'Test Page 1' }]));
       await element.updateComplete;
     });
 
-    it('removes the wizard on receiving a null WizardEvent', () => {
+    it('removes the wizard factory on receiving a null WizardEvent', () => {
       element.dispatchEvent(newWizardEvent());
       expect(element).property('workflow').to.be.empty;
     });
 
-    it('removes the wizard on wizard-dialog "close" action', async () => {
+    it('removes the wizard factory on wizard-dialog "close" action', async () => {
       await (<HTMLElement>(
         element
           .shadowRoot!.querySelector('wizard-dialog')!