From 7000b911e78dd45aa2d34f2b8e245d68c6eb2c02 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Mon, 3 Apr 2023 20:46:21 -0500 Subject: [PATCH 01/13] change mustache test file name. --- tests/markdown/{mustache-span.test.js => mustache-syntax.test.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename tests/markdown/{mustache-span.test.js => mustache-syntax.test.js} (100%) diff --git a/tests/markdown/mustache-span.test.js b/tests/markdown/mustache-syntax.test.js similarity index 100% rename from tests/markdown/mustache-span.test.js rename to tests/markdown/mustache-syntax.test.js From b94810650085041776f92ee318ad215ca6c43084 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Mon, 3 Apr 2023 20:51:05 -0500 Subject: [PATCH 02/13] add dedent for Block tests --- tests/markdown/mustache-syntax.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/markdown/mustache-syntax.test.js b/tests/markdown/mustache-syntax.test.js index 6d249ebcb..5d76044b8 100644 --- a/tests/markdown/mustache-syntax.test.js +++ b/tests/markdown/mustache-syntax.test.js @@ -1,5 +1,6 @@ /* eslint-disable max-lines */ +const dedent = require('dedent-tabs').default; const Markdown = require('naturalcrit/markdown.js'); test('Renders a mustache span with text only', function() { From 9f17f36a87a4c9e9036f8258b02288516ec38a01 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Mon, 3 Apr 2023 20:53:07 -0500 Subject: [PATCH 03/13] add trimReturns() method to strings to trim render output --- tests/markdown/mustache-syntax.test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/tests/markdown/mustache-syntax.test.js b/tests/markdown/mustache-syntax.test.js index 5d76044b8..0e378b711 100644 --- a/tests/markdown/mustache-syntax.test.js +++ b/tests/markdown/mustache-syntax.test.js @@ -3,6 +3,12 @@ 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, ''); +}; + test('Renders a mustache span with text only', function() { const source = '{{ text}}'; const rendered = Markdown.render(source); From 69c283f00f6db755cf8b9c7cf15667baf08fc52f Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Mon, 3 Apr 2023 21:00:59 -0500 Subject: [PATCH 04/13] Set Inline unit tests grouped inside a `describe` --- tests/markdown/mustache-syntax.test.js | 169 ++++++++++++------------- 1 file changed, 84 insertions(+), 85 deletions(-) diff --git a/tests/markdown/mustache-syntax.test.js b/tests/markdown/mustache-syntax.test.js index 0e378b711..dabcf93fa 100644 --- a/tests/markdown/mustache-syntax.test.js +++ b/tests/markdown/mustache-syntax.test.js @@ -9,107 +9,106 @@ String.prototype.trimReturns = function(){ return this.replace(/\r?\n|\r/g, ''); }; -test('Renders a mustache span with text only', function() { - const source = '{{ text}}'; - const rendered = Markdown.render(source); - expect(rendered).toBe('text'); -}); +describe('Inline: When using the Inline syntax {{ }}', ()=>{ + it('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'); -}); + it('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(''); -}); + it('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(''); -}); + it('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(''); -}); + it('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'); -}); + it('Renders a mustache span with text and class', function() { + const source = '{{my-class text}}'; + const rendered = Markdown.render(source); + 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'); -}); + it('Renders a mustache span with text and two classes', function() { + const source = '{{my-class,my-class2 text}}'; + const rendered = Markdown.render(source); + 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'); -}); + it('Renders a mustache span with text with spaces and class', function() { + const source = '{{my-class this is a text}}'; + const rendered = Markdown.render(source); + 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'); -}); + it('Renders a mustache span with text and id', function() { + const source = '{{#my-span text}}'; + const rendered = Markdown.render(source); + 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'); -}); + it('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'); -}); + it('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'); -}); + it('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'); -}); + it('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); + 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'); -}); + it('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); + 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”'); -}); + it('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); + expect(rendered).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).toBe('text'); + }); + -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'); }); // TODO: add tests for ID with accordance to CSS spec: From 333525d9ab0b75c69b092847bcd1a6ace3864ce3 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Mon, 3 Apr 2023 21:23:39 -0500 Subject: [PATCH 05/13] Update CI config and package.json scripts --- .circleci/config.yml | 2 +- package.json | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) 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/package.json b/package.json index f349571f2..264ec33ab 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,9 @@ "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:inline": "jest '.*(mustache-syntax).*' -t '^Inline:.*' --verbose", + "test:mustache-syntax:block": "jest '.*(mustache-syntax).*' -t '^Block:.*' --verbose", + "test:mustache-syntax:injection": "jest '.*(mustache-syntax).*' -t '^Injection:.*' --verbose", "test:route": "jest tests/routes/static-pages.test.js --verbose", "phb": "node scripts/phb.js", "prod": "set NODE_ENV=production && npm run build", From e5377c19397a00624beab769482f55ad42ebb290 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Tue, 4 Apr 2023 15:01:23 -0500 Subject: [PATCH 06/13] add and setup jest-expect-message library --- .eslintrc.js | 1 + package-lock.json | 7 +++++++ package.json | 26 ++++++++++++++------------ 3 files changed, 22 insertions(+), 12 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index bc8b5c8cd..e13195fd9 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-lock.json b/package-lock.json index 08d973fc5..49887cecc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,6 +49,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" }, "engines": { @@ -7489,6 +7490,12 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/jest-expect-message": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/jest-expect-message/-/jest-expect-message-1.1.3.tgz", + "integrity": "sha512-bTK77T4P+zto+XepAX3low8XVQxDgaEqh3jSTQOG8qvPpD69LsIdyJTa+RmnJh3HNSzJng62/44RPPc7OIlFxg==", + "dev": true + }, "node_modules/jest-get-type": { "version": "29.4.3", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.4.3.tgz", diff --git a/package.json b/package.json index 264ec33ab..686f84036 100644 --- a/package.json +++ b/package.json @@ -47,20 +47,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": [ @@ -111,6 +112,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" } } From b32c724c894070309aaa88a6462465ffbbb73689 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Tue, 4 Apr 2023 15:51:29 -0500 Subject: [PATCH 07/13] remove stack traces from test output --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 686f84036..39491d967 100644 --- a/package.json +++ b/package.json @@ -23,9 +23,9 @@ "test:coverage": "jest --coverage --silent --runInBand", "test:dev": "jest --verbose --watch", "test:basic": "jest tests/markdown/basic.test.js --verbose", - "test:mustache-syntax:inline": "jest '.*(mustache-syntax).*' -t '^Inline:.*' --verbose", - "test:mustache-syntax:block": "jest '.*(mustache-syntax).*' -t '^Block:.*' --verbose", - "test:mustache-syntax:injection": "jest '.*(mustache-syntax).*' -t '^Injection:.*' --verbose", + "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", From 0e35b99289d3e0dd37db08025b706edac6001fc0 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Tue, 4 Apr 2023 16:14:34 -0500 Subject: [PATCH 08/13] remove quotes from rule option object --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index e13195fd9..4e57c5c7f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -24,7 +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 }], + 'jest/valid-expect' : ['error', { maxArgs: 2 }], /** Warnings **/ 'max-lines' : ['warn', { From 4cfe26b4a97428f3f7035c691516aa0434d39805 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Tue, 4 Apr 2023 16:15:10 -0500 Subject: [PATCH 09/13] Add Block tests, structure with Describe() --- tests/markdown/mustache-syntax.test.js | 115 +++++++++++++++++++++---- 1 file changed, 99 insertions(+), 16 deletions(-) diff --git a/tests/markdown/mustache-syntax.test.js b/tests/markdown/mustache-syntax.test.js index dabcf93fa..69670ca2c 100644 --- a/tests/markdown/mustache-syntax.test.js +++ b/tests/markdown/mustache-syntax.test.js @@ -9,106 +9,189 @@ 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('Renders a mustache span with text only', function() { const source = '{{ text}}'; const rendered = Markdown.render(source); - expect(rendered).toBe('text'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); }); it('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'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('this is a text'); }); it('Renders an empty mustache span', function() { const source = '{{}}'; const rendered = Markdown.render(source); - expect(rendered).toBe(''); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(''); }); it('Renders a mustache span with just a space', function() { const source = '{{ }}'; const rendered = Markdown.render(source); - expect(rendered).toBe(''); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(''); }); it('Renders a mustache span with a few spaces only', function() { const source = '{{ }}'; const rendered = Markdown.render(source); - expect(rendered).toBe(''); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(''); }); it('Renders a mustache span with text and class', function() { const source = '{{my-class text}}'; const rendered = Markdown.render(source); - expect(rendered).toBe('text'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); }); it('Renders a mustache span with text and two classes', function() { const source = '{{my-class,my-class2 text}}'; const rendered = Markdown.render(source); - expect(rendered).toBe('text'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); }); it('Renders a mustache span with text with spaces and class', function() { const source = '{{my-class this is a text}}'; const rendered = Markdown.render(source); - expect(rendered).toBe('this is a text'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('this is a text'); }); it('Renders a mustache span with text and id', function() { const source = '{{#my-span text}}'; const rendered = Markdown.render(source); - expect(rendered).toBe('text'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); }); it('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'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); }); it('Renders a mustache span with text and css property', function() { const source = '{{color:red text}}'; const rendered = Markdown.render(source); - expect(rendered).toBe('text'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); }); it('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'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); }); it('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); - expect(rendered).toBe('text'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); }); it('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); - expect(rendered).toBe('text'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text'); }); it('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); - expect(rendered).toBe('text “with quotes”'); + 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).toBe('text'); + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe('text'); + }); +}); + +describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{ + it('Renders a div with text only', function() { + const source = dedent`{{ + text + }}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe(`

text

`); }); + it('Renders an empty div', function() { + const source = dedent`{{ + + }}`; + const rendered = Markdown.render(source).trimReturns(); + 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('Renders a div with a single class', function() { + const source = dedent`{{cat + + }}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe(`
`); + }); + + it('Renders a div with a single class and text', function() { + const source = dedent`{{cat + Sample text. + }}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe(`

Sample text.

`); + }); + + it('Renders a div with two classes and text', function() { + const source = dedent`{{cat,dog + Sample text. + }}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }, `Input:\n${source}`, { showPrefix: false }).toBe(`

Sample text.

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

Sample text.

`); + }); + + it('Renders a div with a class, style and text', function() { + const source = dedent`{{cat,color:red + Sample text. + }}`; + const rendered = Markdown.render(source).trimReturns(); + 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('Renders a div with a single ID', function() { + const source = dedent`{{#cat,#dog + Sample text. + }}`; + const rendered = Markdown.render(source).trimReturns(); + expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`

Sample text.

`); + }); }); // TODO: add tests for ID with accordance to CSS spec: From 9e9bf8c6fabcb17f9bcb04ce1467b00a3e6775d0 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Tue, 4 Apr 2023 16:32:59 -0500 Subject: [PATCH 10/13] Add injection tests --- tests/markdown/mustache-syntax.test.js | 136 +++++++++++++++++++++++++ 1 file changed, 136 insertions(+) diff --git a/tests/markdown/mustache-syntax.test.js b/tests/markdown/mustache-syntax.test.js index 69670ca2c..f4e2f33d3 100644 --- a/tests/markdown/mustache-syntax.test.js +++ b/tests/markdown/mustache-syntax.test.js @@ -112,6 +112,8 @@ describe('Inline: When using the Inline syntax {{ }}', ()=>{ }); }); +// BLOCK SYNTAX + describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{ it('Renders a div with text only', function() { const source = dedent`{{ @@ -194,6 +196,140 @@ describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{ }); }); +// MUSTACHE INJECTION SYNTAX + +describe('Injection: When an injection tag follows an element', ()=>{ + describe('and that element is an inline-block', ()=>{ + it('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('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('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('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('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('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('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('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('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('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('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('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('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('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