[REF] components: remove .el

src/component/component.ts

@@ -19,10 +19,6 @@ export class Component {
     this.env = env;
     this.__owl__ = node;
   }
-  get el(): HTMLElement | Text | undefined {
-    const node = this.__owl__;
-    return node.bdom ? (node.bdom.firstNode() as any) : undefined;
-  }
 
   setup() {}
 

tests/components/__snapshots__/basics.test.ts.snap

@@ -117,7 +117,7 @@ exports[`basics can inject values in tagged templates 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__73\`);
+  const callTemplate_2 = getTemplate(\`__template__999\`);
   
   return function template(ctx, node, key = \\"\\") {
     return callTemplate_2.call(this, ctx, node, key + \`__1\`);
@@ -306,19 +306,6 @@ exports[`basics do not remove previously rendered dom if not necessary, variatio
 }"
 `;
 
-exports[`basics has no el after creation 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>simple</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`basics higher order components parent and child 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/__snapshots__/slots.test.ts.snap

@@ -218,7 +218,7 @@ exports[`slots can use t-call in default-content of t-slot 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot, getTemplate } = helpers;
-  const callTemplate_3 = getTemplate(\`__template__128\`);
+  const callTemplate_3 = getTemplate(\`__template__999\`);
   
   function defaultContent1(ctx, node, key = \\"\\") {
     return callTemplate_3.call(this, ctx, node, key + \`__2\`);
@@ -1241,7 +1241,7 @@ exports[`slots slot and (inline) t-call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { capture, getTemplate } = helpers;
-  const callTemplate_4 = getTemplate(\`__template__112\`);
+  const callTemplate_4 = getTemplate(\`__template__999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1290,7 +1290,7 @@ exports[`slots slot and t-call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { capture, getTemplate } = helpers;
-  const callTemplate_4 = getTemplate(\`__template__109\`);
+  const callTemplate_4 = getTemplate(\`__template__999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   

tests/components/__snapshots__/t_call.test.ts.snap

@@ -50,7 +50,7 @@ exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const template2 = ('__template__8');
+    const template2 = ('__template__999');
     let b2 = call(this, template2, ctx, node, key + \`__1\`);
     let d1 = ctx['counter'];
     return block1([d1], [b2]);
@@ -77,7 +77,7 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__6\`);
+  const callTemplate_2 = getTemplate(\`__template__999\`);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
@@ -108,7 +108,7 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__19\`);
+  const callTemplate_2 = getTemplate(\`__template__999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -139,7 +139,7 @@ exports[`t-call parent is set within t-call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__10\`);
+  const callTemplate_2 = getTemplate(\`__template__999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -179,7 +179,7 @@ exports[`t-call parent is set within t-call with no parentNode 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__16\`);
+  const callTemplate_2 = getTemplate(\`__template__999\`);
   
   return function template(ctx, node, key = \\"\\") {
     return callTemplate_2.call(this, ctx, node, key + \`__1\`);
@@ -264,7 +264,7 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, getTemplate, withKey } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__13\`);
+  const callTemplate_2 = getTemplate(\`__template__999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   

tests/components/__snapshots__/t_key.test.ts.snap

@@ -42,12 +42,9 @@ exports[`t-key t-key on Component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__2\`, node, ctx));
-    return block1([], [b2]);
+    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__2\`, node, ctx));
   }
 }"
 `;

tests/components/app.test.ts

@@ -1,7 +1,7 @@
 import { App, Component } from "../../src";
 import { status } from "../../src/component/status";
 import { xml } from "../../src/tags";
-import { makeTestFixture, snapshotEverything, nextTick } from "../helpers";
+import { makeTestFixture, snapshotEverything, nextTick, elem } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -19,7 +19,7 @@ describe("app", () => {
 
     const app = new App(SomeComponent);
     const comp = await app.mount(fixture);
-    const el = comp.el!;
+    const el = elem(comp);
     expect(document.contains(el)).toBe(true);
     app.destroy();
     expect(document.contains(el)).toBe(false);

tests/components/basics.test.ts

@@ -1,6 +1,6 @@
 import { App, Component, mount, status, useState } from "../../src";
 import { xml } from "../../src/tags";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 import { markup } from "../../src/utils";
 
 let fixture: HTMLElement;
@@ -20,20 +20,7 @@ describe("basics", () => {
     const component = await mount(Test, fixture);
 
     expect(fixture.innerHTML).toBe("<span>simple vnode</span>");
-    expect(component.el).toEqual(fixture.querySelector("span"));
-  });
-
-  test("has no el after creation", async () => {
-    let el: any = null;
-    class Test extends Component {
-      static template = xml`<span>simple</span>`;
-      setup() {
-        el = this.el;
-      }
-    }
-
-    await mount(Test, fixture);
-    expect(el).toBeUndefined();
+    expect(elem(component)).toEqual(fixture.querySelector("span"));
   });
 
   test("cannot mount on a documentFragment", async () => {
@@ -59,7 +46,7 @@ describe("basics", () => {
     const component = await app.mount(fixture);
 
     expect(fixture.innerHTML).toBe("<span>3</span>");
-    expect(component.el).toEqual(fixture.querySelector("span"));
+    expect(elem(component)).toEqual(fixture.querySelector("span"));
   });
 
   test("can mount a component with just some text", async () => {
@@ -70,7 +57,7 @@ describe("basics", () => {
     const component = await mount(Test, fixture);
 
     expect(fixture.innerHTML).toBe("just text");
-    expect(component.el).toBeInstanceOf(Text);
+    expect(elem(component)).toBeInstanceOf(Text);
   });
 
   test("can mount a component with no text", async () => {
@@ -81,7 +68,7 @@ describe("basics", () => {
     const component = await mount(Test, fixture);
 
     expect(fixture.innerHTML).toBe("");
-    expect(component.el).toBeInstanceOf(Text);
+    expect(elem(component)).toBeInstanceOf(Text);
   });
 
   test("can mount a simple component with multiple roots", async () => {
@@ -92,7 +79,7 @@ describe("basics", () => {
     const component = await mount(Test, fixture);
 
     expect(fixture.innerHTML).toBe("<span></span><div></div>");
-    expect((component.el as any).tagName).toBe("SPAN");
+    expect(elem(component).tagName).toBe("SPAN");
   });
 
   test("component with dynamic content can be updated", async () => {
@@ -144,11 +131,10 @@ describe("basics", () => {
   });
 
   test("some simple sanity checks (el/status)", async () => {
-    expect.assertions(4);
+    expect.assertions(3);
     class Test extends Component {
       static template = xml`<span>simple vnode</span>`;
       setup() {
-        expect(this.el).toBe(undefined);
         expect(status(this)).toBe("new");
       }
     }
@@ -380,13 +366,14 @@ describe("basics", () => {
       });
     }
 
-    const counter = await mount(Counter, fixture);
+    await mount(Counter, fixture);
     expect(fixture.innerHTML).toBe("<div>0<button>Inc</button></div>");
-    const button = (<HTMLElement>counter.el).getElementsByTagName("button")[0];
+    const button = fixture.getElementsByTagName("button")[0];
     button.click();
     await nextTick();
     expect(fixture.innerHTML).toBe("<div>1<button>Inc</button></div>");
   });
+
   // TODO: rename
   test("rerendering a widget with a sub widget", async () => {
     class Counter extends Component {
@@ -493,7 +480,7 @@ describe("basics", () => {
     }
     const widget = await mount(SomeComponent, fixture);
     expect(fixture.innerHTML).toBe(`<div></div>`);
-    widget.el!.appendChild(document.createElement("span"));
+    fixture.querySelector("div")!.appendChild(document.createElement("span"));
     expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
     await widget.render();
     expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
@@ -506,7 +493,7 @@ describe("basics", () => {
     }
     const comp = await mount(SomeComponent, fixture);
     expect(fixture.innerHTML).toBe(`<div><h1>h1</h1><span>1</span></div>`);
-    (comp.el! as any).querySelector("h1")!.appendChild(document.createElement("p"));
+    fixture.querySelector("h1")!.appendChild(document.createElement("p"));
     expect(fixture.innerHTML).toBe("<div><h1>h1<p></p></h1><span>1</span></div>");
 
     comp.state.value++;

tests/components/event_handling.test.ts

@@ -41,10 +41,10 @@ describe("event handling", () => {
       obj = { onInput: (ev: any) => (this.state.value = ev.target.value) };
     }
 
-    const counter = await mount(Counter, fixture);
+    await mount(Counter, fixture);
     await nextTick();
     expect(fixture.innerHTML).toBe(`<div><input type="text"></div>`);
-    const input = (<HTMLElement>counter.el).getElementsByTagName("input")[0];
+    const input = fixture.getElementsByTagName("input")[0];
     input.value = "test";
     input.dispatchEvent(new Event("input"));
     await nextTick();

tests/components/hooks.test.ts

@@ -17,7 +17,7 @@ import {
   useSubEnv,
   xml,
 } from "../../src/index";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -506,7 +506,7 @@ describe("hooks", () => {
       // Wait for an owl render
       await new Promise((resolve) => requestAnimationFrame(resolve));
       // Value was correctly changed inside the component
-      expect(component.el!.textContent).toBe("1");
+      expect(elem(component).textContent).toBe("1");
       steps.push("after state mutation");
       await component.__owl__.destroy();
 

tests/components/lifecycle.test.ts

@@ -9,6 +9,7 @@ import {
 import { status } from "../../src/component/status";
 import { xml } from "../../src/tags";
 import {
+  elem,
   makeDeferred,
   makeTestFixture,
   nextTick,
@@ -123,7 +124,7 @@ describe("lifecycle hooks", () => {
       static template = xml`<div/>`;
       setup() {
         onMounted(() => {
-          expect(document.body.contains(this.el!)).toBe(true);
+          expect(document.body.contains(elem(this))).toBe(true);
           steps.push("child:mounted");
         });
       }

tests/components/style_class.test.ts

@@ -287,7 +287,7 @@ describe("style and class handling", () => {
       state = useState({ c: true });
       setup() {
         onMounted(() => {
-          (<HTMLDivElement>this.el!).classList.add("user");
+          fixture.querySelector("div")!.classList.add("user");
         });
       }
     }

tests/components/style_tag.test.ts

@@ -9,7 +9,7 @@ beforeEach(() => {
 
 describe("styles and component", () => {
   test("can define an inline stylesheet", async () => {
-    class App extends Component {
+    class Root extends Component {
       static template = xml`<div class="app">text</div>`;
       static style = css`
         .app {
@@ -18,17 +18,17 @@ describe("styles and component", () => {
       `;
     }
     expect(document.head.innerHTML).toBe("");
-    const app = await mount(App, fixture);
-    expect(document.head.innerHTML).toBe(`<style data-component=\"App\">.app {
+    await mount(Root, fixture);
+    expect(document.head.innerHTML).toBe(`<style data-component=\"Root\">.app {
   color: red;
 }</style>`);
-    const style = getComputedStyle(app.el as HTMLElement);
+    const style = getComputedStyle(fixture.querySelector("div")!);
     expect(style.color).toBe("red");
     expect(fixture.innerHTML).toBe('<div class="app">text</div>');
   });
 
   test("inherited components properly apply css", async () => {
-    class App extends Component {
+    class Root extends Component {
       static template = xml`<div class="app">text</div>`;
       static style = css`
         .app {
@@ -36,7 +36,7 @@ describe("styles and component", () => {
         }
       `;
     }
-    class SubApp extends App {
+    class OtherRoot extends Root {
       static style = css`
         .app {
           font-weight: bold;
@@ -44,13 +44,13 @@ describe("styles and component", () => {
       `;
     }
     expect(document.head.innerHTML).toBe("");
-    const app = await mount(SubApp, fixture);
-    expect(document.head.innerHTML).toBe(`<style data-component=\"App\">.app {
+    await mount(OtherRoot, fixture);
+    expect(document.head.innerHTML).toBe(`<style data-component=\"Root\">.app {
   color: red;
-}</style><style data-component=\"SubApp\">.app {
+}</style><style data-component=\"OtherRoot\">.app {
   font-weight: bold;
 }</style>`);
-    const style = getComputedStyle(app.el as HTMLElement);
+    const style = getComputedStyle(fixture.querySelector("div")!);
     expect(style.color).toBe("red");
     expect(style.fontWeight).toBe("bold");
     expect(fixture.innerHTML).toBe('<div class="app">text</div>');

tests/components/t_foreach.test.ts

@@ -292,11 +292,11 @@ describe("list of components", () => {
     }
 
     const parent = await mount(Parent, fixture);
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div><div>2</div>");
+    expect(fixture.innerHTML).toBe("<span><div>1</div><div>2</div></span>");
     parent.clist = [2, 1];
     parent.render();
     await nextTick();
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div><div>1</div>");
+    expect(fixture.innerHTML).toBe("<span><div>2</div><div>1</div></span>");
     expect(childInstances.length).toBe(2);
   });
 

tests/components/t_key.test.ts

@@ -1,4 +1,4 @@
-import { snapshotEverything, makeTestFixture, nextTick } from "../helpers";
+import { snapshotEverything, makeTestFixture, nextTick, elem } from "../helpers";
 import { Component, mount, xml } from "../../src/index";
 
 snapshotEverything();
@@ -22,19 +22,19 @@ describe("t-key", () => {
 
     class Parent extends Component {
       static components = { Child };
-      static template = xml`<span><Child t-key="key" key="key" /></span>`;
+      static template = xml`<Child t-key="key" key="key" />`;
 
       key = 1;
     }
 
     const parent = await mount(Parent, fixture);
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div>");
+    expect(fixture.innerHTML).toBe("<div>1</div>");
 
     const oldChild = childInstance;
     parent.key = 2;
     parent.render();
     await nextTick();
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div>");
+    expect(fixture.innerHTML).toBe("<div>2</div>");
     expect(oldChild === childInstance).toBeFalsy();
   });
 
@@ -61,14 +61,14 @@ describe("t-key", () => {
     }
 
     const parent = await mount(Parent, fixture);
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div>");
+    expect(fixture.innerHTML).toBe("<span><div>1</div></span>");
     expect(keyCalls).toBe(2); // one for t-key, the other for the props
 
     const oldChild = childInstance;
     __key = 2;
     parent.render();
     await nextTick();
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div>");
+    expect(fixture.innerHTML).toBe("<span><div>2</div></span>");
     expect(oldChild === childInstance).toBeFalsy();
     expect(keyCalls).toBe(4);
   });
@@ -95,13 +95,13 @@ describe("t-key", () => {
     }
 
     const parent = await mount(Parent, fixture);
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div><div>2</div>");
+    expect(elem(parent).innerHTML).toBe("<div>1</div><div>2</div>");
 
     parent.key1 = 2;
     parent.key2 = 1;
     parent.render();
     await nextTick();
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div><div>1</div>");
+    expect(elem(parent).innerHTML).toBe("<div>2</div><div>1</div>");
     expect(childInstances.length).toBe(4);
   });
 
@@ -134,13 +134,13 @@ describe("t-key", () => {
           </t>
         </templates>`,
     });
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div><div>2</div>");
+    expect(elem(parent).innerHTML).toBe("<div>1</div><div>2</div>");
 
     parent.key1 = 2;
     parent.key2 = 1;
     parent.render();
     await nextTick();
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div><div>1</div>");
+    expect(elem(parent).innerHTML).toBe("<div>2</div><div>1</div>");
     expect(childInstances.length).toBe(4);
   });
 
@@ -172,13 +172,13 @@ describe("t-key", () => {
           </t>
         </templates>`,
     });
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div><div>2</div>");
+    expect(elem(parent).innerHTML).toBe("<div>1</div><div>2</div>");
 
     parent.key1 = 2;
     parent.key2 = 1;
     parent.render();
     await nextTick();
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div><div>1</div>");
+    expect(elem(parent).innerHTML).toBe("<div>2</div><div>1</div>");
     expect(childInstances.length).toBe(4);
   });
 
@@ -204,11 +204,11 @@ describe("t-key", () => {
     }
 
     const parent = await mount(Parent, fixture);
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1key1</div><div>2key1</div>");
+    expect(elem(parent).innerHTML).toBe("<div>1key1</div><div>2key1</div>");
     parent.clist = [2, 1];
     parent.render();
     await nextTick();
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2key1</div><div>1key1</div>");
+    expect(elem(parent).innerHTML).toBe("<div>2key1</div><div>1key1</div>");
     expect(childInstances.length).toBe(2);
     childInstances.length = 0;
 
@@ -216,7 +216,7 @@ describe("t-key", () => {
     parent.key1 = "key2";
     parent.render();
     await nextTick();
-    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1key2</div><div>2key2</div>");
+    expect(elem(parent).innerHTML).toBe("<div>1key2</div><div>2key2</div>");
     expect(childInstances.length).toBe(2);
   });
 });

tests/components/t_on.test.ts

@@ -1,5 +1,5 @@
 import { Component, mount, onMounted, useState, xml } from "../../src/index";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 import { status } from "../../src/component/status";
 
 snapshotEverything();
@@ -13,7 +13,7 @@ beforeEach(() => {
 describe("t-on", () => {
   test("t-on on destroyed components", async () => {
     const steps: string[] = [];
-    let child;
+    let child: any;
     class Child extends Component {
       static template = xml`<div t-on-click="onClick"/>`;
       setup() {
@@ -31,7 +31,7 @@ describe("t-on", () => {
       state = useState({ flag: true });
     }
     const parent = await mount(Parent, fixture);
-    let el = (child as any).el as HTMLElement;
+    let el = elem(child!);
     el.click();
     expect(steps).toEqual(["click"]);
     (parent as any).state.flag = false;

tests/helpers.ts

@@ -13,6 +13,7 @@ import {
   onWillUpdateProps,
   status,
   useComponent,
+  xml,
 } from "../src";
 import { UTILS } from "../src/app/template_helpers";
 import { globalTemplates, TemplateSet } from "../src/app/template_set";
@@ -37,6 +38,9 @@ export function makeTestFixture() {
   return fixture;
 }
 
+beforeEach(() => {
+  xml.nextId = 999;
+});
 export async function nextTick(): Promise<void> {
   await new Promise((resolve) => setTimeout(resolve));
   await new Promise((resolve) => requestAnimationFrame(resolve));
@@ -185,6 +189,10 @@ export function isDirectChildOf(child: Component, parent: Component): boolean {
   return children(parent).includes(child);
 }
 
+export function elem(component: Component): any {
+  return component.__owl__.firstNode();
+}
+
 export async function editInput(input: HTMLInputElement | HTMLTextAreaElement, value: string) {
   input.value = value;
   input.dispatchEvent(new Event("input"));

tests/misc/portal.test.ts

@@ -11,7 +11,7 @@ import {
 } from "../../src";
 import { Portal } from "../../src/";
 import { xml } from "../../src/tags";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;
 let originalconsoleWarn = console.warn;
@@ -133,9 +133,9 @@ describe("Portal", () => {
             </div>`;
     }
 
-    const parent = await mount(Parent, fixture);
-    expect((parent.el as any)!.innerHTML).toBe(
-      '<div id="local-target"><p>2</p></div><span>1</span>'
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(
+      '<div><div id="local-target"><p>2</p></div><span>1</span></div>'
     );
   });
 
@@ -152,9 +152,9 @@ describe("Portal", () => {
             </div>`;
     }
 
-    const parent = await mount(Parent, fixture);
-    expect((parent.el as any)!.innerHTML).toBe(
-      '<span>1</span><div id="local-target"><p>2</p></div>'
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(
+      '<div><span>1</span><div id="local-target"><p>2</p></div></div>'
     );
   });
 
@@ -213,12 +213,12 @@ describe("Portal", () => {
 
     const parent = await mount(Parent, fixture);
     expect(outside.innerHTML).toBe("<span>1</span>");
-    expect((parent.el as any).innerHTML).toBe("");
+    expect(fixture.innerHTML).toBe('<div id="outside"><span>1</span></div><div></div>');
 
     parent.state.val = 2;
     await nextTick();
     expect(outside.innerHTML).toBe("<span>2</span>");
-    expect((parent.el as any).innerHTML).toBe("");
+    expect(fixture.innerHTML).toBe('<div id="outside"><span>2</span></div><div></div>');
     expect(steps).toEqual(["mounted", "patched"]);
   });
 
@@ -476,7 +476,7 @@ describe("Portal", () => {
     addOutsideDiv(fixture);
     await mount(Parent, fixture);
 
-    childInst!.el!.dispatchEvent(new CustomEvent("custom"));
+    elem(childInst!).dispatchEvent(new CustomEvent("custom"));
     expect(steps).toEqual(["custom"]);
   });
 });