diff --git a/packages/astro/test/astro-markdown-shiki.test.js b/packages/astro/test/astro-markdown-shiki.test.js index 982b30e8b5619..24ab7d2b30260 100644 --- a/packages/astro/test/astro-markdown-shiki.test.js +++ b/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', () => { diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/index.md b/packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/index.md index d2d756b95dc1f..535f448777911 100644 --- a/packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/index.md +++ b/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; +``` diff --git a/packages/create-astro/test/fixtures/not-empty/package.json b/packages/create-astro/test/fixtures/not-empty/package.json index 516149e6d0050..d3f61d640c001 100644 --- a/packages/create-astro/test/fixtures/not-empty/package.json +++ b/packages/create-astro/test/fixtures/not-empty/package.json @@ -6,4 +6,4 @@ "build": "astro build", "preview": "astro preview" } -} +} \ No newline at end of file diff --git a/packages/markdown/remark/test/shiki.test.js b/packages/markdown/remark/test/shiki.test.js index 601b7fabf6922..d856b54b7f25c 100644 --- a/packages/markdown/remark/test/shiki.test.js +++ b/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}', });