Use inline snapshots for markup-syntax-highlight test
MODIFY
internal/markup-syntax-highlight/index.test.ts
internal/markup-syntax-highlight/index.test.ts
@@ -6,13 +6,14 @@ import {
AnsiHighlightOptions,
highlightCode,
} from "@internal/markup-syntax-highlight";
-import {AnyMarkups} from "@internal/markup/escape";
+import {concatMarkup, markup, readMarkup} from "@internal/markup";
+import {dedent} from "@internal/string-utils";
test(
"should highlight JS",
testCase(
"js",
- `
+ dedent`
function async foo(bar) {
for (let i = 0; i < bar.length; ++i) {
if (bar[i] === 123321) {
@@ -29,161 +30,12 @@ function async foo(bar) {
return (a, b) => { return a + b; };
}
`,
- (<AnyMarkups>[
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "",
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '<token type="keyword">function</token> <token type="keyword">async</token> <token type="function">foo</token><token type="punctuation">(</token><token type="variable">bar</token><token type="punctuation">)</token> <token type="punctuation">{</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="keyword">for</token> <token type="punctuation">(</token><token type="keyword">let</token> <token type="variable">i</token> <token type="operator">=</token> <token type="number">0</token><token type="punctuation">;</token> <token type="variable">i</token> <token type="operator">\\<</token> <token type="variable">bar</token><token type="punctuation">.</token><token type="variable">length</token><token type="punctuation">;</token> <token type="operator">++</token><token type="variable">i</token><token type="punctuation">)</token> <token type="punctuation">{</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t\t<token type="keyword">if</token> <token type="punctuation">(</token><token type="variable">bar</token><token type="punctuation">[</token><token type="variable">i</token><token type="punctuation">]</token> <token type="operator">===</token> <token type="number">123321</token><token type="punctuation">)</token> <token type="punctuation">{</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t\t\t<token type="keyword">return</token> <token type="boolean">true</token><token type="punctuation">;</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t\t<token type="punctuation">}</token> <token type="keyword">else</token> <token type="punctuation">(</token><token type="variable">bar</token><token type="punctuation">[</token><token type="variable">i</token><token type="punctuation">]</token> <token type="operator">===</token> <token type="string">`</token><token type="string">template string</token><token type="string">`</token><token type="punctuation">)</token> <token type="punctuation">{</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t\t\t<token type="keyword">return</token> <token type="boolean">false</token><token type="punctuation">;</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t\t<token type="punctuation">}</token> <token type="keyword">else</token> <token type="punctuation">{</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t\t\t<token type="keyword">return</token> \\<<token type="variable">Compenent</token> <token type="attr-name">attribute</token><token type="operator">=</token><token type="string">\\"JSX content\\"</token>>Test\\<<token type="operator">/</token><token type="variable">Component</token>><token type="punctuation">;</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t\t<token type="punctuation">}</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t\t<token type="variable">_something_invalid_</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t\t<token type="comment">/* This is a comment */</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="punctuation">}</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "",
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="keyword">return</token> <token type="punctuation">(</token><token type="variable">a</token><token type="punctuation">,</token> <token type="variable">b</token><token type="punctuation">)</token> <token type="operator">=></token> <token type="punctuation">{</token> <token type="keyword">return</token> <token type="variable">a</token> <token type="operator">+</token> <token type="variable">b</token><token type="punctuation">;</token> <token type="punctuation">}</token><token type="punctuation">;</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '<token type="punctuation">}</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "",
- },
- ],
- },
- ]),
+ (t, markup) =>
+ t.inlineSnapshot(
+ markup,
+ '<token type="keyword">function</token> <token type="keyword">async</token> <token type="function">foo</token><token type="punctuation">(</token><token type="variable">bar</token><token type="punctuation">)</token> <token type="punctuation">{</token>\n\t<token type="keyword">for</token> <token type="punctuation">(</token><token type="keyword">let</token> <token type="variable">i</token> <token type="operator">=</token> <token type="number">0</token><token type="punctuation">;</token> <token type="variable">i</token> <token type="operator">\\<</token> <token type="variable">bar</token><token type="punctuation">.</token><token type="variable">length</token><token type="punctuation">;</token> <token type="operator">++</token><token type="variable">i</token><token type="punctuation">)</token> <token type="punctuation">{</token>\n\t\t<token type="keyword">if</token> <token type="punctuation">(</token><token type="variable">bar</token><token type="punctuation">[</token><token type="variable">i</token><token type="punctuation">]</token> <token type="operator">===</token> <token type="number">123321</token><token type="punctuation">)</token> <token type="punctuation">{</token>\n\t\t\t<token type="keyword">return</token> <token type="boolean">true</token><token type="punctuation">;</token>\n\t\t<token type="punctuation">}</token> <token type="keyword">else</token> <token type="punctuation">(</token><token type="variable">bar</token><token type="punctuation">[</token><token type="variable">i</token><token type="punctuation">]</token> <token type="operator">===</token> <token type="variable">\\\\`template</token> <token type="variable">string\\\\`</token><token type="punctuation">)</token> <token type="punctuation">{</token>\n\t\t\t<token type="keyword">return</token> <token type="boolean">false</token><token type="punctuation">;</token>\n\t\t<token type="punctuation">}</token> <token type="keyword">else</token> <token type="punctuation">{</token>\n\t\t\t<token type="keyword">return</token> \\<<token type="variable">Compenent</token> <token type="attr-name">attribute</token><token type="operator">=</token><token type="string">\\"JSX content\\"</token>>Test\\<<token type="operator">/</token><token type="variable">Component</token>><token type="punctuation">;</token>\n\t\t<token type="punctuation">}</token>\n\t\t<token type="variable">_something_invalid_</token>\n\t\t<token type="comment">/* This is a comment */</token>\n\t<token type="punctuation">}</token>\n\n\t<token type="keyword">return</token> <token type="punctuation">(</token><token type="variable">a</token><token type="punctuation">,</token> <token type="variable">b</token><token type="punctuation">)</token> <token type="operator">=></token> <token type="punctuation">{</token> <token type="keyword">return</token> <token type="variable">a</token> <token type="operator">+</token> <token type="variable">b</token><token type="punctuation">;</token> <token type="punctuation">}</token><token type="punctuation">;</token>\n<token type="punctuation">}</token>',
+ )
+ ,
),
);
@@ -191,7 +43,7 @@ test(
"should highlight HTML",
testCase(
"html",
- `
+ dedent`
<img src="https://example.com/image.png"/>
<p class="test-class another_test_class">This is some text</p>
<div class="test-class another_test_class">
@@ -200,89 +52,12 @@ test(
<p class="test-class">This is another nested element</p>
</div>
`,
- (<AnyMarkups>[
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "",
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '<token type="punctuation">\\<</token><token type="tag">img</token> <token type="attr-name">src</token><token type="attr-equals">=</token><token type="attr-value">\\"https://example.com/image.png\\"</token><token type="punctuation">/></token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '<token type="punctuation">\\<</token><token type="tag">p</token> <token type="attr-name">class</token><token type="attr-equals">=</token><token type="attr-value">\\"test-class another_test_class\\"</token><token type="punctuation">></token>This is some text<token type="punctuation">\\</</token><token type="attr-name">p</token><token type="punctuation">></token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '<token type="punctuation">\\<</token><token type="tag">div</token> <token type="attr-name">class</token><token type="attr-equals">=</token><token type="attr-value">\\"test-class another_test_class\\"</token><token type="punctuation">></token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="punctuation">\\<</token><token type="tag">p</token> <token type="attr-name">class</token><token type="attr-equals">=</token><token type="attr-value">\\"test-class\\"</token><token type="punctuation">></token>This is a nested element<token type="punctuation">\\</</token><token type="attr-name">p</token><token type="punctuation">></token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "\tThis is some nested text",
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="punctuation">\\<</token><token type="tag">p</token> <token type="attr-name">class</token><token type="attr-equals">=</token><token type="attr-value">\\"test-class\\"</token><token type="punctuation">></token>This is another nested element<token type="punctuation">\\</</token><token type="attr-name">p</token><token type="punctuation">></token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '<token type="punctuation">\\</</token><token type="attr-name">div</token><token type="punctuation">></token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "",
- },
- ],
- },
- ]),
+ (t, markup) =>
+ t.inlineSnapshot(
+ markup,
+ '<token type="punctuation">\\<</token><token type="tag">img</token> <token type="attr-name">src</token><token type="attr-equals">=</token><token type="attr-value">\\"https://example.com/image.png\\"</token><token type="punctuation">/></token>\n<token type="punctuation">\\<</token><token type="tag">p</token> <token type="attr-name">class</token><token type="attr-equals">=</token><token type="attr-value">\\"test-class another_test_class\\"</token><token type="punctuation">></token>This is some text<token type="punctuation">\\</</token><token type="attr-name">p</token><token type="punctuation">></token>\n<token type="punctuation">\\<</token><token type="tag">div</token> <token type="attr-name">class</token><token type="attr-equals">=</token><token type="attr-value">\\"test-class another_test_class\\"</token><token type="punctuation">></token>\n\t<token type="punctuation">\\<</token><token type="tag">p</token> <token type="attr-name">class</token><token type="attr-equals">=</token><token type="attr-value">\\"test-class\\"</token><token type="punctuation">></token>This is a nested element<token type="punctuation">\\</</token><token type="attr-name">p</token><token type="punctuation">></token>\n\tThis is some nested text\n\t<token type="punctuation">\\<</token><token type="tag">p</token> <token type="attr-name">class</token><token type="attr-equals">=</token><token type="attr-value">\\"test-class\\"</token><token type="punctuation">></token>This is another nested element<token type="punctuation">\\</</token><token type="attr-name">p</token><token type="punctuation">></token>\n<token type="punctuation">\\</</token><token type="attr-name">div</token><token type="punctuation">></token>',
+ )
+ ,
),
);
@@ -290,7 +65,7 @@ test(
"should highlight JSON",
testCase(
"json",
- `
+ dedent`
{
"value": "content",
"another_value": 123,
@@ -299,89 +74,12 @@ test(
/* Block Comment */
}
`,
- (<AnyMarkups>[
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "",
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '<token type="punctuation">{</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="string">\\"value\\"</token><token type="operator">:</token> <token type="string">\\"content\\"</token><token type="operator">,</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="string">\\"another_value\\"</token><token type="operator">:</token> <token type="number">123</token><token type="operator">,</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="string">\\"key\\"</token><token type="operator">:</token> <token type="boolean">true</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="comment">// Line comment</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\t<token type="comment">/* Block Comment */</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '<token type="punctuation">}</token>',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "",
- },
- ],
- },
- ]),
+ (t, markup) =>
+ t.inlineSnapshot(
+ markup,
+ '<token type="punctuation">{</token>\n\t<token type="string">\\"value\\"</token><token type="operator">:</token> <token type="string">\\"content\\"</token><token type="operator">,</token>\n\t<token type="string">\\"another_value\\"</token><token type="operator">:</token> <token type="number">123</token><token type="operator">,</token>\n\t<token type="string">\\"key\\"</token><token type="operator">:</token> <token type="boolean">true</token>\n\t<token type="comment">// Line comment</token>\n\t<token type="comment">/* Block Comment */</token>\n<token type="punctuation">}</token>',
+ )
+ ,
),
);
@@ -389,7 +87,7 @@ test(
"should highlight SHELL",
testCase(
"shell",
- `
+ dedent`
#!/bin/bash
export bar="string"
function foo {
@@ -397,91 +95,23 @@ function foo {
ls -la "/path with/spaces" | grep -e "something"
}
`,
- (<AnyMarkups>[
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '<token type="function">',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "#!/bin/bash</token> <dim>",
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": 'export</dim> <dim>bar=\\"string\\"',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "function</dim> <dim>foo</dim> <dim>{",
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "\tls</dim> <dim>-la</dim> <dim>/simple/path",
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": '\tls</dim> <dim>-la</dim> <token type="string">\\"/path</token> <dim>with/spaces\\"</dim> <dim>|</dim> <dim>grep</dim> <dim>-e</dim> <token type="string">\\"something\\"',
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "}",
- },
- ],
- },
- {
- "type": "MARKUP",
- "parts": [
- {
- "type": "RAW_MARKUP",
- "value": "</token>",
- },
- ],
- },
- ]),
+ (t, markup) =>
+ t.inlineSnapshot(
+ markup,
+ '<token type="function">#!/bin/bash\nexport</token> <dim>bar=\\"string\\"\nfunction</dim> <dim>foo</dim> <dim>{\n\tls</dim> <dim>-la</dim> <dim>/simple/path\n\tls</dim> <dim>-la</dim> <token type="string">\\"/path</token> <dim>with/spaces\\"</dim> <dim>|</dim> <dim>grep</dim> <dim>-e</dim> <token type="string">\\"something\\"\n}</token>',
+ )
+ ,
),
);
function testCase(
language: DiagnosticLanguage,
input: string,
- expectedOutput: AnyMarkups,
+ callback: (t: TestHelper, markup: string) => void,
) {
return async (t: TestHelper) => {
const highlighted = highlightCode(craftTestInput(input, language));
- t.looksLike(highlighted, expectedOutput);
+ callback(t, readMarkup(concatMarkup(highlighted, markup`\n`)));
};
}

Use inline snapshots for markup-syntax-highlight test