Open pghalliday opened 7 years ago
I trying to migrate some polymer 1 to polymer 2 and I have the same bug the following test working before migration to Polymer 2 with test-fixture#3.0.0-rc.1
<test-fixture id="ChangedPropertyTestFixture">
<template is="dom-template">
<my-text url="{{url}}"></my-text>
</template>
</test-fixture>
test('setting a property on the element works', function () {
// Create a test fixture
var element = fixture('ChangedPropertyTestFixture', {url: '/FiveElements/air'});
assert.equal(element.url, '/FiveElements/air');
});
with the current error
expected '{{url}}' to equal '/FiveElements/air'
with the current log in console
'was given a model to stamp, but the template is not of a bindable type'
in reference of the code of test-fixture that test if (fixtureTemplate.stamp)
stamp: function (fixtureTemplate, model) {
var stamped;
// Check if we are dealing with a "stampable" `<template>`. This is a
// vaguely defined special case of a `<template>` that is a custom
// element with a public `stamp` method that implements some manner of
// data binding.
if (fixtureTemplate.stamp) {
stamped = fixtureTemplate.stamp(model);
// We leak Polymer specifics a little; if there is an element `root`, we
// want that to be returned.
stamped = stamped.root || stamped;
// Otherwise, we fall back to standard HTML templates, which do not have
// any sort of binding support.
} else {
if (model) {
console.warn(this, 'was given a model to stamp, but the template is not of a bindable type');
}
question: need to still use is="dom-template"
with fixture with model ?
*NB*: This regression is a big probem for migrate to polymer 2 if the unit testing not fulling working**
Hello, I am facing same issue. Any help resolving this issue is greatly appreciated.
I've tried both a bare <template is="dom-template">
and one wrapped with <dom-bind>
, and I see the same errors as @pghalliday .
Messing around with this some more, I remain confused. There are a lot of things that confuse me writing Polymer apps, including wct
and polymer-cli
versions. I've forked test-fixture
and have tried to write a test that requires data binding. Thus far I've failed, but I'm not at all sure this isn't due to a Polymer/WCT version issue that eludes me.
Nevertheless, what I describe below is odd and might help someone who knows more than I do.
I've added a test case like the following in test/test-fixture.html
:
DOM:
<test-fixture id="DataBindingFixture">
<dom-bind>
<template is="dom-template">
<div id="stamp-me">
{{textValue}}
</div>
</template>
</dom-bind>
</test-fixture>
Test:
describe('for a dom with a bound template', function () {
var el;
let model = {
textValue: 'I should be stamped',
};
beforeEach(function () {
debugger; // lets you step in and see the removeChild() problem
el = dataBindingFixture.create(model);
});
it('div text should be stamped', function () {
var div = document.getElementById('stamp-me');
expect(document.getElementById('stamp-me').innerText)
.to.equal(model.textValue);
});
});
That test fails with the Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
error reported above. Omitting the <dom-bind>
element just causes the test to fail at the assert
statement.
What really boggles my mind about this is that when I step through the code, the element that supposedly is not a child certainly looks like it is a child. This console screenshot is taken with the debugger on the line:
this.removeChild(element);
Looking at this
and element
, it certainly looks like element
is a child. What is really strange is that, after manually invoking removeChild(element)
and seeing the error that element
is not a child, inspecting this
again still indicates that element
is a child! Very odd.
@cdata (Please file a bug re: data-bound templates. ) that was already filed I guess
Was the bug mentioned above filed? if so can it be linked to this one, please?
It was just a discussion on twitter that resulted in me opening an issue, but this issue was exactly what we were talking about
ah ok, so no movement as of yet.
Thanks
To workaround the issue, wrap the <test-fixture>
in a <dom-bind>
.
<dom-bind>
<test-fixture>
<template>
<paper-icon-button icon="[[icon]]"></paper-icon-button>
</template>
</test-fixture>
</dom-bind>
Then update the bound data using the DomBind.set
.
document.querySelector('dom-bind').set('icon','clear');
@ErikGrimes your solution doesn't seem to work for me.
Any new comments from the developers?
For everyone's information, type-extension elements (<.. is="...">) doesn't work anymore in Polymer 2 (see the what's new section), so that's why \ doesn't work like before.
The expected behavior of the new version should be that it works with a straight \, or some kind of \
@cdata can you please provide an update on this?
I can verify the <dom-bind>
approach. The document.querySelector('dom-bind').set
works as above, I was also able to use document.querySelector('dom-bind').get
in a test that uses firebase:
<dom-bind>
<test-fixture id="testUser">
<template>
<firebase-auth
id="auth"
app-name="my-app"
user="{{user}}"></firebase-auth>
<!-- More test omitted here -->
</template>
</test-fixture>
</dom-bind>
Then in my test I used:
describe('My test', function() {
before(function() {
var auth = document.getElementById('auth');
var dbind = document.querySelector('dom-bind');
const email = 'randomtestemail@nothing.com';
const pass = '****';
auth.signInWithEmailAndPassword(email, pass).then(function(){
var uid = dbind.get('user').uid;
/* Wrote some test data to a location that used the user uid */
});
});
it('should do something', function () {
/* actual test was on an element that read from firebase in a location based on the
authorized user id and returned a value... */
});
});
I didn't end up using the fixture
javascript function in the test. I never managed to get it to work as expected which is likely because of the extra nesting...
Workaround 🤷♂️
test("displays text", (ok) => {
const element = fixture(Fixture.BASIC);
element.data = {
foo: true,
};
setTimeout(() => {
const foo = element.shadowRoot.querySelector("#some-id").textContent;
assert.equal(
foo,
"bar",
);
ok();
});
});
Can confirm this is also happening in Firefox.
I wrote a failing test for this issue, can someone take a look at it to see if it checks out:
https://github.com/rgladwell/test-fixture/commit/b9db992245f1ef19cb7f8f42e699a9d001269be9
The dom-bind work-around isn't working for me in Polymer 2.2.0
For Polymer 1.* the dom bind works great.
The issue I was experiencing was the testing browser was caching my old test with the -p
option for persistence. I kept getting breakage/failure because my new changes weren't taking effect when refreshing my testing browser.
Make sure you are clearing your browser cache in your unit testing.
Hi, any working work around ? Nothing works for polymer 3
a working workaround is to put a setTimeout in the ready of your component
@rom1504 here is how I do it in Polymer 1 if that helps any. Be sure to use Mocha's sync feature:
<test-fixture id="monthly-income-form-edit">
<template is="dom-template">
<h2>monthly income edit form</h2>
<monthly-income-form-edit
fields="[[fields]]"
picklist-values="[[picklistValues]]"
answers="[[answers]]"
></monthly-income-form-edit>
</template>
</test-fixture>
....
beforeEach((done) => {
myEl = fixture('monthly-income-form-edit',
{
answers: answersMock,
fields: fieldsMock,
picklistValues: picklistMock
});
setTimeout(()=> {
do stuff you need in the dom after it's initialize
done()
}, 1);
Yes but the reason that issue is open is that this doesn't work starting polymer 2 and still in polymer 3. See the errors reported above.
On Thu, Sep 20, 2018, 03:22 Darin Hensley notifications@github.com wrote:
@rom1504 https://github.com/rom1504 here is how I do it in Polymer 1 if that helps any. I don't have to use setTimeout.
<test-fixture id="monthly-income-form-edit"> <template is="dom-template"> <h2>sp monthly income edit form</h2> <sp-monthly-income-form-edit fields="[[fields]]" picklist-values="[[picklistValues]]" answers="[[answers]]" ></monthly-income-form-edit> </template> </test-fixture>
....
beforeEach((done) => { myEl = fixture('monthly-income-form-edit', { answers: answersMock, fields: fieldsMock, picklistValues: picklistMock });
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerElements/test-fixture/issues/47#issuecomment-423008739, or mute the thread https://github.com/notifications/unsubscribe-auth/ACPN_hWC7fm0XuKEH_wxOgNYJayojEEuks5ucu3ygaJpZM4McXqc .
Here's a little snippet that might unblock users needing this legacy functionality in tests: https://jsbin.com/jihunuy/edit?html,output
This adds a stamp method on <template is="dom-template">
elements that makes them compatible with <test-fixture>
. As long the "helper code" there is run after test fixtures are parsed and before any test fixtures are created in tests, it should work.
Legacy ? Do you mean there's anything newer that replace this ?
On Thu, Jan 10, 2019, 19:57 Kevin Schaaf notifications@github.com wrote:
Here's a little snippet that might unblock users needing this legacy functionality in tests: https://jsbin.com/jihunuy/edit?html,output
This adds a stamp method on elements that makes them compatible with
. As long the "helper code" there is run after test fixtures are parsed and before any test fixtures are created in tests, it should work. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerElements/test-fixture/issues/47#issuecomment-453212161, or mute the thread https://github.com/notifications/unsubscribe-auth/ACPN_iRa2zQDCKNYfP1YjApYB8oQAsJNks5vB40XgaJpZM4McXqc .
"Legacy"?! If this module is not intended to be compatible with Polymer > 2.2.0, shouldn't it be removed from the Polymer 3.0 docs?
Description
I tried to do the same as I did in Polymer 1.x with test-fixture v1.1.2, using the
is="dom-template"
attribute on my template and also tried usingdom-bind
as documented here https://www.polymer-project.org/2.0/docs/devguide/templates#dom-bindBut I cannot get data bound fixtures to work with a fresh
polymer-2-application
using test-fixture v3.0.0-rc.1I suspect I'm doing something wrong :s
Expected outcome
Bound attributes are rendered with bound data
Actual outcome
Bound attributes are not rendered with bound data
Steps to reproduce
To a fresh
polymer-2-application
generated with polymer-cli v0.18.0-pre.13 (installs text-fixture v3.0.0-rc.1) add the following simple component assrc/text.html
And the following test as
test/text.html
Then run
polymer test
orwct
, etcThe test fails with:
NB. The equivalent test with an equivalent polymer 1.x component succeeds
I also got this error in the console
Browsers Affected
Aside
I also tried with the
dom-bind
element like thisBut that fails in both Polymer 1.x and the Polymer 2 RC with the following error