test(@astrojs/lit): adding tests

.changeset/red-bikes-happen.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/lit': patch
+---
+
+Added tests and fix a small edge case for when you call render with no props/attrs

packages/integrations/lit/package.json

@@ -28,14 +28,16 @@
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && tsc",
     "build:ci": "astro-scripts build \"src/**/*.ts\"",
-    "dev": "astro-scripts dev \"src/**/*.ts\""
+    "dev": "astro-scripts dev \"src/**/*.ts\"",
+    "test": "mocha"
   },
   "dependencies": {
     "@lit-labs/ssr": "^2.1.0"
   },
   "devDependencies": {
     "astro": "workspace:*",
-    "astro-scripts": "workspace:*"
+    "astro-scripts": "workspace:*",
+    "cheerio": "^1.0.0-rc.10"
   },
   "peerDependencies": {
     "@webcomponents/template-shadowroot": "^0.1.0",

packages/integrations/lit/server.js

@@ -29,12 +29,14 @@ function* render(tagName, attrs, children) {
 
 	// LitElementRenderer creates a new element instance, so copy over.
 	const Ctr = getCustomElementConstructor(tagName);
-	for (let [name, value] of Object.entries(attrs)) {
-		// check if this is a reactive property
-		if (name in Ctr.prototype) {
-			instance.setProperty(name, value);
-		} else {
-			instance.setAttribute(name, value);
+	if (attrs) {
+		for (let [name, value] of Object.entries(attrs)) {
+			// check if this is a reactive property
+			if (name in Ctr.prototype) {
+				instance.setProperty(name, value);
+			} else {
+				instance.setAttribute(name, value);
+			}
 		}
 	}
 

packages/integrations/lit/test/server.test.js

@@ -0,0 +1,80 @@
+import { expect } from 'chai';
+import server from '../server.js'
+import { LitElement, html } from 'lit'
+import * as cheerio from 'cheerio'
+
+const { check, renderToStaticMarkup } = server
+
+describe('check', () => {
+	it('should be false with no component', async () => {
+		expect(await check()).to.equal(false)
+	})
+
+	it('should be false with a registered non-lit component', async () => {
+		const tagName = 'non-lit-component'
+		customElements.define(tagName, class TestComponent extends HTMLElement {})
+		expect(await check(tagName)).to.equal(false)
+	})
+
+	it('should be true with a registered lit component', async () => {
+		const tagName = 'lit-component'
+		customElements.define(tagName, class extends LitElement {})
+		expect(await check(tagName)).to.equal(true)
+	})
+})
+
+describe('renderToStaticMarkup', () => {
+	it('should throw error if trying to render an unregistered component', async () => {
+		const tagName = 'non-registrered-component'
+		try {
+			await renderToStaticMarkup(tagName)
+		} catch (e) {
+			expect(e).to.be.an.instanceOf(TypeError)
+		}
+	})
+
+	it('should render emtpy component with default markup', async () => {
+		const tagName = 'nothing-component'
+		customElements.define(tagName, class extends LitElement {})
+		const render = await renderToStaticMarkup(tagName)
+		expect(render).to.deep.equal({
+			html: `<${tagName}><template shadowroot="open"><!--lit-part--><!--/lit-part--></template></${tagName}>`
+		})
+	})
+
+	it('should render component with default markup', async () => {
+		const tagName = 'simple-component'
+		customElements.define(tagName, class extends LitElement {
+			render() {
+				return html`<p>hola</p>`
+			}
+		})
+		const render = await renderToStaticMarkup(tagName)
+		const $ = cheerio.load(render.html)
+		expect($(`${tagName} template`).html()).to.contain('<p>hola</p>')
+	})
+
+	it('should render component with properties and attributes', async () => {
+		const tagName = 'props-and-attrs-component'
+		const attr1 = 'test'
+		const prop1 = 'Daniel'
+		customElements.define(tagName, class extends LitElement {
+			static properties = {
+				prop1: { type: String },
+			}
+
+			constructor() {
+				super();
+				this.prop1 = 'someone';
+			}
+
+			render() {
+				return html`<p>Hello ${this.prop1}</p>`
+			}
+		})
+		const render = await renderToStaticMarkup(tagName, { prop1, attr1 })
+		const $ = cheerio.load(render.html)
+		expect($(tagName).attr('attr1')).to.equal(attr1)
+		expect($(`${tagName} template`).text()).to.contain(`Hello ${prop1}`)
+	})
+})