feat(substation/transformerwinding): add create wizard (openscd#1154)

* feat(../wizard-library.ts):add_create_wizard

* feat(../transformerwinding.test.ts):test

Author: marcvanraalte

src/wizards/generalEquipment.ts

@@ -9,7 +9,7 @@ import {
   Wizard,
   WizardActor,
   WizardInputElement,
-} from '../foundation';
+} from '../foundation.js';
 
 export function editGeneralEquipmentWizard(element: Element): Wizard {
   const name = element.getAttribute('name');

src/wizards/transformerWinding.ts

@@ -3,6 +3,7 @@ import { get, translate } from 'lit-translate';
 
 import {
   cloneElement,
+  createElement,
   getChildElementsByTagName,
   getValue,
   SimpleAction,
@@ -11,6 +12,56 @@ import {
   WizardInputElement,
 } from '../foundation.js';
 
+function createTransformerWindingAction(parent: Element): WizardActor {
+  return (inputs: WizardInputElement[]) => {
+    const transformerWindingAttrs: Record<string, string | null> = {};
+    const transformerWindingKeys = ['name', 'desc', 'type', 'virtual'];
+    transformerWindingKeys.forEach(key => {
+      transformerWindingAttrs[key] = getValue(
+        inputs.find(i => i.label === key)!
+      );
+    });
+
+    const transformerWinding = createElement(
+      parent.ownerDocument,
+      'TransformerWinding',
+      transformerWindingAttrs
+    );
+
+    return [{ new: { parent, element: transformerWinding } }];
+  };
+}
+
+export function createTransformerWindingWizard(parent: Element): Wizard {
+  const name = '';
+  const desc = null;
+  const type = null;
+  const virtual = null;
+  const reservedNames = Array.from(
+    parent.querySelectorAll('TransformerWinding')
+  ).map(TransformerWinding => TransformerWinding.getAttribute('name')!);
+
+  return [
+    {
+      title: get('wizard.title.add', { tagName: 'TransformerWinding' }),
+      primary: {
+        icon: 'save',
+        label: get('save'),
+        action: createTransformerWindingAction(parent),
+      },
+      content: [
+        ...contentTransformerWindingWizard({
+          name,
+          desc,
+          type,
+          virtual,
+          reservedNames,
+        }),
+      ],
+    },
+  ];
+}
+
 function updateTransformerWindingAction(element: Element): WizardActor {
   return (inputs: WizardInputElement[]): SimpleAction[] => {
     const transformerWindingAttrs: Record<string, string | null> = {};

src/wizards/wizard-library.ts

@@ -44,7 +44,10 @@ import {
   createGeneralEquipmentWizard,
   editGeneralEquipmentWizard,
 } from './generalEquipment.js';
-import { editTransformerWindingWizard } from './transformerWinding.js';
+import {
+  createTransformerWindingWizard,
+  editTransformerWindingWizard,
+} from './transformerWinding.js';
 
 type SclElementWizard = (
   element: Element,
@@ -536,7 +539,7 @@ export const wizards: Record<
   },
   TransformerWinding: {
     edit: editTransformerWindingWizard,
-    create: emptyWizard,
+    create: createTransformerWindingWizard,
   },
   TrgOps: {
     edit: editTrgOpsWizard,

test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js

@@ -113,6 +113,17 @@ snapshots["powertransformer-editor rendered as action pane looks like the latest
           LNode
         </span>
       </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="TransformerWinding"
+      >
+        <span>
+          TransformerWinding
+        </span>
+      </mwc-list-item>
       <mwc-list-item
         aria-disabled="false"
         mwc-list-item=""
@@ -223,6 +234,17 @@ snapshots["powertransformer-editor rendered as action pane with EqFunction child
           LNode
         </span>
       </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="TransformerWinding"
+      >
+        <span>
+          TransformerWinding
+        </span>
+      </mwc-list-item>
       <mwc-list-item
         aria-disabled="false"
         mwc-list-item=""
@@ -329,6 +351,17 @@ snapshots["powertransformer-editor rendered as action pane with LNode children l
           LNode
         </span>
       </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="TransformerWinding"
+      >
+        <span>
+          TransformerWinding
+        </span>
+      </mwc-list-item>
       <mwc-list-item
         aria-disabled="false"
         mwc-list-item=""
@@ -437,6 +470,17 @@ snapshots["powertransformer-editor rendered as action pane with SubEquipment chi
           LNode
         </span>
       </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="TransformerWinding"
+      >
+        <span>
+          TransformerWinding
+        </span>
+      </mwc-list-item>
       <mwc-list-item
         aria-disabled="false"
         mwc-list-item=""

test/unit/wizards/__snapshots__/transformerwinding.test.snap.js

@@ -55,3 +55,57 @@ snapshots["Wizards for SCL TransformerWinding element define an edit wizard that
 `;
 /* end snapshot Wizards for SCL TransformerWinding element define an edit wizard that looks like the the latest snapshot */
 
+snapshots["Wizards for SCL TransformerWinding element define an create wizard that looks like the the latest snapshot"] = 
+`<mwc-dialog
+  defaultaction="next"
+  heading="[wizard.title.add]"
+  open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
+>
+  <div id="wizard-content">
+    <wizard-textfield
+      dialoginitialfocus=""
+      helper="[scl.name]"
+      label="name"
+      required=""
+      validationmessage="[textfield.required]"
+    >
+    </wizard-textfield>
+    <wizard-textfield
+      disabled=""
+      helper="[scl.desc]"
+      label="desc"
+      nullable=""
+    >
+    </wizard-textfield>
+    <wizard-textfield
+      disabled=""
+      helper="[scl.type]"
+      label="type"
+    >
+    </wizard-textfield>
+    <wizard-checkbox
+      helper="[scl.virtual]"
+      label="virtual"
+      nullable=""
+    >
+    </wizard-checkbox>
+  </div>
+  <mwc-button
+    dialogaction="close"
+    label="[close]"
+    slot="secondaryAction"
+    style="--mdc-theme-primary: var(--mdc-theme-error)"
+  >
+  </mwc-button>
+  <mwc-button
+    icon="save"
+    label="[save]"
+    slot="primaryAction"
+    trailingicon=""
+  >
+  </mwc-button>
+</mwc-dialog>
+`;
+/* end snapshot Wizards for SCL TransformerWinding element define an create wizard that looks like the the latest snapshot */
+

test/unit/wizards/transformerwinding.test.ts

@@ -6,11 +6,16 @@ import { MockWizard } from '../../mock-wizard.js';
 
 import { WizardTextField } from '../../../src/wizard-textfield.js';
 import {
+  Create,
+  isCreate,
   isReplace,
   Replace,
   WizardInputElement,
 } from '../../../src/foundation.js';
-import { editTransformerWindingWizard } from '../../../src/wizards/transformerWinding';
+import {
+  createTransformerWindingWizard,
+  editTransformerWindingWizard,
+} from '../../../src/wizards/transformerWinding';
 import { WizardCheckbox } from '../../../src/wizard-checkbox.js';
 
 describe('Wizards for SCL TransformerWinding element', () => {
@@ -124,4 +129,101 @@ describe('Wizards for SCL TransformerWinding element', () => {
       );
     });
   });
+
+  describe('define an create wizard that', () => {
+    beforeEach(async () => {
+      const wizard = createTransformerWindingWizard(
+        doc.querySelector('PowerTransformer')!
+      );
+      element.workflow.push(() => wizard);
+      await element.requestUpdate();
+
+      inputs = Array.from(element.wizardUI.inputs);
+
+      primaryAction = <HTMLElement>(
+        element.wizardUI.dialog?.querySelector(
+          'mwc-button[slot="primaryAction"]'
+        )
+      );
+
+      await element.wizardUI.requestUpdate(); // make sure wizard is rendered
+    });
+
+    it('looks like the the latest snapshot', async () =>
+      await expect(element.wizardUI.dialog).dom.to.equalSnapshot());
+
+    it('does not accept empty name attribute', async () => {
+      await primaryAction.click();
+
+      expect(actionEvent).to.not.have.been.called;
+    });
+
+    it('allows to create required attributes name', async () => {
+      inputs[0].value = 'someNonEmptyName';
+      await element.requestUpdate();
+      await primaryAction.click();
+
+      expect(actionEvent).to.be.calledOnce;
+      const action = actionEvent.args[0][0].detail.action;
+      expect(action).to.satisfy(isCreate);
+      const createAction = <Create>action;
+
+      expect(createAction.new.element).to.have.attribute(
+        'name',
+        'someNonEmptyName'
+      );
+
+      expect(createAction.new.element).to.not.have.attribute('desc');
+    });
+
+    it('allows to create name and non required attribute virtual', async () => {
+      inputs[0].value = 'someNonEmptyName';
+
+      const virtualCheckbox = <WizardCheckbox>(
+        element.wizardUI.dialog?.querySelector(
+          'wizard-checkbox[label="virtual"]'
+        )
+      );
+
+      virtualCheckbox.nullSwitch!.click();
+      virtualCheckbox.maybeValue = 'true';
+      await element.requestUpdate();
+      await primaryAction.click();
+
+      expect(actionEvent).to.be.calledOnce;
+      const action = actionEvent.args[0][0].detail.action;
+      expect(action).to.satisfy(isCreate);
+      const createAction = <Create>action;
+      expect(createAction.new.element).to.have.attribute(
+        'name',
+        'someNonEmptyName'
+      );
+      expect(createAction.new.element).to.have.attribute('virtual', 'true');
+    });
+
+    it('allows to create name and non required attribute desc', async () => {
+      inputs[0].value = 'someNonEmptyName';
+      const descField = <WizardTextField>(
+        element.wizardUI.dialog?.querySelector('wizard-textfield[label="desc"]')
+      );
+
+      await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+      descField.nullSwitch!.click();
+      await element.updateComplete;
+      inputs[1].value = 'someNonEmptyDesc';
+
+      await element.requestUpdate();
+      await primaryAction.click();
+
+      expect(actionEvent).to.be.calledOnce;
+      const action = actionEvent.args[0][0].detail.action;
+      expect(action).to.satisfy(isCreate);
+      const createAction = <Create>action;
+
+      expect(createAction.new.element).to.have.attribute(
+        'desc',
+        'someNonEmptyDesc'
+      );
+    });
+  });
 });