chore: update tests
This commit is contained in:
parent
9ee36d8ff9
commit
c70396e72d
11 changed files with 74 additions and 53 deletions
|
@ -1,7 +1,7 @@
|
|||
import { expect } from 'chai';
|
||||
import * as cheerio from 'cheerio';
|
||||
import testAdapter from './test-adapter.js';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
import { loadFixture, getIslandDataFromScript } from './test-utils.js';
|
||||
|
||||
const assetsPrefix = 'http://localhost:4321';
|
||||
const assetsPrefixRegex = /^http:\/\/localhost:4321\/_astro\/.*/;
|
||||
|
@ -36,9 +36,11 @@ describe('Assets Prefix - Static', () => {
|
|||
it('react component astro-island should import from assetsPrefix', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const island = $('astro-island');
|
||||
expect(island.attr('component-url')).to.match(assetsPrefixRegex);
|
||||
expect(island.attr('renderer-url')).to.match(assetsPrefixRegex);
|
||||
const script = $('astro-island > script').first();
|
||||
const data = getIslandDataFromScript(script.text());
|
||||
|
||||
expect(data.componentUrl).to.match(assetsPrefixRegex);
|
||||
expect(data.rendererUrl).to.match(assetsPrefixRegex);
|
||||
});
|
||||
|
||||
it('import.meta.env.ASSETS_PREFIX works', async () => {
|
||||
|
@ -127,9 +129,11 @@ describe('Assets Prefix, server', () => {
|
|||
expect(response.status).to.equal(200);
|
||||
const html = await response.text();
|
||||
const $ = cheerio.load(html);
|
||||
const island = $('astro-island');
|
||||
expect(island.attr('component-url')).to.match(assetsPrefixRegex);
|
||||
expect(island.attr('renderer-url')).to.match(assetsPrefixRegex);
|
||||
const script = $('astro-island > script');
|
||||
const data = getIslandDataFromScript(script.text());
|
||||
|
||||
expect(data.componentUrl).to.match(assetsPrefixRegex);
|
||||
expect(data.rendererUrl).to.match(assetsPrefixRegex);
|
||||
});
|
||||
|
||||
it('markdown optimized image src does not start with assetsPrefix in SSR', async () => {
|
||||
|
|
|
@ -76,7 +76,7 @@ describe('Component children', () => {
|
|||
|
||||
// test 2: If client, and no children are rendered, a template is.
|
||||
expect($('#client').parent().children()).to.have.lengthOf(
|
||||
2,
|
||||
3,
|
||||
'rendered the client component and a template'
|
||||
);
|
||||
expect($('#client').parent().find('template[data-astro-template]')).to.have.lengthOf(
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { expect } from 'chai';
|
||||
import { load as cheerioLoad } from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
import { loadFixture, getIslandDataFromScript } from './test-utils.js';
|
||||
|
||||
describe('Client only components', () => {
|
||||
/** @type {import('./test-utils').Fixture} */
|
||||
|
@ -18,12 +18,14 @@ describe('Client only components', () => {
|
|||
it('Loads pages using client:only hydrator', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerioLoad(html);
|
||||
const script = $('astro-island > script').first();
|
||||
const data = getIslandDataFromScript(script.text());
|
||||
|
||||
// test 1: <astro-island> is empty
|
||||
expect($('astro-island').html()).to.equal('');
|
||||
expect($('astro-island').first().children().length).to.equal(1);
|
||||
|
||||
// test 2: svelte renderer is on the page
|
||||
expect($('astro-island').attr('renderer-url')).to.be.ok;
|
||||
expect(data.rendererUrl).to.be.ok;
|
||||
});
|
||||
|
||||
it('Adds the CSS to the page', async () => {
|
||||
|
@ -83,12 +85,14 @@ describe('Client only components subpath', () => {
|
|||
it('Loads pages using client:only hydrator', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerioLoad(html);
|
||||
const script = $('astro-island > script').first();
|
||||
const data = getIslandDataFromScript(script.text());
|
||||
|
||||
// test 1: <astro-island> is empty
|
||||
expect($('astro-island').html()).to.equal('');
|
||||
expect($('astro-island').first().children.length).to.equal(1);
|
||||
|
||||
// test 2: svelte renderer is on the page
|
||||
expect($('astro-island').attr('renderer-url')).to.be.ok;
|
||||
expect(data.rendererUrl).to.be.ok;
|
||||
});
|
||||
|
||||
it('Adds the CSS to the page', async () => {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { expect } from 'chai';
|
||||
import * as cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
import { loadFixture, getIslandDataFromScript } from './test-utils.js';
|
||||
|
||||
describe('Dynamic components', () => {
|
||||
let fixture;
|
||||
|
@ -16,7 +16,7 @@ describe('Dynamic components', () => {
|
|||
const html = await fixture.readFile('/index.html');
|
||||
|
||||
const $ = cheerio.load(html);
|
||||
expect($('script').length).to.eq(1);
|
||||
expect($('script').length).to.eq(3);
|
||||
});
|
||||
|
||||
it('Loads pages using client:media hydrator', async () => {
|
||||
|
@ -24,18 +24,19 @@ describe('Dynamic components', () => {
|
|||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: static value rendered
|
||||
expect($('script').length).to.equal(1);
|
||||
expect($('script').length).to.equal(3);
|
||||
});
|
||||
|
||||
it('Loads pages using client:only hydrator', async () => {
|
||||
const html = await fixture.readFile('/client-only/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const script = $('astro-island > script').first();
|
||||
const data = getIslandDataFromScript(script.text());
|
||||
|
||||
// test 1: <astro-island> is empty.
|
||||
expect($('astro-island').html()).to.equal('');
|
||||
expect($('astro-island').first().children().length).to.equal(1);
|
||||
// test 2: component url
|
||||
const href = $('astro-island').attr('component-url');
|
||||
expect(href).to.include(`/PersistentCounter`);
|
||||
expect(data.componentUrl).to.include(`/PersistentCounter`);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -55,7 +56,7 @@ describe('Dynamic components subpath', () => {
|
|||
const html = await fixture.readFile('/index.html');
|
||||
|
||||
const $ = cheerio.load(html);
|
||||
expect($('script').length).to.eq(1);
|
||||
expect($('script').length).to.eq(3);
|
||||
});
|
||||
|
||||
it('Loads pages using client:media hydrator', async () => {
|
||||
|
@ -63,17 +64,18 @@ describe('Dynamic components subpath', () => {
|
|||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: static value rendered
|
||||
expect($('script').length).to.equal(1);
|
||||
expect($('script').length).to.equal(3);
|
||||
});
|
||||
|
||||
it('Loads pages using client:only hydrator', async () => {
|
||||
const html = await fixture.readFile('/client-only/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const script = $('astro-island > script').first();
|
||||
const data = getIslandDataFromScript(script.text());
|
||||
|
||||
// test 1: <astro-island> is empty.
|
||||
expect($('astro-island').html()).to.equal('');
|
||||
// test 2: has component url
|
||||
const attr = $('astro-island').attr('component-url');
|
||||
expect(attr).to.include(`blog/_astro/PersistentCounter`);
|
||||
expect($('astro-island').first().children().length).to.equal(1);
|
||||
// test 2: component url
|
||||
expect(data.componentUrl).to.include(`blog/_astro/PersistentCounter`);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -14,7 +14,7 @@ describe('Slots with client: directives', () => {
|
|||
it('Tags of dynamic tags works', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
expect($('script')).to.have.a.lengthOf(1);
|
||||
expect($('script')).to.have.a.lengthOf(2);
|
||||
});
|
||||
|
||||
it('Astro slot tags are cleaned', async () => {
|
||||
|
|
|
@ -14,7 +14,7 @@ describe('Nested Slots', () => {
|
|||
it('Hidden nested slots see their hydration scripts hoisted', async () => {
|
||||
const html = await fixture.readFile('/hidden-nested/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
expect($('script')).to.have.a.lengthOf(1, 'script rendered');
|
||||
expect($('script')).to.have.a.lengthOf(3, 'script rendered');
|
||||
const scriptInTemplate = $($('template')[0].children[0]).find('script');
|
||||
expect(scriptInTemplate).to.have.a.lengthOf(0, 'script defined outside of the inner template');
|
||||
});
|
||||
|
@ -22,7 +22,7 @@ describe('Nested Slots', () => {
|
|||
it('Slots rendered via Astro.slots.render have the hydration script', async () => {
|
||||
const html = await fixture.readFile('/component-slot/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
expect($('script')).to.have.a.lengthOf(1, 'script rendered');
|
||||
expect($('script')).to.have.a.lengthOf(2, 'script rendered');
|
||||
});
|
||||
|
||||
describe('Client components nested inside server-only framework components', () => {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { expect } from 'chai';
|
||||
import * as cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
import { loadFixture, getIslandDataFromScript } from './test-utils.js';
|
||||
import { preact } from './fixtures/before-hydration/deps.mjs';
|
||||
import testAdapter from './test-adapter.js';
|
||||
|
||||
|
@ -43,7 +43,8 @@ describe('Astro Scripts before-hydration', () => {
|
|||
let res = await fixture.fetch('/');
|
||||
let html = await res.text();
|
||||
let $ = cheerio.load(html);
|
||||
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(1);
|
||||
const data = getIslandDataFromScript($('astro-island > script').first().text())
|
||||
expect(data.beforeHydrationUrl).to.be.ok;
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -55,7 +56,8 @@ describe('Astro Scripts before-hydration', () => {
|
|||
it('Is included in the astro-island', async () => {
|
||||
let html = await fixture.readFile('/index.html');
|
||||
let $ = cheerio.load(html);
|
||||
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(1);
|
||||
const data = getIslandDataFromScript($('astro-island > script').first().text())
|
||||
expect(data.beforeHydrationUrl).to.be.ok;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -86,7 +88,8 @@ describe('Astro Scripts before-hydration', () => {
|
|||
let res = await fixture.fetch('/');
|
||||
let html = await res.text();
|
||||
let $ = cheerio.load(html);
|
||||
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(1);
|
||||
const data = getIslandDataFromScript($('astro-island > script').first().text())
|
||||
expect(data.beforeHydrationUrl).to.be.ok;
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -98,7 +101,8 @@ describe('Astro Scripts before-hydration', () => {
|
|||
it('Does not include before-hydration-url on the astro-island', async () => {
|
||||
let html = await fixture.readFile('/index.html');
|
||||
let $ = cheerio.load(html);
|
||||
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(0);
|
||||
const data = getIslandDataFromScript($('astro-island > script').first().text())
|
||||
expect(data.beforeHydrationUrl).not.to.be.ok;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -139,7 +143,8 @@ describe('Astro Scripts before-hydration', () => {
|
|||
let response = await app.render(request);
|
||||
let html = await response.text();
|
||||
let $ = cheerio.load(html);
|
||||
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(1);
|
||||
const data = getIslandDataFromScript($('astro-island > script').first().text())
|
||||
expect(data.beforeHydrationUrl).to.be.ok;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -167,7 +172,8 @@ describe('Astro Scripts before-hydration', () => {
|
|||
let response = await app.render(request);
|
||||
let html = await response.text();
|
||||
let $ = cheerio.load(html);
|
||||
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(0);
|
||||
const data = getIslandDataFromScript($('astro-island > script').first().text())
|
||||
expect(data.beforeHydrationUrl).not.to.be.ok;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { expect } from 'chai';
|
||||
import * as cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
import { loadFixture, getIslandDataFromScript } from './test-utils.js';
|
||||
import { preact } from './fixtures/before-hydration/deps.mjs';
|
||||
import testAdapter from './test-adapter.js';
|
||||
|
||||
|
@ -44,8 +44,9 @@ describe('build assets (static)', () => {
|
|||
|
||||
const island = $('astro-island');
|
||||
expect(island.length).to.eq(1);
|
||||
expect(island.attr('component-url')).to.match(/^\/_astro\//);
|
||||
expect(island.attr('renderer-url')).to.match(/^\/_astro\//);
|
||||
const data = getIslandDataFromScript(island.children('script').text())
|
||||
expect(data.componentUrl).to.match(/^\/_astro\//);
|
||||
expect(data.rendererUrl).to.match(/^\/_astro\//);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -83,8 +84,9 @@ describe('build assets (static)', () => {
|
|||
|
||||
const island = $('astro-island');
|
||||
expect(island.length).to.eq(1);
|
||||
expect(island.attr('component-url')).to.match(/^\/custom-assets\//);
|
||||
expect(island.attr('renderer-url')).to.match(/^\/custom-assets\//);
|
||||
const data = getIslandDataFromScript(island.children('script').text())
|
||||
expect(data.componentUrl).to.match(/^\/custom-assets\//);
|
||||
expect(data.rendererUrl).to.match(/^\/custom-assets\//);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -130,8 +132,9 @@ describe('build assets (server)', () => {
|
|||
|
||||
const island = $('astro-island');
|
||||
expect(island.length).to.eq(1);
|
||||
expect(island.attr('component-url')).to.match(/^\/_astro\//);
|
||||
expect(island.attr('renderer-url')).to.match(/^\/_astro\//);
|
||||
const data = getIslandDataFromScript(island.children('script').text())
|
||||
expect(data.componentUrl).to.match(/^\/_astro\//);
|
||||
expect(data.rendererUrl).to.match(/^\/_astro\//);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -170,8 +173,9 @@ describe('build assets (server)', () => {
|
|||
|
||||
const island = $('astro-island');
|
||||
expect(island.length).to.eq(1);
|
||||
expect(island.attr('component-url')).to.match(/^\/custom-assets\//);
|
||||
expect(island.attr('renderer-url')).to.match(/^\/custom-assets\//);
|
||||
const data = getIslandDataFromScript(island.children('script').text())
|
||||
expect(data.componentUrl).to.match(/^\/custom-assets\//);
|
||||
expect(data.rendererUrl).to.match(/^\/custom-assets\//);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -6,8 +6,6 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
|
|||
<head><title>Dynamic pages</title></head>
|
||||
<body>
|
||||
<Counter client:load />
|
||||
|
||||
<!-- Including the original hydration syntax to test backwards compatibility -->
|
||||
<SvelteCounter client:load />
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { expect } from 'chai';
|
||||
import * as cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
import { loadFixture, getIslandDataFromScript } from './test-utils.js';
|
||||
|
||||
describe('Re-exported astro components with client components', () => {
|
||||
let fixture;
|
||||
|
@ -14,6 +14,7 @@ describe('Re-exported astro components with client components', () => {
|
|||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
expect($('astro-island').length).to.equal(1);
|
||||
expect($('astro-island').attr('component-export')).to.equal('One');
|
||||
const data = getIslandDataFromScript($('astro-island > script').text())
|
||||
expect(data.componentExport).to.equal('One');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -245,13 +245,15 @@ export async function loadFixture(inlineConfig) {
|
|||
/**
|
||||
*
|
||||
* @param {string} text
|
||||
* @returns {{ componentUrl: string, componentExport: string, rendererUrl: string, opts: Record<string, unknown>, props: Record<string, unknown> }}
|
||||
* @returns {{ componentUrl: string, componentExport: string, rendererUrl: string, beforeHydrationUrl?: string, opts: Record<string, unknown>, props: Record<string, unknown> }}
|
||||
*/
|
||||
export function getIslandDataFromScript(text) {
|
||||
// Island script references `Astro` and `document` globals, so we need to mock them
|
||||
const prelude = [`const Astro = { assign: (_, props) => props }`, `const document = {}`, ''].join(';')
|
||||
const Astro = { assign: (_, props) => props };
|
||||
const document = {};
|
||||
const args = { Astro, document }
|
||||
|
||||
// Yes, I know, `eval` is bad! But our data is embedded as JS on purpose.
|
||||
return new Function([prelude, `return ${text}`].join(''))();
|
||||
return new Function(Object.keys(args), `return ${text}`)(...Object.values(args));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Add table
Reference in a new issue