jest tests 86% (stmts) - 100% (funcs) coverage

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

package.json

@@ -19,7 +19,8 @@
     "minify": "uglifyjs $npm_package_main -cm -o $npm_package_minified_main",
     "lint": "eslint src/",
     "test": "jest",
-    "test:watch": "jest -w",
+    "test:watch": "jest --watchAll",
+    "coverage": "jest --coverage",
     "prepublish": "npm run build"
   },
   "babel": {
@@ -75,6 +76,7 @@
     "mocha": "^3.4.2",
     "npm-run-all": "^4.0.2",
     "preact": "^8.1.0",
+    "regenerator-runtime": "^0.10.5",
     "replace-bundle-webpack-plugin": "^1.0.0",
     "rimraf": "^2.6.1",
     "rollup": "^0.41.6",
@@ -88,15 +90,12 @@
     "simulant": "^0.2.2"
   },
   "jest": {
-    "setupFiles": [
-      "./test/helpers/setup.js"
-    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    },
     "moduleFileExtensions": [
       "js"
     ],
-    "moduleDirectories": [
-      "node_modules"
-    ],
     "collectCoverageFrom": [
       "src/**/*.{js}"
     ]

src/test/habitat.test.js

@@ -0,0 +1,88 @@
+import { h, Component } from "preact";
+import simulant from "simulant";
+
+import {
+  collectPropsFromElement,
+  widgetDOMHostElements,
+  getExecutedScript,
+  camelcasize
+} from "../lib";
+
+import habitat from "../index";
+
+const TEST_TITLE = "Hello, World!";
+
+class TitleComponent extends Component {
+  render() {
+    return (
+      <h1 className="test">
+        {TEST_TITLE}
+      </h1>
+    );
+  }
+}
+
+describe("Module API Specs", () => {
+  it("should export habitat factory function", () => {
+    expect(typeof habitat).toBe("function");
+  });
+
+  it("should return render function form the habitat factory", () => {
+    expect(typeof habitat().render).toBe("function");
+  });
+});
+
+/**
+ * Renders the widget based on client specified attributes
+ */
+describe("Habitat Client Control Renderer", () => {
+  it("should inline the widget and render it once", () => {
+    document.body.innerHTML = `
+        <script></script>
+        `;
+    let hb = habitat(TitleComponent);
+    hb.render(null, { inline: true });
+
+    let widgets = document.querySelectorAll(".test");
+    expect(document.body.innerHTML).toContain(TEST_TITLE);
+    expect(widgets.length).toBe(1);
+  });
+  it("should render the widget in 3 habitat elements", () => {
+    document.body.innerHTML = `
+            <div data-widget="my-widget"></div>
+            <div data-widget="my-widget"></div>
+            <div data-widget="my-widget"></div>
+        `;
+    let hb = habitat(TitleComponent);
+    hb.render('[data-widget="my-widget"]');
+
+    let widgets = document.querySelectorAll(".test");
+    expect(document.body.innerHTML).toContain(TEST_TITLE);
+    expect(widgets.length).toBe(3);
+  });
+  it("should render 2 custom attributes habitat elements", () => {
+    document.body.innerHTML = `
+      <div data-widget-tv="tv-player"></div>
+      <div data-widget-tv="tv-player"></div>
+    `
+    let hb = habitat(TitleComponent);
+    hb.render('[data-widget-tv="tv-player"]');
+
+    let widgets = document.querySelectorAll(".test");
+    expect(document.body.innerHTML).toContain(TEST_TITLE);
+    expect(widgets.length).toBe(2);
+  });
+
+  it("should render 1 widget and not clean its content", () => {
+    document.body.innerHTML = `
+      <div data-table-widget="datatable">LOADING BIG TABLE</div>
+    `
+    let hb = habitat(TitleComponent);
+    hb.render('[data-table-widget="datatable"]');
+
+    let widgets = document.querySelectorAll('[data-table-widget="datatable"]');
+    expect(document.body.innerHTML).toContain("LOADING BIG TABLE");
+    expect(widgets[0].innerHTML).toContain(TEST_TITLE);
+    expect(widgets.length).toBe(1);
+  });
+});

test/lib.test.js → src/test/lib.test.js

@@ -1,80 +1,103 @@
 import { h } from 'preact';
-import { expect } from 'chai';
 import {
   collectPropsFromElement,
   widgetDOMHostElements,
   getExecutedScript,
   camelcasize,
   getHabitatSelectorFromClient
-} from '../src/lib';
+} from '../lib';
 
-import habitat from '../src';
+import habitat from '../index';
 
 describe('Helper utility: Camel Casing for props', () => {
   it('should not camcelCase names with no dashes', () => {
     const propOne = 'somepropname';
     // document must find current script tag
-    expect(camelcasize(propOne)).to.equal(propOne);
+    expect(camelcasize(propOne)).toBe(propOne);
   });
 
   it('should camcelCase prop names with dashes `-`', () => {
     const propOne = 'some-prop-name';
     // document must find current script tag
-    expect(camelcasize(propOne)).to.equal('somePropName');
+    expect(camelcasize(propOne)).toBe('somePropName');
   });
 })
 
 describe('Helper utility: Client DOM querying with widgetDOMHostElements', () => {
   it('should find host using data attribute', () => {
+    document.body.innerHTML = `
+      <div data-widget="my-widget"></div>
+      <div data-widget="my-widget"></div>
+      <div data-widget="my-widget"></div>
+    `
     const hostHabitats = widgetDOMHostElements("[data-widget='my-widget']", { clientSpecified: false, inline: false, clean: false });
     // document must find current script tag
-    expect(hostHabitats.length).to.equal(3);
+    expect(hostHabitats.length).toBe(3);
   });
 
   it('should find host using class name', () => {
+    document.body.innerHTML = `
+      <div class="classy-widget"></div>
+      <div class="classy-widget"></div>
+      <div class="classy-widget"></div>
+    `
     const hostHabitats = widgetDOMHostElements(".classy-widget", { clientSpecified: false, inline: false, clean: false });
     // document must find current script tag
-    expect(hostHabitats.length).to.equal(3);
+    expect(hostHabitats.length).toBe(3);
   });
 
   it('should find host using ID', () => {
+    document.body.innerHTML = `
+      <div id="idee-widget"></div>
+    `
     const hostHabitats = widgetDOMHostElements("#idee-widget", { clientSpecified: false, inline: false, clean: false });
     // document must find current script tag
-    expect(hostHabitats.length).to.equal(1);
+    expect(hostHabitats.length).toBe(1);
   });
 
   it('should get the currently getting executed script tag', () => {
-    expect(getExecutedScript(document)).to.not.be.undefined;
+    document.body.innerHTML = `
+      <script></script>
+    `
+    expect(getExecutedScript(document)).toBeDefined();
   });
 
   it('should get habitats selectors from client script itself', () => {
+    document.body.innerHTML = `
+      <script id="find-mount-here" data-mount-in=".my-widget"></script>
+    `
     let currentScript = document.getElementById('find-mount-here')
-
-    expect(getHabitatSelectorFromClient(currentScript)).to.equal('.my-widget');
+    expect(getHabitatSelectorFromClient(currentScript)).toBe('.my-widget');
   });
 });
 
 
 describe('Helper utility: collecting Client DOM props with collectPropsFromElement', () => {
   it('should pass props down from the client\'s div', () => {
+    document.body.innerHTML = `
+      <div id="sucess-props-check" data-props-name="zouhir" data-props-key="11001100"></div>
+    `
     const habitatDiv = document.getElementById('sucess-props-check');
     const expectedProps = {
       name: 'zouhir',
       key: '11001100'
     };
     const propsObj = collectPropsFromElement(habitatDiv);
     // document must find current script tag
-    expect(propsObj).to.deep.equal(expectedProps);
+    expect(propsObj).toEqual(expectedProps);
   });
 
   it('should accept data-props- as well as data-prop attributes on the div', () => {
-    const habitatDiv = document.getElementById('sucess-props-check2');
+    document.body.innerHTML = `
+      <div id="sucess-props-check" data-prop-name="zouhir" data-prop-key="11001100"></div>
+    `
+    const habitatDiv = document.getElementById('sucess-props-check');
     const expectedProps = {
       name: 'zouhir',
       key: '11001100'
     };
     const propsObj = collectPropsFromElement(habitatDiv);
     // document must find current script tag
-    expect(propsObj).to.deep.equal(expectedProps);
+    expect(propsObj).toEqual(expectedProps);
   });
 })