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 :)