From cca8438d3828325beb0e1c7f8eb02bc5d97c29b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Mon, 20 Dec 2021 13:54:52 +0100 Subject: [PATCH] [REF] components: remove .el --- src/component/component.ts | 4 -- .../__snapshots__/basics.test.ts.snap | 15 +------- .../__snapshots__/slots.test.ts.snap | 6 +-- .../__snapshots__/t_call.test.ts.snap | 12 +++--- .../__snapshots__/t_key.test.ts.snap | 5 +-- tests/components/app.test.ts | 4 +- tests/components/basics.test.ts | 37 ++++++------------- tests/components/event_handling.test.ts | 4 +- tests/components/hooks.test.ts | 4 +- tests/components/lifecycle.test.ts | 3 +- tests/components/style_class.test.ts | 2 +- tests/components/style_tag.test.ts | 20 +++++----- tests/components/t_foreach.test.ts | 4 +- tests/components/t_key.test.ts | 30 +++++++-------- tests/components/t_on.test.ts | 6 +-- tests/helpers.ts | 8 ++++ tests/misc/portal.test.ts | 20 +++++----- 17 files changed, 80 insertions(+), 104 deletions(-) diff --git a/src/component/component.ts b/src/component/component.ts index 420bfdeb..551bc776 100644 --- a/src/component/component.ts +++ b/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() {} diff --git a/tests/components/__snapshots__/basics.test.ts.snap b/tests/components/__snapshots__/basics.test.ts.snap index 58657a1e..ecd092ba 100644 --- a/tests/components/__snapshots__/basics.test.ts.snap +++ b/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(\`simple\`); - - return function template(ctx, node, key = \\"\\") { - return block1(); - } -}" -`; - exports[`basics higher order components parent and child 1`] = ` "function anonymous(bdom, helpers ) { diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap index f01ba330..c0b20c02 100644 --- a/tests/components/__snapshots__/slots.test.ts.snap +++ b/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(\`
\`); @@ -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(\`
\`); diff --git a/tests/components/__snapshots__/t_call.test.ts.snap b/tests/components/__snapshots__/t_call.test.ts.snap index 72ba5cdc..1f5f4500 100644 --- a/tests/components/__snapshots__/t_call.test.ts.snap +++ b/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(\`
\`); 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(\`
\`); @@ -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(\`
\`); @@ -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(\`
\`); @@ -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(\`
\`); diff --git a/tests/components/__snapshots__/t_key.test.ts.snap b/tests/components/__snapshots__/t_key.test.ts.snap index 69f46f21..4bb92ec2 100644 --- a/tests/components/__snapshots__/t_key.test.ts.snap +++ b/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(\`\`); - 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)); } }" `; diff --git a/tests/components/app.test.ts b/tests/components/app.test.ts index a44aee32..6a563079 100644 --- a/tests/components/app.test.ts +++ b/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); diff --git a/tests/components/basics.test.ts b/tests/components/basics.test.ts index 50ef8ed2..9c085198 100644 --- a/tests/components/basics.test.ts +++ b/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("simple vnode"); - 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`simple`; - 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("3"); - 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("
"); - 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`simple vnode`; 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("
0
"); - const button = (counter.el).getElementsByTagName("button")[0]; + const button = fixture.getElementsByTagName("button")[0]; button.click(); await nextTick(); expect(fixture.innerHTML).toBe("
1
"); }); + // 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(`
`); - widget.el!.appendChild(document.createElement("span")); + fixture.querySelector("div")!.appendChild(document.createElement("span")); expect(fixture.innerHTML).toBe(`
`); await widget.render(); expect(fixture.innerHTML).toBe(`
`); @@ -506,7 +493,7 @@ describe("basics", () => { } const comp = await mount(SomeComponent, fixture); expect(fixture.innerHTML).toBe(`

h1

1
`); - (comp.el! as any).querySelector("h1")!.appendChild(document.createElement("p")); + fixture.querySelector("h1")!.appendChild(document.createElement("p")); expect(fixture.innerHTML).toBe("

h1

1
"); comp.state.value++; diff --git a/tests/components/event_handling.test.ts b/tests/components/event_handling.test.ts index 699caed5..ef44fd3d 100644 --- a/tests/components/event_handling.test.ts +++ b/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(`
`); - const input = (counter.el).getElementsByTagName("input")[0]; + const input = fixture.getElementsByTagName("input")[0]; input.value = "test"; input.dispatchEvent(new Event("input")); await nextTick(); diff --git a/tests/components/hooks.test.ts b/tests/components/hooks.test.ts index 1b09fcce..e1e6c275 100644 --- a/tests/components/hooks.test.ts +++ b/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(); diff --git a/tests/components/lifecycle.test.ts b/tests/components/lifecycle.test.ts index 0617b6e6..ba220d1f 100644 --- a/tests/components/lifecycle.test.ts +++ b/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`
`; setup() { onMounted(() => { - expect(document.body.contains(this.el!)).toBe(true); + expect(document.body.contains(elem(this))).toBe(true); steps.push("child:mounted"); }); } diff --git a/tests/components/style_class.test.ts b/tests/components/style_class.test.ts index 6cf341e8..ddd73a94 100644 --- a/tests/components/style_class.test.ts +++ b/tests/components/style_class.test.ts @@ -287,7 +287,7 @@ describe("style and class handling", () => { state = useState({ c: true }); setup() { onMounted(() => { - (this.el!).classList.add("user"); + fixture.querySelector("div")!.classList.add("user"); }); } } diff --git a/tests/components/style_tag.test.ts b/tests/components/style_tag.test.ts index cd3d72e4..a0609fe7 100644 --- a/tests/components/style_tag.test.ts +++ b/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`
text
`; 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(``); - const style = getComputedStyle(app.el as HTMLElement); + const style = getComputedStyle(fixture.querySelector("div")!); expect(style.color).toBe("red"); expect(fixture.innerHTML).toBe('
text
'); }); test("inherited components properly apply css", async () => { - class App extends Component { + class Root extends Component { static template = xml`
text
`; 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(``); - 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('
text
'); diff --git a/tests/components/t_foreach.test.ts b/tests/components/t_foreach.test.ts index 680df867..155472db 100644 --- a/tests/components/t_foreach.test.ts +++ b/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("
1
2
"); + expect(fixture.innerHTML).toBe("
1
2
"); parent.clist = [2, 1]; parent.render(); await nextTick(); - expect((parent.el as HTMLElement).innerHTML).toBe("
2
1
"); + expect(fixture.innerHTML).toBe("
2
1
"); expect(childInstances.length).toBe(2); }); diff --git a/tests/components/t_key.test.ts b/tests/components/t_key.test.ts index 249c92d8..4d3c9a11 100644 --- a/tests/components/t_key.test.ts +++ b/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``; + static template = xml``; key = 1; } const parent = await mount(Parent, fixture); - expect((parent.el as HTMLElement).innerHTML).toBe("
1
"); + expect(fixture.innerHTML).toBe("
1
"); const oldChild = childInstance; parent.key = 2; parent.render(); await nextTick(); - expect((parent.el as HTMLElement).innerHTML).toBe("
2
"); + expect(fixture.innerHTML).toBe("
2
"); expect(oldChild === childInstance).toBeFalsy(); }); @@ -61,14 +61,14 @@ describe("t-key", () => { } const parent = await mount(Parent, fixture); - expect((parent.el as HTMLElement).innerHTML).toBe("
1
"); + expect(fixture.innerHTML).toBe("
1
"); 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("
2
"); + expect(fixture.innerHTML).toBe("
2
"); 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("
1
2
"); + expect(elem(parent).innerHTML).toBe("
1
2
"); parent.key1 = 2; parent.key2 = 1; parent.render(); await nextTick(); - expect((parent.el as HTMLElement).innerHTML).toBe("
2
1
"); + expect(elem(parent).innerHTML).toBe("
2
1
"); expect(childInstances.length).toBe(4); }); @@ -134,13 +134,13 @@ describe("t-key", () => { `, }); - expect((parent.el as HTMLElement).innerHTML).toBe("
1
2
"); + expect(elem(parent).innerHTML).toBe("
1
2
"); parent.key1 = 2; parent.key2 = 1; parent.render(); await nextTick(); - expect((parent.el as HTMLElement).innerHTML).toBe("
2
1
"); + expect(elem(parent).innerHTML).toBe("
2
1
"); expect(childInstances.length).toBe(4); }); @@ -172,13 +172,13 @@ describe("t-key", () => { `, }); - expect((parent.el as HTMLElement).innerHTML).toBe("
1
2
"); + expect(elem(parent).innerHTML).toBe("
1
2
"); parent.key1 = 2; parent.key2 = 1; parent.render(); await nextTick(); - expect((parent.el as HTMLElement).innerHTML).toBe("
2
1
"); + expect(elem(parent).innerHTML).toBe("
2
1
"); 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("
1key1
2key1
"); + expect(elem(parent).innerHTML).toBe("
1key1
2key1
"); parent.clist = [2, 1]; parent.render(); await nextTick(); - expect((parent.el as HTMLElement).innerHTML).toBe("
2key1
1key1
"); + expect(elem(parent).innerHTML).toBe("
2key1
1key1
"); 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("
1key2
2key2
"); + expect(elem(parent).innerHTML).toBe("
1key2
2key2
"); expect(childInstances.length).toBe(2); }); }); diff --git a/tests/components/t_on.test.ts b/tests/components/t_on.test.ts index ecce65dd..09d05981 100644 --- a/tests/components/t_on.test.ts +++ b/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`
`; 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; diff --git a/tests/helpers.ts b/tests/helpers.ts index 0ac144c7..ae14ba9e 100644 --- a/tests/helpers.ts +++ b/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 { 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")); diff --git a/tests/misc/portal.test.ts b/tests/misc/portal.test.ts index 237ee0da..66492cf8 100644 --- a/tests/misc/portal.test.ts +++ b/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", () => {
`; } - const parent = await mount(Parent, fixture); - expect((parent.el as any)!.innerHTML).toBe( - '

2

1' + await mount(Parent, fixture); + expect(fixture.innerHTML).toBe( + '

2

1
' ); }); @@ -152,9 +152,9 @@ describe("Portal", () => {
`; } - const parent = await mount(Parent, fixture); - expect((parent.el as any)!.innerHTML).toBe( - '1

2

' + await mount(Parent, fixture); + expect(fixture.innerHTML).toBe( + '
1

2

' ); }); @@ -213,12 +213,12 @@ describe("Portal", () => { const parent = await mount(Parent, fixture); expect(outside.innerHTML).toBe("1"); - expect((parent.el as any).innerHTML).toBe(""); + expect(fixture.innerHTML).toBe('
1
'); parent.state.val = 2; await nextTick(); expect(outside.innerHTML).toBe("2"); - expect((parent.el as any).innerHTML).toBe(""); + expect(fixture.innerHTML).toBe('
2
'); 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"]); }); });