Skip to content

Commit

Permalink
Add basic MDX tests
Browse files Browse the repository at this point in the history
  • Loading branch information
remcohaszing committed Apr 7, 2023
1 parent 181f03e commit 1322e33
Show file tree
Hide file tree
Showing 2 changed files with 255 additions and 1 deletion.
165 changes: 164 additions & 1 deletion src/basic-languages/mdx/mdx.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,167 @@

import { testTokenization } from '../test/testRunner';

testTokenization('mdx', []);
testTokenization(
['mdx', 'yaml'],
[
// headers
[
{
line: '# header 1',
tokens: [{ startIndex: 0, type: 'keyword.mdx' }]
},
{
line: '## header 2',
tokens: [{ startIndex: 0, type: 'keyword.mdx' }]
},
{
line: '### header 3',
tokens: [{ startIndex: 0, type: 'keyword.mdx' }]
},
{
line: '#### header 4',
tokens: [{ startIndex: 0, type: 'keyword.mdx' }]
},
{
line: '##### header 5',
tokens: [{ startIndex: 0, type: 'keyword.mdx' }]
},
{
line: '###### header 6',
tokens: [{ startIndex: 0, type: 'keyword.mdx' }]
}
],

// Lists
[
{
line: '- apple',
tokens: [
{ startIndex: 0, type: 'keyword.mdx' },
{ startIndex: 1, type: 'white.mdx' },
{ startIndex: 2, type: '' }
]
},
{
line: '* pear',
tokens: [
{ startIndex: 0, type: 'keyword.mdx' },
{ startIndex: 1, type: 'white.mdx' },
{ startIndex: 2, type: '' }
]
},
{
line: '+ pineapple',
tokens: [
{ startIndex: 0, type: 'keyword.mdx' },
{ startIndex: 1, type: 'white.mdx' },
{ startIndex: 2, type: '' }
]
},
{
line: '1. orange',
tokens: [
{ startIndex: 0, type: 'number.mdx' },
{ startIndex: 2, type: 'white.mdx' },
{ startIndex: 3, type: '' }
]
}
],

// Frontmatter
[
{
line: '---',
tokens: [{ startIndex: 0, type: 'meta.content.mdx' }]
},
{
line: 'frontmatter: yaml',
tokens: [
{ startIndex: 0, type: 'type.yaml' },
{ startIndex: 11, type: 'operators.yaml' },
{ startIndex: 12, type: 'white.yaml' },
{ startIndex: 13, type: 'string.yaml' }
]
},
{
line: '---',
tokens: [{ startIndex: 0, type: 'meta.content.mdx' }]
}
],

// links
[
{
line: '[MDX](https://mdxjs.com)',
tokens: [
{ startIndex: 0, type: '' },
{ startIndex: 1, type: 'type.identifier.mdx' },
{ startIndex: 4, type: '' },
{ startIndex: 6, type: 'string.link.mdx' },
{ startIndex: 23, type: '' }
]
},
{
line: '[monaco][monaco]',
tokens: [
{ startIndex: 0, type: '' },
{ startIndex: 1, type: 'type.identifier.mdx' },
{ startIndex: 7, type: '' },
{ startIndex: 9, type: 'type.identifier.mdx' },
{ startIndex: 15, type: '' }
]
},
{
line: '[monaco][]',
tokens: [
{ startIndex: 0, type: '' },
{ startIndex: 1, type: 'type.identifier.mdx' },
{ startIndex: 9, type: '' }
]
},
{
line: '[monaco]',
tokens: [
{ startIndex: 0, type: '' },
{ startIndex: 1, type: 'type.identifier.mdx' },
{ startIndex: 7, type: '' }
]
},
{
line: '[monaco]: https://github.com/microsoft/monaco-editor',
tokens: [
{ startIndex: 0, type: '' },
{ startIndex: 1, type: 'type.identifier.mdx' },
{ startIndex: 7, type: '' },
{ startIndex: 10, type: 'string.link.mdx' }
]
}
],

// JSX
[
{
line: '<div>**child**</div>',
tokens: [
{ startIndex: 0, type: 'type.identifier.mdx' },
// This is incorrect. MDX children that start on the same line are JSX, not markdown
{ startIndex: 5, type: 'strong.mdx' },
{ startIndex: 14, type: 'type.identifier.mdx' }
]
},
{
line: '{console.log("This is JavaScript")}',
tokens: [
{ startIndex: 0, type: 'delimiter.bracket.mdx' },
{ startIndex: 1, type: 'identifier.js' },
{ startIndex: 8, type: 'delimiter.js' },
{ startIndex: 9, type: 'identifier.js' },
{ startIndex: 12, type: 'delimiter.parenthesis.js' },
{ startIndex: 13, type: 'string.js' },
{ startIndex: 33, type: 'delimiter.parenthesis.js' },
{ startIndex: 34, type: 'delimiter.bracket.mdx' }
]
}
]
]
);
91 changes: 91 additions & 0 deletions website/src/website/data/home-samples/sample.mdx.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
---
title: Hello!
---

import {Chart} from './chart.js'
import population from './population.js'
import {External} from './some/place.js'

export const year = 2018
export const pi = 3.14

export function SomeComponent(props) {
const name = (props || {}).name || 'world'

return <div>
<p>Hi, {name}!</p>

<p>and some more things</p>
</div>
}

export function Local(props) {
return <span style={{color: 'red'}} {...props} />
}

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />

<div className="note">
> Some notable things in a block quote!
</div>

# Heading (rank 1)
## Heading 2
### 3
#### 4
##### 5
###### 6

> Block quote

* Unordered
* List

1. Ordered
2. List

A paragraph, introducing a thematic break:

---

```js
// Get an element.
const element = document.querySelectorAll('#hi')

// Add a class.
element.classList.add('asd')
```

a [link](https://example.com), an ![image](./image.png), some *emphasis*,
something **strong**, and finally a little `code()`.

<Component
open
x={1}
label={'this is a string, *not* markdown!'}
icon={<Icon />}
/>

Two 🍰 is: {Math.PI * 2}

{(function () {
const guess = Math.random()

if (guess > 0.66) {
return <span style={{color: 'tomato'}}>Look at us.</span>
}

if (guess > 0.33) {
return <span style={{color: 'violet'}}>Who would have guessed?!</span>
}

return <span style={{color: 'goldenrod'}}>Not me.</span>
})()}

{/* A comment! */}

0 comments on commit 1322e33

Please sign in to comment.