test: add a test for lazily loaded shiki languages

This adds a test for ensuring highlighting happens when using a lazily
loaded language (typescript in this case).

packages/astro/test/astro-markdown-shiki.test.js

@@ -80,26 +80,42 @@ describe('Astro Markdown Shiki', () => {
 		});
 	});
 
-	describe('Custom langs', () => {
+	describe('Languages', () => {
 		let fixture;
+		let $;
 
 		before(async () => {
 			fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/langs/' });
 			await fixture.build();
-		});
-
-		it('Markdown file', async () => {
 			const html = await fixture.readFile('/index.html');
-			const $ = cheerio.load(html);
+			$ = cheerio.load(html);
+		});
 
-			const segments = $('.line').get(6).children;
+		it('custom language', async () => {
+			const lang = $('.astro-code').get(0);
+			const segments = $('.line', lang).get(6).children;
 			assert.equal(segments.length, 2);
 			assert.equal(segments[0].attribs.style, 'color:#79B8FF');
 			assert.equal(segments[1].attribs.style, 'color:#E1E4E8');
+		});
 
+		it('handles unknown languages', () => {
 			const unknownLang = $('.astro-code').get(1);
 			assert.ok(unknownLang.attribs.style.includes('background-color:#24292e;color:#e1e4e8;'));
 		});
+
+		it('handles lazy loaded languages', () => {
+			const lang = $('.astro-code').get(2);
+			const segments = $('.line', lang).get(0).children;
+			assert.equal(segments.length, 7);
+			assert.equal(segments[0].attribs.style, 'color:#F97583');
+			assert.equal(segments[1].attribs.style, 'color:#79B8FF');
+			assert.equal(segments[2].attribs.style, 'color:#F97583');
+			assert.equal(segments[3].attribs.style, 'color:#79B8FF');
+			assert.equal(segments[4].attribs.style, 'color:#F97583');
+			assert.equal(segments[5].attribs.style, 'color:#79B8FF');
+			assert.equal(segments[6].attribs.style, 'color:#E1E4E8');
+		});
 	});
 
 	describe('Wrapping behaviours', () => {

packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/index.md

@@ -24,3 +24,7 @@ fin
 ```unknown
 This language does not exist
 ```
+
+```ts
+const someTypeScript: number = 5;
+```

packages/create-astro/test/fixtures/not-empty/package.json

@@ -6,4 +6,4 @@
     "build": "astro build",
     "preview": "astro preview"
   }
-}
+}

packages/markdown/remark/test/shiki.test.js

@@ -33,7 +33,7 @@ describe('shiki syntax highlighting', () => {
 	it('createShikiHighlighter works', async () => {
 		const highlighter = await createShikiHighlighter();
 
-		const html = highlighter.highlight('const foo = "bar";', 'js');
+		const html = await highlighter.highlight('const foo = "bar";', 'js');
 
 		assert.match(html, /astro-code github-dark/);
 		assert.match(html, /background-color:#24292e;color:#e1e4e8;/);
@@ -42,7 +42,7 @@ describe('shiki syntax highlighting', () => {
 	it('diff +/- text has user-select: none', async () => {
 		const highlighter = await createShikiHighlighter();
 
-		const html = highlighter.highlight(
+		const html = await highlighter.highlight(
 			`\
 - const foo = "bar";
 + const foo = "world";`,
@@ -57,7 +57,7 @@ describe('shiki syntax highlighting', () => {
 	it('renders attributes', async () => {
 		const highlighter = await createShikiHighlighter();
 
-		const html = highlighter.highlight(`foo`, 'js', {
+		const html = await highlighter.highlight(`foo`, 'js', {
 			attributes: { 'data-foo': 'bar', autofocus: true },
 		});
 
@@ -79,7 +79,7 @@ describe('shiki syntax highlighting', () => {
 			],
 		});
 
-		const html = highlighter.highlight(`foo`, 'js', {
+		const html = await highlighter.highlight(`foo`, 'js', {
 			meta: '{1,3-4}',
 		});