Polymer - gpawade/gpawade.github.io GitHub Wiki
properties : {
//Property inline declaration
name : String,
// Property declaration
propName:{
// Type - String, Number, Boolean
type: String,
// Set Default value
value : "some text",
// Reflect property to host attribute when changed
reflectToAttribute : true,
// Property set readonly, if true, can't assigne or bind
readOnly : true,
//if true, property is available for two-way data binding. Event, 'property-name-changed' is fire whenever property changed
notify: true,
observer: "method_name"
}
}
Extending custom element prototypes
// Declaration in Polymer
behaviors: [SuperBehavior]
Behaviour Declaration
<script>
SuperBehavior = {
properties:{
},
methodName(){
}
}
</script>
listeners:{
// Host Event
"tap" : "_onHostClick",
// Control Event
"btnSave.tap": "_onButtonClick",
// Event fired
"event-fired": "_onEventFire"
}
// Fire event
this.fire("event-fired", arg);
Observers are methods invoked when observers changes occured.
properties :{
disabled : {
type : Boolean,
observe : '_disabledChanged'
}
},
_disabledChanged : function(newValue, oldValue){
// do work when disabled property change
}
Complex observers are declared in the observers array, and can monitor one or more paths.
observers:[
'_userListChanged(user.*, filter)'
]
Note - The initial call to a complex observer is deferred until all of the dependencies are defined (that is, they don't have the value undefined).
//property
item = [{name : "jon"}, { name : 'doe'}]
// Get Item from Array
this.get("item.0")
//set array item
this.set("item.0.", 'some text');
this.customStyle['--my-elem-visibility'] = 'visible';
this.updateStyles()
Polymer use web-component-tester for testing.
web-component-tester included below library out of box -
-
Mochaas a test framework. -
Chaiassertions. -
Asyncto keep your sanity. -
Lodash(3.0) to repeat fewer things. -
Sinonandsinon-chaito test just your things. -
test-fixturefor easy fixture testing with -
accessibility-developer-toolsthrough a11ySuite for simple, automated Accessibility testing.
$ polymer test
OR
$ wct
$ wct -p // keep open the browser after test run
https://medium.com/google-developer-experts/polymer-testing-tips-f217ba94a64