Merge pull request #695 from kethinov/test-refactor

Tests refactor and more cheerio polyfill work

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 ## Next version
 
-- Put your changes here...
+- Fixed client-side tests to test Teddy in the browser properly.
+- Refactored tests to improve maintainability.
+- Did further work on `cheerioPolyfill.js`. It's more than half finished, but it isn't fully done yet.
+- Updated various dependencies.
 
 ## 0.6.13
 

cheerioPolyfill.js

@@ -1,11 +1,4 @@
 // extend HTMLElement prototype to include cheerio properties
-Object.defineProperty(window.HTMLElement.prototype, 'attribs', {
-  get: function () {
-    if (this.__attribs === undefined) this.__attribs = this.attributes
-    return this.__attribs
-  }
-})
-
 Object.defineProperty(window.HTMLElement.prototype, 'name', {
   get: function () {
     if (this.__name === undefined) this.__name = this.nodeName.toLowerCase()
@@ -21,6 +14,7 @@ Object.defineProperty(window.HTMLElement.prototype, 'parent', {
 })
 
 // TODO: write more HTMLElement property extensions to polyfill cheerio: this will require reading teddy.js line by line to see what properties from cheerio each method uses and adapt them like above one property at a time
+// TODO: nextSibling, children?
 
 // create a native DOMParser
 const parser = new window.DOMParser()
@@ -29,14 +23,15 @@ const parser = new window.DOMParser()
 export function load (html) {
   console.log('Loading cheerio polyfill... TODO: This is unfinished! Please use teddy.mjs or teddy.cjs via a bundle for now.')
   const doc = parser.parseFromString(html, 'text/html')
+  console.log('doc:', doc.body.innerHTML)
 
   // return a querySelector function with function chains
   // e.g. dom('include') or dom(el) from teddy
   const $ = function (query) { // query can be a string, or a dom object
     // if query is a string, we need to create a dom object from the string: an object with elements in it, e.g. a list of include tag objects
     if (typeof query === 'string') {
       const els = doc.querySelectorAll(query)
-      console.log(els)
+      console.log('cheerio polyfill: dom(query)', els)
       return els // return the object collection
     }
 
@@ -46,40 +41,54 @@ export function load (html) {
 
       // e.g. dom(el).children() from teddy
       children: function () {
+        console.log('cheerio polyfill: children()', el.children)
         return el.children
       },
 
       // e.g. dom(arg).html() from teddy
       html: function () {
+        console.log('cheerio polyfill: html()', el.innerHTML)
         return el.innerHTML
       },
 
       // e.g. dom(el).attr('teddy_deferred_dynamic_include', 'true') from teddy
       attr: function (attr, val) {
+        console.log('cheerio polyfill: attr()', attr, val)
         return el.setAttribute(attr, val)
       },
 
       // dom(el).removeAttr(attr) from teddy
       removeAttr: function (attr) {
+        console.log('cheerio polyfill: removeAttr()', attr)
         return el.removeAttribute(attr)
       },
 
       // e.g. dom(el).replaceWith(localDom.html()) from teddy
       replaceWith: function (html) {
+        // can either be a string or an array of elements
+        console.log('replaceWith doc:', doc.body.innerHTML)
+        if (typeof html === 'object') {
+          let newHtml = ''
+          for (const el of html) newHtml += el.outerHTML
+          html = newHtml
+        }
         const temp = document.createElement('div')
         temp.innerHTML = html
         el.replaceWith(...temp.children)
+        console.log('replaceWith doc:', doc.body.innerHTML)
       },
 
       // e.g. dom(el).remove() from teddy
       remove: function () {
+        console.log('cheerio polyfill: remove()', el)
         return el.remove()
       }
     }
   }
 
   // e.g. dom.html() from teddy
   $.html = function () {
+    console.log('cheerio polyfill: dom.html()', doc.body.innerHTML)
     return doc.body.innerHTML
   }
 

package.json

@@ -30,11 +30,11 @@
     "cheerio": "1.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.48.0",
+    "@playwright/test": "1.48.1",
     "c8": "10.1.2",
     "codecov": "3.8.3",
     "cross-env": "7.0.3",
-    "eslint": "9.12.0",
+    "eslint": "9.13.0",
     "eslint-plugin-html": "8.1.2",
     "eslint-plugin-mocha": "10.5.0",
     "mocha": "10.7.3",
@@ -63,7 +63,7 @@
     "build": "webpack",
     "coverage": "npm run coverage-server && npm run coverage-client",
     "coverage-server": "npm run build && cross-env NODE_ENV=cover c8 mocha --timeout 60000 test/loaders/mocha.js",
-    "coverage-client": "npm run build && cross-env NODE_ENV=cover c8 playwright test",
+    "coverage-client": "npm run build && cross-env NODE_ENV=cover c8 --include=dist/teddy.js playwright test",
     "lint": "standard && eslint ./test && standard --plugin html *.html",
     "lint-fix": "standard --fix && eslint ./test && standard --plugin html *.html --fix",
     "test": "npm run test-server && npm run test-client",