Migrate more tests to the static build (#2693)
* 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:
parent
9bd2ff8195
commit
34c2d1e8fc
45 changed files with 144 additions and 419 deletions
|
@ -54,8 +54,8 @@
|
||||||
"dev": "astro-scripts dev \"src/**/*.ts\"",
|
"dev": "astro-scripts dev \"src/**/*.ts\"",
|
||||||
"postbuild": "astro-scripts copy \"src/**/*.astro\"",
|
"postbuild": "astro-scripts copy \"src/**/*.astro\"",
|
||||||
"benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
|
"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": "mocha --parallel --timeout 20000 --ignore **/lit-element.test.js && mocha --timeout 20000 **/lit-element.test.js",
|
||||||
"test:match": "mocha --timeout 15000 -g"
|
"test:match": "mocha --timeout 20000 -g"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/compiler": "^0.12.0-next.5",
|
"@astrojs/compiler": "^0.12.0-next.5",
|
||||||
|
|
|
@ -38,8 +38,7 @@ export interface StaticBuildOptions {
|
||||||
const MAX_CONCURRENT_RENDERS = 10;
|
const MAX_CONCURRENT_RENDERS = 10;
|
||||||
|
|
||||||
function addPageName(pathname: string, opts: StaticBuildOptions): void {
|
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(/\/?$/, '/').replace(/^\//, ''));
|
||||||
opts.pageNames.push(pathname.replace(/\/?$/, pathrepl).replace(/^\//, ''));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Gives back a facadeId that is relative to the root.
|
// 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}`);
|
debug('build', `Generating: ${pathname}`);
|
||||||
|
|
||||||
const site = astroConfig.buildOptions.site;
|
const site = astroConfig.buildOptions.site;
|
||||||
const links = createLinkStylesheetElementSet(linkIds, site);
|
const links = createLinkStylesheetElementSet(linkIds.reverse(), site);
|
||||||
const scripts = createModuleScriptElementWithSrcSet(hoistedId ? [hoistedId] : [], site);
|
const scripts = createModuleScriptElementWithSrcSet(hoistedId ? [hoistedId] : [], site);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
@ -456,8 +455,7 @@ async function generateManifest(result: RollupOutput, opts: StaticBuildOptions,
|
||||||
}
|
}
|
||||||
|
|
||||||
function getOutRoot(astroConfig: AstroConfig): URL {
|
function getOutRoot(astroConfig: AstroConfig): URL {
|
||||||
const rootPathname = appendForwardSlash(astroConfig.buildOptions.site ? new URL(astroConfig.buildOptions.site).pathname : '/');
|
return new URL('./', astroConfig.dist);
|
||||||
return new URL('.' + rootPathname, astroConfig.dist);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getServerRoot(astroConfig: AstroConfig): URL {
|
function getServerRoot(astroConfig: AstroConfig): URL {
|
||||||
|
@ -483,9 +481,11 @@ function getOutFolder(astroConfig: AstroConfig, pathname: string, routeType: Rou
|
||||||
switch (astroConfig.buildOptions.pageUrlFormat) {
|
switch (astroConfig.buildOptions.pageUrlFormat) {
|
||||||
case 'directory':
|
case 'directory':
|
||||||
return new URL('.' + appendForwardSlash(pathname), outRoot);
|
return new URL('.' + appendForwardSlash(pathname), outRoot);
|
||||||
case 'file':
|
case 'file': {
|
||||||
return new URL('.' + appendForwardSlash(npath.dirname(pathname)), outRoot);
|
return new URL('.' + appendForwardSlash(npath.dirname(pathname)), outRoot);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -497,8 +497,10 @@ function getOutFile(astroConfig: AstroConfig, outFolder: URL, pathname: string,
|
||||||
switch (astroConfig.buildOptions.pageUrlFormat) {
|
switch (astroConfig.buildOptions.pageUrlFormat) {
|
||||||
case 'directory':
|
case 'directory':
|
||||||
return new URL('./index.html', outFolder);
|
return new URL('./index.html', outFolder);
|
||||||
case 'file':
|
case 'file': {
|
||||||
return new URL('./' + npath.basename(pathname) + '.html', outFolder);
|
const baseName = npath.basename(pathname);
|
||||||
|
return new URL('./' + (baseName || 'index') + '.html', outFolder);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import type * as vite from 'vite';
|
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 { LogOptions } from '../../logger.js';
|
||||||
import { fileURLToPath } from 'url';
|
import { fileURLToPath } from 'url';
|
||||||
import { getStylesForURL } from './css.js';
|
import { getStylesForURL } from './css.js';
|
||||||
|
@ -48,14 +48,15 @@ export async function preload({ astroConfig, filePath, viteServer }: SSROptions)
|
||||||
/** use Vite to SSR */
|
/** use Vite to SSR */
|
||||||
export async function render(renderers: Renderer[], mod: ComponentInstance, ssrOpts: SSROptions): Promise<string> {
|
export async function render(renderers: Renderer[], mod: ComponentInstance, ssrOpts: SSROptions): Promise<string> {
|
||||||
const { astroConfig, filePath, logging, mode, origin, pathname, route, routeCache, viteServer } = ssrOpts;
|
const { astroConfig, filePath, logging, mode, origin, pathname, route, routeCache, viteServer } = ssrOpts;
|
||||||
|
const legacy = astroConfig.buildOptions.legacyBuild;
|
||||||
|
|
||||||
// Add hoisted script tags
|
// Add hoisted script tags
|
||||||
const scripts = createModuleScriptElementWithSrcSet(
|
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
|
// Inject HMR scripts
|
||||||
if (mod.hasOwnProperty('$$metadata') && mode === 'development' && !astroConfig.buildOptions.legacyBuild) {
|
if (mod.hasOwnProperty('$$metadata') && mode === 'development' && !legacy) {
|
||||||
scripts.add({
|
scripts.add({
|
||||||
props: { type: 'module', src: '/@vite/client' },
|
props: { type: 'module', src: '/@vite/client' },
|
||||||
children: '',
|
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({
|
let content = await coreRender({
|
||||||
legacyBuild: astroConfig.buildOptions.legacyBuild,
|
legacyBuild: astroConfig.buildOptions.legacyBuild,
|
||||||
links: new Set(),
|
links,
|
||||||
logging,
|
logging,
|
||||||
markdownRender: astroConfig.markdownOptions.render,
|
markdownRender: astroConfig.markdownOptions.render,
|
||||||
mod,
|
mod,
|
||||||
|
@ -101,7 +124,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
|
||||||
const tags: vite.HtmlTagDescriptor[] = [];
|
const tags: vite.HtmlTagDescriptor[] = [];
|
||||||
|
|
||||||
// dev only: inject Astro HMR client
|
// dev only: inject Astro HMR client
|
||||||
if (mode === 'development' && astroConfig.buildOptions.legacyBuild) {
|
if (mode === 'development' && legacy) {
|
||||||
tags.push({
|
tags.push({
|
||||||
tag: 'script',
|
tag: 'script',
|
||||||
attrs: { type: 'module' },
|
attrs: { type: 'module' },
|
||||||
|
@ -113,6 +136,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
|
||||||
}
|
}
|
||||||
|
|
||||||
// inject CSS
|
// inject CSS
|
||||||
|
if(legacy) {
|
||||||
[...getStylesForURL(filePath, viteServer)].forEach((href) => {
|
[...getStylesForURL(filePath, viteServer)].forEach((href) => {
|
||||||
if (mode === 'development' && svelteStylesRE.test(href)) {
|
if (mode === 'development' && svelteStylesRE.test(href)) {
|
||||||
tags.push({
|
tags.push({
|
||||||
|
@ -132,6 +156,8 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// add injected tags
|
// add injected tags
|
||||||
content = injectTags(content, tags);
|
content = injectTags(content, tags);
|
||||||
|
|
|
@ -3,7 +3,6 @@ const STATUS_CODE_PAGE_REGEXP = /\/[0-9]{3}\/?$/;
|
||||||
/** Construct sitemap.xml given a set of URLs */
|
/** Construct sitemap.xml given a set of URLs */
|
||||||
export function generateSitemap(pages: string[]): string {
|
export function generateSitemap(pages: string[]): string {
|
||||||
// TODO: find way to respect <link rel="canonical"> URLs here
|
// TODO: find way to respect <link rel="canonical"> URLs here
|
||||||
|
|
||||||
// TODO: find way to exclude pages from sitemap
|
// TODO: find way to exclude pages from sitemap
|
||||||
|
|
||||||
// copy just in case original copy is needed
|
// copy just in case original copy is needed
|
||||||
|
|
|
@ -337,12 +337,14 @@ export function createAstro(filePathname: string, _site: string, projectRootStr:
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const toAttributeString = (value: any) => String(value).replace(/&/g, '&').replace(/"/g, '"');
|
const toAttributeString = (value: any, shouldEscape = true) => shouldEscape ?
|
||||||
|
String(value).replace(/&/g, '&').replace(/"/g, '"') :
|
||||||
|
value;
|
||||||
|
|
||||||
const STATIC_DIRECTIVES = new Set(['set:html', 'set:text']);
|
const STATIC_DIRECTIVES = new Set(['set:html', 'set:text']);
|
||||||
|
|
||||||
// A helper used to turn expressions into attribute key/value
|
// 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) {
|
if (value == null) {
|
||||||
return '';
|
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))) {
|
if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) {
|
||||||
return unescapeHTML(` ${key}`);
|
return unescapeHTML(` ${key}`);
|
||||||
} else {
|
} else {
|
||||||
return unescapeHTML(` ${key}="${toAttributeString(value)}"`);
|
return unescapeHTML(` ${key}="${toAttributeString(value, shouldEscape)}"`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adds support for `<Component {...value} />
|
// Adds support for `<Component {...value} />
|
||||||
export function spreadAttributes(values: Record<any, any>) {
|
export function spreadAttributes(values: Record<any, any>, shouldEscape = true) {
|
||||||
let output = '';
|
let output = '';
|
||||||
for (const [key, value] of Object.entries(values)) {
|
for (const [key, value] of Object.entries(values)) {
|
||||||
output += addAttribute(value, key);
|
output += addAttribute(value, key, shouldEscape);
|
||||||
}
|
}
|
||||||
return unescapeHTML(output);
|
return unescapeHTML(output);
|
||||||
}
|
}
|
||||||
|
@ -463,7 +465,7 @@ export async function renderPage(result: SSRResult, Component: AstroComponentFac
|
||||||
|
|
||||||
const links = Array.from(result.links)
|
const links = Array.from(result.links)
|
||||||
.filter(uniqueElements)
|
.filter(uniqueElements)
|
||||||
.map((link) => renderElement('link', link));
|
.map((link) => renderElement('link', link, false));
|
||||||
|
|
||||||
// inject styles & scripts at end of <head>
|
// inject styles & scripts at end of <head>
|
||||||
let headPos = template.indexOf('</head>');
|
let headPos = template.indexOf('</head>');
|
||||||
|
@ -513,7 +515,7 @@ function getHTMLElementName(constructor: typeof HTMLElement) {
|
||||||
return assignedName;
|
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`
|
// Do not print `hoist`, `lang`, `global`
|
||||||
const { lang: _, 'data-astro-id': astroId, 'define:vars': defineVars, ...props } = _props;
|
const { lang: _, 'data-astro-id': astroId, 'define:vars': defineVars, ...props } = _props;
|
||||||
if (defineVars) {
|
if (defineVars) {
|
||||||
|
@ -530,5 +532,5 @@ function renderElement(name: string, { props: _props, children = '' }: SSRElemen
|
||||||
children = defineScriptVars(defineVars) + '\n' + children;
|
children = defineScriptVars(defineVars) + '\n' + children;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return `<${name}${spreadAttributes(props)}>${children}</${name}>`;
|
return `<${name}${spreadAttributes(props, shouldEscape)}>${children}</${name}>`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,11 @@ describe('CSS', function () {
|
||||||
fixture = await loadFixture({
|
fixture = await loadFixture({
|
||||||
projectRoot: './fixtures/0-css/',
|
projectRoot: './fixtures/0-css/',
|
||||||
renderers: ['@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
|
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)
|
// get bundled CSS (will be hashed, hence DOM query)
|
||||||
const html = await fixture.readFile('/index.html');
|
const html = await fixture.readFile('/index.html');
|
||||||
$ = cheerio.load(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(/^\/?/, '/'));
|
bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -48,7 +52,8 @@ describe('CSS', function () {
|
||||||
expect(el2.attr('class')).to.equal(`visible ${scopedClass}`);
|
expect(el2.attr('class')).to.equal(`visible ${scopedClass}`);
|
||||||
|
|
||||||
// 2. check CSS
|
// 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 () => {
|
it('No <style> skips scoping', async () => {
|
||||||
|
@ -61,7 +66,8 @@ describe('CSS', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Using hydrated components adds astro-root styles', async () => {
|
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 () => {
|
it('<style lang="sass">', async () => {
|
||||||
|
@ -218,7 +224,7 @@ describe('CSS', function () {
|
||||||
it('<style>', async () => {
|
it('<style>', async () => {
|
||||||
const el = $('#svelte-css');
|
const el = $('#svelte-css');
|
||||||
const classes = el.attr('class').split(' ');
|
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
|
// 1. check HTML
|
||||||
expect(el.attr('class')).to.include('svelte-css');
|
expect(el.attr('class')).to.include('svelte-css');
|
||||||
|
@ -230,7 +236,7 @@ describe('CSS', function () {
|
||||||
it('<style lang="sass">', async () => {
|
it('<style lang="sass">', async () => {
|
||||||
const el = $('#svelte-sass');
|
const el = $('#svelte-sass');
|
||||||
const classes = el.attr('class').split(' ');
|
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
|
// 1. check HTML
|
||||||
expect(el.attr('class')).to.include('svelte-sass');
|
expect(el.attr('class')).to.include('svelte-sass');
|
||||||
|
@ -242,7 +248,7 @@ describe('CSS', function () {
|
||||||
it('<style lang="scss">', async () => {
|
it('<style lang="scss">', async () => {
|
||||||
const el = $('#svelte-scss');
|
const el = $('#svelte-scss');
|
||||||
const classes = el.attr('class').split(' ');
|
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
|
// 1. check HTML
|
||||||
expect(el.attr('class')).to.include('svelte-scss');
|
expect(el.attr('class')).to.include('svelte-scss');
|
||||||
|
@ -273,11 +279,6 @@ describe('CSS', function () {
|
||||||
expect((await fixture.fetch(href)).status).to.equal(200);
|
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
|
// Skipped until upstream fix lands
|
||||||
// Our fix: https://github.com/withastro/astro/pull/2106
|
// Our fix: https://github.com/withastro/astro/pull/2106
|
||||||
// OG Vite PR: https://github.com/vitejs/vite/pull/5940
|
// OG Vite PR: https://github.com/vitejs/vite/pull/5940
|
||||||
|
|
|
@ -8,7 +8,6 @@ describe('CSS Bundling (ESM import)', () => {
|
||||||
before(async () => {
|
before(async () => {
|
||||||
fixture = await loadFixture({
|
fixture = await loadFixture({
|
||||||
projectRoot: './fixtures/astro-css-bundling-import/',
|
projectRoot: './fixtures/astro-css-bundling-import/',
|
||||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
|
||||||
});
|
});
|
||||||
await fixture.build();
|
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}'));
|
expect(css.indexOf('p{color:green}')).to.be.greaterThan(css.indexOf('p{color:#00f}'));
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO: re-enable this
|
it('no empty CSS files', async () => {
|
||||||
it.skip('no empty CSS files', async () => {
|
|
||||||
for (const page of ['/page-1/index.html', '/page-2/index.html']) {
|
for (const page of ['/page-1/index.html', '/page-2/index.html']) {
|
||||||
const html = await fixture.readFile(page);
|
const html = await fixture.readFile(page);
|
||||||
const $ = cheerio.load(html);
|
const $ = cheerio.load(html);
|
||||||
|
|
|
@ -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;
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -5,11 +5,9 @@ import { loadFixture } from './test-utils.js';
|
||||||
// note: the hashes should be deterministic, but updating the file contents will change hashes
|
// 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).
|
// be careful not to test that the HTML simply contains CSS, because it always will! filename and quanity matter here (bundling).
|
||||||
const EXPECTED_CSS = {
|
const EXPECTED_CSS = {
|
||||||
'/index.html': ['./assets/index', './assets/typography'], // don’t match hashes, which change based on content
|
'/index.html': ['/assets/index'], // don’t match hashes, which change based on content
|
||||||
'/one/index.html': ['../assets/one'],
|
'/one/index.html': ['/assets/one'],
|
||||||
'/two/index.html': ['../assets/two', '../assets/typography'],
|
'/two/index.html': ['/assets/two'],
|
||||||
'/preload/index.html': ['../assets/preload'],
|
|
||||||
'/preload-merge/index.html': ['../assets/preload-merge'],
|
|
||||||
};
|
};
|
||||||
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'];
|
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 () => {
|
before(async () => {
|
||||||
fixture = await loadFixture({
|
fixture = await loadFixture({
|
||||||
projectRoot: './fixtures/astro-css-bundling/',
|
projectRoot: './fixtures/astro-css-bundling/',
|
||||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
|
||||||
});
|
});
|
||||||
await fixture.build({ mode: 'production' });
|
await fixture.build({ mode: 'production' });
|
||||||
});
|
});
|
||||||
|
@ -46,21 +43,7 @@ describe('CSS Bundling', function () {
|
||||||
expect(link).to.have.lengthOf(0);
|
expect(link).to.have.lengthOf(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// test 3: preload tags was not removed and attributes was preserved
|
// test 3: assert all bundled CSS was built and contains CSS
|
||||||
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
|
|
||||||
for (const url of builtCSS.keys()) {
|
for (const url of builtCSS.keys()) {
|
||||||
const css = await fixture.readFile(url);
|
const css = await fixture.readFile(url);
|
||||||
expect(css).to.be.ok;
|
expect(css).to.be.ok;
|
||||||
|
|
|
@ -8,7 +8,6 @@ describe('Dynamic components', () => {
|
||||||
before(async () => {
|
before(async () => {
|
||||||
fixture = await loadFixture({
|
fixture = await loadFixture({
|
||||||
projectRoot: './fixtures/astro-dynamic/',
|
projectRoot: './fixtures/astro-dynamic/',
|
||||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
});
|
});
|
||||||
|
@ -17,7 +16,7 @@ describe('Dynamic components', () => {
|
||||||
const html = await fixture.readFile('/index.html');
|
const html = await fixture.readFile('/index.html');
|
||||||
|
|
||||||
const $ = cheerio.load(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 () => {
|
it('Loads pages using client:media hydrator', async () => {
|
||||||
|
@ -26,11 +25,7 @@ describe('Dynamic components', () => {
|
||||||
const $ = cheerio.load(html);
|
const $ = cheerio.load(html);
|
||||||
|
|
||||||
// test 1: static value rendered
|
// test 1: static value rendered
|
||||||
let js = await fixture.readFile(new URL($('script').attr('src'), root).pathname);
|
expect($('script').length).to.equal(2); // One for each
|
||||||
expect(js).to.include(`value:"(max-width: 700px)"`);
|
|
||||||
|
|
||||||
// test 2: dynamic value rendered
|
|
||||||
expect(js).to.include(`value:"(max-width: 600px)"`);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Loads pages using client:only hydrator', async () => {
|
it('Loads pages using client:only hydrator', async () => {
|
||||||
|
|
|
@ -10,8 +10,7 @@ describe('Astro.*', () => {
|
||||||
projectRoot: './fixtures/astro-global/',
|
projectRoot: './fixtures/astro-global/',
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
site: 'https://mysite.dev/blog/',
|
site: 'https://mysite.dev/blog/',
|
||||||
sitemap: false,
|
sitemap: false
|
||||||
legacyBuild: true
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
|
@ -49,13 +48,6 @@ describe('Astro.*', () => {
|
||||||
expect($('#site').attr('href')).to.equal('https://mysite.dev/blog/');
|
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 () => {
|
it('Astro.fetchContent() returns the correct "url" property, including buildOptions.site subpath', async () => {
|
||||||
const html = await fixture.readFile('/posts/1/index.html');
|
const html = await fixture.readFile('/posts/1/index.html');
|
||||||
const $ = cheerio.load(html);
|
const $ = cheerio.load(html);
|
||||||
|
|
|
@ -20,9 +20,6 @@ describe('JSX', () => {
|
||||||
projectRoot: cwd,
|
projectRoot: cwd,
|
||||||
renderers: renderers.map((name) => `@astrojs/renderer-${name}`),
|
renderers: renderers.map((name) => `@astrojs/renderer-${name}`),
|
||||||
dist: new URL(`${cwd}dist-${n}/`, import.meta.url),
|
dist: new URL(`${cwd}dist-${n}/`, import.meta.url),
|
||||||
buildOptions: {
|
|
||||||
legacyBuild: true
|
|
||||||
}
|
|
||||||
}).then((fixture) => {
|
}).then((fixture) => {
|
||||||
fixtures[renderers.toString()] = fixture;
|
fixtures[renderers.toString()] = fixture;
|
||||||
return fixture.build();
|
return fixture.build();
|
||||||
|
|
|
@ -11,7 +11,6 @@ describe('Pagination', () => {
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
site: 'https://mysite.dev/blog/',
|
site: 'https://mysite.dev/blog/',
|
||||||
sitemap: false,
|
sitemap: false,
|
||||||
legacyBuild: true,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
|
|
|
@ -9,7 +9,6 @@ describe('Partial HTML ', async () => {
|
||||||
before(async () => {
|
before(async () => {
|
||||||
fixture = await loadFixture({
|
fixture = await loadFixture({
|
||||||
projectRoot: './fixtures/astro-partial-html/',
|
projectRoot: './fixtures/astro-partial-html/',
|
||||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
|
||||||
});
|
});
|
||||||
devServer = await fixture.startDevServer();
|
devServer = await fixture.startDevServer();
|
||||||
});
|
});
|
||||||
|
@ -26,7 +25,12 @@ describe('Partial HTML ', async () => {
|
||||||
expect(html).to.match(/^<!DOCTYPE html/);
|
expect(html).to.match(/^<!DOCTYPE html/);
|
||||||
|
|
||||||
// test 2: correct CSS present
|
// 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;}/);
|
expect(css).to.match(/\.astro-[^{]+{color:red;}/);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,6 @@ describe('Sitemaps', () => {
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
site: 'https://astro.build/',
|
site: 'https://astro.build/',
|
||||||
sitemap: true,
|
sitemap: true,
|
||||||
legacyBuild: true,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
|
@ -54,7 +53,6 @@ describe('Sitemaps served from subdirectory', () => {
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
site: 'https://astro.build/base-directory/',
|
site: 'https://astro.build/base-directory/',
|
||||||
sitemap: true,
|
sitemap: true,
|
||||||
legacyBuild: true
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
|
|
|
@ -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');
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -9,7 +9,6 @@ describe('Custom Elements', () => {
|
||||||
fixture = await loadFixture({
|
fixture = await loadFixture({
|
||||||
projectRoot: './fixtures/custom-elements/',
|
projectRoot: './fixtures/custom-elements/',
|
||||||
renderers: ['@astrojs/test-custom-element-renderer'],
|
renderers: ['@astrojs/test-custom-element-renderer'],
|
||||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
});
|
});
|
||||||
|
@ -48,8 +47,8 @@ describe('Custom Elements', () => {
|
||||||
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
|
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
|
||||||
|
|
||||||
// Hydration
|
// Hydration
|
||||||
// test 3: Component and polyfill scripts bundled together
|
// test 3: Component and polyfill scripts bundled separately
|
||||||
expect($('script[type=module]')).to.have.lengthOf(1);
|
expect($('script[type=module]')).to.have.lengthOf(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Polyfills are added even if not hydrating', async () => {
|
it('Polyfills are added even if not hydrating', async () => {
|
||||||
|
|
|
@ -19,7 +19,7 @@ import VueScoped from '../components/VueScoped.vue';
|
||||||
import VueScss from '../components/VueScss.vue';
|
import VueScss from '../components/VueScss.vue';
|
||||||
import ReactDynamic from '../components/ReactDynamic.jsx';
|
import ReactDynamic from '../components/ReactDynamic.jsx';
|
||||||
|
|
||||||
import importedUrl from '../styles/imported-url.css?url';
|
import '../styles/imported-url.css';
|
||||||
---
|
---
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
|
@ -36,10 +36,15 @@ import importedUrl from '../styles/imported-url.css?url';
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="/global.css">
|
<link rel="stylesheet" type="text/css" href="/global.css">
|
||||||
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}>
|
<style>
|
||||||
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.scss')}>
|
@import '../styles/linked.css';
|
||||||
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.sass')}>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href={importedUrl}>
|
<style lang="scss">
|
||||||
|
@import '../styles/linked.scss';
|
||||||
|
</style>
|
||||||
|
<style lang="sass">
|
||||||
|
@import '../styles/linked.sass'
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -1,3 +0,0 @@
|
||||||
p {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
|
@ -1,3 +0,0 @@
|
||||||
p {
|
|
||||||
color: green;
|
|
||||||
}
|
|
|
@ -1,7 +0,0 @@
|
||||||
p {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
outline: 1px solid red;
|
|
||||||
}
|
|
|
@ -4,9 +4,11 @@ import Nav from '../components/Nav.astro';
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href={Astro.resolve('../css/typography.css')}>
|
<style>
|
||||||
<link rel="stylesheet" href={Astro.resolve('../css/colors.css')}>
|
@import '../css/typography.css';
|
||||||
<link rel="stylesheet" href={Astro.resolve('../css/page-index.css')}>
|
@import '../css/colors.css';
|
||||||
|
@import '../css/page-index.css';
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Nav />
|
<Nav />
|
||||||
|
|
|
@ -4,8 +4,10 @@ import Nav from '../components/Nav.astro';
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href={Astro.resolve('../css/typography.css')} />
|
<style>
|
||||||
<link rel="stylesheet" href={Astro.resolve('../css/page-one.css')} />
|
@import '../css/typography.css';
|
||||||
|
@import '../css/page-one.css';
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Nav />
|
<Nav />
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -4,9 +4,11 @@ import Nav from '../components/Nav.astro';
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href={Astro.resolve('../css/typography.css')} />
|
<style>
|
||||||
<link rel="stylesheet" href={Astro.resolve('../css/colors.css')} />
|
@import '../css/typography.css';
|
||||||
<link rel="stylesheet" href={Astro.resolve('../css/page-two.css')} />
|
@import '../css/colors.css';
|
||||||
|
@import '../css/page-two.css';
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Nav />
|
<Nav />
|
||||||
|
|
|
@ -1,5 +0,0 @@
|
||||||
---
|
|
||||||
const penguinUrl = Astro.resolve('../images/penguin.png');
|
|
||||||
---
|
|
||||||
<img src={penguinUrl} />
|
|
||||||
<img src="../images/penguin.png" />
|
|
|
@ -1,6 +0,0 @@
|
||||||
---
|
|
||||||
const penguinUrl = Astro.resolve('./images/penguin.png');
|
|
||||||
---
|
|
||||||
<div id="inner-child">
|
|
||||||
<img src={penguinUrl} />
|
|
||||||
</div>
|
|
Binary file not shown.
Before Width: | Height: | Size: 76 KiB |
|
@ -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>
|
|
|
@ -1,8 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@astrojs/astro-test-builtins",
|
|
||||||
"version": "1.2.0",
|
|
||||||
"private": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@astrojs/astro-test-builtins-dep": "file:./packages/dep"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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+,
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@astrojs/astro-test-builtins-dep",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"module": "main.js",
|
|
||||||
"main": "main.js"
|
|
||||||
}
|
|
|
@ -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>
|
|
|
@ -1,12 +0,0 @@
|
||||||
---
|
|
||||||
import { builtinModules } from 'module';
|
|
||||||
---
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Bare node import</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>{Array.isArray(builtinModules)}</h1>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -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>
|
|
|
@ -16,7 +16,6 @@ describe('Preview Routing', () => {
|
||||||
trailingSlash: 'never',
|
trailingSlash: 'never',
|
||||||
port: 4000,
|
port: 4000,
|
||||||
},
|
},
|
||||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
previewServer = await fixture.preview();
|
previewServer = await fixture.preview();
|
||||||
|
@ -71,7 +70,6 @@ describe('Preview Routing', () => {
|
||||||
trailingSlash: 'always',
|
trailingSlash: 'always',
|
||||||
port: 4001,
|
port: 4001,
|
||||||
},
|
},
|
||||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
previewServer = await fixture.preview();
|
previewServer = await fixture.preview();
|
||||||
|
@ -130,7 +128,6 @@ describe('Preview Routing', () => {
|
||||||
trailingSlash: 'ignore',
|
trailingSlash: 'ignore',
|
||||||
port: 4002,
|
port: 4002,
|
||||||
},
|
},
|
||||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
previewServer = await fixture.preview();
|
previewServer = await fixture.preview();
|
||||||
|
@ -189,7 +186,6 @@ describe('Preview Routing', () => {
|
||||||
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
|
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
pageUrlFormat: 'file',
|
pageUrlFormat: 'file',
|
||||||
legacyBuild: true
|
|
||||||
},
|
},
|
||||||
devOptions: {
|
devOptions: {
|
||||||
trailingSlash: 'never',
|
trailingSlash: 'never',
|
||||||
|
@ -247,7 +243,6 @@ describe('Preview Routing', () => {
|
||||||
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
|
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
pageUrlFormat: 'file',
|
pageUrlFormat: 'file',
|
||||||
legacyBuild: true
|
|
||||||
},
|
},
|
||||||
devOptions: {
|
devOptions: {
|
||||||
trailingSlash: 'always',
|
trailingSlash: 'always',
|
||||||
|
@ -309,7 +304,6 @@ describe('Preview Routing', () => {
|
||||||
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
|
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
pageUrlFormat: 'file',
|
pageUrlFormat: 'file',
|
||||||
legacyBuild: true
|
|
||||||
},
|
},
|
||||||
devOptions: {
|
devOptions: {
|
||||||
trailingSlash: 'ignore',
|
trailingSlash: 'ignore',
|
||||||
|
@ -371,7 +365,6 @@ describe('Preview Routing', () => {
|
||||||
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
|
projectRoot: './fixtures/with-subpath-no-trailing-slash/',
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
pageUrlFormat: 'file',
|
pageUrlFormat: 'file',
|
||||||
legacyBuild: true
|
|
||||||
},
|
},
|
||||||
devOptions: {
|
devOptions: {
|
||||||
trailingSlash: 'ignore',
|
trailingSlash: 'ignore',
|
||||||
|
|
|
@ -8,7 +8,6 @@ describe('Remote CSS', () => {
|
||||||
before(async () => {
|
before(async () => {
|
||||||
fixture = await loadFixture({
|
fixture = await loadFixture({
|
||||||
projectRoot: './fixtures/remote-css/',
|
projectRoot: './fixtures/remote-css/',
|
||||||
buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
|
|
||||||
});
|
});
|
||||||
await fixture.build();
|
await fixture.build();
|
||||||
});
|
});
|
||||||
|
@ -18,7 +17,7 @@ describe('Remote CSS', () => {
|
||||||
const $ = cheerio.load(html);
|
const $ = cheerio.load(html);
|
||||||
|
|
||||||
const relPath = $('link').attr('href');
|
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(/https:\/\/unpkg.com\/open-props/);
|
||||||
expect(css).to.match(/body/);
|
expect(css).to.match(/body/);
|
||||||
|
|
|
@ -23,12 +23,12 @@ describe("Static build - pageUrlFormat: 'file'", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Builds pages in root', async () => {
|
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');
|
expect(html).to.be.a('string');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Builds pages in subfolders', async () => {
|
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');
|
expect(html).to.be.a('string');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -25,12 +25,12 @@ describe('Static build', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Builds out .astro pages', async () => {
|
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');
|
expect(html).to.be.a('string');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('can build pages using fetchContent', async () => {
|
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 $ = cheerio.load(html);
|
||||||
const link = $('.posts a');
|
const link = $('.posts a');
|
||||||
const href = link.attr('href');
|
const href = link.attr('href');
|
||||||
|
@ -38,18 +38,18 @@ describe('Static build', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Builds out .md pages', async () => {
|
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');
|
expect(html).to.be.a('string');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Builds out .json files', async () => {
|
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.name).to.equal('Astro Technology Company');
|
||||||
expect(content.url).to.equal('https://astro.build/');
|
expect(content.url).to.equal('https://astro.build/');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Builds out async .json files', async () => {
|
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(Array.isArray(content)).to.equal(true);
|
||||||
expect(content).deep.equal([
|
expect(content).deep.equal([
|
||||||
{
|
{
|
||||||
|
@ -67,20 +67,20 @@ describe('Static build', () => {
|
||||||
const slugs = ['thing1', 'thing2'];
|
const slugs = ['thing1', 'thing2'];
|
||||||
|
|
||||||
for (const slug of slugs) {
|
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.name).to.equal('Astro Technology Company');
|
||||||
expect(content.url).to.equal('https://astro.build/');
|
expect(content.url).to.equal('https://astro.build/');
|
||||||
expect(content.slug).to.equal(slug);
|
expect(content.slug).to.equal(slug);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function createFindEvidence(expected) {
|
function createFindEvidence(expected, prefix) {
|
||||||
return async function findEvidence(pathname) {
|
return async function findEvidence(pathname) {
|
||||||
const html = await fixture.readFile(pathname);
|
const html = await fixture.readFile(pathname);
|
||||||
const $ = cheerio.load(html);
|
const $ = cheerio.load(html);
|
||||||
const links = $('link[rel=stylesheet]');
|
const links = $('link[rel=stylesheet]');
|
||||||
for (const link of links) {
|
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));
|
const data = await fixture.readFile(addLeadingSlash(href));
|
||||||
if (expected.test(data)) {
|
if (expected.test(data)) {
|
||||||
return true;
|
return true;
|
||||||
|
@ -95,7 +95,7 @@ describe('Static build', () => {
|
||||||
const findEvidence = createFindEvidence(/height:( )*45vw/);
|
const findEvidence = createFindEvidence(/height:( )*45vw/);
|
||||||
|
|
||||||
it('Page level CSS is added', async () => {
|
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');
|
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\)/);
|
const findEvidence = createFindEvidence(/var\(--c\)/);
|
||||||
|
|
||||||
it('Included on the index page', async () => {
|
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');
|
expect(found).to.equal(true, 'Did not find shared CSS on this page');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Included on a md page', async () => {
|
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');
|
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\)/);
|
const findEvidence = createFindEvidence(/var\(--c-black\)/);
|
||||||
|
|
||||||
it('Is included in the index CSS', async () => {
|
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');
|
expect(found).to.equal(true, 'Did not find shared CSS module code');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Hoisted scripts', () => {
|
describe('Hoisted scripts', () => {
|
||||||
it('Get bundled together on the page', async () => {
|
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);
|
const $ = cheerio.load(html);
|
||||||
expect($('script[type="module"]').length).to.equal(1, 'hoisted script added');
|
expect($('script[type="module"]').length).to.equal(1, 'hoisted script added');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Do not get added to the wrong page', async () => {
|
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 $ = cheerio.load(hoistedHTML);
|
||||||
const href = $('script[type="module"]').attr('src');
|
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);
|
const $$ = cheerio.load(indexHTML);
|
||||||
expect($$(`script[src="${href}"]`).length).to.equal(0, 'no script added to different page');
|
expect($$(`script[src="${href}"]`).length).to.equal(0, 'no script added to different page');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('honors ssr config', async () => {
|
it('honors ssr config', async () => {
|
||||||
const html = await fixture.readFile('/subpath/index.html');
|
const html = await fixture.readFile('/index.html');
|
||||||
const $ = cheerio.load(html);
|
const $ = cheerio.load(html);
|
||||||
expect($('#ssr-config').text()).to.equal('testing');
|
expect($('#ssr-config').text()).to.equal('testing');
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue