feat(testing): add template rendering (#1838)

ionic-team · Aug 28, 2019 · ae74a27 · ae74a27
1 parent 8670bff
commit ae74a27
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/src/declarations/testing.ts b/src/declarations/testing.ts
@@ -546,6 +546,14 @@ export interface NewSpecPageOptions {
    * The initial HTML used to generate the test. This can be useful to construct a collection of components working together, and assign HTML attributes. This value sets the mocked `document.body.innerHTML`.
    */
   html?: string;
+
+  /**
+   * The initial JSX used to generate the test.
+   * Use `template` when you want to initialize a component using their properties, instead of their HTML attributes.
+   * It will render the specified template (JSX) into `document.body`.
+   */
+  template?: () => any;
+
   /**
    * Sets the mocked `lang` attribute on `<html>`.
    */

diff --git a/src/runtime/test/jsx.spec.tsx b/src/runtime/test/jsx.spec.tsx
@@ -0,0 +1,36 @@
+import { Component, Prop, h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+
+describe('jsx', () => {
+
+  it('render template', async () => {
+    @Component({ tag: 'cmp-a'})
+    class CmpA {
+      @Prop() complexProp: any;
+      render() {
+        return <div>The answer is: {this.complexProp.value}</div>;
+      }
+    }
+
+    const OBJECT = { value: 42 };
+    const MyFunctionalCmp = () => (
+      <cmp-a complexProp={OBJECT}></cmp-a>
+    );
+
+    const { root } = await newSpecPage({
+      components: [CmpA],
+      template: () => (
+        <MyFunctionalCmp />
+      )
+    });
+
+    expect(root).toEqualHtml(`
+      <cmp-a>
+        <div>
+          The answer is: 42
+        </div>
+      </cmp-a>
+    `);
+  });
+});
diff --git a/src/testing/spec-page.ts b/src/testing/spec-page.ts
@@ -153,7 +153,19 @@ export async function newSpecPage(opts: d.NewSpecPageOptions): Promise<d.SpecPag
 
   platform.bootstrapLazy(lazyBundles);
 
-  if (typeof opts.html === 'string') {
+  if (typeof opts.template === 'function') {
+    const ref: d.HostRef = {
+      $ancestorComponent$: undefined,
+      $flags$: 0,
+      $modeName$: undefined,
+      $hostElement$: page.body
+    };
+    const cmpMeta: d.ComponentRuntimeMeta = {
+      $flags$: 0,
+      $tagName$: 'body'
+    };
+    platform.renderVdom(page.body, ref, cmpMeta, opts.template());
+  } else if (typeof opts.html === 'string') {
     page.body.innerHTML = opts.html;
   }