A simple element to fixture DOM for tests
npm install @polymer/test-fixture
##<test-fixture>
The
resetting a test suite's DOM.
See: Documentation.
To use it, wrap the test suite's DOM as a template:
``html`
Now, the element can be used to generate a copy of its
template:
`html`
Fixtured elements can be cleaned up by calling restore on the :
`javascript`
afterEach(function () {
document.getElementById('SomeElementFixture').restore();
//
});
will create fixtures from all of its immediate
children. The DOM structure of fixture templates can be as simple or as complex
as the situation calls for.
In Mocha, usage can be simplified even further. Include test-fixture-mocha.js
after Mocha in the
of your document and then fixture elements like so:`html
`Fixtured elements will be automatically restored in the
phase of the
current Mocha Suite.Data-bound templates
Data-binding systems are also supported, as long as your (custom) template
elements define a
stamp(model) method that returns a document fragment. This
allows you to stamp out templates w/ custom models for your fixtures.For example, using Polymer's
dom-bind:`html
{{greeting}}
`You can pass an optional context argument to
or fixture() to pass
the model:`js
var bound = fixture('bound', {greeting: 'ohai thurr'});
`The problem being addressed
Consider the following
test suite:`html
some-element test suite
`In this contrived example, the suite will pass or fail depending on which order
the tests are run in. It is non-deterministic because
has
internal state that is not properly reset at the end of each test.It would be trivial in the above example to simply reset
someElement.foo to
the expected default value of undefined in an afterEach` hook. However, for