Browse Source

Fix click-away test

Caleb Porzio 5 years ago
parent
commit
3ef1ef08f1
2 changed files with 12 additions and 2 deletions
  1. 1 1
      package.json
  2. 11 1
      test/on.spec.js

+ 1 - 1
package.json

@@ -7,7 +7,7 @@
     "url": "git://github.com/calebporzio/project-x.git"
     "url": "git://github.com/calebporzio/project-x.git"
   },
   },
   "scripts": {
   "scripts": {
-    "test": "jest",
+    "test": "npx jest",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "unminified": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "unminified": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "minified": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "minified": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

+ 11 - 1
test/on.spec.js

@@ -60,8 +60,18 @@ test('.prevent modifier', async () => {
 })
 })
 
 
 test('click away', async () => {
 test('click away', async () => {
+    // Because jsDom doesn't support .offsetHeight and offsetWidth, we have to
+    // make our own implementation using a specific class added to the class. Ugh.
+    Object.defineProperties(window.HTMLElement.prototype, {
+        offsetHeight: {
+          get: function() { return this.classList.contains('hidden') ? 0 : 1 }
+        },
+        offsetWidth: {
+          get: function() { return this.classList.contains('hidden') ? 0 : 1 }
+        }
+    });
+
     document.body.innerHTML = `
     document.body.innerHTML = `
-        <style>.hidden { display: none; }</style>
         <div id="outer">
         <div id="outer">
             <div x-data="{ isOpen: true }">
             <div x-data="{ isOpen: true }">
                 <button x-on:click="isOpen = true"></button>
                 <button x-on:click="isOpen = true"></button>