test(heading): avoid newSpecPage usage to ease Lumina migration (#1…

…0431)

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: () => (
-        <Heading class="test" level={1}>
-          My Heading
-        </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<string, any>;
+    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(`<h1 class="test">My Heading</h1>`);
+describe("Heading", () => {
+  it("should render", async () => {
+    assertVNode(
+      <Heading class="test" level={1}>
+        My Heading
+      </Heading>,
+      {
+        tag: "h1",
+        attrs: { class: "test" },
+        children: ["My Heading"],
+      },
+    );
   });
 
   it("should render a div", async () => {
-    const page = await newSpecPage({
-      components: [],
-      template: () => <Heading class="test">My Heading</Heading>,
+    assertVNode(<Heading class="test">My Heading</Heading>, {
+      tag: "div",
+      attrs: { class: "test" },
+      children: ["My Heading"],
     });
-
-    expect(page.root).toEqualHtml(`<div class="test">My Heading</div>`);
   });
 });