Move astro-basic test to use static build (#2682)
* Move some tests over to the static build (#2677) * Move some tests over to the static build * Fix assets tests * Fix the assets tests * Fix for the client:only components * Moves asset tests to the static build * Move postcss test over to static build * Bring back legacy build for astro-basic test * Move astro-basic test to use static build
This commit is contained in:
parent
27431db5b1
commit
9bd2ff8195
28 changed files with 64 additions and 228 deletions
|
@ -58,7 +58,7 @@
|
|||
"test:match": "mocha --timeout 15000 -g"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/compiler": "^0.11.4",
|
||||
"@astrojs/compiler": "^0.12.0-next.5",
|
||||
"@astrojs/language-server": "^0.8.6",
|
||||
"@astrojs/markdown-remark": "^0.6.4",
|
||||
"@astrojs/prism": "0.4.0",
|
||||
|
|
|
@ -130,6 +130,8 @@ export async function staticBuild(opts: StaticBuildOptions) {
|
|||
const topLevelImports = new Set([
|
||||
// Any component that gets hydrated
|
||||
...metadata.hydratedComponentPaths(),
|
||||
// Client-only components
|
||||
...metadata.clientOnlyComponentPaths(),
|
||||
// Any hydration directive like astro/client/idle.js
|
||||
...metadata.hydrationDirectiveSpecifiers(),
|
||||
// The client path for each renderer
|
||||
|
@ -181,6 +183,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
|
|||
logLevel: 'error',
|
||||
mode: 'production',
|
||||
build: {
|
||||
...viteConfig.build,
|
||||
emptyOutDir: false,
|
||||
manifest: ssr,
|
||||
minify: false,
|
||||
|
|
|
@ -216,7 +216,7 @@ export function createRouteManifest({ config, cwd }: { config: AstroConfig; cwd?
|
|||
basename,
|
||||
ext,
|
||||
parts,
|
||||
file: slash(file),
|
||||
file: file.replace(/\\/g, '/'),
|
||||
isDir,
|
||||
isIndex,
|
||||
isPage,
|
||||
|
|
|
@ -13,6 +13,7 @@ interface ComponentMetadata {
|
|||
interface CreateMetadataOptions {
|
||||
modules: ModuleInfo[];
|
||||
hydratedComponents: any[];
|
||||
clientOnlyComponents: any[];
|
||||
hydrationDirectives: Set<string>;
|
||||
hoisted: any[];
|
||||
}
|
||||
|
@ -22,6 +23,7 @@ export class Metadata {
|
|||
public modules: ModuleInfo[];
|
||||
public hoisted: any[];
|
||||
public hydratedComponents: any[];
|
||||
public clientOnlyComponents: any[];
|
||||
public hydrationDirectives: Set<string>;
|
||||
|
||||
private metadataCache: Map<any, ComponentMetadata | null>;
|
||||
|
@ -30,6 +32,7 @@ export class Metadata {
|
|||
this.modules = opts.modules;
|
||||
this.hoisted = opts.hoisted;
|
||||
this.hydratedComponents = opts.hydratedComponents;
|
||||
this.clientOnlyComponents = opts.clientOnlyComponents;
|
||||
this.hydrationDirectives = opts.hydrationDirectives;
|
||||
this.mockURL = new URL(filePathname, 'http://example.com');
|
||||
this.metadataCache = new Map<any, ComponentMetadata | null>();
|
||||
|
@ -66,6 +69,19 @@ export class Metadata {
|
|||
}
|
||||
}
|
||||
|
||||
*clientOnlyComponentPaths() {
|
||||
const found = new Set<string>();
|
||||
for (const metadata of this.deepMetadata()) {
|
||||
for (const component of metadata.clientOnlyComponents) {
|
||||
const path = metadata.resolvePath(component);
|
||||
if (path && !found.has(path)) {
|
||||
found.add(path);
|
||||
yield path;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all of the hydration specifiers used within this component.
|
||||
*/
|
||||
|
|
|
@ -13,7 +13,11 @@ describe('Assets', () => {
|
|||
before(async () => {
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-assets/',
|
||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
||||
vite: {
|
||||
build: {
|
||||
assetsInlineLimit: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
@ -22,7 +26,7 @@ describe('Assets', () => {
|
|||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const imgPath = $('img').attr('src');
|
||||
const data = await fixture.readFile('/' + imgPath);
|
||||
const data = await fixture.readFile( imgPath);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
||||
|
@ -32,7 +36,7 @@ describe('Assets', () => {
|
|||
const srcset = $('img').attr('srcset');
|
||||
const candidates = matchSrcset(srcset);
|
||||
const match = candidates.find((a) => a.density === 2);
|
||||
const data = await fixture.readFile('/' + match.url);
|
||||
const data = await fixture.readFile(match.url);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
||||
|
@ -42,14 +46,14 @@ describe('Assets', () => {
|
|||
const srcset = $('img').attr('srcset');
|
||||
const candidates = matchSrcset(srcset);
|
||||
const match = candidates.find((a) => a.density === 3);
|
||||
const data = await fixture.readFile('/' + match.url);
|
||||
const data = await fixture.readFile(match.url);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
||||
it('built image from an import specifier', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const src = '/' + $('#import-no-url').attr('src');
|
||||
const src = $('#import-no-url').attr('src');
|
||||
const data = await fixture.readFile(src);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
@ -57,7 +61,7 @@ describe('Assets', () => {
|
|||
it('built image from an import specifier using ?url', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const src = '/' + $('#import-url').attr('src');
|
||||
const src = $('#import-url').attr('src');
|
||||
const data = await fixture.readFile(src);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
|
|
@ -9,7 +9,6 @@ describe('Astro basics', () => {
|
|||
before(async () => {
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-basic/',
|
||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
||||
});
|
||||
await fixture.build();
|
||||
previewServer = await fixture.preview();
|
||||
|
|
|
@ -8,7 +8,6 @@ describe('Client only components', () => {
|
|||
before(async () => {
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-client-only/',
|
||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
@ -19,19 +18,10 @@ describe('Client only components', () => {
|
|||
|
||||
// test 1: <astro-root> is empty
|
||||
expect($('astro-root').html()).to.equal('');
|
||||
const src = $('script').attr('src');
|
||||
const $script = $('script');
|
||||
const script = $script.html();
|
||||
|
||||
const script = await fixture.readFile(src);
|
||||
// test 2: svelte renderer is on the page
|
||||
const exp = /import\("(.\/client.*)"\)/g;
|
||||
let match, svelteRenderer;
|
||||
while ((match = exp.exec(script))) {
|
||||
svelteRenderer = match[1].replace(/^\./, '/assets/');
|
||||
}
|
||||
expect(svelteRenderer).to.be.ok;
|
||||
|
||||
// test 3: can load svelte renderer
|
||||
const svelteClient = await fixture.readFile(svelteRenderer);
|
||||
expect(svelteClient).to.be.ok;
|
||||
expect(/import\(".\/PersistentCounter.*/g.test(script)).to.be.ok;
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,56 +0,0 @@
|
|||
/**
|
||||
* UNCOMMENT: add support for functional components in frontmatter
|
||||
import { expect } from 'chai';
|
||||
import cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-components/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
// TODO: add support for functional components in frontmatter
|
||||
describe('Components tests', () => {
|
||||
it('Astro components are able to render framework components', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: Renders Astro component
|
||||
const $astro = $('#astro');
|
||||
expect($astro.children()).to.have.lengthOf(3);
|
||||
|
||||
// test 2: Renders React component
|
||||
const $react = $('#react');
|
||||
expect($react).not.to.have.lengthOf(0);
|
||||
|
||||
// test 3: Renders Vue component
|
||||
const $vue = $('#vue');
|
||||
expect($vue).not.to.have.lengthOf(0);
|
||||
|
||||
// test 4: Renders Svelte component
|
||||
const $svelte = $('#svelte');
|
||||
expect($svelte).not.to.have.lengthOf(0);
|
||||
});
|
||||
|
||||
it('Allows Components defined in frontmatter', async () => {
|
||||
const html = await fixture.readFile('/frontmatter-component/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('h1')).to.have.lengthOf(1);
|
||||
});
|
||||
|
||||
it('Still throws an error for undefined components', async () => {
|
||||
const result = await fixture.readFile('/undefined-component/index.html');
|
||||
expect(result.status).to.equal(500);
|
||||
});
|
||||
|
||||
it('Client attrs not added', async () => {
|
||||
const html = await fixture.readFile('/client/index.html');
|
||||
expect(html).not.to.include(`"client:load": true`);
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
it.skip('is skipped', () => {});
|
|
@ -9,7 +9,11 @@ describe('Scripts (hoisted and not)', () => {
|
|||
before(async () => {
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-scripts/',
|
||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
||||
vite: {
|
||||
build: {
|
||||
assetsInlineLimit: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
@ -41,8 +45,8 @@ describe('Scripts (hoisted and not)', () => {
|
|||
// test 2: attr removed
|
||||
expect($('script').attr('data-astro')).to.equal(undefined);
|
||||
|
||||
let entryURL = path.join('inline', $('script').attr('src'));
|
||||
let inlineEntryJS = await fixture.readFile(entryURL);
|
||||
const entryURL = $('script').attr('src');
|
||||
const inlineEntryJS = await fixture.readFile(entryURL);
|
||||
|
||||
// test 3: the JS exists
|
||||
expect(inlineEntryJS).to.be.ok;
|
||||
|
@ -56,7 +60,7 @@ describe('Scripts (hoisted and not)', () => {
|
|||
expect($('script')).to.have.lengthOf(2);
|
||||
|
||||
let el = $('script').get(1);
|
||||
let entryURL = path.join('external', $(el).attr('src'));
|
||||
let entryURL = $(el).attr('src');
|
||||
let externalEntryJS = await fixture.readFile(entryURL);
|
||||
|
||||
// test 2: the JS exists
|
||||
|
|
|
@ -1,48 +0,0 @@
|
|||
import { expect } from 'chai';
|
||||
import { cli } from './test-utils.js';
|
||||
import { promises as fs } from 'fs';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
describe('astro cli', () => {
|
||||
it('astro', async () => {
|
||||
const proc = await cli();
|
||||
|
||||
expect(proc.stdout).to.include('astro - Futuristic web development tool');
|
||||
});
|
||||
|
||||
it('astro --version', async () => {
|
||||
const pkgURL = new URL('../package.json', import.meta.url);
|
||||
const pkgVersion = await fs.readFile(pkgURL, 'utf8').then((data) => JSON.parse(data).version);
|
||||
|
||||
const proc = await cli('--version');
|
||||
|
||||
expect(proc.stdout).to.equal(pkgVersion);
|
||||
});
|
||||
|
||||
it('astro dev', async () => {
|
||||
const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
|
||||
|
||||
const proc = cli('dev', '--project-root', fileURLToPath(projectRootURL));
|
||||
|
||||
let stdout = '';
|
||||
|
||||
for await (const chunk of proc.stdout) {
|
||||
stdout += chunk;
|
||||
|
||||
if (chunk.includes('Local:')) break;
|
||||
}
|
||||
|
||||
proc.kill();
|
||||
|
||||
expect(stdout).to.include('Server started');
|
||||
});
|
||||
|
||||
it('astro build', async () => {
|
||||
const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
|
||||
|
||||
const proc = await cli('build', '--project-root', fileURLToPath(projectRootURL),
|
||||
'--legacy-build');
|
||||
|
||||
expect(proc.stdout).to.include('Done');
|
||||
});
|
||||
});
|
|
@ -9,7 +9,7 @@ import p2Url from '../images/penguin2.jpg?url';
|
|||
</style>
|
||||
<body>
|
||||
<h1>Icons</h1>
|
||||
<img src={Astro.resolve('../images/twitter.png')} srcset={`${Astro.resolve('../images/twitter.png')} 1x, ${Astro.resolve('../images/twitter@2x.png')} 2x, ${Astro.resolve('../images/twitter@3x.png')} 3x`} />
|
||||
<img src={(await import('../images/twitter.png')).default} srcset={`${(await import('../images/twitter.png')).default} 1x, ${(await import('../images/twitter@2x.png')).default} 2x, ${(await import('../images/twitter@3x.png')).default} 3x`} />
|
||||
<img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 600w, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 800w">
|
||||
<img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 1.5x, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 2x">
|
||||
<!--
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
---
|
||||
import ReactComponent from './Component.jsx';
|
||||
import VueComponent from './Component.vue';
|
||||
import SvelteComponent from './Component.svelte';
|
||||
---
|
||||
|
||||
<div id="astro">
|
||||
<ReactComponent />
|
||||
<VueComponent />
|
||||
<SvelteComponent />
|
||||
</div>
|
|
@ -1,5 +0,0 @@
|
|||
import { h } from 'preact';
|
||||
|
||||
export default function PreactComponent({ children }) {
|
||||
return <div id="preact">{children}</div>;
|
||||
}
|
|
@ -1,3 +0,0 @@
|
|||
<div id="svelte">
|
||||
<slot />
|
||||
</div>
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<div id="vue">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
export interface Props {
|
||||
test: string;
|
||||
}
|
||||
---
|
||||
<h1 id="direct-props-h1">{props.test}</h1>
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
import SvelteComponent from '../components/Component.svelte';
|
||||
---
|
||||
<html>
|
||||
<head><title>Components</title></head>
|
||||
<body>
|
||||
<SvelteComponent client:load />
|
||||
</body>
|
||||
</html>
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
const { level = 1 } = Astro.props;
|
||||
const Element = `h${level}`;
|
||||
---
|
||||
|
||||
<Element>Hello world!</Element>
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
import AstroComponent from '../components/Component.astro';
|
||||
---
|
||||
<html>
|
||||
<head><title>Components</title></head>
|
||||
<body>
|
||||
<AstroComponent />
|
||||
</body>
|
||||
</html>
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
import PropsComponent from "../components/Props-Component.astro"
|
||||
---
|
||||
<PropsComponent test="test string"/>
|
|
@ -1,11 +0,0 @@
|
|||
---
|
||||
function FnComponent() {
|
||||
const lame = 'ugh';
|
||||
return <h2>Hey</h2>
|
||||
}
|
||||
const Defined = 'h1'
|
||||
---
|
||||
|
||||
<FnComponent />
|
||||
<Defined>Hello world!</Defined>
|
||||
<Undefined />
|
|
@ -1 +1,4 @@
|
|||
<script src={Astro.resolve("../scripts/no_hoist_nonmodule.js")}></script>
|
||||
---
|
||||
import url from "../scripts/no_hoist_nonmodule.js?url"
|
||||
---
|
||||
<script src={url}></script>
|
||||
|
|
|
@ -1 +1,4 @@
|
|||
<script type="module" src={Astro.resolve("../scripts/no_hoist_module.js")}></script>
|
||||
---
|
||||
import url from '../scripts/no_hoist_module.js?url';
|
||||
---
|
||||
<script type="module" src={url}></script>
|
||||
|
|
|
@ -1 +1 @@
|
|||
<script hoist type="module" src={Astro.resolve("../scripts/something.js")}></script>
|
||||
<script hoist type="module" src="../scripts/something.js"></script>
|
||||
|
|
|
@ -1 +1 @@
|
|||
<script hoist type="module" src={Astro.resolve("../scripts/another_external.js")}></script>
|
||||
<script hoist type="module" src="../scripts/another_external.js"></script>
|
||||
|
|
|
@ -4,9 +4,12 @@ import JSX from '../components/Solid.jsx';
|
|||
import Svelte from '../components/Svelte.svelte';
|
||||
import Vue from '../components/Vue.vue';
|
||||
---
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="/global.css">
|
||||
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}>
|
||||
<style>
|
||||
@import '../styles/linked.css';
|
||||
</style>
|
||||
<style>
|
||||
.astro-page {
|
||||
appearance: none;
|
||||
|
@ -22,3 +25,5 @@ import Vue from '../components/Vue.vue';
|
|||
<Vue />
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -12,14 +12,13 @@ describe('PostCSS', () => {
|
|||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/postcss',
|
||||
renderers: ['@astrojs/renderer-solid', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
|
||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
||||
});
|
||||
await fixture.build();
|
||||
|
||||
// get bundled CSS (will be hashed, hence DOM query)
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const bundledCSSHREF = $('link[rel=stylesheet][href^=./assets/]').attr('href');
|
||||
const bundledCSSHREF = $('link[rel=stylesheet][href^=/assets/]').attr('href');
|
||||
bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
|
||||
});
|
||||
|
||||
|
@ -31,10 +30,6 @@ describe('PostCSS', () => {
|
|||
expect(bundledCSS).to.match(new RegExp(`.astro-component.astro-[^{]+${PREFIXED_CSS}`));
|
||||
});
|
||||
|
||||
it('works in <link>', () => {
|
||||
expect(bundledCSS).to.match(new RegExp(`.a-n${PREFIXED_CSS}`));
|
||||
});
|
||||
|
||||
it('works in JSX', () => {
|
||||
expect(bundledCSS).to.match(new RegExp(`.solid${PREFIXED_CSS}`));
|
||||
});
|
||||
|
|
17
yarn.lock
17
yarn.lock
|
@ -137,10 +137,10 @@
|
|||
jsonpointer "^5.0.0"
|
||||
leven "^3.1.0"
|
||||
|
||||
"@astrojs/compiler@^0.11.4":
|
||||
version "0.11.4"
|
||||
resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.11.4.tgz#933853cf37ba2cbf0213a88463fd48c3a4329a07"
|
||||
integrity sha512-T598FTCgBFjjPLPClvn+lc2SFGAJkjaF+lbxvHNjzmUpOYdz7YyH1apd3XAZvDp5r5WBBhicB6693GhQRpf3oQ==
|
||||
"@astrojs/compiler@^0.12.0-next.5":
|
||||
version "0.12.0-next.5"
|
||||
resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.12.0-next.5.tgz#4e6d27c74787777522395018f2497dab4a032c77"
|
||||
integrity sha512-4YVPRrB9JJhxoNC9PWN2zpGE7SXRAXcyCouawbd24iyBl4g9aRoQN12XA0qQZkbea9/NNLe9f2yhFMubM2CrJQ==
|
||||
dependencies:
|
||||
typescript "^4.3.5"
|
||||
|
||||
|
@ -7104,15 +7104,6 @@ sass@^1.49.0, sass@^1.49.8:
|
|||
immutable "^4.0.0"
|
||||
source-map-js ">=0.6.2 <2.0.0"
|
||||
|
||||
sass@^1.49.8:
|
||||
version "1.49.9"
|
||||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9"
|
||||
integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
|
||||
dependencies:
|
||||
chokidar ">=3.0.0 <4.0.0"
|
||||
immutable "^4.0.0"
|
||||
source-map-js ">=0.6.2 <2.0.0"
|
||||
|
||||
scheduler@^0.20.2:
|
||||
version "0.20.2"
|
||||
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
|
||||
|
|
Loading…
Reference in a new issue