Add lit slot tests

withastro · Jan 7, 2023 · 51e9761 · 51e9761
1 parent b8b14c7
commit 51e9761
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 11 deletions.
diff --git a/packages/astro/test/fixtures/lit-element/src/pages/slots.astro b/packages/astro/test/fixtures/lit-element/src/pages/slots.astro
@@ -7,9 +7,33 @@ import {MyElement} from '../components/my-element.js';
   <title>LitElement | Slot</title>
 </head>
 <body>
-  <MyElement>
-		<div>default</div>
-		<div slot="named">named</div>
+  <MyElement id="root">
+		<div class="default">my-element default 1</div>
+		<div class="default">my-element default 2</div>
+
+		<h1 slot="named">my-element named 1</h1>
+		<h2 slot="named">my-element named 2</h2>
+
+		<ul slot="named" id="list">
+			<li>Custom elements</li>
+			<li>Shadow DOM</li>
+			<li>HTML templates</li>
+		</ul>
+
+		<my-element id="slotted" slot="named">
+			<h3 class="default">slotted my-element default</h3>
+
+			<div slot="named">slotted my-element named 1</div>
+			<div slot="named">slotted my-element named 2</div>
+
+			<MyElement id="slotted-slotted" slot="named">
+				<h4 class="default">slotted slotted my-element default 1</h4>
+				<h5 class="default">slotted slotted my-element default 2</h5>
+
+				<div slot="named">slotted slotted my-element named 1</div>
+				<div slot="named">slotted slotted my-element named 2</div>
+			</MyElement>
+		</my-element>
 	</MyElement>
 </body>
 </html>
diff --git a/packages/astro/test/fixtures/lit-element/tsconfig.json b/packages/astro/test/fixtures/lit-element/tsconfig.json
@@ -1,3 +1,5 @@
 {
-  "experimentalDecorators": true
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
 }
diff --git a/packages/astro/test/lit-element.test.js b/packages/astro/test/lit-element.test.js
@@ -70,15 +70,35 @@ describe('LitElement test', function () {
 		const html = await fixture.readFile('/slots/index.html');
 		const $ = cheerio.load(html);
 
-		expect($('my-element').length).to.equal(1);
+		const $rootMyElement = $('#root');
+		const $slottedMyElement = $('#slotted');
+		const $slottedSlottedMyElement = $('#slotted-slotted');
 
-		const [defaultSlot, namedSlot] = $('template').siblings().toArray();
+		expect($('my-element').length).to.equal(3);
 
-		// has default slot content in lightdom
-		expect($(defaultSlot).text()).to.equal('default');
+		// Root my-element
+		expect($rootMyElement.children('.default').length).to.equal(2);
+		expect($rootMyElement.children('.default').eq(1).text()).to.equal('my-element default 2');
 
-		// has named slot content in lightdom
-		expect($(namedSlot).text()).to.equal('named');
+		expect($rootMyElement.children('[slot="named"]').length).to.equal(4);
+		expect($rootMyElement.children('[slot="named"]').eq(1).text()).to.equal('my-element named 2');
+		expect($rootMyElement.children('[slot="named"]').eq(2).attr('id')).to.equal('list');
+		expect($rootMyElement.children('[slot="named"]').eq(3).attr('id')).to.equal('slotted');
+
+		// Slotted my-element first level
+		expect($slottedMyElement.children('.default').length).to.equal(1);
+		expect($slottedMyElement.children('.default').eq(0).text()).to.equal('slotted my-element default');
+
+		expect($slottedMyElement.children('[slot="named"]').length).to.equal(3);
+		expect($slottedMyElement.children('[slot="named"]').eq(1).text()).to.equal('slotted my-element named 2');
+		expect($slottedMyElement.children('[slot="named"]').eq(2).attr('id')).to.equal('slotted-slotted');
+
+		// Slotted my-element second level
+		expect($slottedSlottedMyElement.children('.default').length).to.equal(2);
+		expect($slottedSlottedMyElement.children('.default').eq(1).text()).to.equal('slotted slotted my-element default 2');
+
+		expect($slottedSlottedMyElement.children('[slot="named"]').length).to.equal(2);
+		expect($slottedSlottedMyElement.children('[slot="named"]').eq(1).text()).to.equal('slotted slotted my-element named 2');
 	});
 
 	it('Is able to build when behind getStaticPaths', async () => {

diff --git a/packages/astro/test/ssr-lit.test.js b/packages/astro/test/ssr-lit.test.js
@@ -25,7 +25,7 @@ describe('Lit integration in SSR', () => {
 	}
 
 	it('Is able to load', async () => {
-		delete globalThis.window;
+		delete globalThis.window; // On Windows this results in `ReferenceError: window is not defined`
 		const html = await fetchHTML('/');
 		const $ = cheerioLoad(html);
 		expect($('#win').text()).to.equal('function');