@polymer/test-fixture
Advanced tools
Readme
##<test-fixture>
The <test-fixture> element can simplify the exercise of consistently
resetting a test suite's DOM.
See: Documentation.
To use it, wrap the test suite's DOM as a template:
<test-fixture id="SomeElementFixture">
<template>
<some-element id="SomeElementForTesting"></some-element>
</template>
</test-fixture>
Now, the <test-fixture> element can be used to generate a copy of its
template:
<script>
describe('<some-element>', function () {
var someElement;
beforeEach(function () {
document.getElementById('SomeElementFixture').create();
someElement = document.getElementById('SomeElementForTesting');
});
});
</script>
Fixtured elements can be cleaned up by calling restore on the <test-fixture>:
afterEach(function () {
document.getElementById('SomeElementFixture').restore();
// <some-element id='SomeElementForTesting'> has been removed
});
<test-fixture> will create fixtures from all of its immediate <template>
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 <head> of your document and then fixture elements like so:
<script>
describe('<some-element>', function () {
var someElement;
beforeEach(function () {
someElement = fixture('SomeElementFixture');
});
});
</script>
Fixtured elements will be automatically restored in the afterEach phase of the
current Mocha Suite.
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:
<test-fixture id="bound">
<dom-bind>
<template>
<span>{{greeting}}</span>
</template>
</dom-bind>
</test-fixture>
You can pass an optional context argument to create() or fixture() to pass
the model:
var bound = fixture('bound', {greeting: 'ohai thurr'});
Consider the following web-component-tester test suite:
<!doctype html>
<html>
<head>
<title>some-element test suite</title>
</head>
<body>
<some-element id="SomeElementForTesting"></some-element>
<script type="module">
import '../some-element.js';
describe('<some-element>', function () {
var someElement;
beforeEach(function () {
someElement = document.getElementById('SomeElementForTesting');
});
it('can receive property `foo`', function () {
someElement.foo = 'bar';
expect(someElement.foo).to.be.equal('bar');
});
it('has a default `foo` value of `undefined`', function () {
expect(someElement.foo).to.be.equal(undefined);
});
});
</script>
</body>
</html>
In this contrived example, the suite will pass or fail depending on which order
the tests are run in. It is non-deterministic because someElement 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
non-contrived test suites that target complex elements, this can result in a
large quantity of ever-growing set-up and tear-down boilerplate.
FAQs
A simple element to fixture DOM for tests
The npm package @polymer/test-fixture receives a total of 6,481 weekly downloads. As such, @polymer/test-fixture popularity was classified as popular.
We found that @polymer/test-fixture demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.
Security News
The White House is addressing fragmented cybersecurity regulations as CISOs report spending up to 50% of their time on compliance, aiming to harmonize requirements and improve cybersecurity outcomes.
Security News
Research
The Socket Research Team has identified a malicious Python package that is typosquatting the popular crytic-compile utility, frequently used in popular toolkits and development environments for smart contracts and crypto applications.