Skip to content

Commit 6350678

Browse files
totocaptotocap
authored
Merge pull request #2987 from mjmlio/chore/MJML-46-update-local-mjml-testing
chore(testing): Update local MJML testing MJML-46
2 parents c2021f7 + 5d60a97 commit 6350678

File tree

12 files changed

+590
-327
lines changed

12 files changed

+590
-327
lines changed

‎.eslintrc‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
{
2-
"extends": [
3-
"airbnb-base",
4-
"prettier"
5-
],
2+
"extends": ["airbnb-base", "prettier"],
63
"parser": "babel-eslint",
74
"rules": {
8-
"comma-dangle": [ 2, "always-multiline" ],
9-
"semi": [ 2, "never" ],
5+
"comma-dangle": [2, "always-multiline"],
6+
"semi": [2, "never"],
107
"no-mixed-operators": 0,
118
"no-shadow": 0,
129
"no-param-reassign": 0,
13-
"no-restricted-syntax": 0
10+
"no-restricted-syntax": 0,
1411
},
1512
"env": {
16-
"node": true
17-
}
13+
"node": true,
14+
"mocha": true,
15+
},
16+
"overrides": [
17+
{
18+
"files": ["packages/mjml/test/*.test.js"],
19+
"rules": {
20+
"prefer-arrow-callback": "off",
21+
"func-names": "off",
22+
},
23+
},
24+
],
1825
}

‎.github/workflows/mjml-workflow.yml‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,16 @@ jobs:
55
runs-on: ubuntu-latest
66
strategy:
77
matrix:
8-
node-version: [ 16.x, 18.x, 20.x]
8+
node-version: [16.x, 18.x, 20.x]
99
steps:
1010
- uses: actions/checkout@v2
1111
- name: Use Node.js ${{ matrix.node-version }}
1212
uses: actions/setup-node@v1
1313
with:
1414
node-version: ${{ matrix.node-version }}
1515
- name: Run linting & tests
16-
run: |
16+
run: |
1717
yarn install
1818
yarn build
1919
yarn lint
20-
cd packages/mjml-parser-xml
21-
yarn install
22-
yarn test --debug
23-
cd ../../packages/mjml-core
24-
yarn test --debug
25-
cd ../../packages/mjml
2620
yarn test

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"lint": "eslint .",
99
"lint:fix": "eslint . --fix",
1010
"postinstall": "lerna bootstrap",
11-
"prettier": "prettier --write \"packages/**/{src,bin}/**/*.?(js|json)\""
11+
"prettier": "prettier --write \"packages/**/{src,bin}/**/*.?(js|json)\"",
12+
"test": "lerna run test"
1213
},
1314
"workspaces": [
1415
"packages/*"
@@ -27,6 +28,7 @@
2728
"eslint-config-prettier": "^9.1.0",
2829
"eslint-plugin-import": "^2.21.1",
2930
"lerna": "^3.22.1",
31+
"mocha": "10",
3032
"open": "^7.3.0",
3133
"prettier": "^3.2.4",
3234
"rimraf": "^3.0.2"

‎packages/mjml/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"scripts": {
2424
"clean": "rimraf lib",
2525
"build": "babel src --out-dir lib --root-mode upward",
26-
"test": "node ./test/index.js"
26+
"test": "mocha ./test/*.test.js"
2727
},
2828
"dependencies": {
2929
"@babel/runtime": "^7.28.4",

‎packages/mjml/test/accordionTitle-fontWeight.test.js‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,61 @@ const chai = require('chai')
22
const { load } = require('cheerio')
33
const mjml = require('../lib')
44

5-
const input = `
6-
<mjml>
7-
<mj-head>
8-
<mj-attributes>
9-
<mj-accordion border="none" padding="1px" />
10-
<mj-accordion-element icon-wrapped-url="https://i.imgur.com/Xvw0vjq.png" icon-unwrapped-url="https://i.imgur.com/KKHenWa.png" icon-height="24px" icon-width="24px" />
11-
<mj-accordion-title font-family="Roboto, Open Sans, Helvetica, Arial, sans-serif" background-color="#fff" color="#031017" padding="15px" font-size="18px" />
12-
<mj-accordion-text font-family="Open Sans, Helvetica, Arial, sans-serif" background-color="#fafafa" padding="15px" color="#505050" font-size="14px" />
13-
</mj-attributes>
14-
</mj-head>
15-
<mj-body>
16-
<mj-section padding="20px" background-color="#ffffff">
17-
<mj-column background-color="#dededd">
18-
<mj-accordion>
19-
<mj-accordion-element>
20-
<mj-accordion-title font-weight="bold" css-class="accordion-title">Why use an accordion?</mj-accordion-title>
21-
<mj-accordion-text font-weight="bold">
22-
<span style="line-height:20px">
23-
Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.
24-
</span>
25-
</mj-accordion-text>
26-
</mj-accordion-element>
27-
<mj-accordion-element>
28-
<mj-accordion-title font-weight="700" css-class="accordion-title">How it works</mj-accordion-title>
29-
<mj-accordion-text font-weight="700">
30-
<span style="line-height:20px">
31-
Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.
32-
</span>
33-
</mj-accordion-text>
34-
</mj-accordion-element>
35-
</mj-accordion>
36-
</mj-column>
37-
</mj-section>
38-
</mj-body>
39-
</mjml>
40-
`
5+
describe('mj-accordion-title font-weight', function () {
6+
it('should render correct font-weight in CSS style values on accordion-title', function () {
7+
const input = `
8+
<mjml>
9+
<mj-head>
10+
<mj-attributes>
11+
<mj-accordion border="none" padding="1px" />
12+
<mj-accordion-element icon-wrapped-url="https://i.imgur.com/Xvw0vjq.png" icon-unwrapped-url="https://i.imgur.com/KKHenWa.png" icon-height="24px" icon-width="24px" />
13+
<mj-accordion-title font-family="Roboto, Open Sans, Helvetica, Arial, sans-serif" background-color="#fff" color="#031017" padding="15px" font-size="18px" />
14+
<mj-accordion-text font-family="Open Sans, Helvetica, Arial, sans-serif" background-color="#fafafa" padding="15px" color="#505050" font-size="14px" />
15+
</mj-attributes>
16+
</mj-head>
17+
<mj-body>
18+
<mj-section padding="20px" background-color="#ffffff">
19+
<mj-column background-color="#dededd">
20+
<mj-accordion>
21+
<mj-accordion-element>
22+
<mj-accordion-title font-weight="bold" css-class="accordion-title">Why use an accordion?</mj-accordion-title>
23+
<mj-accordion-text font-weight="bold">
24+
<span style="line-height:20px">
25+
Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.
26+
</span>
27+
</mj-accordion-text>
28+
</mj-accordion-element>
29+
<mj-accordion-element>
30+
<mj-accordion-title font-weight="700" css-class="accordion-title">How it works</mj-accordion-title>
31+
<mj-accordion-text font-weight="700">
32+
<span style="line-height:20px">
33+
Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.
34+
</span>
35+
</mj-accordion-text>
36+
</mj-accordion-element>
37+
</mj-accordion>
38+
</mj-column>
39+
</mj-section>
40+
</mj-body>
41+
</mjml>
42+
`
4143

42-
const { html } = mjml(input)
44+
const { html } = mjml(input)
4345

44-
const $ = load(html)
46+
const $ = load(html)
4547

46-
// style values should be correct
47-
chai
48-
.expect(
49-
$('.accordion-title')
50-
.map(function getAttr() {
51-
const start = $(this).attr('style').indexOf('font-weight:') + 12
52-
const end = $(this).attr('style').indexOf(';', start)
53-
return $(this).attr('style').substring(start, end)
54-
})
55-
.get(),
56-
'Font-weight in CSS style values on accordion-title',
57-
)
58-
.to.eql(['bold', '700'])
48+
// style values should be correct
49+
chai
50+
.expect(
51+
$('.accordion-title')
52+
.map(function getAttr() {
53+
const start = $(this).attr('style').indexOf('font-weight:') + 12
54+
const end = $(this).attr('style').indexOf(';', start)
55+
return $(this).attr('style').substring(start, end)
56+
})
57+
.get(),
58+
'Font-weight in CSS style values on accordion-title',
59+
)
60+
.to.eql(['bold', '700'])
61+
})
62+
})

‎packages/mjml/test/html-attributes.test.js‎

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ const { load } = require('cheerio')
33
const { sortBy } = require('lodash')
44
const mjml = require('../lib')
55

6-
const input = `
6+
describe('html-attributes', function () {
7+
it('should put the attributes at the right place', function () {
8+
const input = `
79
<mjml>
810
<mj-head>
911
<mj-html-attributes>
@@ -35,44 +37,48 @@ const input = `
3537
</mjml>
3638
`
3739

38-
const { html } = mjml(input)
39-
const $ = load(html)
40+
const { html } = mjml(input)
41+
const $ = load(html)
4042

41-
// should put the attributes at the right place
42-
chai
43-
.expect(
44-
$('.text div')
45-
.map(function getAttr() {
46-
return $(this).attr('data-id')
47-
})
48-
.get(),
49-
'Custom attributes added on texts',
50-
)
51-
.to.eql(['42', '42'])
43+
// should put the attributes at the right place
44+
chai
45+
.expect(
46+
$('.text div')
47+
.map(function getAttr() {
48+
return $(this).attr('data-id')
49+
})
50+
.get(),
51+
'Custom attributes added on texts',
52+
)
53+
.to.eql(['42', '42'])
5254

53-
chai
54-
.expect(
55-
$('.image td')
56-
.map(function getAttr() {
57-
return $(this).attr('data-name')
58-
})
59-
.get(),
60-
'Custom attributes added on image',
61-
)
62-
.to.eql(['43'])
55+
chai
56+
.expect(
57+
$('.image td')
58+
.map(function getAttr() {
59+
return $(this).attr('data-name')
60+
})
61+
.get(),
62+
'Custom attributes added on image',
63+
)
64+
.to.eql(['43'])
6365

64-
// should not alter templating syntax, or move the content that is outside any tag (mj-raws)
65-
const expected = [
66-
'{ if item < 5 }',
67-
'class="section"',
68-
'{ if item > 10 }',
69-
'class="text"',
70-
'{ item }',
71-
'{ end if }',
72-
'{ item + 1 }',
73-
]
74-
const indexes = expected.map((str) => html.indexOf(str))
66+
// should not alter templating syntax, or move the content that is outside any tag (mj-raws)
67+
const expected = [
68+
'{ if item < 5 }',
69+
'class="section"',
70+
'{ if item > 10 }',
71+
'class="text"',
72+
'{ item }',
73+
'{ end if }',
74+
'{ item + 1 }',
75+
]
76+
const indexes = expected.map((str) => html.indexOf(str))
7577

76-
chai.expect(indexes, 'Templating syntax unaltered').to.not.include(-1)
78+
chai.expect(indexes, 'Templating syntax unaltered').to.not.include(-1)
7779

78-
chai.expect(sortBy(indexes), 'Mj-raws kept same positions').to.deep.eql(indexes)
80+
chai
81+
.expect(sortBy(indexes), 'Mj-raws kept same positions')
82+
.to.deep.eql(indexes)
83+
})
84+
})

‎packages/mjml/test/html-comments.test.js‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,37 @@
11
const chai = require('chai')
22
const mjml = require('../lib')
33

4-
const input = `
5-
<mjml>
6-
<mj-body>
7-
<mj-section>
8-
<mj-column>
9-
<mj-text>
10-
<p>View source to see comments below</p>
11-
<!-- comment with standard spaces -->
12-
<br>
13-
<!--comment without spaces-->
14-
<br>
15-
<!-- comment with 5 spaces -->
16-
</mj-text>
17-
</mj-column>
18-
</mj-section>
19-
</mj-body>
20-
</mjml>
21-
`
4+
describe('HTML comments', function () {
5+
it('should not alter the whitespace between the opening/closing comment tags and the comment content', function () {
6+
const input = `
7+
<mjml>
8+
<mj-body>
9+
<mj-section>
10+
<mj-column>
11+
<mj-text>
12+
<p>View source to see comments below</p>
13+
<!-- comment with standard spaces -->
14+
<br>
15+
<!--comment without spaces-->
16+
<br>
17+
<!-- comment with 5 spaces -->
18+
</mj-text>
19+
</mj-column>
20+
</mj-section>
21+
</mj-body>
22+
</mjml>
23+
`
2224

23-
const { html } = mjml(input)
25+
const { html } = mjml(input)
2426

25-
// should not alter templating syntax, or move the content that is outside any tag (mj-raws)
26-
const expected = [
27-
'<!-- comment with standard spaces -->',
28-
'<!--comment without spaces-->',
29-
'<!-- comment with 5 spaces -->',
30-
]
31-
const indexes = expected.map((str) => html.indexOf(str))
27+
// should not alter templating syntax, or move the content that is outside any tag (mj-raws)
28+
const expected = [
29+
'<!-- comment with standard spaces -->',
30+
'<!--comment without spaces-->',
31+
'<!-- comment with 5 spaces -->',
32+
]
33+
const indexes = expected.map((str) => html.indexOf(str))
3234

33-
chai.expect(indexes, 'Cmment syntax unaltered').to.not.include(-1)
35+
chai.expect(indexes, 'Cmment syntax unaltered').to.not.include(-1)
36+
})
37+
})

‎packages/mjml/test/index.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)