fix(lit-renderer): certain reactive props not init correctly (#1874)

* fix(lit-renderer): reactive props not init correctly

* test(renderer-lit): implement testing suggestiosn

* chore(renderer-lit): upload changeset

* fix(renderer-lit): call connCallback on server

* fix(renderer-lit): do not set reserved JSX props

* fix(renderer-lit): do not check for reserved attributes

Co-authored-by: Nate Moore <nate@skypack.dev>

1 files changed, 19 insertions, 1 deletions

diff --git a/packages/astro/test/lit-element.test.js b/packages/astro/test/lit-element.test.js
index dd44ae3da..eed211d91 100644
--- a/packages/astro/test/lit-element.test.js
+++ b/packages/astro/test/lit-element.test.js
@@ -5,6 +5,7 @@ import { loadFixture } from './test-utils.js';
 let fixture;
 
 const NODE_VERSION = parseFloat(process.versions.node);
+const stripExpressionMarkers = (html) => html.replace(/<!--\/?lit-part-->/g, '')
 
 before(async () => {
   // @lit-labs/ssr/ requires Node 13.9 or higher
@@ -27,11 +28,28 @@ describe('LitElement test', () => {
     const html = await fixture.readFile('/index.html');
     const $ = cheerio.load(html);
 
-    // test 1: attributes rendered
+    // test 1: attributes rendered – non reactive properties
     expect($('my-element').attr('foo')).to.equal('bar');
 
     // test 2: shadow rendered
     expect($('my-element').html()).to.include(`<div>Testing...</div>`);
+
+    // test 3: string reactive property set
+    expect(stripExpressionMarkers($('my-element').html())).to.include(`<div id="str">initialized</div>`);
+
+    // test 4: boolean reactive property correctly set
+    // <my-element bool="false"> Lit will equate to true because it uses
+    // this.hasAttribute to determine its value
+    expect(stripExpressionMarkers($('my-element').html())).to.include(`<div id="bool">B</div>`);
+
+    // test 5: object reactive property set
+    // by default objects will be stringifed to [object Object]
+    expect(stripExpressionMarkers($('my-element').html())).to.include(`<div id="data">data: 1</div>`);
+
+    // test 6: reactive properties are not rendered as attributes
+    expect($('my-element').attr('obj')).to.equal(undefined);
+    expect($('my-element').attr('bool')).to.equal(undefined);
+    expect($('my-element').attr('str')).to.equal(undefined);
   });
 
   // Skipped because not supported by Lit