diff --git a/packages/calcite-components/src/components/functional/Heading.spec.tsx b/packages/calcite-components/src/components/functional/Heading.spec.tsx index 888bec6d0de..4dc1befea3d 100644 --- a/packages/calcite-components/src/components/functional/Heading.spec.tsx +++ b/packages/calcite-components/src/components/functional/Heading.spec.tsx @@ -1,5 +1,4 @@ -import { h } from "@stencil/core"; -import { newSpecPage } from "@stencil/core/testing"; +import { h, VNode } from "@stencil/core"; import { constrainHeadingLevel, Heading } from "./Heading"; describe("constrainHeadingLevel", () => { @@ -13,26 +12,55 @@ describe("constrainHeadingLevel", () => { }); }); -describe("Heading", () => { - it("should render", async () => { - const page = await newSpecPage({ - components: [], - template: () => ( - - My Heading - +/** + * simple VNode assertion util to help get rid of newSpecPage usage + * + * @param vnode + * @param expected + * @param expected.tag + * @param expected.attrs + * @param expected.children + */ +function assertVNode( + vnode: VNode, + expected: { + tag: string; + attrs: Record; + children: (VNode | string)[]; + }, +) { + expect(vnode).toEqual( + expect.objectContaining({ + $tag$: expected.tag, + $attrs$: expect.objectContaining(expected.attrs), + $children$: expected.children.map((child) => + typeof child === "string" + ? expect.objectContaining({ $text$: child }) + : expect.objectContaining(child), ), - }); + }), + ); +} - expect(page.root).toEqualHtml(`

My Heading

`); +describe("Heading", () => { + it("should render", async () => { + assertVNode( + + My Heading + , + { + tag: "h1", + attrs: { class: "test" }, + children: ["My Heading"], + }, + ); }); it("should render a div", async () => { - const page = await newSpecPage({ - components: [], - template: () => My Heading, + assertVNode(My Heading, { + tag: "div", + attrs: { class: "test" }, + children: ["My Heading"], }); - - expect(page.root).toEqualHtml(`
My Heading
`); }); });