test(lit): add reflected property tests (#2116)

.changeset/weak-planets-think.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+add lit renderer reflection tests

packages/astro/test/fixtures/lit-element/src/components/my-element.js

@@ -7,6 +7,9 @@ export class MyElement extends LitElement {
     bool: {type: Boolean},
     str: {type: String, attribute: 'str-attr'},
     obj: {type: Object},
+    reflectedBool: {type: Boolean, reflect: true},
+    reflectedStr: {type: String, reflect: true, attribute: 'reflected-str'},
+    reflectedStrProp: {type: String, reflect: true, attribute: 'reflected-str-prop'},
   }
 
   constructor() {
@@ -16,6 +19,9 @@ export class MyElement extends LitElement {
     this.obj = {data: null};
     // not a reactive property
     this.foo = 'not initialized';
+    // reflected props
+    this.reflectedBool = true;
+    this.reflectedStr = 'default reflected string';
   }
   render() {
     return html`

packages/astro/test/fixtures/lit-element/src/pages/index.astro

@@ -11,7 +11,8 @@ import '../components/my-element.js';
       foo="bar"
       str-attr={'initialized'}
       bool={false}
-      obj={{data: 1}}>
+      obj={{data: 1}}
+      reflectedStrProp={'initialized reflected'}>
   </my-element>
 </body>
-</html>
+</html>

packages/astro/test/lit-element.test.js

@@ -50,6 +50,12 @@ describe('LitElement test', () => {
     expect($('my-element').attr('obj')).to.equal(undefined);
     expect($('my-element').attr('bool')).to.equal(undefined);
     expect($('my-element').attr('str')).to.equal(undefined);
+
+    // test 7: reflected reactive props are rendered as attributes
+    expect($('my-element').attr('reflectedbool')).to.equal('');
+    expect($('my-element').attr('reflected-str')).to.equal('default reflected string');
+    expect($('my-element').attr('reflected-str-prop')).to.equal('initialized reflected');
+
   });
 
   // Skipped because not supported by Lit