Updates the dev server to handle multiple routes matching the same URL (#4087)

* updates the dev server to handle multiple routes matching the same URL

* Adding an error message when multiple routes match in SSR

* resetting the flag used by the `calledTwiceTest`

* injected routes should be sorted with a higher priority than user-defined routes

* adding routing priority tests for injected routes

* chore: add changeset

* adding a dev test to make sure getStaticPaths is called once

1 files changed, 114 insertions, 163 deletions

diff --git a/packages/astro/test/routing-priority.test.js b/packages/astro/test/routing-priority.test.js
index ef2daf006..ca093fd5c 100644
--- a/packages/astro/test/routing-priority.test.js
+++ b/packages/astro/test/routing-priority.test.js
@@ -1,140 +1,140 @@
 import { expect } from 'chai';
 import { load as cheerioLoad } from 'cheerio';
-import path from 'path';
 import { loadFixture } from './test-utils.js';
 
-let fixture;
-
 const routes = [
 	{
+		description: 'matches / to index.astro',
 		url: '/',
 		h1: 'index.astro',
 	},
 	{
+		description: 'matches /slug-1 to [slug].astro',
+		url: '/slug-1',
+		h1: '[slug].astro',
+		p: 'slug-1',
+	},
+	{
+		description: 'matches /slug-2 to [slug].astro',
+		url: '/slug-2',
+		h1: '[slug].astro',
+		p: 'slug-2',
+	},
+	{
+		description: 'matches /page-1 to [page].astro',
+		url: '/page-1',
+		h1: '[page].astro',
+		p: 'page-1',
+	},
+	{
+		description: 'matches /page-2 to [page].astro',
+		url: '/page-2',
+		h1: '[page].astro',
+		p: 'page-2',
+	},
+	{
+		description: 'matches /posts/post-1 to posts/[pid].astro',
 		url: '/posts/post-1',
 		h1: 'posts/[pid].astro',
 		p: 'post-1',
 	},
 	{
+		description: 'matches /posts/post-2 to posts/[pid].astro',
 		url: '/posts/post-2',
 		h1: 'posts/[pid].astro',
 		p: 'post-2',
 	},
 	{
+		description: 'matches /posts/1/2 to posts/[...slug].astro',
 		url: '/posts/1/2',
 		h1: 'posts/[...slug].astro',
 		p: '1/2',
 	},
 	{
+		description: 'matches /de to de/index.astro',
 		url: '/de',
-		h1: 'de/index.astro',
-	},
-	{
-		url: '/de/',
-		h1: 'de/index.astro',
-	},
-	{
-		url: '/de/index.html',
-		h1: 'de/index.astro',
+		h1: 'de/index.astro (priority)',
 	},
 	{
+		description: 'matches /en to [lang]/index.astro',
 		url: '/en',
 		h1: '[lang]/index.astro',
 		p: 'en',
 	},
 	{
-		url: '/en/',
-		h1: '[lang]/index.astro',
-		p: 'en',
-	},
-	{
-		url: '/en/index.html',
-		h1: '[lang]/index.astro',
-		p: 'en',
-	},
-	{
+		description: 'matches /de/1/2 to [lang]/[...catchall].astro',
 		url: '/de/1/2',
 		h1: '[lang]/[...catchall].astro',
 		p: 'de | 1/2',
 	},
 	{
+		description: 'matches /en/1/2 to [lang]/[...catchall].astro',
 		url: '/en/1/2',
 		h1: '[lang]/[...catchall].astro',
 		p: 'en | 1/2',
 	},
+	{
+		description: 'matches /injected to to-inject.astro',
+		url: '/injected',
+		h1: 'to-inject.astro'
+	},
+	{
+		description: 'matches /_injected to to-inject.astro',
+		url: '/_injected',
+		h1: 'to-inject.astro'
+	},
+	{
+		description: 'matches /injected-1 to [id].astro',
+		url: '/injected-1',
+		h1: '[id].astro',
+		p: 'injected-1'
+	},
+	{
+		description: 'matches /injected-2 to [id].astro',
+		url: '/injected-2',
+		h1: '[id].astro',
+		p: 'injected-2'
+	}
 ];
 
-describe('Routing priority', () => {
-	before(async () => {
-		fixture = await loadFixture({
-			root: './fixtures/routing-priority/',
-		});
-	});
+function appendForwardSlash(path) {
+	return path.endsWith('/') ? path : path + '/';
+}
 
+describe('Routing priority', () => {
 	describe('build', () => {
+		let fixture;
+
 		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/routing-priority/',
+			});
 			await fixture.build();
 		});
 
-		it('matches / to index.astro', async () => {
-			const html = await fixture.readFile('/index.html');
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('index.astro');
-		});
-
-		it('matches /posts/post-1 to posts/[pid].astro', async () => {
-			const html = await fixture.readFile('/posts/post-1/index.html');
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('posts/[pid].astro');
-			expect($('p').text()).to.equal('post-1');
-		});
-
-		it('matches /posts/1/2 to posts/[...slug].astro', async () => {
-			const html = await fixture.readFile('/posts/1/2/index.html');
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('posts/[...slug].astro');
-			expect($('p').text()).to.equal('1/2');
-		});
-
-		it('matches /de to de/index.astro', async () => {
-			const html = await fixture.readFile('/de/index.html');
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('de/index.astro (priority)');
-		});
-
-		it('matches /en to [lang]/index.astro', async () => {
-			const html = await fixture.readFile('/en/index.html');
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('[lang]/index.astro');
-			expect($('p').text()).to.equal('en');
-		});
+		routes.forEach(({ description, url, h1, p }) => {
+			it(description, async () => {
+				const html = await fixture.readFile(`${appendForwardSlash(url)}index.html`);
+				const $ = cheerioLoad(html);
 
-		it('matches /de/1/2 to [lang]/[...catchall].astro', async () => {
-			const html = await fixture.readFile('/de/1/2/index.html');
-			const $ = cheerioLoad(html);
+				expect($('h1').text()).to.equal(h1);
 
-			expect($('h1').text()).to.equal('[lang]/[...catchall].astro');
-			expect($('p').text()).to.equal('de | 1/2');
-		});
-
-		it('matches /en/1/2 to [lang]/[...catchall].astro', async () => {
-			const html = await fixture.readFile('/en/1/2/index.html');
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('[lang]/[...catchall].astro');
-			expect($('p').text()).to.equal('en | 1/2');
+				if (p) {
+					expect($('p').text()).to.equal(p);
+				}
+			});
 		});
 	});
 
 	describe('dev', () => {
+		let fixture;
 		let devServer;
 
 		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/routing-priority/',
+			});
+
 			devServer = await fixture.startDevServer();
 		});
 
@@ -142,91 +142,42 @@ describe('Routing priority', () => {
 			await devServer.stop();
 		});
 
-		it('matches / to index.astro', async () => {
-			const html = await fixture.fetch('/').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('index.astro');
-		});
-
-		it('matches /posts/post-1 to /posts/[pid].astro', async () => {
-			const html = await fixture.fetch('/posts/post-1').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('posts/[pid].astro');
-			expect($('p').text()).to.equal('post-1');
-		});
-
-		it('matches /posts/1/2 to /posts/[...slug].astro', async () => {
-			const html = await fixture.fetch('/posts/1/2').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('posts/[...slug].astro');
-			expect($('p').text()).to.equal('1/2');
-		});
-
-		it('matches /de to de/index.astro', async () => {
-			const html = await fixture.fetch('/de').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('de/index.astro (priority)');
-			expect($('p').text()).to.equal('de');
-		});
-
-		it('matches /de/ to de/index.astro', async () => {
-			const html = await fixture.fetch('/de/').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('de/index.astro (priority)');
-			expect($('p').text()).to.equal('de');
-		});
-
-		it('matches /de/index.html to de/index.astro', async () => {
-			const html = await fixture.fetch('/de/index.html').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('de/index.astro (priority)');
-			expect($('p').text()).to.equal('de');
-		});
-
-		it('matches /en to [lang]/index.astro', async () => {
-			const html = await fixture.fetch('/en').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('[lang]/index.astro');
-			expect($('p').text()).to.equal('en');
-		});
-
-		it('matches /en/ to [lang]/index.astro', async () => {
-			const html = await fixture.fetch('/en/').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('[lang]/index.astro');
-			expect($('p').text()).to.equal('en');
-		});
-
-		it('matches /en/index.html to de/index.astro', async () => {
-			const html = await fixture.fetch('/en/index.html').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('[lang]/index.astro');
-			expect($('p').text()).to.equal('en');
-		});
-
-		it('matches /de/1/2 to [lang]/[...catchall].astro', async () => {
-			const html = await fixture.fetch('/de/1/2/index.html').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('[lang]/[...catchall].astro');
-			expect($('p').text()).to.equal('de | 1/2');
-		});
-
-		it('matches /en/1/2 to [lang]/[...catchall].astro', async () => {
-			const html = await fixture.fetch('/en/1/2/index.html').then((res) => res.text());
-			const $ = cheerioLoad(html);
-
-			expect($('h1').text()).to.equal('[lang]/[...catchall].astro');
-			expect($('p').text()).to.equal('en | 1/2');
+		routes.forEach(({ description, url, h1, p }) => {
+			// checks URLs as written above
+			it(description, async () => {
+				const html = await fixture.fetch(url).then((res) => res.text());
+				const $ = cheerioLoad(html);
+	
+				expect($('h1').text()).to.equal(h1);
+
+				if (p) {
+					expect($('p').text()).to.equal(p);
+				}
+			});
+
+			// checks with trailing slashes, ex: '/de/' instead of '/de'
+			it(`${description} (trailing slash)`, async () => {
+				const html = await fixture.fetch(appendForwardSlash(url)).then((res) => res.text());
+				const $ = cheerioLoad(html);
+	
+				expect($('h1').text()).to.equal(h1);
+
+				if (p) {
+					expect($('p').text()).to.equal(p);
+				}
+			});
+
+			// checks with index.html, ex: '/de/index.html' instead of '/de'
+			it(`${description} (index.html)`, async () => {
+				const html = await fixture.fetch(`${appendForwardSlash(url)}index.html`).then((res) => res.text());
+				const $ = cheerioLoad(html);
+	
+				expect($('h1').text()).to.equal(h1);
+
+				if (p) {
+					expect($('p').text()).to.equal(p);
+				}
+			});
 		});
 	});
 });