diff --git a/.circleci/config.yml b/.circleci/config.yml index 3049a872a..461a0dfa6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -63,7 +63,7 @@ jobs: command: npm run test:basic - run: name: Test - Mustache Spans - command: npm run test:mustache-span + command: npm run test:mustache-syntax - run: name: Test - Routes command: npm run test:route diff --git a/.eslintrc.js b/.eslintrc.js index bc8b5c8cd..4e57c5c7f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -24,6 +24,7 @@ module.exports = { 'react/jsx-no-bind' : ['error', { allowArrowFunctions: true }], 'react/jsx-uses-react' : 'error', 'react/prefer-es6-class' : ['error', 'never'], + 'jest/valid-expect' : ['error', { maxArgs: 2 }], /** Warnings **/ 'max-lines' : ['warn', { diff --git a/package.json b/package.json index bbae089eb..2ac8c1681 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,10 @@ "test:coverage": "jest --coverage --silent --runInBand", "test:dev": "jest --verbose --watch", "test:basic": "jest tests/markdown/basic.test.js --verbose", - "test:mustache-span": "jest tests/markdown/mustache-span.test.js --verbose", + "test:mustache-syntax": "jest '.*(mustache-syntax).*' --verbose --noStackTrace", + "test:mustache-syntax:inline": "jest '.*(mustache-syntax).*' -t '^Inline:.*' --verbose --noStackTrace", + "test:mustache-syntax:block": "jest '.*(mustache-syntax).*' -t '^Block:.*' --verbose --noStackTrace", + "test:mustache-syntax:injection": "jest '.*(mustache-syntax).*' -t '^Injection:.*' --verbose --noStackTrace", "test:route": "jest tests/routes/static-pages.test.js --verbose", "phb": "node scripts/phb.js", "prod": "set NODE_ENV=production && npm run build", @@ -45,20 +48,21 @@ "coveragePathIgnorePatterns": [ "build/*" ], - "coverageThreshold" : { - "global" : { - "statements" : 25, - "branches" : 10, - "functions" : 22, - "lines" : 25 + "coverageThreshold": { + "global": { + "statements": 25, + "branches": 10, + "functions": 22, + "lines": 25 }, - "server/homebrew.api.js" : { - "statements" : 65, - "branches" : 50, - "functions" : 60, - "lines" : 70 + "server/homebrew.api.js": { + "statements": 65, + "branches": 50, + "functions": 60, + "lines": 70 } - } + }, + "setupFilesAfterEnv": ["jest-expect-message"] }, "babel": { "presets": [ @@ -109,6 +113,7 @@ "eslint": "^8.37.0", "eslint-plugin-react": "^7.32.2", "jest": "^29.5.0", + "jest-expect-message": "^1.1.3", "supertest": "^6.3.3" } } diff --git a/tests/markdown/mustache-span.test.js b/tests/markdown/mustache-span.test.js deleted file mode 100644 index e7c65ea77..000000000 --- a/tests/markdown/mustache-span.test.js +++ /dev/null @@ -1,144 +0,0 @@ -/* 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('text'); -}); - -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('this is a text'); -}); - -test('Renders an empty mustache span', function() { - const source = '{{}}'; - const rendered = Markdown.render(source); - expect(rendered).toBe(''); -}); - -test('Renders a mustache span with just a space', function() { - const source = '{{ }}'; - const rendered = Markdown.render(source); - expect(rendered).toBe(''); -}); - -test('Renders a mustache span with a few spaces only', function() { - const source = '{{ }}'; - const rendered = Markdown.render(source); - expect(rendered).toBe(''); -}); - -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('text'); -}); - -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('text'); -}); - -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('this is a text'); -}); - -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('text'); -}); - -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('text'); -}); - -test('Renders a mustache span with text and css property', function() { - const source = '{{color:red text}}'; - const rendered = Markdown.render(source); - expect(rendered).toBe('text'); -}); - -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('text'); -}); - -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('text'); -}); - -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('text'); -}); - - -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('text “with quotes”'); -}); - -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('text'); -}); - -test('Two consecutive injections into Inline', function() { - const source = '{{dog Sample Text}}{cat}{toad}'; - const rendered = Markdown.render(source); - // FIXME: Drops original attributes in favor of injection, rather than adding. - // FIXME: Doesn't keep the raw text of second injection. - // FIXME: Renders the extra class attribute (which is dropped by the browser). - expect(rendered).toBe('

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 an empty div', function() { + const source = dedent`{{ + + }}`; + 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(`
`); + }); + + it('Renders a single paragraph with opening and closing brackets', function() { + const source = dedent`{{ + }}`; + const rendered = Markdown.render(source).trimReturns(); + // this actually renders in HB as '{{ }}'... + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe(`

{{}}

`); + }); + + 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.

`); + }); + + it.failing('Renders a div with two classes and text', function() { + const source = dedent`{{cat,dog + 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.

`); + }); + + it.failing('Renders a div with a style and text', function() { + const source = dedent`{{color:red + 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 }).toBe(`

Sample text.

`); + }); + + it.failing('Renders a div with a class, style and text', function() { + const source = dedent`{{cat,color:red + Sample text. + }}`; + const rendered = Markdown.render(source).trimReturns(); + // FIXME: adds extra \s after the class attribute + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`

Sample text.

`); + }); + + it('Renders a div with an ID, class, style and text (different order)', function() { + const source = dedent`{{color:red,cat,#dog + Sample text. + }}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`

Sample text.

`); + }); + + it.failing('Renders a div with a single ID', function() { + const source = dedent`{{#cat,#dog + Sample text. + }}`; + const rendered = Markdown.render(source).trimReturns(); + // FIXME: adds extra \s before closing `>` in opening tag, and another after class names + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`

Sample text.

`); + }); +}); + +// MUSTACHE INJECTION SYNTAX + +describe('Injection: When an injection tag follows an element', ()=>{ + // FIXME: Most of these fail because injections currently replace attributes, rather than append to. Or just minor extra whitespace issues. + describe('and that element is an inline-block', ()=>{ + it.failing('Renders a span "text" with no injection', function() { + const source = '{{ text}}{}'; + const rendered = Markdown.render(source); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a span "text" with injected Class name', function() { + const source = '{{ text}}{ClassName}'; + const rendered = Markdown.render(source); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a span "text" with injected style', function() { + const source = '{{ text}}{color:red}'; + const rendered = Markdown.render(source); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders a span "text" with two injected styles', function() { + const source = '{{ text}}{color:red,background:blue}'; + const rendered = Markdown.render(source); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); + + it.failing('Renders an emphasis element with injected Class name', function() { + const source = '*emphasis*{big}'; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('

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

'); + }); + + it.failing('Renders an image element with injected style', function() { + const source = '![alt text](http://i.imgur.com/hMna6G0.png){position:absolute}'; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('

homebrew mug

'); + }); + + it.failing('Renders an element modified by only the first of two consecutive injections', function() { + const source = '{{ text}}{color:red}{background:blue}'; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('

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

'); + }); + + it.failing('renders a div "text" with injected Class name', function() { + const source = '{{\ntext\n}}\n{ClassName}'; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('

text

'); + }); + + it.failing('renders a div "text" with injected style', function() { + const source = '{{\ntext\n}}\n{color:red}'; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('

text

'); + }); + + it.failing('renders a div "text" with two injected styles', function() { + const source = dedent`{{ + text + }} + {color:red,background:blue}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('

text

'); + }); + + it.failing('renders an h2 header "text" with injected class name', function() { + const source = dedent`## text + {ClassName}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('

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 PointsLevel
01
3002
`); + }); + + // it('renders a list with with a style injected into the