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 <princssdev@gmail.com>
Co-authored-by: Nate Moore <nate@astro.build>

.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/.eslintrc.cjs

@@ -1,5 +0,0 @@
-module.exports = {
-  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);
+		});
+	});
+});

pnpm-lock.yaml

@@ -1864,6 +1864,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:*