98d785af1d
* Expose slots to components via Astro.slots * test: Add Astro.slots API tests * docs: Document Astro.slots API * docs: Duplicate Astro.slots documentation to other api-reference markdown * Update proposal to use booleans, based upon RFC feedback * update implementation & tests based on request * changeset
133 lines
3.9 KiB
JavaScript
133 lines
3.9 KiB
JavaScript
import { suite } from 'uvu';
|
|
import * as assert from 'uvu/assert';
|
|
import { doc } from './test-utils.js';
|
|
import { setup, setupBuild } from './helpers.js';
|
|
|
|
const Slots = suite('Slot test');
|
|
|
|
setup(Slots, './fixtures/astro-slots', {
|
|
runtimeOptions: {
|
|
mode: 'development',
|
|
},
|
|
});
|
|
setupBuild(Slots, './fixtures/astro-slots');
|
|
|
|
Slots('Basic named slots work', async ({ runtime }) => {
|
|
const result = await runtime.load('/');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#a').text(), 'A');
|
|
assert.equal($('#b').text(), 'B');
|
|
assert.equal($('#c').text(), 'C');
|
|
assert.equal($('#default').text(), 'Default');
|
|
});
|
|
|
|
Slots('Dynamic named slots work', async ({ runtime }) => {
|
|
const result = await runtime.load('/dynamic');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#a').text(), 'A');
|
|
assert.equal($('#b').text(), 'B');
|
|
assert.equal($('#c').text(), 'C');
|
|
assert.equal($('#default').text(), 'Default');
|
|
});
|
|
|
|
Slots('Slots render fallback content by default', async ({ runtime }) => {
|
|
const result = await runtime.load('/fallback');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#default').length, 1);
|
|
});
|
|
|
|
Slots('Slots override fallback content', async ({ runtime }) => {
|
|
const result = await runtime.load('/fallback-override');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#override').length, 1);
|
|
});
|
|
|
|
Slots('Slots work with multiple elements', async ({ runtime }) => {
|
|
const result = await runtime.load('/multiple');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#a').text(), 'ABC');
|
|
});
|
|
|
|
Slots('Slots work on Components', async ({ runtime }) => {
|
|
const result = await runtime.load('/component');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#a').length, 1);
|
|
assert.equal($('#a').children('astro-component').length, 1, 'Slotted component into #a');
|
|
assert.equal($('#default').children('astro-component').length, 1, 'Slotted component into default slot');
|
|
});
|
|
|
|
Slots('Slots API work on Components', async ({ runtime }) => {
|
|
// IDs will exist whether the slots are filled or not
|
|
{
|
|
const result = await runtime.load('/slottedapi-default');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#a').length, 1);
|
|
assert.equal($('#b').length, 1);
|
|
assert.equal($('#c').length, 1);
|
|
assert.equal($('#default').length, 1);
|
|
}
|
|
|
|
// IDs will not exist because the slots are not filled
|
|
{
|
|
const result = await runtime.load('/slottedapi-empty');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#a').length, 0);
|
|
assert.equal($('#b').length, 0);
|
|
assert.equal($('#c').length, 0);
|
|
assert.equal($('#default').length, 0);
|
|
}
|
|
|
|
// IDs will exist because the slots are filled
|
|
{
|
|
const result = await runtime.load('/slottedapi-filled');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#a').length, 1);
|
|
assert.equal($('#b').length, 1);
|
|
assert.equal($('#c').length, 1);
|
|
|
|
assert.equal($('#default').length, 0); // the default slot is not filled
|
|
}
|
|
|
|
// Default ID will exist because the default slot is filled
|
|
{
|
|
const result = await runtime.load('/slottedapi-default-filled');
|
|
assert.ok(!result.error, `build error: ${result.error}`);
|
|
|
|
const $ = doc(result.contents);
|
|
|
|
assert.equal($('#a').length, 0);
|
|
assert.equal($('#b').length, 0);
|
|
assert.equal($('#c').length, 0);
|
|
|
|
assert.equal($('#default').length, 1); // the default slot is filled
|
|
}
|
|
});
|
|
|
|
Slots.run();
|