Add tests: Special chars in component import paths

This commit is contained in:
hippotastic 2022-08-11 15:33:34 +02:00
parent 51847a276f
commit 49663d3973
13 changed files with 277 additions and 0 deletions

View file

@ -0,0 +1,8 @@
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';
// https://astro.build/config
export default defineConfig({
integrations: [react(), mdx()],
});

View file

@ -0,0 +1,12 @@
{
"name": "@test/special-chars-in-component-imports",
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/mdx": "workspace:*",
"@astrojs/react": "workspace:*",
"astro": "workspace:*",
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}

View file

@ -0,0 +1,12 @@
import React, { useState } from 'react';
export default function Counter ({ id }) {
const [count, setCount] = useState(0);
return (
<div id={id}>
<div>{id}: {count}</div>
<button type="button" onClick={() => setCount(count+1)}>Increment</button>
</div>
);
}

View file

@ -0,0 +1,12 @@
import React, { useState } from 'react';
export default function Counter ({ id }) {
const [count, setCount] = useState(0);
return (
<div id={id}>
<div>{id}: {count}</div>
<button type="button" onClick={() => setCount(count+1)}>Increment</button>
</div>
);
}

View file

@ -0,0 +1,12 @@
import React, { useState } from 'react';
export default function Counter ({ id }) {
const [count, setCount] = useState(0);
return (
<div id={id}>
<div>{id}: {count}</div>
<button type="button" onClick={() => setCount(count+1)}>Increment</button>
</div>
);
}

View file

@ -0,0 +1,12 @@
import React, { useState } from 'react';
export default function Counter ({ id }) {
const [count, setCount] = useState(0);
return (
<div id={id}>
<div>{id}: {count}</div>
<button type="button" onClick={() => setCount(count+1)}>Increment</button>
</div>
);
}

View file

@ -0,0 +1,12 @@
import React, { useState } from 'react';
export default function Counter ({ id }) {
const [count, setCount] = useState(0);
return (
<div id={id}>
<div>{id}: {count}</div>
<button type="button" onClick={() => setCount(count+1)}>Increment</button>
</div>
);
}

View file

@ -0,0 +1,12 @@
import React, { useState } from 'react';
export default function Counter ({ id }) {
const [count, setCount] = useState(0);
return (
<div id={id}>
<div>{id}: {count}</div>
<button type="button" onClick={() => setCount(count+1)}>Increment</button>
</div>
);
}

View file

@ -0,0 +1,12 @@
import React, { useState } from 'react';
export default function Counter ({ id }) {
const [count, setCount] = useState(0);
return (
<div id={id}>
<div>{id}: {count}</div>
<button type="button" onClick={() => setCount(count+1)}>Increment</button>
</div>
);
}

View file

@ -0,0 +1,20 @@
---
import CaretCounter from '../components/^--with-carets/Counter';
import RocketCounter from '../components/and-rockets-🚀/Counter';
// Leaving this one out for now as it causes a compiler panic :)
// import PercentCounter from '../components/now-100%-better/Counter';
import SpaceCounter from '../components/with some spaces/Counter';
import RoundBracketCounter from '../components/with-(round-brackets)/Counter';
import SquareBracketCounter from '../components/with-[square-brackets]/Counter';
---
<html>
<body>
<h1>Special chars in component import paths from an .astro file</h1>
<CaretCounter id="caret" client:visible />
<RocketCounter id="rocket" client:visible />
<!-- <PercentCounter id="percent" client:visible /> -->
<SpaceCounter id="space" client:visible />
<RoundBracketCounter id="round-bracket" client:visible />
<SquareBracketCounter id="square-bracket" client:visible />
</body>
</html>

View file

@ -0,0 +1,13 @@
import CaretCounter from '../components/^--with-carets/Counter'
import RocketCounter from '../components/and-rockets-🚀/Counter'
import SpaceCounter from '../components/with some spaces/Counter'
import RoundBracketCounter from '../components/with-(round-brackets)/Counter'
import SquareBracketCounter from '../components/with-[square-brackets]/Counter'
# Special chars in component import paths from an .mdx file
<CaretCounter id="caret" client:visible />
<RocketCounter id="rocket" client:visible />
<SpaceCounter id="space" client:visible />
<RoundBracketCounter id="round-bracket" client:visible />
<SquareBracketCounter id="square-bracket" client:visible />

View file

@ -0,0 +1,126 @@
import { expect } from 'chai';
import { load as cheerioLoad } from 'cheerio';
import { isWindows, loadFixture } from './test-utils.js';
describe('Special chars in component import paths', () => {
/** @type {import('./test-utils').Fixture} */
let fixture;
const componentIds = ['caret', 'rocket', 'space', 'round-bracket', 'square-bracket'];
before(async () => {
fixture = await loadFixture({
root: './fixtures/special-chars-in-component-imports/',
});
});
describe('build', () => {
before(async () => {
await fixture.build();
});
it('Build succeeds', async () => {
const html = await fixture.readFile('/index.html');
expect(html).to.contain('<html>');
});
it('Special chars in imports work from .astro files', async () => {
const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html);
// Test 1: Correct page
expect($('h1').text()).to.contain('.astro');
// Test 2: All components exist
componentIds.forEach((componentId) => {
expect($(`#${componentId}`), `Component #${componentId} does not exist`).to.have.lengthOf(1);
});
// Test 3: Component contents were rendered properly
componentIds.forEach((componentId) => {
expect($(`#${componentId} > div`).text()).to.equal(`${componentId}: 0`);
});
// Test 4: There is an island for each component
expect($('astro-island[uid]')).to.have.lengthOf(componentIds.length);
});
it('Special chars in imports work from .mdx files', async () => {
const html = await fixture.readFile('/mdx/index.html');
const $ = cheerioLoad(html);
// Test 1: Correct page
expect($('h1').text()).to.contain('.mdx');
// Test 2: All components exist
componentIds.forEach((componentId) => {
expect($(`#${componentId}`), `Component #${componentId} does not exist`).to.have.lengthOf(1);
});
// Test 3: Component contents were rendered properly
componentIds.forEach((componentId) => {
expect($(`#${componentId} > div`).text()).to.equal(`${componentId}: 0`);
});
// Test 4: There is an island for each component
expect($('astro-island[uid]')).to.have.lengthOf(componentIds.length);
});
});
// if (isWindows) return;
describe('dev', () => {
let devServer;
before(async () => {
devServer = await fixture.startDevServer();
});
after(async () => {
await devServer.stop();
});
it('Special chars in imports work from .astro files', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerioLoad(html);
// Test 1: Correct page
expect($('h1').text()).to.contain('.astro');
// Test 2: All components exist
componentIds.forEach((componentId) => {
expect($(`#${componentId}`), `Component #${componentId} does not exist`).to.have.lengthOf(1);
});
// Test 3: Component contents were rendered properly
componentIds.forEach((componentId) => {
expect($(`#${componentId} > div`).text()).to.equal(`${componentId}: 0`);
});
// Test 4: There is an island for each component
expect($('astro-island[uid]')).to.have.lengthOf(componentIds.length);
});
it('Special chars in imports work from .mdx files', async () => {
const html = await fixture.fetch('/mdx').then((res) => res.text());
const $ = cheerioLoad(html);
// Test 1: Correct page
expect($('h1').text()).to.contain('.mdx');
// Test 2: All components exist
componentIds.forEach((componentId) => {
expect($(`#${componentId}`), `Component #${componentId} does not exist`).to.have.lengthOf(1);
});
// Test 3: Component contents were rendered properly
componentIds.forEach((componentId) => {
expect($(`#${componentId} > div`).text()).to.equal(`${componentId}: 0`);
});
// Test 4: There is an island for each component
expect($('astro-island[uid]')).to.have.lengthOf(componentIds.length);
});
});
});

14
pnpm-lock.yaml generated
View file

@ -1831,6 +1831,20 @@ importers:
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
packages/astro/test/fixtures/special-chars-in-component-imports:
specifiers:
'@astrojs/mdx': workspace:*
'@astrojs/react': workspace:*
astro: workspace:*
react: ^18.1.0
react-dom: ^18.1.0
dependencies:
'@astrojs/mdx': link:../../../../integrations/mdx
'@astrojs/react': link:../../../../integrations/react
astro: link:../../..
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
packages/astro/test/fixtures/ssr-api-route:
specifiers:
astro: workspace:*