Skip to content

Commit

Permalink
test(@astrojs/lit): adding tests (#3375)
Browse files Browse the repository at this point in the history
* test(@astrojs/lit): adding tests

* changeset
  • Loading branch information
jdvivar authored May 16, 2022
1 parent b6f7a4f commit fe61e46
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 9 deletions.
5 changes: 5 additions & 0 deletions .changeset/red-bikes-happen.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/lit': patch
---

Added tests and fix a small edge case for when you call render with no props/attrs
6 changes: 4 additions & 2 deletions packages/integrations/lit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 8 additions & 6 deletions packages/integrations/lit/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}

Expand Down
80 changes: 80 additions & 0 deletions packages/integrations/lit/test/server.test.js
Original file line number Diff line number Diff line change
@@ -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}`)
})
})
4 changes: 3 additions & 1 deletion pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit fe61e46

Please sign in to comment.