Merge pull request #22 from contentstack/bugs/dom-parser

uttamukkoji · web-flow · commit 2c48fde25c58 · 2023-02-27T15:07:39.000+05:30
HTML parser added Dom parser
diff --git a/.commitlintrc.json b/.commitlintrc.json
@@ -0,0 +1,31 @@
+{
+  "extends": ["@commitlint/config-conventional"],
+  "rules": {
+    "subject-case": [
+      2,
+      "always",
+      ["sentence-case", "start-case", "pascal-case", "upper-case", "lower-case"]
+    ],
+		"subject-empty": [2, "never"],
+		"subject-full-stop": [2, "never", "."],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "build",
+        "chore",
+        "ci",
+        "docs",
+        "feat",
+        "fix",
+        "perf",
+        "refactor",
+        "revert",
+        "style",
+        "test",
+        "sample"
+      ]
+    ],
+    "type-empty": [2, "never"]
+  }
+}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,22 +1,30 @@
-# This is a basic workflow to help you get started with Actions
-
 name: Unit-Test-CI
 
-# Controls when the action will run. Triggers the workflow on push or pull request
-# events but only for the master branch
 on:
   push:
     branches: [ master ]
   pull_request:
     branches: [ master ]
 
 jobs:
-  build:
+  build-test:
     runs-on: ubuntu-latest
-    # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
-      - uses: actions/checkout@v2
-      - name: Install modules
-        run: npm install
-      - name: Run tests
-        run: npm run test
+        - uses: actions/checkout@v3
+        - uses: ArtiomTr/jest-coverage-report-action@v2
+          id: coverage-utils-js
+          with:
+            output: comment, report-markdown
+        - uses: marocchino/sticky-pull-request-comment@v2
+          with:
+              header: Contentstack Utils JS Coverage
+              recreate: true
+              message: ${{ steps.coverage-utils-js.outputs.report }}
+        - name: Test Report
+          uses: dorny/test-reporter@v1
+          if: success() || failure()
+          with:
+            name: JEST Tests
+            path: reports/junit/jest-*.xml
+            reporter: jest-junit
+            fail-on-error: true
diff --git a/.gitignore b/.gitignore
@@ -1,16 +1,16 @@
 *.DS_Store
 examples/*
-node_modules/*
+node_modules/
 .idea/*
-reports/*
-apidocs-templates/*
-testcase-report/*
+reports/
+apidocs-templates/
+testcase-report/
 test/smtpconfig.js/*
 test/config.js/*
 test/sync_config.js/*
 test/report.json/*
 tap-html.html
 *html-report
-dist/*
+dist/
 coverage/
-.dccache
+.dccache
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run test
diff --git a/.jsdoc.json b/.jsdoc.json
diff --git a/.npmignore b/.npmignore
@@ -2,5 +2,8 @@ src
 tsconfig.json
 tslint.json
 .prettierrc
+.talismanrc
 jestconfig.json
-CODEOWNERS
+jest.config.ts
+CODEOWNERS
+reports/
diff --git a/__test__/html-to-json.test.ts b/__test__/html-to-json.test.ts
@@ -1,6 +1,5 @@
 import { elementToJson } from '../src/helper/html-to-json';
 import { assetDisplayJson, assetDisplayLink, assetDisplayLinkJson } from './mock/embedded-object-mock';
-import { parse } from 'node-html-parser';
 import { entryBlock,
     entryInline,
     entryLink,
@@ -12,27 +11,31 @@ import { entryBlock,
     entryInlineJson,
     entryBlockJson
  } from './mock/embedded-object-mock';
-const noChildNodeHTML = parse(noChildNode)
+const dom = new DOMParser();
+const getBody = (content: string) => {
+    return dom.parseFromString(content, 'text/html').body
+}
+
 describe('HTML To JSON test', () => {
     it('HTML To JSON figure tag with no child test', done => {
-        expect(elementToJson(noChildNodeHTML)).toEqual({ figure: noChildNodeJson})
+        expect(elementToJson(getBody(noChildNode))).toEqual({ figure: noChildNodeJson})
         done()
     })
 
     it('HTML to JSON entry figure tag test', done => {
-        expect(elementToJson(parse(entryLink))).toEqual({ figure: entryLinkJson })
-        expect(elementToJson(parse(entryInline))).toEqual({ figure: entryInlineJson })
-        expect(elementToJson(parse(entryBlock))).toEqual({ figure: entryBlockJson })
+        expect(elementToJson(getBody(entryLink))).toEqual({ figure: entryLinkJson })
+        expect(elementToJson(getBody(entryInline))).toEqual({ figure: entryInlineJson })
+        expect(elementToJson(getBody(entryBlock))).toEqual({ figure: entryBlockJson })
         done()
     })
 
     it('HTML to JSON asset figure tag test', done => {
-        expect(elementToJson(parse(assetDisplay))).toEqual({ figure: assetDisplayJson })
-        expect(elementToJson(parse(assetDisplayLink))).toEqual({ figure: assetDisplayLinkJson })
+        expect(elementToJson(getBody(assetDisplay))).toEqual({ figure: assetDisplayJson })
+        expect(elementToJson(getBody(assetDisplayLink))).toEqual({ figure: assetDisplayLinkJson })
         done()
     })
     it('HTML to JSON false tag test', done => {
-        expect(elementToJson(parse(unexpectedCloseTag))).toEqual({ "figur2":{
+        expect(elementToJson(getBody(unexpectedCloseTag))).toEqual({ "figur2":{
             "#text": " \n",
             "class": "embedded-asset",
             "data-sys-content-type-uid": "data-sys-content-type-uid",
@@ -41,18 +44,8 @@ describe('HTML To JSON test', () => {
             "sys-style-type": "inline",
             "type": "asset"
         } })
-        expect(elementToJson(parse('String'))).toEqual({ "#text": "String" })
-        expect(elementToJson(parse(''))).toEqual({})
-        expect(elementToJson(parse(`<data><![CDATA[This text contains a CEND ]]]]><![CDATA[>]]></data>`))).toEqual( {
-            "data": {
-              "#text": "<![CDATA[This text contains a CEND ]]]]><![CDATA[>]]>",
-            },
-        })
-        done()
-    })
-    
-    it('HTML comment to JSON false tag test', done => {
-        expect(elementToJson(parse('<html><!-- Comment in html --><html>', { comment: true}))).toEqual({ html: {} })
+        expect(elementToJson(getBody('String'))).toEqual({ "#text": "String" })
+        expect(elementToJson(getBody(''))).toEqual({})
         done()
     })
 })
diff --git a/__test__/mock/embedded-object-mock.ts b/__test__/mock/embedded-object-mock.ts
@@ -31,7 +31,7 @@ export const assetDisplayLinkJson ={
   "sys-style-type": "display",
   "type": "asset",
 }
-export const entryBlock = `<figure class="embedded-entry block-entry" data-redactor-type="embed" type="entry" data-sys-entry-uid="asset_uid_5"  data-sys-entry-locale="en-us" data-sys-content-type-uid="article" sys-style-type="block">{{title}}</figure>`
+export const entryBlock = `<figure class="embedded-entry block-entry" data-redactor-type="embed" type="entry" data-sys-entry-uid="asset_uid_5" data-sys-entry-locale="en-us" data-sys-content-type-uid="article" sys-style-type="block">{{title}}</figure>`
 export const entryBlockJson = { 
   class: "embedded-entry block-entry",
   type: 'entry',
@@ -43,7 +43,7 @@ export const entryBlockJson = {
   "data-sys-entry-locale": "en-us"
 }
 
-export const entryInline = `<figure class="embedded-entry inline-entry" data-redactor-type="embed"  type="entry" data-sys-entry-uid="asset_uid_5" data-sys-entry-locale="en-us" data-sys-content-type-uid="article" style="display:inline;" sys-style-type="inline">{{title}}
+export const entryInline = `<figure class="embedded-entry inline-entry" data-redactor-type="embed" type="entry" data-sys-entry-uid="asset_uid_5" data-sys-entry-locale="en-us" data-sys-content-type-uid="article" style="display:inline;" sys-style-type="inline">{{title}}
 </figure>`
 export const entryInlineJson = { 
   class: "embedded-entry inline-entry",
diff --git a/badges/badge-branches.svg b/badges/badge-branches.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="20" role="img" aria-label="Coverage:branches: 93.1%"><title>Coverage:branches: 93.1%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="164" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="47" height="20" fill="#4c1"/><rect width="164" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:branches</text><text aria-hidden="true" x="1395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">93.1%</text><text x="1395" y="140" transform="scale(.1)" fill="#fff" textLength="370">93.1%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20" role="img" aria-label="Coverage:branches: 93.68%"><title>Coverage:branches: 93.68%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#4c1"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:branches</text><text aria-hidden="true" x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">93.68%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">93.68%</text></g></svg>
diff --git a/jest.config.ts b/jest.config.ts
@@ -1,5 +1,6 @@
-{
+export default {
     "preset": "ts-jest",
+    "testEnvironment": "jsdom",
     "transform": {
       "^.+\\.(t|j)sx?$": "ts-jest",
       "^.+\\.(ts|tsx|js|jsx)$": "babel-jest"
@@ -13,6 +14,7 @@
       "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
     ],
     "collectCoverage": true,
+    coverageDirectory: './reports/coverage',
     "coverageReporters": [
       "json", 
       "html",
@@ -36,10 +38,22 @@
     "default",
     ["jest-html-reporters", 
       {
-        "publicPath": "./testcase-report",
+        "publicPath": "./reports/html",
         "filename": "index.html",
         "expand": true
       }
+    ],
+    ["jest-junit",
+        {
+            "outputDirectory": "reports/junit",
+            "outputName": "jest-junit.xml",
+            "ancestorSeparator": " › ",
+            "uniqueOutputName": "false",
+            "suiteNameTemplate": "{filepath}",
+            "classNameTemplate": "{classname}",
+            "titleTemplate": "{title}"
+        }
     ]
   ]
-}
+};
+  
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/src/extensions/index.ts b/src/extensions/index.ts
diff --git a/src/helper/html-to-json.ts b/src/helper/html-to-json.ts
