test(plugin): add tests for directive syntax

diplodoc-platform · Nov 18, 2024 · 064c992 · 064c992
1 parent 5b141d1
commit 064c992
Show file tree

Hide file tree

Showing 2 changed files with 195 additions and 2 deletions.
diff --git a/tests/src/__snapshots__/index.test.ts.snap b/tests/src/__snapshots__/index.test.ts.snap
@@ -1,5 +1,128 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`File extension - plugin Options: directiveSyntax should render both file markups 1`] = `
+"<p><a href="../file" download="file.txt" class="yfm-file"><span class="yfm-file__icon"></span>file.txt</a></p>
+<p><a class="yfm-file" href="path/to/video" download="video.mp4"><span class="yfm-file__icon"></span>video.mp4</a></p>
+"
+`;
+
+exports[`File extension - plugin Options: directiveSyntax should render only new (directive) file markup 1`] = `
+"<p>{% file src="../file" name="file.txt" %}</p>
+<p><a class="yfm-file" href="path/to/video" download="video.mp4"><span class="yfm-file__icon"></span>video.mp4</a></p>
+"
+`;
+
+exports[`File extension - plugin Options: directiveSyntax should render only old file markup 1`] = `
+"<p><a href="../file" download="file.txt" class="yfm-file"><span class="yfm-file__icon"></span>file.txt</a></p>
+<p>:file<a href="path/to/video">video.mp4</a></p>
+"
+`;
+
+exports[`File extension - plugin dyrective syntax should add allowed attrs 1`] = `
+"<p><a class="yfm-file" href="../readme" download="readme.md" referrerpolicy="origin" rel="external" target="_blank" type="text/plain" hreflang="en"><span class="yfm-file__icon"></span>readme.md</a></p>
+"
+`;
+
+exports[`File extension - plugin dyrective syntax should generate file token 1`] = `
+[
+  Token {
+    "attrs": null,
+    "block": true,
+    "children": null,
+    "content": "",
+    "hidden": false,
+    "info": "",
+    "level": 0,
+    "map": [
+      0,
+      1,
+    ],
+    "markup": "",
+    "meta": null,
+    "nesting": 1,
+    "tag": "p",
+    "type": "paragraph_open",
+  },
+  Token {
+    "attrs": null,
+    "block": true,
+    "children": [
+      Token {
+        "attrs": [
+          [
+            "class",
+            "yfm-file",
+          ],
+          [
+            "href",
+            "path/to/video",
+          ],
+          [
+            "download",
+            "video.mp4",
+          ],
+        ],
+        "block": false,
+        "children": null,
+        "content": "video.mp4",
+        "hidden": false,
+        "info": "",
+        "level": 0,
+        "map": null,
+        "markup": ":file",
+        "meta": null,
+        "nesting": 0,
+        "tag": "",
+        "type": "yfm_file",
+      },
+    ],
+    "content": ":file[video.mp4](path/to/video)",
+    "hidden": false,
+    "info": "",
+    "level": 1,
+    "map": [
+      0,
+      1,
+    ],
+    "markup": "",
+    "meta": null,
+    "nesting": 0,
+    "tag": "",
+    "type": "inline",
+  },
+  Token {
+    "attrs": null,
+    "block": true,
+    "children": null,
+    "content": "",
+    "hidden": false,
+    "info": "",
+    "level": 0,
+    "map": null,
+    "markup": "",
+    "meta": null,
+    "nesting": -1,
+    "tag": "p",
+    "type": "paragraph_close",
+  },
+]
+`;
+
+exports[`File extension - plugin dyrective syntax should not add attrs not from whitelist 1`] = `
+"<p><a class="yfm-file" href="a.md" download="a.md"><span class="yfm-file__icon"></span>a.md</a></p>
+"
+`;
+
+exports[`File extension - plugin dyrective syntax should render file directive 1`] = `
+"<p><a class="yfm-file" href="path/to/video" download="video.mp4"><span class="yfm-file__icon"></span>video.mp4</a></p>
+"
+`;
+
+exports[`File extension - plugin dyrective syntax should render file inside text 1`] = `
+"<p>before<a class="yfm-file" href="../../docs/readme.md" download="file.txt"><span class="yfm-file__icon"></span>file.txt</a>after</p>
+"
+`;
+
 exports[`File extension - plugin should add extra attrs 1`] = `
 "<p><a href="../file" download="file.txt" class="yfm-file" data-yfm-file="yes"><span class="yfm-file__icon"></span>file.txt</a></p>
 "

diff --git a/tests/src/index.test.ts b/tests/src/index.test.ts
@@ -1,14 +1,15 @@
 import MarkdownIt from 'markdown-it';
 import transform from '@diplodoc/transform';
+import dd from 'ts-dedent';
 
 import {type TransformOptions, transform as fileTransformer} from '../../src/plugin';
 
 function html(markup: string, opts?: TransformOptions) {
     return transform(markup, {
         // override the default markdown-it-attrs delimiters,
         // to make it easier to check html for non-valid file markup
-        leftDelimiter: '[',
-        rightDelimiter: ']',
+        leftDelimiter: '[[',
+        rightDelimiter: ']]',
         plugins: [fileTransformer({bundle: false, ...opts})],
     }).result.html;
 }
@@ -175,4 +176,73 @@ describe('File extension - plugin', () => {
         });
         expect(md.render('{% file src="../file" name="file.txt" %}')).toMatchSnapshot();
     });
+
+    describe('dyrective syntax', () => {
+        it('should render file directive', () => {
+            expect(
+                html(':file[video.mp4](path/to/video)', {directiveSyntax: 'only'}),
+            ).toMatchSnapshot();
+        });
+
+        it('should render file inside text', () => {
+            expect(
+                html('before:file[file.txt](../../docs/readme.md)after', {directiveSyntax: 'only'}),
+            ).toMatchSnapshot();
+        });
+
+        it('should not render file without file url', () => {
+            expect(html(':file[file.txt]', {directiveSyntax: 'only'})).toBe(
+                `<p>:file[file.txt]</p>\n`,
+            );
+        });
+
+        it('should not render file without file name', () => {
+            expect(html(':file(path/to/file)', {directiveSyntax: 'only'})).toBe(
+                `<p>:file(path/to/file)</p>\n`,
+            );
+        });
+
+        it('should not add attrs not from whitelist', () => {
+            expect(
+                html(':file[a.md](a.md){data-list=1}', {directiveSyntax: 'only'}),
+            ).toMatchSnapshot();
+        });
+
+        it('should add allowed attrs', () => {
+            expect(
+                html(
+                    ':file[readme.md](../readme){referrerpolicy=origin rel=external target=\'_blank\' type="text/plain" hreflang=en}',
+                    {
+                        directiveSyntax: 'only',
+                    },
+                ),
+            ).toMatchSnapshot();
+        });
+
+        it('should generate file token', () => {
+            expect(
+                tokens(':file[video.mp4](path/to/video)', {directiveSyntax: 'only'}),
+            ).toMatchSnapshot();
+        });
+    });
+
+    describe('Options: directiveSyntax', () => {
+        const markup = dd`
+            {% file src="../file" name="file.txt" %}
+
+            :file[video.mp4](path/to/video)
+            `;
+
+        it('should render only old file markup', () => {
+            expect(html(markup, {directiveSyntax: 'disabled'})).toMatchSnapshot();
+        });
+
+        it('should render only new (directive) file markup', () => {
+            expect(html(markup, {directiveSyntax: 'only'})).toMatchSnapshot();
+        });
+
+        it('should render both file markups', () => {
+            expect(html(markup, {directiveSyntax: 'enabled'})).toMatchSnapshot();
+        });
+    });
 });