Demo-Driven Development for Polymer wizards

Accelerate development cycles by connecting the internal state of your element to its demo page

Ronny Roeller
Aug 25, 2017 · 3 min read

Polymer elements are often better developed based on demos than onunit tests (read full story here). A special case are wizards — or other multi-step elements: Reloading the demo will wipe out the state, and force you to redo all steps, before you can verify your changes.

Control page from demo

Let’s consider this simple wizard based on <iron-pages>:

<iron-pages selected="{{_page}}" attr-for-selected="name">
<div name="intro">
Introduction page
<paper-button on-tap="gotToExecute">Next</paper-button>
</div>
<div name="execute">
Here is the real action
<paper-button on-tap="gotToFinalize">Next</paper-button>
</div>
<div name="finalize">
Thanks and good bye
</div>
</iron-pages>

The full-screen demo would expose the wizard via:

<dom-bind>
<template>
<custom-style>
<style>
my-wizard {
@apply --layout-fit;
}
</style>
</custom-style>

In its current state, we would have to press twice the [Next] button to see changes on our finalize page. Wouldn’t it be great to jump directly to the last page from our demo?

To control the page, we first need to expose the underlying property. We’ll keep the underscore in the name _page to indicate that this property isn’t part of the public API (similar to Java’s @ VisibleForTesting):

class MyWizard extends Polymer.Element {
static get is() {
return 'my-wizard';
}

Now, we can extend the demo to control the page directly:

<dom-bind>
<template>
<custom-style>
<style>
.page {
@apply --layout-fit;
@apply --layout-vertical;
}
my-wizard {
@apply --layout-flex;
}
.controls {
@apply --layout-horizontal;
border-top: 1px solid #ccc;
}
</style>
</custom-style>

Wizard within wizards

This pattern can be easily extended. Imagine the execute page of our wizard consists again of different steps:

<iron-pages selected="{{_page}}" attr-for-selected="name">
<div name="intro">
Introduction page
<paper-button on-tap="gotToExecute">Next</paper-button>
</div>
<div name="execute">
<iron-pages selected="{{_step}}">
<div>First step...</div>
<div>Second step...</div>
<div>
<paper-button on-tap="gotToFinalize">Next</paper-button>
</div>
</iron-pages>

</div>
<div name="finalize">
Thanks and good bye
</div>
</iron-pages>

With the _step property being exposed, the demo can control the sub wizard as well:

...

Now, the demo allows to jump to a specific page and step. To completely resolve the reload issue, the demo could store the last page/step in a cookie or in local storage, and restore from there.

Happy coding!


NEXT Engineering

Tech lessons learned while making innovation smart, simple and sticky.

)

Ronny Roeller

Written by

CTO at @Next. Building agile SaaS platform to make innovation smart, simple and sticky. @stanforddschool @INSEAD

NEXT Engineering

Tech lessons learned while making innovation smart, simple and sticky.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade