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'}> - \ No newline at end of file + 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