feat(jest): add snapshot serializer (#1570)

Tallyb · adamdbradley · commit 4e2eba02467a · 2019-05-27T12:15:26.000-05:00
diff --git a/src/testing/jest/jest-serializer.ts b/src/testing/jest/jest-serializer.ts
@@ -0,0 +1,21 @@
+
+import { MockNode, serializeNodeToHtml } from '@mock-doc';
+
+const print =  (val: HTMLElement | MockNode): string => {
+    return serializeNodeToHtml(val, {
+        serializeShadowRoot: true,
+        prettyHtml: true,
+        outerHtml: true,
+    });
+};
+
+const test = (val: any): boolean => {
+    return val !== undefined &&
+    val !== null &&
+    (val instanceof HTMLElement || val instanceof MockNode);
+};
+
+export const HtmlSerializer = {
+    print,
+    test
+};
diff --git a/src/testing/jest/jest-setup-test-framework.ts b/src/testing/jest/jest-setup-test-framework.ts
@@ -2,7 +2,7 @@ import * as d from '../../declarations';
 import { expectExtend } from '../matchers';
 import { setupGlobal, teardownGlobal } from '@mock-doc';
 import { setupMockFetch } from '../mock-fetch';
-
+import { HtmlSerializer } from './jest-serializer';
 
 declare const global: d.JestEnvironmentGlobal;
 
@@ -11,6 +11,7 @@ export function jestSetupTestFramework() {
   global.resourcesUrl = '/build';
 
   expect.extend(expectExtend);
+  expect.addSnapshotSerializer(HtmlSerializer);
 
   setupGlobal(global);
   setupMockFetch(global);
diff --git a/src/testing/jest/test/__snapshots__/jest-serializer.spec.ts.snap b/src/testing/jest/test/__snapshots__/jest-serializer.spec.ts.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`serialize node should serialize 1`] = `
+<body>
+  <div>
+    Test
+  </div>
+</body>
+`;
diff --git a/src/testing/jest/test/jest-serializer.spec.ts b/src/testing/jest/test/jest-serializer.spec.ts
@@ -0,0 +1,28 @@
+import { HtmlSerializer } from '../jest-serializer';
+import { MockDocument } from '@stencil/core/mock-doc';
+
+describe('serialize node', () => {
+    let doc: MockDocument;
+    beforeEach(() => {
+      doc = new MockDocument();
+      const div = doc.createElement('div');
+      div.innerText = 'Test';
+      doc.body.appendChild(div);
+    });
+
+    it('should be valid serializer', () => {
+        expect(HtmlSerializer.test(doc)).toBeTruthy();
+        expect(HtmlSerializer.test(doc.body)).toBeTruthy();
+    });
+
+    it('should generate serialized element', () => {
+        const result = HtmlSerializer.print(doc.body);
+        expect(result).toContain(`<div>`);
+    });
+
+    it('should serialize', () => {
+        expect.addSnapshotSerializer(HtmlSerializer);
+        expect(doc.body).toMatchSnapshot();
+    });
+
+});

-Original file line number
+Diff line change
@@ @@ -0,0 +1,9 @@ @@
 +// Jest Snapshot v1, https://goo.gl/fbAQLP
++
 +exports[`serialize node should serialize 1`] = `
 +<body>
 +  <div>
 +    Test
 +  </div>
 +</body>
 +`;