improve test coverage part 1/2 (#20)

* add coverage

* reformat mjml properly in readme

* add test for label

* add getLabel test

* add package.json keywords

* convert all rendered html to json for testability purpose

* add tests for getChartTitle method

* add test for render method

* change code coverage action

* change jest coverage config

.github/workflows/test.yml

@@ -16,12 +16,21 @@ jobs:
                   cache: "npm"
             - name: Install and Build
               run: npm ci
-            - name: Test
-              run: npm test
             - name: Prettier
               run: npm run prettier
+            - name: Tests
+              run: npm run test:coverage
+            - name: Code Coverage
+              uses: greatwizard/coverage-diff-action@v1
+              with:
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  allowed-to-fail: false
+                  badge-enabled: true
+                  badge-threshold-green: 90
+                  badge-threshold-orange: 80
             - name: Generate Changelog
               run: git log --oneline $(git describe --tags --abbrev=0)..HEAD >> CHANGELOG.txt
+              if: ${{ startsWith(github.ref, 'refs/tags/') }}
             - name: Release
               uses: softprops/action-gh-release@v1
               if: ${{ startsWith(github.ref, 'refs/tags/') }}

.gitignore

@@ -2,4 +2,5 @@
 index.html
 build
 node_modules
-.parcel-cache
+.parcel-cache
+coverage

.prettierignore

@@ -0,0 +1,2 @@
+README.md
+coverage

.prettierrc

@@ -1,10 +1,7 @@
-{
-	"$schema": "https://json.schemastore.org/prettierrc",
-	"semi": true,
-	"trailingComma": "es5",
-	"singleQuote": false,
-	"useTabs": true,
-	"tabWidth": 4,
-	"printWidth": 100,
-	"bracketSpacing": true
-}
+semi: true
+trailingComma: "es5"
+singleQuote: false
+useTabs: true
+tabWidth: 4
+printWidth: 100
+bracketSpacing: true

README.md

@@ -4,7 +4,7 @@
 
 First you'll have to install `mjml-bar-chart` in your project.
 
-```
+```sh
 npm i -S @freezystem/mjml-bar-chart
 ```
 
@@ -20,7 +20,7 @@ Or import it and manually register the plugin.
 
 with **ESM**:
 
-```ecmascript 6
+```js
 import { registerComponent } from "mjml-core";
 import MjBarChart from "@freezystem/mjml-bar-chart";
 
@@ -29,7 +29,7 @@ registerComponent(MjBarChart);
 
 with **CJS**:
 
-```ecmascript 6
+```js
 const { registerComponent } = require("mjml-core");
 const MjBarChart = require("@freezystem/mjml-bar-chart");
 
@@ -40,19 +40,18 @@ You can now use the `mjml-bar-chart` component in your MJML templates:
 
 ```mjml
 <mjml>
-	<mj-body>
-		<mj-section>
-			<mj-column>
-				<mj-bar-chart
-					title="Sum of Requests by Department"
-					dataset-labels="January,February,March"
-					datasets="[[33,14,27],[18,66,42],[7,15,21]]"
-					groups="support,sales,tech"
-					colors="#d8f3dc,#95d5b2,#52b788"
-				/>
-			</mj-column>
-		</mj-section>
-	</mj-body>
+  <mj-body>
+    <mj-section>
+      <mj-column>
+        <mj-bar-chart
+          title="Sum of Requests by Department"
+          dataset-labels="January,February,March"
+          datasets="[[33,14,27],[18,66,42],[7,15,21]]"
+          groups="support,sales,tech"
+          colors="#d8f3dc,#95d5b2,#52b788"/>
+      </mj-column>
+    </mj-section>
+  </mj-body>
 </mjml>
 ```
 

package.json

@@ -7,6 +7,12 @@
 	},
 	"version": "1.1.1",
 	"description": "A simple MJML component to make static bar charts",
+	"keywords": [
+		"mjml",
+		"chart",
+		"bar chart",
+		"email"
+	],
 	"main": "./build/index.js",
 	"module": "./build/esm/index.js",
 	"types": "./build/types/index.d.ts",
@@ -24,6 +30,8 @@
 		"build": "tsc -b tsconfig.json tsconfig.esm.json tsconfig.types.json",
 		"postinstall": "npm run build",
 		"test": "jest",
+		"test:coverage": "jest --coverage",
+		"test:snap": "jest --updateSnapshot",
 		"deps": "npm-check -u",
 		"postdeps": "npm audit fix",
 		"preversion": "git reset && git switch main && git fetch -p && git pull",
@@ -37,7 +45,7 @@
 	"homepage": "https://github.com/Freezystem/mjml-bar-chart",
 	"license": "MIT",
 	"devDependencies": {
-		"@types/jest": "^29.5.10",
+		"@types/jest": "^29.5.11",
 		"@types/mjml": "^4.7.4",
 		"@types/mjml-core": "^4.7.4",
 		"@types/mjml-validator": "^4.13.4",
@@ -46,7 +54,7 @@
 		"npm-check": "^6.0.1",
 		"prettier": "^3.1.0",
 		"ts-jest": "^29.1.1",
-		"typescript": "^5.3.2"
+		"typescript": "^5.3.3"
 	},
 	"dependencies": {
 		"mjml": "^4.14.1",
@@ -59,10 +67,19 @@
 		"coverageDirectory": "<rootDir>/coverage",
 		"coverageReporters": [
 			"text-summary",
-			"cobertura"
+			"json-summary"
 		],
 		"preset": "ts-jest",
 		"testEnvironment": "node",
+		"reporters": [
+			[
+				"github-actions",
+				{
+					"silent": false
+				}
+			],
+			"summary"
+		],
 		"moduleFileExtensions": [
 			"ts",
 			"js"