-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can't get data bound fixtures to work with v3.0.0-rc.1 #47
Comments
I trying to migrate some polymer 1 to polymer 2 and I have the same bug <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
with the current log in console
in reference of the code of test-fixture that test 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 NB: This regression is a big probem for migrate to polymer 2 if the unit testing not fulling working |
Hello, |
I've tried both a bare |
It looks like there is an open bug on Polymer 2.0 and wct 6 that data binding is broken: PolymerElements/test-fixture#47 This is a huge problem, and I don't understand why it remains open after being opened in March. However, the functionality is important enough that, for now, I am going to begrudgingly allow it to break.
Messing around with this some more, I remain confused. There are a lot of things that confuse me writing Polymer apps, including 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 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 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:
Looking at |
@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
Then update the bound data using the
|
@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 <template is="dom-template"> doesn't work like before. The expected behavior of the new version should be that it works with a straight <template>, or some kind of <dom-template> implementation @cdata can you please provide an update on this? |
I can verify the
Then in my test I used:
I didn't end up using the |
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 Make sure you are clearing your browser cache in your unit testing. |
Hi, any working work around ? |
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.
|
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 ***@***.***> 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
<#47 (comment)>,
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 |
Legacy ?
Do you mean there's anything newer that replace this ?
…On Thu, Jan 10, 2019, 19:57 Kevin Schaaf ***@***.***> 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 <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.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#47 (comment)>,
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? |
Polymer 2 doesn't support binding in test-fixture (see PolymerElements/test-fixture#47). Another problem that pluginLayers can be set null - additional check was added. Change-Id: I48c3fbaab6763867bd872ba10507a6dbd7ddf732
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
The text was updated successfully, but these errors were encountered: