From d9d3906a3c215436a1e3d2ab64e63d23a772e059 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <5981958+e111077@users.noreply.github.com>
Date: Mon, 6 Dec 2021 11:23:09 -0800
Subject: [PATCH] test(lit): add reflected property tests (#2116)

---
 .changeset/weak-planets-think.md                            | 5 +++++
 .../test/fixtures/lit-element/src/components/my-element.js  | 6 ++++++
 .../astro/test/fixtures/lit-element/src/pages/index.astro   | 5 +++--
 packages/astro/test/lit-element.test.js                     | 6 ++++++
 4 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/weak-planets-think.md

diff --git a/.changeset/weak-planets-think.md b/.changeset/weak-planets-think.md
new file mode 100644
index 000000000..ea776b2bd
--- /dev/null
+++ b/.changeset/weak-planets-think.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+add lit renderer reflection tests
diff --git a/packages/astro/test/fixtures/lit-element/src/components/my-element.js b/packages/astro/test/fixtures/lit-element/src/components/my-element.js
index 6466bca02..b4a780377 100644
--- a/packages/astro/test/fixtures/lit-element/src/components/my-element.js
+++ b/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`
diff --git a/packages/astro/test/fixtures/lit-element/src/pages/index.astro b/packages/astro/test/fixtures/lit-element/src/pages/index.astro
index de1140656..10b6624e4 100644
--- a/packages/astro/test/fixtures/lit-element/src/pages/index.astro
+++ b/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>
\ No newline at end of file
+</html>
diff --git a/packages/astro/test/lit-element.test.js b/packages/astro/test/lit-element.test.js
index dd3dda5d6..bbd0c78ac 100644
--- a/packages/astro/test/lit-element.test.js
+++ b/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