test: add named slot test for frameworks

withastro · Jun 20, 2022 · f850053 · f850053
1 parent 20ecb83
commit f850053
Show file tree

Hide file tree

Showing 16 changed files with 48 additions and 13 deletions.
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -213,9 +213,7 @@ Did you mean to add ${formatList(probableRendererNames.map((r) => '`' + r + '`')
 		const promises: Promise<void>[] = []
 		for (const [key, value] of Object.entries(slots)) {
 			promises.push(renderSlot(result, value as string).then((output) => {
-				if (output?.trim() !== '') {
-					children[key] = output;
-				}
+				children[key] = output;
 			}))
 		}
 		await Promise.all(promises);

diff --git a/packages/astro/test/fixtures/slots-preact/src/components/Counter.jsx b/packages/astro/test/fixtures/slots-preact/src/components/Counter.jsx
@@ -1,7 +1,7 @@
 import { h, Fragment } from 'preact';
 import { useState } from 'preact/hooks'
 
-export default function Counter({ children, count: initialCount, case: id }) {
+export default function Counter({ named, children, count: initialCount, case: id }) {
   const [count, setCount] = useState(initialCount);
   const add = () => setCount((i) => i + 1);
   const subtract = () => setCount((i) => i - 1);
@@ -15,6 +15,7 @@ export default function Counter({ children, count: initialCount, case: id }) {
       </div>
       <div id={id} className="counter-message">
         {children || <h1>Fallback</h1>}
+				{named}
       </div>
     </>
   );

diff --git a/packages/astro/test/fixtures/slots-preact/src/pages/index.astro b/packages/astro/test/fixtures/slots-preact/src/pages/index.astro
@@ -8,4 +8,5 @@ import Counter from '../components/Counter.jsx'
   <Counter case="false" client:visible>{false}</Counter>
   <Counter case="string" client:visible>{''}</Counter>
   <Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter>
+	<Counter case="named" client:visible><h1 slot="named"> / Named</h1></Counter>
 </main>
diff --git a/packages/astro/test/fixtures/slots-react/src/components/Counter.jsx b/packages/astro/test/fixtures/slots-react/src/components/Counter.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-export default function Counter({ children, count: initialCount, case: id }) {
+export default function Counter({ named, children, count: initialCount, case: id }) {
   const [count, setCount] = useState(initialCount);
   const add = () => setCount((i) => i + 1);
   const subtract = () => setCount((i) => i - 1);
@@ -14,6 +14,7 @@ export default function Counter({ children, count: initialCount, case: id }) {
       </div>
       <div id={id} className="counter-message">
         {children || <h1>Fallback</h1>}
+				{named}
       </div>
     </>
   );

diff --git a/packages/astro/test/fixtures/slots-react/src/pages/index.astro b/packages/astro/test/fixtures/slots-react/src/pages/index.astro
@@ -8,4 +8,5 @@ import Counter from '../components/Counter.jsx'
   <Counter case="false" client:visible>{false}</Counter>
   <Counter case="string" client:visible>{''}</Counter>
   <Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter>
+	<Counter case="named" client:visible><h1 slot="named"> / Named</h1></Counter>
 </main>
diff --git a/packages/astro/test/fixtures/slots-solid/src/components/Counter.jsx b/packages/astro/test/fixtures/slots-solid/src/components/Counter.jsx
@@ -1,6 +1,6 @@
 import { createSignal } from 'solid-js';
 
-export default function Counter({ children, count: initialCount, case: id }) {
+export default function Counter({ named, children, count: initialCount, case: id }) {
 	const [count] = createSignal(0);
   return (
     <>
@@ -9,6 +9,7 @@ export default function Counter({ children, count: initialCount, case: id }) {
       </div>
       <div id={id} className="counter-message">
         {children || <h1>Fallback</h1>}
+				{named}
       </div>
     </>
   );

diff --git a/packages/astro/test/fixtures/slots-solid/src/pages/index.astro b/packages/astro/test/fixtures/slots-solid/src/pages/index.astro
@@ -8,4 +8,5 @@ import Counter from '../components/Counter.jsx'
   <Counter case="false" client:visible>{false}</Counter>
   <Counter case="string" client:visible>{''}</Counter>
   <Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter>
+	<Counter case="named" client:visible><h1 slot="named"> / Named</h1></Counter>
 </main>
diff --git a/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte b/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte
@@ -17,9 +17,7 @@
   <button on:click={add}>+</button>
 </div>
 <div id={id}>
-  <slot>
-    <h1 id="fallback">Fallback</h1>
-  </slot>
+  <slot><h1 id="fallback">Fallback</h1></slot><slot name="named"></slot>
 </div>
 
 <style>

diff --git a/packages/astro/test/fixtures/slots-svelte/src/pages/index.astro b/packages/astro/test/fixtures/slots-svelte/src/pages/index.astro
@@ -4,8 +4,9 @@ import Counter from '../components/Counter.svelte'
 <main>
   <Counter id="default-self-closing" client:visible/>
   <Counter id="default-empty" client:visible></Counter>
-  <Counter case="zero" client:visible>{0}</Counter>
-  <Counter case="false" client:visible>{false}</Counter>
-  <Counter case="string" client:visible>{''}</Counter>
+  <Counter id="zero" client:visible>{0}</Counter>
+  <Counter id="false" client:visible>{false}</Counter>
+  <Counter id="string" client:visible>{''}</Counter>
   <Counter id="content" client:visible><h1 id="slotted">Hello world!</h1></Counter>
+	<Counter id="named" client:visible><h1 slot="named"> / Named</h1></Counter>
 </main>
diff --git a/packages/astro/test/fixtures/slots-vue/src/components/Counter.vue b/packages/astro/test/fixtures/slots-vue/src/components/Counter.vue
@@ -8,6 +8,7 @@
     <slot>
       <h1>Fallback</h1>
     </slot>
+		<slot name="named" />
   </div>
 </template>
 

diff --git a/packages/astro/test/fixtures/slots-vue/src/pages/index.astro b/packages/astro/test/fixtures/slots-vue/src/pages/index.astro
@@ -8,4 +8,5 @@ import Counter from '../components/Counter.vue'
   <Counter case="false" client:visible>{false}</Counter>
   <Counter case="string" client:visible>{''}</Counter>
   <Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter>
+	<Counter case="named" client:visible><h1 slot="named"> / Named</h1></Counter>
 </main>
diff --git a/packages/astro/test/slots-preact.test.js b/packages/astro/test/slots-preact.test.js
@@ -21,4 +21,10 @@ describe('Slots: Preact', () => {
 		expect($('#string').text().trim()).to.equal('');
 		expect($('#content').text().trim()).to.equal('Hello world!');
 	});
+
+	it('Renders named slot', async () => {
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+		expect($('#named').text().trim()).to.equal('Fallback / Named');
+	})
 });
diff --git a/packages/astro/test/slots-react.test.js b/packages/astro/test/slots-react.test.js
@@ -21,4 +21,10 @@ describe('Slots: React', () => {
 		expect($('#string').text().trim()).to.equal('');
 		expect($('#content').text().trim()).to.equal('Hello world!');
 	});
+
+	it('Renders named slot', async () => {
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+		expect($('#named').text().trim()).to.equal('Fallback / Named');
+	})
 });
diff --git a/packages/astro/test/slots-solid.test.js b/packages/astro/test/slots-solid.test.js
@@ -21,4 +21,10 @@ describe('Slots: Solid', () => {
 		expect($('#string').text().trim()).to.equal('');
 		expect($('#content').text().trim()).to.equal('Hello world!');
 	});
+
+	it('Renders named slot', async () => {
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+		expect($('#named').text().trim()).to.equal('Fallback / Named');
+	})
 });
diff --git a/packages/astro/test/slots-svelte.test.js b/packages/astro/test/slots-svelte.test.js
@@ -16,9 +16,15 @@ describe('Slots: Svelte', () => {
 
 		expect($('#default-self-closing').text().trim()).to.equal('Fallback');
 		expect($('#default-empty').text().trim()).to.equal('Fallback');
-		expect($('#zero').text().trim()).to.equal('');
+		expect($('#zero').text().trim()).to.equal('0');
 		expect($('#false').text().trim()).to.equal('');
 		expect($('#string').text().trim()).to.equal('');
 		expect($('#content').text().trim()).to.equal('Hello world!');
 	});
+
+	it('Renders named slot', async () => {
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+		expect($('#named').text().trim()).to.equal('Fallback / Named');
+	})
 });
diff --git a/packages/astro/test/slots-vue.test.js b/packages/astro/test/slots-vue.test.js
@@ -21,4 +21,10 @@ describe('Slots: Vue', () => {
 		expect($('#string').text().trim()).to.equal('');
 		expect($('#content').text().trim()).to.equal('Hello world!');
 	});
+
+	it('Renders named slot', async () => {
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+		expect($('#named').text().trim()).to.equal('Fallback / Named');
+	})
 });