michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Migrate more tests to the static build (#2693)

Browse source 
* fix: disable HMR during build (#2684)

* Migrate more tests to the static build

* Only prepend links in non-legacy mode

* Add the 0-css tests

* Convert all CSS tests to the static build

* Migrate Astro global tests

* Remove .only

* Fix static build tests

* Migrate a few more

* More tests

* Move the lit test back to legacy

* Increase the test timeout

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
Matthew Phillips 2022-03-02 09:39:05 -05:00 committed by Nate Moore
parent 9bd2ff8195
commit 34c2d1e8fc
45 changed files with 144 additions and 419 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/astro/package.json
View file

@ -54,8 +54,8 @@
"dev": "astro-scripts dev \"src/**/*.ts\"",
"postbuild": "astro-scripts copy \"src/**/*.astro\"",
"benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
"test": "mocha --parallel --timeout 15000 --ignore **/lit-element.test.js && mocha **/lit-element.test.js",
"test:match": "mocha --timeout 15000 -g"
"test": "mocha --parallel --timeout 20000 --ignore **/lit-element.test.js && mocha --timeout 20000 **/lit-element.test.js",
"test:match": "mocha --timeout 20000 -g"
},
"dependencies": {
"@astrojs/compiler": "^0.12.0-next.5",

18
packages/astro/src/core/build/static-build.ts
View file

@ -38,8 +38,7 @@ export interface StaticBuildOptions {
const MAX_CONCURRENT_RENDERS = 10;
function addPageName(pathname: string, opts: StaticBuildOptions): void {
const pathrepl = opts.astroConfig.buildOptions.pageUrlFormat === 'directory' ? '/index.html' : pathname === '/' ? 'index.html' : '.html';
opts.pageNames.push(pathname.replace(/\/?$/, pathrepl).replace(/^\//, ''));
opts.pageNames.push(pathname.replace(/\/?$/, '/').replace(/^\//, ''));
}
// Gives back a facadeId that is relative to the root.
@ -362,7 +361,7 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G
debug('build', `Generating: ${pathname}`);
const site = astroConfig.buildOptions.site;
const links = createLinkStylesheetElementSet(linkIds, site);
const links = createLinkStylesheetElementSet(linkIds.reverse(), site);
const scripts = createModuleScriptElementWithSrcSet(hoistedId ? [hoistedId] : [], site);
try {
@ -456,8 +455,7 @@ async function generateManifest(result: RollupOutput, opts: StaticBuildOptions,
}
function getOutRoot(astroConfig: AstroConfig): URL {
const rootPathname = appendForwardSlash(astroConfig.buildOptions.site ? new URL(astroConfig.buildOptions.site).pathname : '/');
return new URL('.' + rootPathname, astroConfig.dist);
return new URL('./', astroConfig.dist);
}
function getServerRoot(astroConfig: AstroConfig): URL {
@ -483,9 +481,11 @@ function getOutFolder(astroConfig: AstroConfig, pathname: string, routeType: Rou
switch (astroConfig.buildOptions.pageUrlFormat) {
case 'directory':
return new URL('.' + appendForwardSlash(pathname), outRoot);
case 'file':
case 'file': {
return new URL('.' + appendForwardSlash(npath.dirname(pathname)), outRoot);
}
}
}
}
@ -497,8 +497,10 @@ function getOutFile(astroConfig: AstroConfig, outFolder: URL, pathname: string,
switch (astroConfig.buildOptions.pageUrlFormat) {
case 'directory':
return new URL('./index.html', outFolder);
case 'file':
return new URL('./' + npath.basename(pathname) + '.html', outFolder);
case 'file': {
const baseName = npath.basename(pathname);
return new URL('./' + (baseName || 'index') + '.html', outFolder);
}
}
}
}

36
packages/astro/src/core/render/dev/index.ts
View file

@ -1,5 +1,5 @@
import type * as vite from 'vite';
import type { AstroConfig, ComponentInstance, Renderer, RouteData, RuntimeMode } from '../../../@types/astro';
import type { AstroConfig, ComponentInstance, Renderer, RouteData, RuntimeMode, SSRElement } from '../../../@types/astro';
import { LogOptions } from '../../logger.js';
import { fileURLToPath } from 'url';
import { getStylesForURL } from './css.js';
@ -48,14 +48,15 @@ export async function preload({ astroConfig, filePath, viteServer }: SSROptions)
/** use Vite to SSR */
export async function render(renderers: Renderer[], mod: ComponentInstance, ssrOpts: SSROptions): Promise<string> {
const { astroConfig, filePath, logging, mode, origin, pathname, route, routeCache, viteServer } = ssrOpts;
const legacy = astroConfig.buildOptions.legacyBuild;
// Add hoisted script tags
const scripts = createModuleScriptElementWithSrcSet(
!astroConfig.buildOptions.legacyBuild && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : []
!legacy && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : []
);
// Inject HMR scripts
if (mod.hasOwnProperty('$$metadata') && mode === 'development' && !astroConfig.buildOptions.legacyBuild) {
if (mod.hasOwnProperty('$$metadata') && mode === 'development' && !legacy) {
scripts.add({
props: { type: 'module', src: '/@vite/client' },
children: '',
@ -66,9 +67,31 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
});
}
// Pass framework CSS in as link tags to be appended to the page.
let links = new Set<SSRElement>();
if(!legacy) {
[...getStylesForURL(filePath, viteServer)].forEach((href) => {
if (mode === 'development' && svelteStylesRE.test(href)) {
scripts.add({
props: { type: 'module', src: href },
children: '',
});
} else {
links.add({
props: {
rel: 'stylesheet',
href,
'data-astro-injected': true,
},
children: '',
});
}
});
}
let content = await coreRender({
legacyBuild: astroConfig.buildOptions.legacyBuild,
links: new Set(),
links,
logging,
markdownRender: astroConfig.markdownOptions.render,
mod,
@ -101,7 +124,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
const tags: vite.HtmlTagDescriptor[] = [];
// dev only: inject Astro HMR client
if (mode === 'development' && astroConfig.buildOptions.legacyBuild) {
if (mode === 'development' && legacy) {
tags.push({
tag: 'script',
attrs: { type: 'module' },
@ -113,6 +136,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
}
// inject CSS
if(legacy) {
[...getStylesForURL(filePath, viteServer)].forEach((href) => {
if (mode === 'development' && svelteStylesRE.test(href)) {
tags.push({
@ -132,6 +156,8 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
});
}
});
}
// add injected tags
content = injectTags(content, tags);

1
packages/astro/src/core/render/sitemap.ts
View file

@ -3,7 +3,6 @@ const STATUS_CODE_PAGE_REGEXP = /\/[0-9]{3}\/?$/;
/** Construct sitemap.xml given a set of URLs */
export function generateSitemap(pages: string[]): string {
// TODO: find way to respect <link rel="canonical"> URLs here
// TODO: find way to exclude pages from sitemap
// copy just in case original copy is needed

18
packages/astro/src/runtime/server/index.ts
View file

@ -337,12 +337,14 @@ export function createAstro(filePathname: string, _site: string, projectRootStr:
};
}
const toAttributeString = (value: any) => String(value).replace(/&/g, '&#38;').replace(/"/g, '&#34;');
const toAttributeString = (value: any, shouldEscape = true) => shouldEscape ?
String(value).replace(/&/g, '&#38;').replace(/"/g, '&#34;') :
value;
const STATIC_DIRECTIVES = new Set(['set:html', 'set:text']);
// A helper used to turn expressions into attribute key/value
export function addAttribute(value: any, key: string) {
export function addAttribute(value: any, key: string, shouldEscape = true) {
if (value == null) {
return '';
}
@ -372,15 +374,15 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) {
return unescapeHTML(` ${key}`);
} else {
return unescapeHTML(` ${key}="${toAttributeString(value)}"`);
return unescapeHTML(` ${key}="${toAttributeString(value, shouldEscape)}"`);
}
}
// Adds support for `<Component {...value} />
export function spreadAttributes(values: Record<any, any>) {
export function spreadAttributes(values: Record<any, any>, shouldEscape = true) {
let output = '';
for (const [key, value] of Object.entries(values)) {
output += addAttribute(value, key);
output += addAttribute(value, key, shouldEscape);
}
return unescapeHTML(output);
}
@ -463,7 +465,7 @@ export async function renderPage(result: SSRResult, Component: AstroComponentFac
const links = Array.from(result.links)
.filter(uniqueElements)
.map((link) => renderElement('link', link));
.map((link) => renderElement('link', link, false));
// inject styles & scripts at end of <head>
let headPos = template.indexOf('</head>');
@ -513,7 +515,7 @@ function getHTMLElementName(constructor: typeof HTMLElement) {
return assignedName;
}
function renderElement(name: string, { props: _props, children = '' }: SSRElement) {
function renderElement(name: string, { props: _props, children = '' }: SSRElement, shouldEscape = true) {
// Do not print `hoist`, `lang`, `global`
const { lang: _, 'data-astro-id': astroId, 'define:vars': defineVars, ...props } = _props;
if (defineVars) {
@ -530,5 +532,5 @@ function renderElement(name: string, { props: _props, children = '' }: SSRElemen
children = defineScriptVars(defineVars) + '\n' + children;
}
}
return `<${name}${spreadAttributes(props)}>${children}</${name}>`;
return `<${name}${spreadAttributes(props, shouldEscape)}>${children}</${name}>`;
}

25
packages/astro/test/0-css.test.js
View file

@ -15,7 +15,11 @@ describe('CSS', function () {
fixture = await loadFixture({
projectRoot: './fixtures/0-css/',
renderers: ['@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
vite: {
build: {
assetsInlineLimit: 0
}
}
});
});
@ -32,7 +36,7 @@ describe('CSS', function () {
// get bundled CSS (will be hashed, hence DOM query)
const html = await fixture.readFile('/index.html');
$ = 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(/^\/?/, '/'));
});
@ -48,7 +52,8 @@ describe('CSS', function () {
expect(el2.attr('class')).to.equal(`visible ${scopedClass}`);
// 2. check CSS
expect(bundledCSS).to.include(`.blue.${scopedClass}{color:#b0e0e6}.color\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`);
const expected = `.blue.${scopedClass}{color:#b0e0e6}.color\\\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`;
expect(bundledCSS).to.include(expected);
});
it('No <style> skips scoping', async () => {
@ -61,7 +66,8 @@ describe('CSS', function () {
});
it('Using hydrated components adds astro-root styles', async () => {
expect(bundledCSS).to.include('display:contents');
const inline = $('style').html();
expect(inline).to.include('display: contents');
});
it('<style lang="sass">', async () => {
@ -218,7 +224,7 @@ describe('CSS', function () {
it('<style>', async () => {
const el = $('#svelte-css');
const classes = el.attr('class').split(' ');
const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
const scopedClass = classes.find((name) => name !== 'svelte-css' && /^svelte-[A-Za-z0-9-]+/.test(name));
// 1. check HTML
expect(el.attr('class')).to.include('svelte-css');
@ -230,7 +236,7 @@ describe('CSS', function () {
it('<style lang="sass">', async () => {
const el = $('#svelte-sass');
const classes = el.attr('class').split(' ');
const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
const scopedClass = classes.find((name) => name !== 'svelte-sass' && /^svelte-[A-Za-z0-9-]+/.test(name));
// 1. check HTML
expect(el.attr('class')).to.include('svelte-sass');
@ -242,7 +248,7 @@ describe('CSS', function () {
it('<style lang="scss">', async () => {
const el = $('#svelte-scss');
const classes = el.attr('class').split(' ');
const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
const scopedClass = classes.find((name) => name !== 'svelte-scss' && /^svelte-[A-Za-z0-9-]+/.test(name));
// 1. check HTML
expect(el.attr('class')).to.include('svelte-scss');
@ -273,11 +279,6 @@ describe('CSS', function () {
expect((await fixture.fetch(href)).status).to.equal(200);
});
it('resolves CSS in src/', async () => {
const href = $('link[href$="linked.css"]').attr('href');
expect((await fixture.fetch(href)).status).to.equal(200);
});
// Skipped until upstream fix lands
// Our fix: https://github.com/withastro/astro/pull/2106
// OG Vite PR: https://github.com/vitejs/vite/pull/5940

4
packages/astro/test/astro-css-bundling-import.test.js
View file

@ -8,7 +8,6 @@ describe('CSS Bundling (ESM import)', () => {
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-css-bundling-import/',
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();
});
@ -35,8 +34,7 @@ describe('CSS Bundling (ESM import)', () => {
expect(css.indexOf('p{color:green}')).to.be.greaterThan(css.indexOf('p{color:#00f}'));
});
// TODO: re-enable this
it.skip('no empty CSS files', async () => {
it('no empty CSS files', async () => {
for (const page of ['/page-1/index.html', '/page-2/index.html']) {
const html = await fixture.readFile(page);
const $ = cheerio.load(html);

41
packages/astro/test/astro-css-bundling-nested-layouts.test.js
View file

@ -1,41 +0,0 @@
import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('CSS bundling - nested layouts', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-css-bundling-nested-layouts/',
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();
});
it('page-1 has all CSS', async () => {
const html = await fixture.readFile('/page-1/index.html');
const $ = cheerio.load(html);
const stylesheets = $('link[rel=stylesheet]')
.toArray()
.map((el) => el.attribs.href);
// page-one.[hash].css exists
expect(stylesheets.some((href) => /page-one\.\w+\.css/.test(href))).to.be.true;
});
it('page-2 has all CSS', async () => {
const html = await fixture.readFile('/page-2/index.html');
const $ = cheerio.load(html);
const stylesheets = $('link[rel=stylesheet]')
.toArray()
.map((el) => el.attribs.href);
// page-one.[hash].css exists
expect(stylesheets.some((href) => /page-one\.\w+\.css/.test(href))).to.be.true;
// page-2.[hash].css exists
expect(stylesheets.some((href) => /page-2\.\w+\.css/.test(href))).to.be.true;
});
});

25
packages/astro/test/astro-css-bundling.test.js
View file

@ -5,11 +5,9 @@ import { loadFixture } from './test-utils.js';
// note: the hashes should be deterministic, but updating the file contents will change hashes
// be careful not to test that the HTML simply contains CSS, because it always will! filename and quanity matter here (bundling).
const EXPECTED_CSS = {
'/index.html': ['./assets/index', './assets/typography'], // don’t match hashes, which change based on content
'/one/index.html': ['../assets/one'],
'/two/index.html': ['../assets/two', '../assets/typography'],
'/preload/index.html': ['../assets/preload'],
'/preload-merge/index.html': ['../assets/preload-merge'],
'/index.html': ['/assets/index'], // don’t match hashes, which change based on content
'/one/index.html': ['/assets/one'],
'/two/index.html': ['/assets/two'],
};
const UNEXPECTED_CSS = ['/src/components/nav.css', '../css/typography.css', '../css/colors.css', '../css/page-index.css', '../css/page-one.css', '../css/page-two.css'];
@ -19,7 +17,6 @@ describe('CSS Bundling', function () {
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-css-bundling/',
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build({ mode: 'production' });
});
@ -46,21 +43,7 @@ describe('CSS Bundling', function () {
expect(link).to.have.lengthOf(0);
}
// test 3: preload tags was not removed and attributes was preserved
if (filepath === '/preload/index.html') {
const stylesheet = $('link[rel="stylesheet"][href^="../assets/preload"]');
const preload = $('link[rel="preload"][href^="../assets/preload"]');
expect(stylesheet[0].attribs.media).to.equal('print');
expect(preload).to.have.lengthOf(1); // Preload tag was removed
}
// test 4: preload tags was not removed and attributes was preserved
if (filepath === '/preload-merge/index.html') {
const preload = $('link[rel="preload"]');
expect(preload).to.have.lengthOf(1);
}
// test 5: assert all bundled CSS was built and contains CSS
// test 3: assert all bundled CSS was built and contains CSS
for (const url of builtCSS.keys()) {
const css = await fixture.readFile(url);
expect(css).to.be.ok;

9
packages/astro/test/astro-dynamic.test.js
View file

@ -8,7 +8,6 @@ describe('Dynamic components', () => {
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-dynamic/',
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();
});
@ -17,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(2);
});
it('Loads pages using client:media hydrator', async () => {
@ -26,11 +25,7 @@ describe('Dynamic components', () => {
const $ = cheerio.load(html);
// test 1: static value rendered
let js = await fixture.readFile(new URL($('script').attr('src'), root).pathname);
expect(js).to.include(`value:"(max-width: 700px)"`);
// test 2: dynamic value rendered
expect(js).to.include(`value:"(max-width: 600px)"`);
expect($('script').length).to.equal(2); // One for each
});
it('Loads pages using client:only hydrator', async () => {

10
packages/astro/test/astro-global.test.js
View file

@ -10,8 +10,7 @@ describe('Astro.*', () => {
projectRoot: './fixtures/astro-global/',
buildOptions: {
site: 'https://mysite.dev/blog/',
sitemap: false,
legacyBuild: true
sitemap: false
},
});
await fixture.build();
@ -49,13 +48,6 @@ describe('Astro.*', () => {
expect($('#site').attr('href')).to.equal('https://mysite.dev/blog/');
});
it('Astro.resolve built', async () => {
const html = await fixture.readFile('/resolve/index.html');
const $ = cheerio.load(html);
expect($('img').attr('src')).to.include('assets/penguin.ccd44411.png'); // Main src/images
expect($('#inner-child img').attr('src')).to.include('assets/penguin.b9ab122a.png');
});
it('Astro.fetchContent() returns the correct "url" property, including buildOptions.site subpath', async () => {
const html = await fixture.readFile('/posts/1/index.html');
const $ = cheerio.load(html);

3
packages/astro/test/astro-jsx.test.js
View file

@ -20,9 +20,6 @@ describe('JSX', () => {
projectRoot: cwd,
renderers: renderers.map((name) => `@astrojs/renderer-${name}`),
dist: new URL(`${cwd}dist-${n}/`, import.meta.url),
buildOptions: {
legacyBuild: true
}
}).then((fixture) => {
fixtures[renderers.toString()] = fixture;
return fixture.build();

1
packages/astro/test/astro-pagination.test.js
View file

@ -11,7 +11,6 @@ describe('Pagination', () => {
buildOptions: {
site: 'https://mysite.dev/blog/',
sitemap: false,
legacyBuild: true,
},
});
await fixture.build();

8
packages/astro/test/astro-partial-html.test.js
View file

@ -9,7 +9,6 @@ describe('Partial HTML ', async () => {
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/astro-partial-html/',
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
devServer = await fixture.startDevServer();
});
@ -26,7 +25,12 @@ describe('Partial HTML ', async () => {
expect(html).to.match(/^<!DOCTYPE html/);
// test 2: correct CSS present
const css = $('style[astro-style]').html();
const link = $('link').attr('href');
const css = await fixture.fetch(link, {
headers: {
accept: 'text/css'
}
}).then(res => res.text());
expect(css).to.match(/\.astro-[^{]+{color:red;}/);
});

2
packages/astro/test/astro-sitemap-rss.test.js
View file

@ -10,7 +10,6 @@ describe('Sitemaps', () => {
buildOptions: {
site: 'https://astro.build/',
sitemap: true,
legacyBuild: true,
},
});
await fixture.build();
@ -54,7 +53,6 @@ describe('Sitemaps served from subdirectory', () => {
buildOptions: {
site: 'https://astro.build/base-directory/',
sitemap: true,
legacyBuild: true
},
});
await fixture.build();

30
packages/astro/test/builtins.test.js
View file

@ -1,30 +0,0 @@
import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('Node builtins', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/builtins/',
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();
});
it('Can be used with the node: prefix', async () => {
const html = await fixture.readFile('/index.html');
const $ = cheerio.load(html);
expect($('#version').text()).to.equal('1.2.0');
expect($('#dep-version').text()).to.equal('0.1.0');
});
it('Can also be used with the non-prefixed version', async () => {
const html = await fixture.readFile('/bare/index.html');
const $ = cheerio.load(html);
expect($('h1').text()).to.equal('true');
});
});

5
packages/astro/test/custom-elements.test.js
View file

@ -9,7 +9,6 @@ describe('Custom Elements', () => {
fixture = await loadFixture({
projectRoot: './fixtures/custom-elements/',
renderers: ['@astrojs/test-custom-element-renderer'],
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();
});
@ -48,8 +47,8 @@ describe('Custom Elements', () => {
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
// Hydration
// test 3: Component and polyfill scripts bundled together
expect($('script[type=module]')).to.have.lengthOf(1);
// test 3: Component and polyfill scripts bundled separately
expect($('script[type=module]')).to.have.lengthOf(2);
});
it('Polyfills are added even if not hydrating', async () => {

15
packages/astro/test/fixtures/0-css/src/pages/index.astro vendored
View file

@ -19,7 +19,7 @@ import VueScoped from '../components/VueScoped.vue';
import VueScss from '../components/VueScss.vue';
import ReactDynamic from '../components/ReactDynamic.jsx';
import importedUrl from '../styles/imported-url.css?url';
import '../styles/imported-url.css';
---
<html>
@ -36,10 +36,15 @@ import importedUrl from '../styles/imported-url.css?url';
}
</style>
<link rel="stylesheet" type="text/css" href="/global.css">
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}>
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.scss')}>
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.sass')}>
<link rel="stylesheet" type="text/css" href={importedUrl}>
<style>
@import '../styles/linked.css';
</style>
<style lang="scss">
@import '../styles/linked.scss';
</style>
<style lang="sass">
@import '../styles/linked.sass'
</style>
</head>
<body>
<div class="wrapper">

27
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/BaseLayout.astro vendored
View file

@ -1,27 +0,0 @@
---
import "../styles/site.css"
const {title} = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
<style>
</style>
</head>
<body>
<ul>
<li><a href="/page-1">Page 1</a></li>
<li><a href="/page-2">Page 2</a></li>
<!-- <li><a href="/page-2-reduced-layout">Page 2 reduced layout</a></li> -->
</ul>
<slot></slot>
</body>
</html>

12
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/PageLayout.astro vendored
View file

@ -1,12 +0,0 @@
---
import BaseLayout from "./BaseLayout.astro"
import "../styles/page-one.css"
const {title} = Astro.props;
---
<BaseLayout title={title}>
<main id="page">
<slot></slot>
</main>
</BaseLayout>

15
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-1.astro vendored
View file

@ -1,15 +0,0 @@
---
import PageLayout from "../layouts/PageLayout.astro"
const date = new Date();
---
<PageLayout title="Page 1">
<h1>Page 1</h1>
<p>This page has styling in dev-server. But the built page has no styling. </p>
<p>Check <code>dist/page-1/index.html</code>. There are no stylesheets imported.</p>
<p>Additionally, there is an empty js file in the <code>dist/assets</code> folder. Thankfully the file is not required by any page.</p>
<p>Execute the build <code>npm run build</code> and preview it <code>npx http-server dist/</code> at <a href="https://github-qoihup--8080.local.webcontainer.io/page-1/">https://github-qoihup--8080.local.webcontainer.io/page-1/</a></p>
<p>Date: {date}</p>
</PageLayout>

9
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-2.astro vendored
View file

@ -1,9 +0,0 @@
---
import PageLayout from "../layouts/PageLayout.astro"
import "../styles/page-two.css"
---
<PageLayout title="Page 2">
<h1>Page 2</h1>
<p>Nothing to see here. Check <a href="/page-1">Page 1</a></p>
</PageLayout>

3
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-one.css vendored
View file

@ -1,3 +0,0 @@
p {
color: blue;
}

3
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-two.css vendored
View file

@ -1,3 +0,0 @@
p {
color: green;
}

7
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/site.css vendored
View file

@ -1,7 +0,0 @@
p {
color: red;
}
h1 {
outline: 1px solid red;
}

8
packages/astro/test/fixtures/astro-css-bundling/src/pages/index.astro vendored
View file

@ -4,9 +4,11 @@ import Nav from '../components/Nav.astro';
<html>
<head>
<link rel="stylesheet" href={Astro.resolve('../css/typography.css')}>
<link rel="stylesheet" href={Astro.resolve('../css/colors.css')}>
<link rel="stylesheet" href={Astro.resolve('../css/page-index.css')}>
<style>
@import '../css/typography.css';
@import '../css/colors.css';
@import '../css/page-index.css';
</style>
</head>
<body>
<Nav />

6
packages/astro/test/fixtures/astro-css-bundling/src/pages/one.astro vendored
View file

@ -4,8 +4,10 @@ import Nav from '../components/Nav.astro';
<html>
<head>
<link rel="stylesheet" href={Astro.resolve('../css/typography.css')} />
<link rel="stylesheet" href={Astro.resolve('../css/page-one.css')} />
<style>
@import '../css/typography.css';
@import '../css/page-one.css';
</style>
</head>
<body>
<Nav />

17
packages/astro/test/fixtures/astro-css-bundling/src/pages/preload-merge.astro vendored
View file

@ -1,17 +0,0 @@
---
import Nav from '../components/Nav.astro';
---
<html>
<head>
<link rel="preload" as="style" href={Astro.resolve('../css/page-preload-merge.css')} />
<link rel="preload" as="style" href={Astro.resolve('../css/page-preload-merge-2.css')} />
<link rel="stylesheet" href={Astro.resolve('../css/page-preload-merge.css')} />
<link rel="stylesheet" href={Astro.resolve('../css/page-preload-merge-2.css')} />
</head>
<body>
<Nav />
<h1>Preload merge page</h1>
</body>
</html>

14
packages/astro/test/fixtures/astro-css-bundling/src/pages/preload.astro vendored
View file

@ -1,14 +0,0 @@
---
import Nav from '../components/Nav.astro';
---
<html>
<head>
<link rel="preload" as="style" href={Astro.resolve('../css/page-preload.css')} />
<link rel="stylesheet" href={Astro.resolve('../css/page-preload.css')} media="print" onload="this.media='all'" />
</head>
<body>
<Nav />
<h1>Preload page</h1>
</body>
</html>

8
packages/astro/test/fixtures/astro-css-bundling/src/pages/two.astro vendored
View file

@ -4,9 +4,11 @@ import Nav from '../components/Nav.astro';
<html>
<head>
<link rel="stylesheet" href={Astro.resolve('../css/typography.css')} />
<link rel="stylesheet" href={Astro.resolve('../css/colors.css')} />
<link rel="stylesheet" href={Astro.resolve('../css/page-two.css')} />
<style>
@import '../css/typography.css';
@import '../css/colors.css';
@import '../css/page-two.css';
</style>
</head>
<body>
<Nav />

5
packages/astro/test/fixtures/astro-global/src/components/ChildResolve.astro vendored
View file

@ -1,5 +0,0 @@
---
const penguinUrl = Astro.resolve('../images/penguin.png');
---
<img src={penguinUrl} />
<img src="../images/penguin.png" />

6
packages/astro/test/fixtures/astro-global/src/components/nested/InnerChild.astro vendored
View file

@ -1,6 +0,0 @@
---
const penguinUrl = Astro.resolve('./images/penguin.png');
---
<div id="inner-child">
<img src={penguinUrl} />
</div>

BIN
packages/astro/test/fixtures/astro-global/src/components/nested/images/penguin.png vendored
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 76 KiB

14
packages/astro/test/fixtures/astro-global/src/pages/resolve.astro vendored
View file

@ -1,14 +0,0 @@
---
import Child from '../components/ChildResolve.astro';
import InnerChild from '../components/nested/InnerChild.astro';
---
<html>
<head>
<title>Testing</title>
</head>
<body>
<Child />
<InnerChild />
</body>
</html>

8
packages/astro/test/fixtures/builtins/package.json vendored
View file

@ -1,8 +0,0 @@
{
"name": "@astrojs/astro-test-builtins",
"version": "1.2.0",
"private": true,
"dependencies": {
"@astrojs/astro-test-builtins-dep": "file:./packages/dep"
}
}

8
packages/astro/test/fixtures/builtins/packages/dep/CHANGELOG.md vendored
View file

@ -1,8 +0,0 @@
# @astrojs/astro-test-builtins-dep
## 0.1.0
### Minor Changes
- [#2202](https://github.com/withastro/astro/pull/2202) [`45cea6ae`](https://github.com/withastro/astro/commit/45cea6aec5a310fed4cb8da0d96670d6b99a2539) Thanks [@jonathantneal](https://github.com/jonathantneal)! - Officially drop support for Node v12. The minimum supported version is now Node v14.15+,

10
packages/astro/test/fixtures/builtins/packages/dep/main.js vendored
View file

@ -1,10 +0,0 @@
import fs from 'fs';
const readFile = fs.promises.readFile;
export async function readJson(path) {
const json = await readFile(path, 'utf-8');
const data = JSON.parse(json);
return data;
}

7
packages/astro/test/fixtures/builtins/packages/dep/package.json vendored
View file

@ -1,7 +0,0 @@
{
"name": "@astrojs/astro-test-builtins-dep",
"version": "0.1.0",
"private": true,
"module": "main.js",
"main": "main.js"
}

9
packages/astro/test/fixtures/builtins/src/components/Version.astro vendored
View file

@ -1,9 +0,0 @@
---
import { promises as fs } from 'node:fs';
const url = new URL('../../package.json', import.meta.url);
const json = await fs.readFile(url, 'utf-8');
const data = JSON.parse(json);
---
<span id="version">{data.version}</span>

12
packages/astro/test/fixtures/builtins/src/pages/bare.astro vendored
View file

@ -1,12 +0,0 @@
---
import { builtinModules } from 'module';
---
<html>
<head>
<title>Bare node import</title>
</head>
<body>
<h1>{Array.isArray(builtinModules)}</h1>
</body>
</html>

16
packages/astro/test/fixtures/builtins/src/pages/index.astro vendored
View file

@ -1,16 +0,0 @@
---
import Version from '../components/Version.astro';
import { readJson } from '@astrojs/astro-test-builtins-dep';
const depPath = new URL('../../packages/dep/package.json', import.meta.url);
const title = 'My App';
const depVersion = (await readJson(depPath)).version;
---
<title>{title}</title>
<h1>{title}</h1>
<Version />
<span id="dep-version">{depVersion}</span>

7
packages/astro/test/preview-routing.test.js
View file

@ -16,7 +16,6 @@ describe('Preview Routing', () => {
trailingSlash: 'never',
port: 4000,
},
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();
previewServer = await fixture.preview();
@ -71,7 +70,6 @@ describe('Preview Routing', () => {
trailingSlash: 'always',
port: 4001,
},
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();
previewServer = await fixture.preview();
@ -130,7 +128,6 @@ describe('Preview Routing', () => {
trailingSlash: 'ignore',
port: 4002,
},
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();
previewServer = await fixture.preview();
@ -189,7 +186,6 @@ describe('Preview Routing', () => {
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
buildOptions: {
pageUrlFormat: 'file',
legacyBuild: true
},
devOptions: {
trailingSlash: 'never',
@ -247,7 +243,6 @@ describe('Preview Routing', () => {
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
buildOptions: {
pageUrlFormat: 'file',
legacyBuild: true
},
devOptions: {
trailingSlash: 'always',
@ -309,7 +304,6 @@ describe('Preview Routing', () => {
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
buildOptions: {
pageUrlFormat: 'file',
legacyBuild: true
},
devOptions: {
trailingSlash: 'ignore',
@ -371,7 +365,6 @@ describe('Preview Routing', () => {
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
buildOptions: {
pageUrlFormat: 'file',
legacyBuild: true
},
devOptions: {
trailingSlash: 'ignore',

3
packages/astro/test/remote-css.test.js
View file

@ -8,7 +8,6 @@ describe('Remote CSS', () => {
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/remote-css/',
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
});
await fixture.build();
});
@ -18,7 +17,7 @@ describe('Remote CSS', () => {
const $ = cheerio.load(html);
const relPath = $('link').attr('href');
const css = await fixture.readFile('/' + relPath);
const css = await fixture.readFile(relPath);
expect(css).to.match(/https:\/\/unpkg.com\/open-props/);
expect(css).to.match(/body/);

4
packages/astro/test/static-build-page-url-format.test.js
View file

@ -23,12 +23,12 @@ describe("Static build - pageUrlFormat: 'file'", () => {
});
it('Builds pages in root', async () => {
const html = await fixture.readFile('/subpath/one.html');
const html = await fixture.readFile('/one.html');
expect(html).to.be.a('string');
});
it('Builds pages in subfolders', async () => {
const html = await fixture.readFile('/subpath/sub/page.html');
const html = await fixture.readFile('/sub/page.html');
expect(html).to.be.a('string');
});
});

32
packages/astro/test/static-build.test.js
View file

@ -25,12 +25,12 @@ describe('Static build', () => {
});
it('Builds out .astro pages', async () => {
const html = await fixture.readFile('/subpath/index.html');
const html = await fixture.readFile('/index.html');
expect(html).to.be.a('string');
});
it('can build pages using fetchContent', async () => {
const html = await fixture.readFile('/subpath/index.html');
const html = await fixture.readFile('/index.html');
const $ = cheerio.load(html);
const link = $('.posts a');
const href = link.attr('href');
@ -38,18 +38,18 @@ describe('Static build', () => {
});
it('Builds out .md pages', async () => {
const html = await fixture.readFile('/subpath/posts/thoughts/index.html');
const html = await fixture.readFile('/posts/thoughts/index.html');
expect(html).to.be.a('string');
});
it('Builds out .json files', async () => {
const content = await fixture.readFile('/subpath/company.json').then((text) => JSON.parse(text));
const content = await fixture.readFile('/company.json').then((text) => JSON.parse(text));
expect(content.name).to.equal('Astro Technology Company');
expect(content.url).to.equal('https://astro.build/');
});
it('Builds out async .json files', async () => {
const content = await fixture.readFile('/subpath/posts.json').then((text) => JSON.parse(text));
const content = await fixture.readFile('/posts.json').then((text) => JSON.parse(text));
expect(Array.isArray(content)).to.equal(true);
expect(content).deep.equal([
{
@ -67,20 +67,20 @@ describe('Static build', () => {
const slugs = ['thing1', 'thing2'];
for (const slug of slugs) {
const content = await fixture.readFile(`/subpath/data/${slug}.json`).then((text) => JSON.parse(text));
const content = await fixture.readFile(`/data/${slug}.json`).then((text) => JSON.parse(text));
expect(content.name).to.equal('Astro Technology Company');
expect(content.url).to.equal('https://astro.build/');
expect(content.slug).to.equal(slug);
}
});
function createFindEvidence(expected) {
function createFindEvidence(expected, prefix) {
return async function findEvidence(pathname) {
const html = await fixture.readFile(pathname);
const $ = cheerio.load(html);
const links = $('link[rel=stylesheet]');
for (const link of links) {
const href = $(link).attr('href');
const href = $(link).attr('href').slice('/subpath'.length);
const data = await fixture.readFile(addLeadingSlash(href));
if (expected.test(data)) {
return true;
@ -95,7 +95,7 @@ describe('Static build', () => {
const findEvidence = createFindEvidence(/height:( )*45vw/);
it('Page level CSS is added', async () => {
const found = await findEvidence('/subpath/index.html');
const found = await findEvidence('/index.html');
expect(found).to.equal(true, 'Did not find page-level CSS on this page');
});
});
@ -104,12 +104,12 @@ describe('Static build', () => {
const findEvidence = createFindEvidence(/var\(--c\)/);
it('Included on the index page', async () => {
const found = await findEvidence('/subpath/index.html');
const found = await findEvidence('/index.html');
expect(found).to.equal(true, 'Did not find shared CSS on this page');
});
it('Included on a md page', async () => {
const found = await findEvidence('/subpath/posts/thoughts/index.html');
const found = await findEvidence('/posts/thoughts/index.html');
expect(found).to.equal(true, 'Did not find shared CSS on this page');
});
});
@ -118,30 +118,30 @@ describe('Static build', () => {
const findEvidence = createFindEvidence(/var\(--c-black\)/);
it('Is included in the index CSS', async () => {
const found = await findEvidence('/subpath/index.html');
const found = await findEvidence('/index.html');
expect(found).to.equal(true, 'Did not find shared CSS module code');
});
});
describe('Hoisted scripts', () => {
it('Get bundled together on the page', async () => {
const html = await fixture.readFile('/subpath/hoisted/index.html');
const html = await fixture.readFile('/hoisted/index.html');
const $ = cheerio.load(html);
expect($('script[type="module"]').length).to.equal(1, 'hoisted script added');
});
it('Do not get added to the wrong page', async () => {
const hoistedHTML = await fixture.readFile('/subpath/hoisted/index.html');
const hoistedHTML = await fixture.readFile('/hoisted/index.html');
const $ = cheerio.load(hoistedHTML);
const href = $('script[type="module"]').attr('src');
const indexHTML = await fixture.readFile('/subpath/index.html');
const indexHTML = await fixture.readFile('/index.html');
const $$ = cheerio.load(indexHTML);
expect($$(`script[src="${href}"]`).length).to.equal(0, 'no script added to different page');
});
});
it('honors ssr config', async () => {
const html = await fixture.readFile('/subpath/index.html');
const html = await fixture.readFile('/index.html');
const $ = cheerio.load(html);
expect($('#ssr-config').text()).to.equal('testing');
});