Add tests

[kenchris]

There are a few optimizations that can be done, like I believe there is an invalidate call too much and a call to typeFn too much. But tests would make sure that we don't break anything when making such changes.

• attr sets prop (if has attrName) - for all types
• prop sets attr (if has attrName)
• defined prop-change calls invalidate - otherwise not
• attr-change calls invalidate if defined in prop and has attrName defined - otherwise not (also if attrName !== propName)
• $() finds the correct element - also after invalidation where that element is changed, removed or added
• Multiple invalidate calls (scope + events handlers) in same execution of the event loop only calls 1x render.

Also use web components polyfill to test on Firefox

[filipbech]

My thoughts on what tests to start out with...

The different allowed property-types - should keep their types when changed from prop or via attr

• attr sets prop (if has attrName)
• prop sets attr (if has attrName)
• prop-change calls invalidate if defined - otherwise not
• attr-change calls invalidate if defined in prop and has attrName defined - otherwise not (also if attrName !== propName)
• $() finds the correct element - also after invalidation where that element is changed, removed or added
• 2x invalidate only calls 1x render

(note to self) webcomponents-tester guide here: https://www.polymer-project.org/1.0/docs/tools/tests

[emolr]

Hi, sorry if this is spammy, and feel welcome to delete my comment if it takes up too much space.
Working on a similar project i wrote these tests:

FrameElement Listeners
✔ Should run handle click on shadowRoot child element click
FrameElement no shadow
✔ Should render without shadow
✔ Should render template without shadow
FrameElement Observed Props
✔ Should update property from observer function
✔ Should update property from observer function via attribute set by user
FrameElement Renderer
✔ Should use custom renderer from renderer mixin
✔ Should re-renderer on prop change using mixin renderer
FrameElement
✔ should set properties from static props
✔ should set default props set by the user
✔ should invalidate on prop change
✔ Should update internal prop when prop changes
✔ Should set a default my-prop attribute
✔ should return prop of the right type from attribute
✔ Should get prop value updated from null later
✔ Should remove default my-prop attribute
✔ Should set a string attribute as my-other-prop
✔ Should render content from render function
✔ Should map attribute value to prop
✔ ComponentDidMount run after initial render
✔ ComponentDidUnmount run after dom removal
FrameElement decorators
✔ Should set prop from Property decorator
✔ Should re-render from Property decorator prop
✔ Should set property type from Reflect meta
✔ Should reflect as dom attribute if set with @Attribute
✔ Should should run @observe method on property change
✔ Should run event listener on element click
✔ Should run event listener on span in shadowRoot click
✔ Should emit event from @event
✔ Should run handle click on element click

Maybe they can serve as inspiration when you get around to it :)