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:
Matthew Phillips 2022-03-01 09:08:56 -05:00 committed by Nate Moore
parent 27431db5b1
commit 9bd2ff8195
28 changed files with 64 additions and 228 deletions

View file

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

View file

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

View file

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

View file

@ -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.
*/

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +0,0 @@
import { h } from 'preact';
export default function PreactComponent({ children }) {
return <div id="preact">{children}</div>;
}

View file

@ -1,3 +0,0 @@
<div id="svelte">
<slot />
</div>

View file

@ -1,9 +0,0 @@
<template>
<div id="vue">
<slot />
</div>
</template>
<script>
export default {}
</script>

View file

@ -1,6 +0,0 @@
---
export interface Props {
test: string;
}
---
<h1 id="direct-props-h1">{props.test}</h1>

View file

@ -1,9 +0,0 @@
---
import SvelteComponent from '../components/Component.svelte';
---
<html>
<head><title>Components</title></head>
<body>
<SvelteComponent client:load />
</body>
</html>

View file

@ -1,6 +0,0 @@
---
const { level = 1 } = Astro.props;
const Element = `h${level}`;
---
<Element>Hello world!</Element>

View file

@ -1,9 +0,0 @@
---
import AstroComponent from '../components/Component.astro';
---
<html>
<head><title>Components</title></head>
<body>
<AstroComponent />
</body>
</html>

View file

@ -1,4 +0,0 @@
---
import PropsComponent from "../components/Props-Component.astro"
---
<PropsComponent test="test string"/>

View file

@ -1,11 +0,0 @@
---
function FnComponent() {
const lame = 'ugh';
return <h2>Hey</h2>
}
const Defined = 'h1'
---
<FnComponent />
<Defined>Hello world!</Defined>
<Undefined />

View file

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

View file

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

View file

@ -1 +1 @@
<script hoist type="module" src={Astro.resolve("../scripts/something.js")}></script>
<script hoist type="module" src="../scripts/something.js"></script>

View file

@ -1 +1 @@
<script hoist type="module" src={Astro.resolve("../scripts/another_external.js")}></script>
<script hoist type="module" src="../scripts/another_external.js"></script>

View file

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

View file

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

View file

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