fix: Fixed serializer and added proper tests (#33)

* Fixed serializer and added proper tests

* Dependencies upgrade

.gitignore

@@ -1,6 +1,4 @@
 node_modules
 coverage
 build
-jsconfig.json
 /serializer.js
-.vscode

package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "build": "babel src -d build && babel src/serializer.js -o serializer.js",
     "prepublish": "npm run build",
-    "test": "eslint src test && NODE_ENV=test jest --coverage",
+    "test": "eslint src test && npm run test-core && npm run test-serializer",
+    "test-core": "NODE_ENV=test jest --coverage",
+    "test-serializer": "cd tests/serializer && rm -rf node_modules && npm install && npm test",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"
   },
   "keywords": [
@@ -54,13 +56,19 @@
     "cz-conventional-changelog": "^1.2.0",
     "enzyme": "^2.4.1",
     "eslint": "^3.4.0",
-    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-babel": "~4.0.0",
     "eslint-plugin-react": "^6.2.0",
     "jest": "^17.0.0",
     "react": "^15.3.1",
     "react-addons-test-utils": "^15.3.1",
     "react-dom": "^15.3.1",
-    "semantic-release": "^4.3.5"
+    "semantic-release": "~6.3.2"
+  },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "<rootDir>/tests/serializer",
+      "<rootDir>/node_modules/"
+    ]
   },
   "config": {
     "commitizen": {

src/index.js

@@ -1,20 +1,18 @@
-import ShallowWrapper from 'enzyme/build/ShallowWrapper';
-import ReactWrapper from 'enzyme/build/ReactWrapper';
-
+import {isShallowWrapper, isReactWrapper, isCheerioWrapper} from './utils';
 import shallowToJson from './shallow';
 import mountToJson from './mount';
 import renderToJson from './render';
 
 export default function (wrapper) {
-    if (wrapper instanceof ShallowWrapper) {
+    if (isShallowWrapper(wrapper)) {
         return shallowToJson(wrapper);
     }
 
-    if (wrapper instanceof ReactWrapper) {
+    if (isReactWrapper(wrapper)) {
         return mountToJson(wrapper);
     }
 
-    if(wrapper.cheerio) {
+    if(isCheerioWrapper(wrapper)) {
         return renderToJson(wrapper);
     }
 }

src/serializer.js

@@ -1,13 +1,11 @@
-import ShallowWrapper from 'enzyme/build/ShallowWrapper';
-import ReactWrapper from 'enzyme/build/ReactWrapper';
-
+import {isEnzymeWrapper} from './build/utils';
 import toJson from './';
 
 module.exports = {
     test(wrapper) {
-        return wrapper instanceof ShallowWrapper || wrapper instanceof ReactWrapper || wrapper.cheerio;
+        return isEnzymeWrapper(wrapper);
     },
-    print(wrapper) {
-        return toJson(wrapper);
+    print(wrapper, serializer) {
+        return serializer(toJson(wrapper));
     },
 };

src/utils.js

@@ -0,0 +1,11 @@
+import ShallowWrapper from 'enzyme/build/ShallowWrapper';
+import ReactWrapper from 'enzyme/build/ReactWrapper';
+
+const SHALLOW_WRAPPER_NAME = ShallowWrapper.name;
+const REACT_WRAPPER_NAME = ReactWrapper.name;
+
+export const isShallowWrapper = wrapper => wrapper && wrapper.constructor && wrapper.constructor.name === SHALLOW_WRAPPER_NAME;
+export const isReactWrapper = wrapper => wrapper && wrapper.constructor && wrapper.constructor.name === REACT_WRAPPER_NAME;
+export const isCheerioWrapper = wrapper => wrapper.cheerio;
+
+export const isEnzymeWrapper = wrapper => isShallowWrapper(wrapper) || isReactWrapper(wrapper) || isCheerioWrapper(wrapper);

test/examples.test.js → tests/core/examples.test.js

@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 import { shallow } from 'enzyme';
-import { shallowToJson } from '../src';
+import { shallowToJson } from '../../src';
 
 class MyComponent extends Component {
     constructor() {

test/focused.test.js → tests/core/focused.test.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { shallowToJson } from '../src';
+import { shallowToJson } from '../../src';
 
 const MyComponent = props => (
     <div className={`my-component ${props.className}`}>

test/index.test.js → tests/core/index.test.js

@@ -1,17 +1,17 @@
 /* eslint-env jest */
 
-jest.mock('../src/shallow');
-jest.mock('../src/mount');
-jest.mock('../src/render');
+jest.mock('../../src/shallow');
+jest.mock('../../src/mount');
+jest.mock('../../src/render');
 
 import React from 'react';
 import { shallow, mount, render } from 'enzyme';
 
-import shallowToJson from '../src/shallow';
-import mountToJson from '../src/mount';
-import renderToJson from '../src/render';
+import shallowToJson from '../../src/shallow';
+import mountToJson from '../../src/mount';
+import renderToJson from '../../src/render';
 
-import toJson from '../src/index';
+import toJson from '../../src';
 
 it('runs shallowToJson when a shallow wrapper is passed', () => {
     const shallowed = shallow(<div>test</div>);

test/mount.test.js → tests/core/mount.test.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { mountToJson } from '../src';
+import { mountToJson } from '../../src';
 import { BasicPure, BasicWithUndefined } from './fixtures/pure-function';
 import { BasicClass, ClassWithPure, ClassWithDirectPure, ClassWithDirectComponent } from './fixtures/class';
 

test/render.test.js → tests/core/render.test.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { render } from 'enzyme';
-import { renderToJson } from '../src';
+import { renderToJson } from '../../src';
 import { BasicPure } from './fixtures/pure-function';
 import { BasicClass } from './fixtures/class';
 

test/shallow.test.js → tests/core/shallow.test.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { shallowToJson } from '../src';
+import { shallowToJson } from '../../src';
 import { BasicPure, BasicWithUndefined } from './fixtures/pure-function';
 import { BasicClass, ClassWithPure, ClassWithNull } from './fixtures/class';
 

tests/serializer/.gitignore

@@ -0,0 +1 @@
+node_modules

tests/serializer/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "serializer-test",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "jest": {
+    "snapshotSerializers": [
+      "<rootDir>/../../serializer"
+    ]
+  },
+  "devDependencies": {
+    "enzyme": "file:../../node_modules/enzyme",
+    "jest": "file:../../node_modules/jest",
+    "react": "file:../../node_modules/react"
+  }
+}

tests/serializer/tests/__snapshots__/examples.test.js.snap

@@ -0,0 +1,20 @@
+exports[`test renders correctly 1`] = `
+<div
+  className="my-component"
+  onClick={[Function]}>
+  <span
+    className="count">
+    1
+  </span>
+  <strong>
+    Hello World!
+  </strong>
+</div>
+`;
+
+exports[`test renders span after setState 1`] = `
+<span
+  className="count">
+  42
+</span>
+`;

tests/serializer/tests/__snapshots__/focused.test.js.snap

@@ -0,0 +1,21 @@
+exports[`test renders a \`span\` correctly 1`] = `
+<span>
+  <span>
+    Hello World!
+  </span>
+</span>
+`;
+
+exports[`test renders a \`strong\` correctly 1`] = `
+<span>
+  <strong>
+    Hello World!
+  </strong>
+</span>
+`;
+
+exports[`test renders the right title 1`] = `
+<h3>
+  Component Title
+</h3>
+`;

tests/serializer/tests/__snapshots__/mount.test.js.snap

@@ -0,0 +1,148 @@
+exports[`test converts a class mount with a class component in it as a direct child 1`] = `
+<ClassWithDirectComponent
+  className="class">
+  <ClassWithPure
+    className="nested-pure">
+    <div
+      className="class-with-pure nested-pure"
+      onClick={[Function]}>
+      <BasicPure
+        className="nested-pure">
+        <div
+          className="basic-pure nested-pure"
+          onClick={[Function]}>
+          <div
+            className="group"
+            id="group-id">
+            <span>
+              <span>
+                <span>
+                  <strong>
+                    Hello!
+                  </strong>
+                </span>
+                <span
+                  className="empty" />
+              </span>
+              <span
+                className="empty" />
+            </span>
+            <span
+              className="empty" />
+          </div>
+        </div>
+      </BasicPure>
+    </div>
+  </ClassWithPure>
+</ClassWithDirectComponent>
+`;
+
+exports[`test converts a class mount with a pure function in it 1`] = `
+<ClassWithPure
+  className="class">
+  <div
+    className="class-with-pure class"
+    onClick={[Function]}>
+    <BasicPure
+      className="nested-pure">
+      <div
+        className="basic-pure nested-pure"
+        onClick={[Function]}>
+        <div
+          className="group"
+          id="group-id">
+          <span>
+            <span>
+              <strong>
+                Hello!
+              </strong>
+            </span>
+            <span
+              className="empty" />
+          </span>
+          <span
+            className="empty" />
+        </div>
+      </div>
+    </BasicPure>
+  </div>
+</ClassWithPure>
+`;
+
+exports[`test converts a class mount with a pure function in it as a direct child 1`] = `
+<ClassWithDirectPure
+  className="class">
+  <BasicPure
+    className="nested-pure">
+    <div
+      className="basic-pure nested-pure"
+      onClick={[Function]}>
+      <div
+        className="group"
+        id="group-id">
+        <span>
+          <span>
+            <strong>
+              Hello!
+            </strong>
+          </span>
+          <span
+            className="empty" />
+        </span>
+        <span
+          className="empty" />
+      </div>
+    </div>
+  </BasicPure>
+</ClassWithDirectPure>
+`;
+
+exports[`test converts basic class mount 1`] = `
+<BasicClass
+  className="class">
+  <div
+    className="basic-class class"
+    onClick={[Function]}>
+    <div
+      className="group"
+      id="group-id">
+      <span>
+        <strong>
+          Hello!
+        </strong>
+      </span>
+      <span
+        className="empty" />
+    </div>
+  </div>
+</BasicClass>
+`;
+
+exports[`test converts basic pure mount 1`] = `
+<BasicPure
+  className="pure">
+  <div
+    className="basic-pure pure"
+    onClick={[Function]}>
+    <div
+      className="group"
+      id="group-id">
+      <span>
+        <strong>
+          Hello!
+        </strong>
+      </span>
+      <span
+        className="empty" />
+    </div>
+  </div>
+</BasicPure>
+`;
+
+exports[`test skips undefined props 1`] = `
+<BasicWithUndefined>
+  <button>
+    Hello
+  </button>
+</BasicWithUndefined>
+`;