- This brew is currently in your Trash folder on Google Drive!
If you want to keep it, make sure to move it before it is deleted permanently!
-
- }
-
If you want to keep it, make sure to move it before it is deleted permanently!
-
- OK
-
- Sample Text
\n'); -}); - -test('Two consecutive injections into Block', function() { - const source = '{{dog\nSample Text\n}}\n{cat}\n{toad}'; - const rendered = Markdown.render(source); - // FIXME: Renders the extra class attribute (which is dropped by the browser). - expect(rendered).toBe('Sample Text
\n{toad}
\n'); -}); - -// TODO: add tests for ID with accordance to CSS spec: -// -// From https://drafts.csswg.org/selectors/#id-selectors: -// -// > An ID selector consists of a “number sign” (U+0023, #) immediately followed by the ID value, which must be a CSS identifier. -// -// From: https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier: -// -// > In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] -// > and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); -// > they cannot start with a digit, two hyphens, or a hyphen followed by a digit. -// > Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). -// > For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". -// > Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]). - -// TODO: add tests for class with accordance to CSS spec: -// -// From: https://drafts.csswg.org/selectors/#class-html: -// -// > The class selector is given as a full stop (. U+002E) immediately followed by an identifier. - diff --git a/tests/markdown/mustache-syntax.test.js b/tests/markdown/mustache-syntax.test.js new file mode 100644 index 000000000..f75ce746a --- /dev/null +++ b/tests/markdown/mustache-syntax.test.js @@ -0,0 +1,376 @@ +/* eslint-disable max-lines */ + +const dedent = require('dedent-tabs').default; +const Markdown = require('naturalcrit/markdown.js'); + +// Marked.js adds line returns after closing tags on some default tokens. +// This removes those line returns for comparison sake. +String.prototype.trimReturns = function(){ + return this.replace(/\r?\n|\r/g, ''); +}; + +// Adding `.failing()` method to `describe` or `it` will make failing tests "pass" as long as they continue to fail. +// Remove the `.failing()` method once you have fixed the issue. + +describe('Inline: When using the Inline syntax {{ }}', ()=>{ + it.failing('Renders a mustache span with text only', function() { + const source = '{{ text}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a mustache span with text only, but with spaces', function() { + const source = '{{ this is a text}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('this is a text'); + }); + + it.failing('Renders an empty mustache span', function() { + const source = '{{}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(''); + }); + + it.failing('Renders a mustache span with just a space', function() { + const source = '{{ }}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(''); + }); + + it.failing('Renders a mustache span with a few spaces only', function() { + const source = '{{ }}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(''); + }); + + it.failing('Renders a mustache span with text and class', function() { + const source = '{{my-class text}}'; + const rendered = Markdown.render(source); + // FIXME: adds two extra \s before closing `>` in opening tag. + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a mustache span with text and two classes', function() { + const source = '{{my-class,my-class2 text}}'; + const rendered = Markdown.render(source); + // FIXME: adds two extra \s before closing `>` in opening tag. + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a mustache span with text with spaces and class', function() { + const source = '{{my-class this is a text}}'; + const rendered = Markdown.render(source); + // FIXME: adds two extra \s before closing `>` in opening tag + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('this is a text'); + }); + + it.failing('Renders a mustache span with text and id', function() { + const source = '{{#my-span text}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s before closing `>` in opening tag, and another after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a mustache span with text and two ids', function() { + const source = '{{#my-span,#my-favorite-span text}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s before closing `>` in opening tag, and another after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a mustache span with text and css property', function() { + const source = '{{color:red text}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a mustache span with text and two css properties', function() { + const source = '{{color:red,padding:5px text}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a mustache span with text and css property which contains quotes', function() { + const source = '{{font-family:"trebuchet ms" text}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a mustache span with text and two css properties which contains quotes', function() { + const source = '{{font-family:"trebuchet ms",padding:"5px 10px" text}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + + it.failing('Renders a mustache span with text with quotes and css property which contains quotes', function() { + const source = '{{font-family:"trebuchet ms" text "with quotes"}}'; + const rendered = Markdown.render(source); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe('text “with quotes”'); + }); + + it('Renders a mustache span with text, id, class and a couple of css properties', function() { + const source = '{{pen,#author,color:orange,font-family:"trebuchet ms" text}}'; + const rendered = Markdown.render(source); + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); +}); + +// BLOCK SYNTAX + +describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{ + it.failing('Renders a div with text only', function() { + const source = dedent`{{ + text + }}`; + const rendered = Markdown.render(source).trimReturns(); + // FIXME: adds extra \s after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe(`text
{{}}
`); + }); + + it.failing('Renders a div with a single class', function() { + const source = dedent`{{cat + + }}`; + const rendered = Markdown.render(source).trimReturns(); + // FIXME: adds two extra \s before closing `>` in opening tag + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe(``); + }); + + it.failing('Renders a div with a single class and text', function() { + const source = dedent`{{cat + Sample text. + }}`; + const rendered = Markdown.render(source).trimReturns(); + // FIXME: adds two extra \s before closing `>` in opening tag + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe(`Sample text.
Sample text.
Sample text.
Sample text.
Sample text.
Sample text.
emphasis
'); + }); + + it.failing('Renders a code element with injected style', function() { + const source = '`code`{background:gray}'; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('code
text{background:blue}
'); + }); + }); + + describe('and that element is a block', ()=>{ + it.failing('renders a div "text" with no injection', function() { + const source = '{{\ntext\n}}\n{}'; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text
text
text
text
text
'); + }); + + it.failing('renders a table with injected class name', function() { + const source = dedent`| Experience Points | Level | + |:------------------|:-----:| + | 0 | 1 | + | 300 | 2 | + + {ClassName}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`| Experience Points | Level |
|---|---|
| 0 | 1 |
| 300 | 2 |
- tag', function() {
+ // const source = dedent`- Cursed Ritual of Bad Hair
+ // - Eliminate Vindictiveness in Gym Teacher
+ // - Ultimate Rite of the Confetti Angel
+ // - Dark Chant of the Dentists
+ // - Divine Spell of Crossdressing
+ // {color:red}`;
+ // const rendered = Markdown.render(source).trimReturns();
+ // expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`...`); // FIXME: expect this to be injected into
-
+ // });
+
+ it.failing('renders an h2 header "text" with injected class name, and "secondInjection" as regular text on the next line.', function() {
+ const source = dedent`## text
+ {ClassName}
+ {secondInjection}`;
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text
{secondInjection}
'); + }); + + it.failing('renders a div nested into another div, the inner with class=innerDiv and the other class=outerDiv', function() { + const source = dedent`{{ + outer text + {{ + inner text + }} + {innerDiv} + }} + {outerDiv}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(''); + }); + }); +}); + + +// TODO: add tests for ID with accordance to CSS spec: +// +// From https://drafts.csswg.org/selectors/#id-selectors: +// +// > An ID selector consists of a “number sign” (U+0023, #) immediately followed by the ID value, which must be a CSS identifier. +// +// From: https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier: +// +// > In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] +// > and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); +// > they cannot start with a digit, two hyphens, or a hyphen followed by a digit. +// > Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). +// > For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". +// > Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]). + +// TODO: add tests for class with accordance to CSS spec: +// +// From: https://drafts.csswg.org/selectors/#class-html: +// +// > The class selector is given as a full stop (. U+002E) immediately followed by an identifier. +outer text
inner text
- ? Currently injects into last