mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
298 lines
10 KiB
HTML
298 lines
10 KiB
HTML
<!doctype html>
|
|
<!--
|
|
@license
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
<script src="../../../web-component-tester/browser.js"></script>
|
|
<link rel="import" href="../../polymer.html">
|
|
<link rel="import" href="attributes-elements.html">
|
|
<body>
|
|
|
|
|
|
<x-basic id="basicDefault" attr3="instance"></x-basic>
|
|
|
|
<x-compose id="compose"></x-compose>
|
|
|
|
<x-basic id="basicConfigured"
|
|
object='{"foo": "bar", "nested": {"meaning": 42}, "arr": [0, "foo", true]}'
|
|
array='[0, "foo", true, {"foo": "bar"}]'
|
|
number="42"
|
|
string="The quick brown fox"
|
|
bool
|
|
date="Wed Mar 04 2015 10:46:05 GMT-0800 (PST)"
|
|
dash-case="The quick brown fox"
|
|
no-type="Should be String"
|
|
read-only="Should not change"
|
|
class="Should not deserialize"
|
|
nard="Should not deserialize"
|
|
>
|
|
</x-basic>
|
|
|
|
<x-reflect id="reflectDefault"></x-reflect>
|
|
|
|
<x-reflect id="reflectConfigured"
|
|
object='{"foo": "bar", "nested": {"meaning": 42}, "arr": [0, "foo", true]}'
|
|
array='[0, "foo", true, {"foo": "bar"}]'
|
|
number="42"
|
|
string="The quick brown fox"
|
|
bool
|
|
date="Wed Mar 04 2015 10:46:05 GMT-0800 (PST)"
|
|
dash-case="The quick brown fox"
|
|
no-type="Should be String"
|
|
read-only="Should not change"
|
|
class="Should not deserialize"
|
|
nard="Should not deserialize"
|
|
>
|
|
</x-reflect>
|
|
|
|
<script>
|
|
|
|
var configuredObject = {foo: 'bar', nested: {'meaning': 42}, arr: [0, 'foo', true]};
|
|
var configuredArray = [0, 'foo', true, {foo: 'bar'}];
|
|
var configuredNumber = 42;
|
|
var configuredString = "The quick brown fox";
|
|
var configuredNoType = "Should be String";
|
|
var configuredTime = 1425494765000;
|
|
|
|
suite('create-time deserialization', function() {
|
|
|
|
test('basic default values', function() {
|
|
assert.deepEqual(basicDefault.object, {});
|
|
assert.deepEqual(basicDefault.array, []);
|
|
assert.strictEqual(basicDefault.number, 0);
|
|
assert.strictEqual(basicDefault.string, 'none');
|
|
assert.strictEqual(basicDefault.bool, true);
|
|
assert.strictEqual(basicDefault.negBool, false);
|
|
assert.strictEqual(basicDefault.date.getTime(), 0);
|
|
assert.strictEqual(basicDefault.dashCase, 'none');
|
|
assert.strictEqual(basicDefault.noType, 'none');
|
|
assert.strictEqual(basicDefault.readOnly, 'default');
|
|
});
|
|
|
|
test('basic deserialize attributes', function() {
|
|
assert.deepEqual(basicConfigured.object, configuredObject);
|
|
assert.deepEqual(basicConfigured.array, configuredArray);
|
|
assert.strictEqual(basicConfigured.number, configuredNumber);
|
|
assert.strictEqual(basicConfigured.string, configuredString);
|
|
assert.strictEqual(basicConfigured.bool, true);
|
|
assert.strictEqual(basicConfigured.negBool, false);
|
|
assert.strictEqual(basicConfigured.date.getTime(), configuredTime);
|
|
assert.strictEqual(basicConfigured.dashCase, configuredString);
|
|
assert.strictEqual(basicConfigured.noType, configuredNoType);
|
|
assert.strictEqual(basicConfigured.readOnly, 'default');
|
|
assert.strictEqual(basicConfigured.class, undefined);
|
|
assert.strictEqual(basicConfigured.nard, undefined);
|
|
});
|
|
|
|
test('reflected default values', function() {
|
|
assert.deepEqual(reflectDefault.object, {});
|
|
assert.deepEqual(reflectDefault.array, []);
|
|
assert.strictEqual(reflectDefault.number, 0);
|
|
assert.strictEqual(reflectDefault.string, 'none');
|
|
assert.strictEqual(reflectDefault.bool, true);
|
|
assert.strictEqual(reflectDefault.negBool, false);
|
|
assert.strictEqual(reflectDefault.date.getTime(), 0);
|
|
assert.strictEqual(reflectDefault.dashCase, 'none');
|
|
assert.strictEqual(reflectDefault.noType, 'none');
|
|
assert.strictEqual(reflectDefault.readOnly, 'default');
|
|
});
|
|
|
|
test('reflected deserialize attributes', function() {
|
|
assert.deepEqual(reflectConfigured.object, configuredObject);
|
|
assert.deepEqual(reflectConfigured.array, configuredArray);
|
|
assert.strictEqual(reflectConfigured.number, configuredNumber);
|
|
assert.strictEqual(reflectConfigured.string, configuredString);
|
|
assert.strictEqual(reflectConfigured.bool, true);
|
|
assert.strictEqual(reflectConfigured.negBool, false);
|
|
assert.strictEqual(reflectConfigured.date.getTime(), configuredTime);
|
|
assert.strictEqual(reflectConfigured.dashCase, configuredString);
|
|
assert.strictEqual(reflectConfigured.noType, configuredNoType);
|
|
assert.strictEqual(reflectConfigured.readOnly, 'default');
|
|
assert.strictEqual(reflectConfigured.class, undefined);
|
|
assert.strictEqual(reflectConfigured.nard, undefined);
|
|
});
|
|
|
|
});
|
|
|
|
suite('imperative attribute change (no-reflect)', function() {
|
|
|
|
var el;
|
|
|
|
setup(function() {
|
|
el = document.createElement('x-basic');
|
|
document.body.appendChild(el);
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('basic change object attribute', function() {
|
|
el.setAttribute('object', '{"foo": "bar", "nested": {"meaning": 42}, "arr": [0, "foo", true]}');
|
|
assert.deepEqual(el.object, configuredObject);
|
|
});
|
|
|
|
test('basic change array attribute', function() {
|
|
el.setAttribute('array', '[0, "foo", true, {"foo": "bar"}]');
|
|
assert.deepEqual(el.array, configuredArray);
|
|
});
|
|
|
|
test('basic change number attribute', function() {
|
|
el.setAttribute('number', 42);
|
|
assert.strictEqual(el.number, 42);
|
|
});
|
|
|
|
test('basic change string attribute', function() {
|
|
el.setAttribute('string', 'howdy');
|
|
assert.strictEqual(el.string, 'howdy');
|
|
});
|
|
|
|
test('basic change boolean attribute true', function() {
|
|
el.setAttribute('bool', '');
|
|
assert.strictEqual(el.bool, true);
|
|
});
|
|
|
|
test('basic change boolean attribute truthy', function() {
|
|
el.setAttribute('bool', 'sure!');
|
|
assert.strictEqual(el.bool, true);
|
|
});
|
|
|
|
test('basic change boolean attribute false', function() {
|
|
el.setAttribute('bool', '');
|
|
assert.strictEqual(el.bool, true);
|
|
el.removeAttribute('bool');
|
|
assert.strictEqual(el.bool, false);
|
|
});
|
|
|
|
test('basic change dashCase attribute', function() {
|
|
el.setAttribute('dash-case', 'Changed');
|
|
assert.strictEqual(el.dashCase, 'Changed');
|
|
});
|
|
|
|
});
|
|
|
|
suite('imperative attribute change (reflect)', function() {
|
|
|
|
var el;
|
|
|
|
setup(function() {
|
|
el = document.createElement('x-reflect');
|
|
document.body.appendChild(el);
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('basic change object attribute', function() {
|
|
el.setAttribute('object', '{"foo": "bar", "nested": {"meaning": 42}, "arr": [0, "foo", true]}');
|
|
assert.deepEqual(el.object, configuredObject);
|
|
});
|
|
|
|
test('basic change array attribute', function() {
|
|
el.setAttribute('array', '[0, "foo", true, {"foo": "bar"}]');
|
|
assert.deepEqual(el.array, configuredArray);
|
|
});
|
|
|
|
test('basic change number attribute', function() {
|
|
el.setAttribute('number', 42);
|
|
assert.strictEqual(el.number, 42);
|
|
});
|
|
|
|
test('basic change string attribute', function() {
|
|
el.setAttribute('string', 'howdy');
|
|
assert.strictEqual(el.string, 'howdy');
|
|
});
|
|
|
|
test('basic change boolean attribute true', function() {
|
|
el.setAttribute('bool', '');
|
|
assert.strictEqual(el.bool, true);
|
|
});
|
|
|
|
test('basic change boolean attribute truthy', function() {
|
|
el.setAttribute('bool', 'sure!');
|
|
assert.strictEqual(el.bool, true);
|
|
});
|
|
|
|
test('basic change boolean attribute false', function() {
|
|
el.setAttribute('bool', '');
|
|
assert.strictEqual(el.bool, true);
|
|
el.removeAttribute('bool');
|
|
assert.strictEqual(el.bool, false);
|
|
});
|
|
|
|
test('basic change dashCase attribute', function() {
|
|
el.setAttribute('dash-case', 'Changed');
|
|
assert.strictEqual(el.dashCase, 'Changed');
|
|
});
|
|
|
|
test('change non-`properties` property that natively reflects', function() {
|
|
el.title = 'awesome';
|
|
assert.strictEqual(el.title, 'awesome');
|
|
el.title = '';
|
|
assert.strictEqual(el.title, '');
|
|
el.setAttribute('title', 'super');
|
|
assert.strictEqual(el.title, 'super');
|
|
el.removeAttribute('title');
|
|
assert.strictEqual(el.title, '');
|
|
});
|
|
|
|
});
|
|
|
|
suite('hostAttributes', function() {
|
|
|
|
test('hostAttributes set correctly', function() {
|
|
assert.strictEqual(basicDefault.getAttribute('attr1'), 'this is attr 1');
|
|
assert.strictEqual(basicDefault.getAttribute('attr2'), '42');
|
|
assert.strictEqual(basicDefault.getAttribute('attr3'), 'instance', 'host attribute overrode instance attribute and should not');
|
|
assert.strictEqual(basicDefault.getAttribute('aria-role'), 'button');
|
|
assert.strictEqual(basicDefault.getAttribute('title'), 'awesome');
|
|
assert.strictEqual(basicDefault.title, 'awesome');
|
|
assert.equal(basicDefault.getAttribute('attr-object'),
|
|
JSON.stringify(configuredObject));
|
|
assert.equal(basicDefault.hasAttribute('attr-stupid'), false);
|
|
// class not is not serialized
|
|
assert.notOk(basicDefault.classList.contains('foo'));
|
|
assert.notOk(basicDefault.classList.contains('bar'));
|
|
assert.notOk(basicDefault.classList.contains('baz'));
|
|
});
|
|
|
|
test('hostAttributes set correctly in composed element', function() {
|
|
assert.strictEqual(compose.$.basic.getAttribute('attr1'), 'compose');
|
|
assert.strictEqual(compose.$.basic.getAttribute('attr2'), '42');
|
|
assert.strictEqual(compose.$.basic.getAttribute('aria-role'), 'button');
|
|
assert.strictEqual(compose.$.basic.getAttribute('title'), 'awesome');
|
|
assert.strictEqual(compose.$.basic.title, 'awesome');
|
|
assert.equal(compose.$.basic.getAttribute('attr-object'),
|
|
JSON.stringify(configuredObject));
|
|
assert.equal(compose.$.basic.hasAttribute('attr-stupid'), false);
|
|
// class not is not serialized
|
|
assert.notOk(compose.$.basic.classList.contains('foo'));
|
|
assert.notOk(compose.$.basic.classList.contains('bar'));
|
|
assert.notOk(compose.$.basic.classList.contains('baz'));
|
|
assert(compose.$.basic.classList.contains('should-not-override'));
|
|
// applied to property with effect
|
|
assert.strictEqual(compose.$.basic.prop, 'compose');
|
|
assert.equal(compose.$.basic.propChangedCount, 1);
|
|
assert.equal(compose.$.basic.attr1ChangedCount, 1);
|
|
assert.equal(compose.prop2, 'hi');
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|