chore: update tests

This commit is contained in:
Nate Moore 2023-08-15 13:45:17 -05:00
parent 9ee36d8ff9
commit c70396e72d
11 changed files with 74 additions and 53 deletions

View file

@ -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 () => {

View file

@ -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(

View file

@ -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 () => {

View file

@ -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`);
});
});

View file

@ -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 () => {

View file

@ -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', () => {

View file

@ -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;
});
});
});

View file

@ -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\//);
});
});
});

View file

@ -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>

View file

@ -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');
});
});

View file

@ -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));
}
/**