feat(mock-doc): add Element (#1602)

Author: kensodemann

src/mock-doc/global.ts

@@ -58,6 +58,7 @@ const WINDOW_PROPS = [
   'CSS',
   'CustomEvent',
   'Event',
+  'Element',
   'HTMLElement',
   'KeyboardEvent'
 ];

src/mock-doc/window.ts

@@ -12,6 +12,7 @@ import { URL } from 'url';
 
 
 const historyMap = new WeakMap<MockWindow, MockHistory>();
+const elementCstrMap = new WeakMap<MockWindow, any>();
 const htmlElementCstrMap = new WeakMap<MockWindow, any>();
 const localStorageMap = new WeakMap<MockWindow, MockStorage>();
 const locMap = new WeakMap<MockWindow, MockLocation>();
@@ -180,6 +181,21 @@ export class MockWindow {
     historyMap.set(this, hsty);
   }
 
+  get Element() {
+    let ElementCstr = elementCstrMap.get(this);
+    if (ElementCstr == null) {
+      const ownerDocument = this.document;
+      ElementCstr = class extends MockElement {
+        constructor() {
+          super(ownerDocument, '');
+          throw (new Error('Illegal constructor: cannot construct Element'));
+        }
+      };
+      elementCstrMap.set(this, ElementCstr);
+    }
+    return ElementCstr;
+  }
+
   get HTMLElement() {
     let HtmlElementCstr = htmlElementCstrMap.get(this);
     if (HtmlElementCstr == null) {
@@ -421,6 +437,7 @@ export function resetWindow(win: Window) {
 
     historyMap.delete(win as any);
     htmlElementCstrMap.delete(win as any);
+    elementCstrMap.delete(win as any);
     localStorageMap.delete(win as any);
     locMap.delete(win as any);
     navMap.delete(win as any);

src/runtime/test/element.spec.tsx

@@ -1,13 +1,10 @@
 import { Component, Element, Method } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
-
 describe('element', () => {
-
-  it('event normal ionChange event', async () => {
-    @Component({ tag: 'cmp-a'})
+  it('allows the class to be set', async () => {
+    @Component({ tag: 'cmp-a' })
     class CmpA {
-
       @Element() el: HTMLElement;
 
       @Method()
@@ -18,7 +15,7 @@ describe('element', () => {
     // @ts-ignore
     const page = await newSpecPage({
       components: [CmpA],
-      html: `<cmp-a></cmp-a>`,
+      html: `<cmp-a></cmp-a>`
     });
 
     expect(page.root).toEqualHtml(`
@@ -32,5 +29,4 @@ describe('element', () => {
       <cmp-a class="new-class"></cmp-a>
     `);
   });
-
 });

src/runtime/test/globals.spec.tsx

@@ -28,4 +28,24 @@ describe('globals', () => {
     });
   });
 
+  it('allows access to the Element prototype', async () => {
+    @Component({ tag: 'cmp-el' })
+    class CmpEl {
+      // @ts-ignore
+      private proto: any;
+
+      constructor() {
+        this.proto = Element.prototype;
+      }
+    }
+
+    const page = await newSpecPage({
+      components: [CmpEl],
+      html: `<cmp-el></cmp-el>`
+    });
+
+    expect(page.root).toEqualHtml(`
+      <cmp-el></cmp-el>
+    `);
+  });
 });