Skip to content

Commit

Permalink
refactor(wizards/gsecontrol): remove button from wizard content (#624)
Browse files Browse the repository at this point in the history
  • Loading branch information
JakobVogelsang authored Mar 21, 2022
1 parent 96d79e5 commit 32d7629
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 84 deletions.
86 changes: 46 additions & 40 deletions src/wizards/gsecontrol.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,14 @@ import {
getValue,
identity,
isPublic,
newActionEvent,
MenuAction,
newSubWizardEvent,
newWizardEvent,
selector,
Wizard,
WizardAction,
WizardActor,
WizardInput,
WizardMenuActor,
} from '../foundation.js';
import { maxLength, patterns } from './foundation/limits.js';
import { editDataSetWizard } from './dataset.js';
Expand Down Expand Up @@ -107,7 +108,7 @@ export function renderGseAttributes(
];
}

export function removeGseControl(element: Element): ComplexAction | null {
export function removeGseControlAction(element: Element): ComplexAction | null {
if (!element.parentElement) return null;

const dataSet = element.parentElement.querySelector(
Expand Down Expand Up @@ -166,6 +167,26 @@ export function removeGseControl(element: Element): ComplexAction | null {
};
}

export function removeGseControl(element: Element): WizardMenuActor {
return (): WizardAction[] => {
const complexAction = removeGseControlAction(element);
if (complexAction) return [complexAction];
return [];
};
}

function openDataSetWizard(element: Element): WizardMenuActor {
return (): WizardAction[] => {
return [() => editDataSetWizard(element)];
};
}

function openGseWizard(element: Element): WizardMenuActor {
return (): WizardAction[] => {
return [() => editGseWizard(element)];
};
}

export function updateGseControlAction(element: Element): WizardActor {
return (inputs: WizardInput[]): EditorAction[] => {
const name = inputs.find(i => i.label === 'name')!.value!;
Expand Down Expand Up @@ -214,6 +235,27 @@ export function editGseControlWizard(element: Element): Wizard {
`DataSet[name="${element.getAttribute('datSet')}"]`
);

const menuActions: MenuAction[] = [];
menuActions.push({
icon: 'delete',
label: get('remove'),
action: removeGseControl(element),
});

if (dataSet)
menuActions.push({
icon: 'edit',
label: get('scl.DataSet'),
action: openDataSetWizard(dataSet),
});

if (gSE)
menuActions.push({
icon: 'edit',
label: get('scl.Communication'),
action: openGseWizard(gSE),
});

return [
{
title: get('wizard.title.edit', { tagName: element.tagName }),
Expand All @@ -223,18 +265,8 @@ export function editGseControlWizard(element: Element): Wizard {
label: get('save'),
action: updateGseControlAction(element),
},
menuActions,
content: [
html`<mwc-button
label="${translate('remove')}"
icon="delete"
@click=${(e: MouseEvent) => {
const complexAction = removeGseControl(element);
if (complexAction)
e.target?.dispatchEvent(newActionEvent(complexAction));
e.target?.dispatchEvent(newWizardEvent());
}}
></mwc-button>`,
...renderGseAttributes(
name,
desc,
Expand All @@ -243,32 +275,6 @@ export function editGseControlWizard(element: Element): Wizard {
fixedOffs,
securityEnabled
),
dataSet
? html`<mwc-button
id="editdataset"
label=${translate('wizard.title.edit', {
tagName: get('scl.DataSet'),
})}
icon="edit"
@click="${(e: MouseEvent) => {
e.target?.dispatchEvent(
newSubWizardEvent(() => editDataSetWizard(dataSet))
);
}}}"
></mwc-button>`
: html``,
gSE
? html`<mwc-button
id="editgse"
label=${translate('scl.Communication')}
icon="edit"
@click="${(e: MouseEvent) => {
e.target?.dispatchEvent(
newSubWizardEvent(() => editGseWizard(gSE))
);
}}}"
></mwc-button>`
: html``,
],
},
];
Expand Down
56 changes: 37 additions & 19 deletions test/integration/wizards/gsecontrolwizarding-editing.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { expect, fixture, html } from '@open-wc/testing';
import '../../mock-wizard-editor.js';
import { MockWizardEditor } from '../../mock-wizard-editor.js';

import { Button } from '@material/mwc-button';
import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';

import {
Expand Down Expand Up @@ -166,13 +165,15 @@ describe('Wizards for SCL element GSEControl', () => {
});

it('opens edit wizard for DataSet element on edit dataset button click', async () => {
const editDataSetButton = <Button>(
element.wizardUI.dialog!.querySelector(
'mwc-button[id="editdataset"]'
)!
const editDataSetButton = <HTMLElement>(
Array.from(
element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
'mwc-menu > mwc-list-item'
)
).find(item => item.innerHTML.includes(`[scl.DataSet]`))
);

await editDataSetButton.updateComplete;
await element.wizardUI.dialog?.requestUpdate();
editDataSetButton.click();
await new Promise(resolve => setTimeout(resolve, 100)); // await animation

Expand All @@ -189,12 +190,15 @@ describe('Wizards for SCL element GSEControl', () => {
});

it('opens a editGseWizard on edit GSE button click', async () => {
const editGseButton = <Button>(
element.wizardUI.dialog!.querySelector('mwc-button[id="editgse"]')!
const editGseButton = <HTMLElement>(
Array.from(
element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
'mwc-menu > mwc-list-item'
)
).find(item => item.innerHTML.includes(`[scl.Communication]`))
);
expect(editGseButton).to.exist;

await editGseButton.updateComplete;
await element.wizardUI.dialog?.requestUpdate();
editGseButton.click();
await new Promise(resolve => setTimeout(resolve, 100)); // await animation
const macField = <WizardTextField>(
Expand All @@ -217,11 +221,17 @@ describe('Wizards for SCL element GSEControl', () => {
doc.querySelector('IED[name="IED1"] DataSet[name="GooseDataSet1"]')
).to.exist;
expect(doc.querySelector('GSE[cbName="GCB"]')).to.exist;
const deleteButton = <Button>(
element.wizardUI.dialog!.querySelector('mwc-button[icon="delete"]')!

const deleteButton = <HTMLElement>(
Array.from(
element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
'mwc-menu > mwc-list-item'
)
).find(item => item.innerHTML.includes(`[remove]`))
);
await deleteButton.updateComplete;
await element.wizardUI.dialog?.requestUpdate();
deleteButton.click();

expect(doc.querySelector('IED[name="IED1"] GSEControl[name="GCB"]')).to
.not.exist;
expect(
Expand All @@ -240,11 +250,14 @@ describe('Wizards for SCL element GSEControl', () => {
});

it('does not show edit DataSet button', async () => {
const editGseButton = <Button>(
element.wizardUI.dialog!.querySelector(
'mwc-button[id="editdataset"]'
)!
const editGseButton = <HTMLElement>(
Array.from(
element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
'mwc-menu > mwc-list-item'
)
).find(item => item.innerHTML.includes(`[scl.DataSet]`))
);

expect(editGseButton).to.not.exist;
});
});
Expand All @@ -260,9 +273,14 @@ describe('Wizards for SCL element GSEControl', () => {
});

it('does not show edit DataSet button', async () => {
const editGseButton = <Button>(
element.wizardUI.dialog!.querySelector('mwc-button[id="editgse"]')!
const editGseButton = <HTMLElement>(
Array.from(
element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
'mwc-menu > mwc-list-item'
)
).find(item => item.innerHTML.includes(`[scl.Communication]`))
);

expect(editGseButton).to.not.exist;
});
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { expect, fixture, html } from '@open-wc/testing';
import '../../mock-wizard-editor.js';
import { MockWizardEditor } from '../../mock-wizard-editor.js';

import { Button } from '@material/mwc-button';
import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';

import { FilteredList } from '../../../src/filtered-list.js';
Expand Down
66 changes: 49 additions & 17 deletions test/unit/wizards/__snapshots__/gsecontrol.test.snap.js
Original file line number Diff line number Diff line change
Expand Up @@ -174,12 +174,56 @@ snapshots["gsecontrol wizards editGseControlWizard looks like the latest snapsho
heading="[wizard.title.edit]"
open=""
>
<div id="wizard-content">
<mwc-button
icon="delete"
label="[remove]"
<nav>
<mwc-icon-button icon="more_vert">
</mwc-icon-button>
<mwc-menu
class="actions-menu"
corner="BOTTOM_RIGHT"
menucorner="END"
>
</mwc-button>
<mwc-list-item
aria-disabled="false"
graphic="icon"
mwc-list-item=""
tabindex="-1"
>
<span>
[remove]
</span>
<mwc-icon slot="graphic">
delete
</mwc-icon>
</mwc-list-item>
<mwc-list-item
aria-disabled="false"
graphic="icon"
mwc-list-item=""
tabindex="-1"
>
<span>
[scl.DataSet]
</span>
<mwc-icon slot="graphic">
edit
</mwc-icon>
</mwc-list-item>
<mwc-list-item
aria-disabled="false"
graphic="icon"
mwc-list-item=""
tabindex="-1"
>
<span>
[scl.Communication]
</span>
<mwc-icon slot="graphic">
edit
</mwc-icon>
</mwc-list-item>
</mwc-menu>
</nav>
<div id="wizard-content">
<wizard-textfield
dialoginitialfocus=""
helper="[scl.name]"
Expand Down Expand Up @@ -265,18 +309,6 @@ snapshots["gsecontrol wizards editGseControlWizard looks like the latest snapsho
SignatureAndEncryption
</mwc-list-item>
</wizard-select>
<mwc-button
icon="edit"
id="editdataset"
label="[wizard.title.edit]"
>
</mwc-button>
<mwc-button
icon="edit"
id="editgse"
label="[scl.Communication]"
>
</mwc-button>
</div>
<mwc-button
dialogaction="close"
Expand Down
14 changes: 7 additions & 7 deletions test/unit/wizards/gsecontrol.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
} from '../../../src/foundation.js';
import {
editGseControlWizard,
removeGseControl,
removeGseControlAction,
renderGseAttributes,
selectGseControlWizard,
updateGseControlAction,
Expand Down Expand Up @@ -149,7 +149,7 @@ describe('gsecontrol wizards', () => {

it('removes GSEControl and its refereced DataSet if no other GSEControl are aasinged', () => {
const gseControl = ln01gse.querySelector('GSEControl')!;
const actions = <Delete[]>removeGseControl(gseControl)!.actions;
const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
expect(actions.length).to.equal(2);
expect(actions[0]).to.satisfy(isDelete);
expect(actions[0].old.element).to.equal(gseControl);
Expand All @@ -159,36 +159,36 @@ describe('gsecontrol wizards', () => {

it('removes GSEControl only if other GSEControl is assinged to the same DataSet', () => {
const gseControl = ln02gse.querySelector('GSEControl')!;
const actions = <Delete[]>removeGseControl(gseControl)!.actions;
const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
expect(actions.length).to.equal(1);
expect(actions[0]).to.satisfy(isDelete);
expect(actions[0].old.element).to.equal(gseControl);
});

it('removes GSEControl only if other ReportControlBlock is assinged to the same DataSet', () => {
const gseControl = ln02rp.querySelector('GSEControl')!;
const actions = <Delete[]>removeGseControl(gseControl)!.actions;
const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
expect(actions.length).to.equal(1);
expect(actions[0]).to.satisfy(isDelete);
expect(actions[0].old.element).to.equal(gseControl);
});

it('removes GSEControl only if other SMV is assinged to the same DataSet', () => {
const gseControl = ln02smv.querySelector('GSEControl')!;
const actions = <Delete[]>removeGseControl(gseControl)!.actions;
const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
expect(actions.length).to.equal(1);
expect(actions[0]).to.satisfy(isDelete);
expect(actions[0].old.element).to.equal(gseControl);
});

it('does not remove with missing parent element', () => {
const action = removeGseControl(missingparent);
const action = removeGseControlAction(missingparent);
expect(action).to.be.null;
});

it('removes GSE element if present in the Communication section', () => {
const gseControl = doc.querySelector('IED[name="IED1"] GSEControl')!;
const actions = <Delete[]>removeGseControl(gseControl)!.actions;
const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
expect(actions.length).to.equal(3);
expect(actions[0]).to.satisfy(isDelete);
expect(actions[0].old.element).to.equal(gseControl);
Expand Down

0 comments on commit 32d7629

Please sign in to comment.