diff --git a/tests/markdown.test.js b/tests/markdown/basic.test.js
similarity index 91%
rename from tests/markdown.test.js
rename to tests/markdown/basic.test.js
index e2c244338..57fe10ea1 100644
--- a/tests/markdown.test.js
+++ b/tests/markdown/basic.test.js
@@ -1,3 +1,5 @@
+/* eslint-disable max-lines */
+
 const Markdown = require('naturalcrit/markdown.js');
 
 test('Escapes <script> tag', function() {
diff --git a/tests/markdown/mustache-span.test.js b/tests/markdown/mustache-span.test.js
new file mode 100644
index 000000000..ca6b35bac
--- /dev/null
+++ b/tests/markdown/mustache-span.test.js
@@ -0,0 +1,128 @@
+/* eslint-disable max-lines */
+
+const Markdown = require('naturalcrit/markdown.js');
+
+test('Renders a mustache span with text only', function() {
+    const source = '{{ text}}';
+    const rendered = Markdown.render(source);
+    expect(rendered).toBe('<span class="inline-block ">text</span>');
+});
+
+test('Renders a mustache span with text only, but with spaces', function() {
+    const source = '{{ this is a text}}';
+    const rendered = Markdown.render(source);
+    expect(rendered).toBe('<span class="inline-block ">this is a text</span>');
+});
+
+test('Renders an empty mustache span', function() {
+    const source = '{{}}';
+    const rendered = Markdown.render(source);
+    expect(rendered).toBe('<span class="inline-block "></span>');
+});
+
+test('Renders a mustache span with just a space', function() {
+    const source = '{{ }}';
+    const rendered = Markdown.render(source);
+    expect(rendered).toBe('<span class="inline-block "></span>');
+});
+
+test('Renders a mustache span with a few spaces only', function() {
+    const source = '{{     }}';
+    const rendered = Markdown.render(source);
+    expect(rendered).toBe('<span class="inline-block "></span>');
+});
+
+test('Renders a mustache span with text and class', function() {
+    const source = '{{my-class text}}';
+    const rendered = Markdown.render(source);
+    // FIXME: why do we have those two extra spaces after closing "?
+    expect(rendered).toBe('<span class="inline-block my-class"  >text</span>');
+});
+
+test('Renders a mustache span with text and two classes', function() {
+    const source = '{{my-class,my-class2 text}}';
+    const rendered = Markdown.render(source);
+    // FIXME: why do we have those two extra spaces after closing "?
+    expect(rendered).toBe('<span class="inline-block my-class my-class2"  >text</span>');
+});
+
+test('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: why do we have those two extra spaces after closing "?
+    expect(rendered).toBe('<span class="inline-block my-class"  >this is a text</span>');
+});
+
+test('Renders a mustache span with text and id', function() {
+    const source = '{{#my-span text}}';
+    const rendered = Markdown.render(source);
+    // FIXME: why do we have that one extra space after closing "?
+    expect(rendered).toBe('<span class="inline-block " id="my-span" >text</span>');
+});
+
+test('Renders a mustache span with text and two ids', function() {
+    const source = '{{#my-span,#my-favorite-span text}}';
+    const rendered = Markdown.render(source);
+    // FIXME: do we need to report an error here somehow?
+    expect(rendered).toBe('<span class="inline-block " id="my-span" >text</span>');
+});
+
+test('Renders a mustache span with text and css property', function() {
+    const source = '{{color:red text}}';
+    const rendered = Markdown.render(source);
+    expect(rendered).toBe('<span class="inline-block "  style="color:red;">text</span>');
+});
+
+test('Renders a mustache span with text and two css properties', function() {
+    const source = '{{color:red,padding:5px text}}';
+    const rendered = Markdown.render(source);
+    expect(rendered).toBe('<span class="inline-block "  style="color:red; padding:5px;">text</span>');
+});
+
+test('Renders a mustache span with text and css property which contains quotes', function() {
+    const source = '{{font:"trebuchet ms" text}}';
+    const rendered = Markdown.render(source);
+    // FIXME: is it correct to remove quotes surrounding css property value?
+    expect(rendered).toBe('<span class="inline-block "  style="font:trebuchet ms;">text</span>');
+});
+
+test('Renders a mustache span with text and two css properties which contains quotes', function() {
+    const source = '{{font:"trebuchet ms",padding:"5px 10px" text}}';
+    const rendered = Markdown.render(source);
+    expect(rendered).toBe('<span class="inline-block "  style="font:trebuchet ms; padding:5px 10px;">text</span>');
+});
+
+
+test('Renders a mustache span with text with quotes and css property which contains quotes', function() {
+    const source = '{{font:"trebuchet ms" text "with quotes"}}';
+    const rendered = Markdown.render(source);
+    expect(rendered).toBe('<span class="inline-block "  style="font:trebuchet ms;">text “with quotes”</span>');
+});
+
+test('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).toBe('<span class="inline-block pen" id="author" style="color:orange; font-family:trebuchet ms;">text</span>');
+});
+
+// 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.
+