ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(steps): always fire @enter only once

Browse source
This commit is contained in:
Thomas Allmer 2019-10-24 10:58:42 +02:00 committed by Thomas Allmer
parent ebe2bc1aad
commit 8c724fa59f
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/steps/src/LionStep.js
View file

@ -119,8 +119,10 @@ export class LionStep extends LionLitElement {
this.status = 'entered';
if (updateController === true) {
this.controller.current = this.getControllerIndex();
// controller will trigger enter() again which will dispatch the enter event
} else {
this.dispatchEvent(new CustomEvent('enter', { bubbles: true, composed: true }));
}
this.dispatchEvent(new CustomEvent('enter', { bubbles: true, composed: true }));
}
leave() {

21
packages/steps/test/lion-steps.test.js
View file

@ -159,7 +159,7 @@ describe('lion-steps', () => {
});
describe('events', () => {
it('will trigger lion-step @leave event before changing .current', async () => {
it('will fire lion-step @leave event before changing .current', async () => {
let currentInLeaveEvent;
const onLeave = ev => {
currentInLeaveEvent = ev.target.controller.current;
@ -175,7 +175,7 @@ describe('lion-steps', () => {
expect(currentInLeaveEvent).to.equal(0);
});
it('will trigger lion-step @enter event after changing .current', async () => {
it('will fire lion-step @enter event after changing .current', async () => {
let currentInEnterEvent;
const onEnter = ev => {
currentInEnterEvent = ev.target.controller.current;
@ -190,6 +190,23 @@ describe('lion-steps', () => {
el.next();
expect(currentInEnterEvent).to.equal(1);
});
it('will fire initial @enter event only once if [initial-step] is not on first step', async () => {
const firstEnterSpy = sinon.spy();
const secondEnterSpy = sinon.spy();
await fixture(html`
<lion-steps>
<lion-step @enter=${firstEnterSpy}>
<div>test1</div>
</lion-step>
<lion-step initial-step @enter=${secondEnterSpy}>
<div>test2</div>
</lion-step>
</lion-steps>
`);
expect(firstEnterSpy).to.not.have.been.called;
expect(secondEnterSpy).to.have.been.calledOnce;
});
});
describe('workflow with data and conditions', () => {