Enables most slot tests (#1494)

* Enables most slot tests

* Use spreadAttributes

packages/astro/package.json

@@ -40,7 +40,7 @@
     "test": "mocha --parallel --timeout 15000"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.1.0-canary.46",
+    "@astrojs/compiler": "^0.1.0-canary.47",
     "@astrojs/markdown-remark": "^0.3.1",
     "@astrojs/renderer-preact": "^0.2.2",
     "@astrojs/renderer-react": "^0.2.1",

packages/astro/src/internal/index.ts

@@ -141,7 +141,7 @@ export async function renderSlot(result: any, slotted: string, fallback?: any) {
   return fallback;
 }
 
-export async function renderComponent(result: any, displayName: string, Component: unknown, _props: Record<string | number, any>, slots?: any) {
+export async function renderComponent(result: any, displayName: string, Component: unknown, _props: Record<string | number, any>, slots: any = {}) {
   Component = await Component;
   const children = await renderSlot(result, slots?.default);
   const { renderers } = result._metadata;
@@ -184,7 +184,15 @@ export async function renderComponent(result: any, displayName: string, Componen
     }
   }
 
-  ({ html } = await renderer.ssr.renderToStaticMarkup(Component, props, children));
+  if(renderer === null) {
+    if(typeof Component === 'string') {
+      html = await renderAstroComponent(await render`<${Component}${spreadAttributes(props)}>${children}</${Component}>`);
+    } else {
+      throw new Error(`Astro is unable to render ${metadata.displayName}!\nIs there a renderer to handle this type of component defined in your Astro config?`);
+    }
+  } else {
+    ({ html } = await renderer.ssr.renderToStaticMarkup(Component, props, children));
+  }
 
   if (!hydrationDirective) {
     return html.replace(/\<\/?astro-fragment\>/g, '');

packages/astro/test/astro-slots.test.js

@@ -1,5 +1,3 @@
-/**
- * UNCOMMENT: add Astro slot support
 import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
@@ -16,24 +14,24 @@ describe('Slots', () => {
     const html = await fixture.readFile('/index.html');
     const $ = cheerio.load(html);
 
-    expect($('#a').text()).to.equal('A');
-    expect($('#b').text()).to.equal('B');
-    expect($('#c').text()).to.equal('C');
-    expect($('#default').text()).to.equal('Default');
+    expect($('#a').text().trim()).to.equal('A');
+    expect($('#b').text().trim()).to.equal('B');
+    expect($('#c').text().trim()).to.equal('C');
+    expect($('#default').text().trim()).to.equal('Default');
   });
 
   it('Dynamic named slots work', async () => {
     const html = await fixture.readFile('/dynamic/index.html');
     const $ = cheerio.load(html);
 
-    expect($('#a').text()).to.equal('A');
-    expect($('#b').text()).to.equal('B');
-    expect($('#c').text()).to.equal('C');
-    expect($('#default').text()).to.equal('Default');
+    expect($('#a').text().trim()).to.equal('A');
+    expect($('#b').text().trim()).to.equal('B');
+    expect($('#c').text().trim()).to.equal('C');
+    expect($('#default').text().trim()).to.equal('Default');
   });
 
   it('Slots render fallback content by default', async () => {
-    const html = await fixture.fetch('/fallback/index.html');
+    const html = await fixture.readFile('/fallback/index.html');
     const $ = cheerio.load(html);
 
     expect($('#default')).to.have.lengthOf(1);
@@ -50,7 +48,7 @@ describe('Slots', () => {
     const html = await fixture.readFile('/multiple/index.html');
     const $ = cheerio.load(html);
 
-    expect($('#a').text()).to.equal('ABC');
+    expect($('#a').text().trim()).to.equal('ABC');
   });
 
   it('Slots work on Components', async () => {
@@ -67,7 +65,7 @@ describe('Slots', () => {
     expect($('#default').children('astro-component')).to.have.lengthOf(1);
   });
 
-  it('Slots API work on Components', async () => {
+  it.skip('Slots API work on Components', async () => {
     // IDs will exist whether the slots are filled or not
     {
       const html = await fixture.readFile('/slottedapi-default/index.html');
@@ -114,7 +112,4 @@ describe('Slots', () => {
       expect($('#default')).to.have.lengthOf(1); // the default slot is filled
     }
   });
-});
-*/
-
-it.skip('is skipped', () => {});
+});

yarn.lock

@@ -106,10 +106,10 @@
     "@algolia/logger-common" "4.10.5"
     "@algolia/requester-common" "4.10.5"
 
-"@astrojs/compiler@^0.1.0-canary.46":
-  version "0.1.0-canary.46"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.1.0-canary.46.tgz#99d12c9148c9233df81929204b823112ea26cb69"
-  integrity sha512-JwcPl90H59wjxP/Jx2Ub+OHGqgzkU+QFoZxur2CU028/2rwjkp2N1B5biAakS6g/8trIPwnZK/7iETKWOCGc+Q==
+"@astrojs/compiler@^0.1.0-canary.47":
+  version "0.1.0-canary.47"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.1.0-canary.47.tgz#377c95d49b2a3791c78077796de0f2ea342177d0"
+  integrity sha512-Tr2oFNyIMuVpiQnDPAKbeAjKCbFRlpugqFjz8zdkjxazfM+ZxbRUji5NJ8jPJwEGcL2Td3zUBFzA2H+WBiNnhA==
   dependencies:
     typescript "^4.3.5"