fix(outlook.com): fix positioning of underlines on outlook.com

This fixes an issue with the underlines in emails on outlook.com appearing above the words.
The root cause was that outlook.com changed the DOM structure, adding padding to the contenteditable div that was the normal parent
as well as adding another containing div with no `position` attribute to the hierarchy.
The new intermediate was being used as the parent for calculating coords but the coords of the words were relative to the contenteditable div.
Using offsetParent instead of parentNode skips the intermediate div and makes things line up properly.

fixes #134

package.json

@@ -86,7 +86,10 @@
       "^react$": "preact/compat",
       "^react-dom/test-utils$": "preact/test-utils",
       "^react-dom$": "preact/compat"
-    }
+    },
+    "setupFilesAfterEnv": [
+      "<rootDir>/spec/setupTests.js"
+    ]
   },
   "snapshotSerializers": [
     "preact-render-spy/snapshot"

spec/setupTests.js

@@ -0,0 +1,7 @@
+// Work-around for jsdom not supporting offsetParent
+// https://github.com/jsdom/jsdom/issues/1261
+Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+  get() {
+    return this.parentNode;
+  },
+});

src/components/JustNotSorry.js

@@ -50,8 +50,8 @@ class JustNotSorry extends Component {
         : findRanges(email, patterns);
 
     this.setState(({ parentNode }) =>
-      parentNode.id !== email.parentNode.id
-        ? { parentNode: email.parentNode, warnings: newWarnings }
+      parentNode.id !== email.offsetParent.id
+        ? { parentNode: email.offsetParent, warnings: newWarnings }
         : { parentNode, warnings: newWarnings }
     );
   }