From 72516ac2c5e357b455f437aeb54602eede8cc3f6 Mon Sep 17 00:00:00 2001 From: Mikhail Bashkirov Date: Mon, 3 Jun 2019 12:42:41 +0200 Subject: [PATCH] chore(steps): clean up tests --- packages/steps/test/lion-step.test.js | 114 +++++++++++-------- packages/steps/test/lion-steps.test.js | 151 +++++++++++-------------- 2 files changed, 136 insertions(+), 129 deletions(-) diff --git a/packages/steps/test/lion-step.test.js b/packages/steps/test/lion-step.test.js index 530c8ed58..593df8047 100644 --- a/packages/steps/test/lion-step.test.js +++ b/packages/steps/test/lion-step.test.js @@ -1,90 +1,110 @@ -import { expect, fixture, oneEvent } from '@open-wc/testing'; +import { expect, fixture, html, oneEvent } from '@open-wc/testing'; -import '../lion-steps.js'; import '../lion-step.js'; describe('lion-step', () => { it('has a condition which allows it to become active (condition is true by default)', async () => { - const steps = await fixture(` - Step 1 + const el = await fixture(html` + + Step 1 + `); - expect(steps.children[0].condition()).to.equal(true); - expect(steps.children[0].passesCondition()).to.equal(true); + expect(el.children[0].condition()).to.equal(true); + expect(el.children[0].passesCondition()).to.equal(true); }); it('does not invert condition by default', async () => { - const steps = await fixture(` - Step 1 + const el = await fixture(html` + + Step 1 + `); - expect(steps.children[0].invertCondition).to.equal(false); - expect(steps.children[0].passesCondition()).to.equal(true); + expect(el.children[0].invertCondition).to.equal(false); + expect(el.children[0].passesCondition()).to.equal(true); }); it('can invert its condition', async () => { - const steps = await fixture(` - Step 1 + const el = await fixture(html` + + Step 1 + `); - steps.children[0].condition = () => true; - steps.children[0].invertCondition = true; - expect(steps.children[0].condition()).to.equal(true); - expect(steps.children[0].passesCondition()).to.equal(false); + el.children[0].condition = () => true; + el.children[0].invertCondition = true; + expect(el.children[0].condition()).to.equal(true); + expect(el.children[0].passesCondition()).to.equal(false); }); it('allows to define it as the initial-step', async () => { - const withInitial = await fixture(` - Step 1 + const el = await fixture(html` + + Step 1 + `); - expect(withInitial.current).to.equal(0); - expect(withInitial.children[0].status).to.equal('entered'); + expect(el.current).to.equal(0); + expect(el.children[0].status).to.equal('entered'); - const withSecondInitial = await fixture(`Step 1Step 2 - `); - expect(withSecondInitial.current).to.equal(1); - expect(withSecondInitial.children[0].status).to.equal('untouched'); - expect(withSecondInitial.children[1].status).to.equal('entered'); + const el2 = await fixture(html` + + Step 1 + Step 2 + + `); + expect(el2.current).to.equal(1); + expect(el2.children[0].status).to.equal('untouched'); + expect(el2.children[1].status).to.equal('entered'); }); it('has "untouched" status by default', async () => { - const steps = await fixture(` - Step 1 + const el = await fixture(html` + + Step 1 + `); - expect(steps.children[0].status).to.equal('untouched'); + expect(el.children[0].status).to.equal('untouched'); }); it('communicates with a parent steps controller to handles actions', async () => { - const steps = await fixture(` - Step 1 + const el = await fixture(html` + + Step 1 + `); - expect(steps.children[0].controller).to.equal(steps); + expect(el.children[0].controller).to.equal(el); }); describe('navigation', () => { it('can be entered', async () => { - const steps = await fixture(` - Step 1 + const el = await fixture(html` + + Step 1 + `); - setTimeout(() => steps.children[0].enter(), 0); - await oneEvent(steps.children[0], 'enter'); - expect(steps.children[0].status).to.equal('entered'); + setTimeout(() => el.children[0].enter(), 0); + await oneEvent(el.children[0], 'enter'); + expect(el.children[0].status).to.equal('entered'); }); it('can be left', async () => { - const steps = await fixture(` - Step 1 + const el = await fixture(html` + + Step 1 + `); - setTimeout(() => steps.children[0].leave(), 0); - await oneEvent(steps.children[0], 'leave'); - expect(steps.children[0].status).to.equal('left'); + setTimeout(() => el.children[0].leave(), 0); + await oneEvent(el.children[0], 'leave'); + expect(el.children[0].status).to.equal('left'); }); it('can be skipped', async () => { - const steps = await fixture(` - Step 1 + const el = await fixture(html` + + Step 1 + `); - setTimeout(() => steps.children[0].skip(), 0); - await oneEvent(steps.children[0], 'skip'); - expect(steps.children[0].status).to.equal('skipped'); + setTimeout(() => el.children[0].skip(), 0); + await oneEvent(el.children[0], 'skip'); + expect(el.children[0].status).to.equal('skipped'); }); }); }); diff --git a/packages/steps/test/lion-steps.test.js b/packages/steps/test/lion-steps.test.js index 89b6f62a0..f6a798c91 100644 --- a/packages/steps/test/lion-steps.test.js +++ b/packages/steps/test/lion-steps.test.js @@ -29,89 +29,84 @@ async function checkWorkflow(steps, expected) { describe('lion-steps', () => { describe('initialization', () => { it('activates step with an "initial-step" attribute', async () => { - const steps = await fixture(` + const el = await fixture(html` Step 0 Step 1 `); - const firstStep = steps.children[0]; - expect(steps.current).to.equal(0); - expect(firstStep.status).to.equal('entered'); + expect(el.current).to.equal(0); + expect(el.children[0].status).to.equal('entered'); }); }); describe('navigation', () => { it('can navigate to the next step', async () => { - const steps = await fixture(` + const el = await fixture(html` Step 0 Step 1 `); - setTimeout(() => { - steps.next(); - }); + setTimeout(() => el.next()); - const { detail } = await oneEvent(steps, 'transition'); + const { detail } = await oneEvent(el, 'transition'); expect(detail.fromStep.number).to.equal(0); expect(detail.fromStep.element.innerHTML).to.equal('Step 0'); expect(detail.toStep.number).to.equal(1); expect(detail.toStep.element.innerHTML).to.equal('Step 1'); - expect(steps.current).to.equal(1); + expect(el.current).to.equal(1); }); it('can navigate to the previous step', async () => { - const steps = await fixture(` + const el = await fixture(html` Step 0 Step 1 `); - setTimeout(() => { - steps.previous(); - }); + setTimeout(() => el.previous()); - const { detail } = await oneEvent(steps, 'transition'); + const { detail } = await oneEvent(el, 'transition'); expect(detail.fromStep.number).to.equal(1); expect(detail.fromStep.element.innerHTML).to.equal('Step 1'); expect(detail.toStep.number).to.equal(0); expect(detail.toStep.element.innerHTML).to.equal('Step 0'); - expect(steps.current).to.equal(0); + expect(el.current).to.equal(0); }); it('prevents navigating to the next step if user is on the last step', async () => { - const steps = await fixture(` + const el = await fixture(html` Step 0 Step 1 `); const cb = sinon.spy(); - steps.addEventListener('transition', cb); - expect(() => steps.next()).to.throw(); + el.addEventListener('transition', cb); + expect(() => el.next()).to.throw(); expect(cb.callCount).to.equal(0); - expect(steps.current).to.equal(1); + expect(el.current).to.equal(1); }); it('prevents navigating to the previous step if user is on the first step', async () => { - const steps = await fixture(` + const el = await fixture(html` Step 0 Step 1 `); const cb = sinon.spy(); - steps.addEventListener('transition', cb); - expect(() => steps.previous()).to.throw(); + el.addEventListener('transition', cb); + expect(() => el.previous()).to.throw(); expect(cb.callCount).to.equal(0); - expect(steps.current).to.equal(0); + expect(el.current).to.equal(0); }); it('can navigate to an arbitrary step skipping intermediate conditions', async () => { - const steps = await fixture(html` + const el = await fixture(html` Step 0 data.age < 18}>Step 1 @@ -121,21 +116,21 @@ describe('lion-steps', () => { `); - steps.current = 2; - await checkWorkflow(steps, { + el.current = 2; + await checkWorkflow(el, { transitions: '0 => 2', statuses: 'left untouched entered untouched untouched', }); - steps.current = 3; // can't enter because of condition move to next available one - await checkWorkflow(steps, { + el.current = 3; // can't enter because of condition move to next available one + await checkWorkflow(el, { transitions: '2 => 4', statuses: 'left untouched left skipped entered', }); }); it('throws an error if current step is set out of bounds', async () => { - const el = await fixture(` + const el = await fixture(html` Step 0 Step 1 @@ -150,7 +145,7 @@ describe('lion-steps', () => { describe('workflow with data and conditions', () => { it('navigates to the next step which passes the condition', async () => { - const steps = await fixture(html` + const el = await fixture(html` Step 0 data.age < 18}>Step 1 @@ -160,18 +155,16 @@ describe('lion-steps', () => { `); - setTimeout(() => { - steps.next(); - }); + setTimeout(() => el.next()); - await checkWorkflow(steps, { + await checkWorkflow(el, { transitions: '0 => 3', statuses: 'left skipped skipped entered untouched', }); }); it('skips steps with failing condition when navigating to the next step', async () => { - const steps = await fixture(html` + const el = await fixture(html` Step 0 data.age < 18}>Step 1 @@ -181,20 +174,18 @@ describe('lion-steps', () => { `); - steps.next(); + el.next(); - setTimeout(() => { - steps.next(); - }); + setTimeout(() => el.next()); - await checkWorkflow(steps, { + await checkWorkflow(el, { transitions: '2 => 4', statuses: 'left skipped left skipped entered', }); }); it('skips steps with failing condition when navigating to the previous step', async () => { - const steps = await fixture(html` + const el = await fixture(html` Step 0 data.age < 18}>Step 1 @@ -204,14 +195,12 @@ describe('lion-steps', () => { `); - steps.next(); - steps.next(); + el.next(); + el.next(); - setTimeout(() => { - steps.previous(); - }); + setTimeout(() => el.previous()); - await checkWorkflow(steps, { + await checkWorkflow(el, { transitions: '4 => 1', statuses: 'left entered skipped skipped left', }); @@ -220,7 +209,7 @@ describe('lion-steps', () => { describe('workflow with inverted condition', () => { it('behaves like "if not" when inverted condition is present', async () => { - const steps = await fixture(html` + const el = await fixture(html` Step 0 data.age < 18} invert-condition>Step 1 @@ -229,17 +218,17 @@ describe('lion-steps', () => { `); setTimeout(() => { - steps.data.age = 15; - steps.next(); - steps.previous(); - steps.data.age = 20; - steps.next(); - steps.next(); - steps.previous(); - steps.previous(); + el.data.age = 15; + el.next(); + el.previous(); + el.data.age = 20; + el.next(); + el.next(); + el.previous(); + el.previous(); }); - await checkWorkflow(steps, { + await checkWorkflow(el, { transitions: '0 => 2 => 0 => 1 => 2 => 1 => 0', statuses: 'entered left left', }); @@ -247,7 +236,7 @@ describe('lion-steps', () => { it('behaves like "if/else" in case both condition and inverted condition are present', async () => { const condition = data => data.age < 18; - const steps = await fixture(html` + const el = await fixture(html` Step 0 Step 1 @@ -256,15 +245,15 @@ describe('lion-steps', () => { `); setTimeout(() => { - steps.data.age = 15; - steps.next(); - steps.previous(); - steps.data.age = 20; - steps.next(); - steps.previous(); + el.data.age = 15; + el.next(); + el.previous(); + el.data.age = 20; + el.next(); + el.previous(); }); - await checkWorkflow(steps, { + await checkWorkflow(el, { transitions: '0 => 1 => 0 => 2 => 0', statuses: 'entered skipped left', }); @@ -273,7 +262,7 @@ describe('lion-steps', () => { describe('workflow with forward-only', () => { it('activates step when going forward', async () => { - const steps = await fixture(` + const el = await fixture(html` Step 0 Step 1 @@ -282,18 +271,18 @@ describe('lion-steps', () => { `); setTimeout(() => { - steps.next(); - steps.next(); + el.next(); + el.next(); }); - await checkWorkflow(steps, { + await checkWorkflow(el, { transitions: '0 => 1 => 2', statuses: 'left left entered', }); }); it('skips step when going back to prevent reevaluation of "service" steps', async () => { - const steps = await fixture(` + const el = await fixture(html` Step 0 Step 1 @@ -301,21 +290,19 @@ describe('lion-steps', () => { `); - steps.next(); - steps.next(); + el.next(); + el.next(); - setTimeout(() => { - steps.previous(); - }); + setTimeout(() => el.previous()); - await checkWorkflow(steps, { + await checkWorkflow(el, { transitions: '2 => 0', statuses: 'entered left left', }); }); it('does not set "skipped" status when going back', async () => { - const steps = await fixture(` + const el = await fixture(html` Step 0 Step 1 @@ -323,11 +310,11 @@ describe('lion-steps', () => { `); - steps.next(); - steps.next(); - steps.previous(); + el.next(); + el.next(); + el.previous(); - expect(steps.children[1].status).to.equal('left'); + expect(el.children[1].status).to.equal('left'); }); }); });