Add tests: Special chars in component import paths (#4263)

* Add tests: Special chars in component import paths

* Fix ESLint warnings, add Windows dev exclusion

* Crude fix

* chore: update compiler

* chore: bump compiler

* fix: remove decodeURI

* Fix tests and skip them for now

Co-authored-by: Princesseuh <[email protected]>
Co-authored-by: Nate Moore <[email protected]>

.eslintrc.cjs

@@ -19,4 +19,18 @@ module.exports = {
  '@typescript-eslint/no-shadow': ['error'],
  'no-only-tests/no-only-tests': 'error',
  },
+ overrides: [
+ {
+ files: ['packages/**/test/*.js', 'packages/**/*.test.js'],
+ env: {
+ mocha: true,
+ },
+ globals: {
+ globalThis: false, // false means read-only
+ },
+ rules: {
+ 'no-console': 'off',
+ },
+ },
+ ],
 };

packages/astro/test/fixtures/special-chars-in-component-imports/astro.config.mjs

@@ -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()],
+});

packages/astro/test/fixtures/special-chars-in-component-imports/package.json

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

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/^--with-carets/Counter.tsx

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

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/and-rockets-🚀/Counter.tsx

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

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/now-100%-better/Counter.tsx

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

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/with some spaces/Counter.tsx

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

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/with-(round-brackets)/Counter.tsx

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

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/with-[square-brackets]/Counter.tsx

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

packages/astro/test/fixtures/special-chars-in-component-imports/src/pages/index.astro

@@ -0,0 +1,19 @@
+---
+import CaretCounter from '../components/^--with-carets/Counter';
+import RocketCounter from '../components/and-rockets-🚀/Counter';
+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>

packages/astro/test/fixtures/special-chars-in-component-imports/src/pages/mdx.mdx

@@ -0,0 +1,15 @@
+import CaretCounter from '../components/^--with-carets/Counter'
+import RocketCounter from '../components/and-rockets-🚀/Counter'
+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'
+
+# Special chars in component import paths from an .mdx file
+
+<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 />

packages/astro/test/special-chars-in-component-imports.test.js

@@ -0,0 +1,126 @@
+import { expect } from 'chai';
+import { load as cheerioLoad } from 'cheerio';
+import { isWindows, loadFixture } from './test-utils.js';
+
+describe.skip('Special chars in component import paths', () => {
+ /** @type {import('./test-utils').Fixture} */
+ let fixture;
+
+ const componentIds = ['caret', 'rocket', 'percent', '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);
+ });
+ });
+});