add tests, fix register

Author: BramKaashoek

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.6",
+  "version": "0.1.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,6 +39,7 @@
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
     "husky": "^4.2.5",
+    "mutationobserver-shim": "^0.3.7",
     "tsdx": "^0.13.2",
     "tslib": "^2.0.0",
     "typescript": "^3.9.7"

src/abode.ts

@@ -22,8 +22,8 @@ export let componentSelector = 'data-component';
 export let components: RegisteredComponents = {};
 export let unPopulatedElements: Element[] = [];
 
-export const register = async (name: string, fn: () => Promise<any>) => {
-  components[name] = await retry(fn, 10, 20);
+export const register = (name: string, fn: () => Promise<any>) => {
+  components[name] = retry(fn, 10, 20);
 };
 
 export const unRegisterAllComponents = () => {
@@ -125,10 +125,12 @@ export const renderAbode = async (el: Element) => {
 };
 
 export const trackPropChanges = (el: Element) => {
-  const observer = new MutationObserver(() => {
-    renderAbode(el);
-  });
-  observer.observe(el, { attributes: true });
+  if (MutationObserver) {
+    const observer = new MutationObserver(() => {
+      renderAbode(el);
+    });
+    observer.observe(el, { attributes: true });
+  }
 };
 
 export const update = async (

test/abode.test.tsx

@@ -9,9 +9,12 @@ import {
   register,
   unRegisterAllComponents,
   components,
+  populate,
+  delay,
 } from '../src/abode';
 
-describe('getCleanPropName', () => {});
+import 'mutationobserver-shim';
+global.MutationObserver = window.MutationObserver;
 
 describe('helper functions', () => {
   beforeEach(() => (document.getElementsByTagName('html')[0].innerHTML = ''));
@@ -96,15 +99,35 @@ describe('exported functions', () => {
   });
 
   it('register', async () => {
-    await register('TestComponent', () => import('./TestComponent'));
+    register('TestComponent', () => import('./TestComponent'));
     expect(Object.keys(components)).toEqual(['TestComponent']);
     expect(Object.values(components).length).toEqual(1);
-    expect(Object.keys(Object.values(components)[0])).toEqual(['default']);
+    const promise = Object.values(components)[0];
+    expect(typeof promise.then).toEqual('function');
+    const module = await promise;
+    expect(Object.keys(module)).toEqual(['default']);
+  });
+
+  it('populate', async () => {
+    const abodeElement = document.createElement('div');
+    abodeElement.setAttribute('data-component', 'TestComponent');
+    document.body.appendChild(abodeElement);
+    expect(document.body.innerHTML).toEqual(
+      `<div data-component="TestComponent"></div>`
+    );
+
+    register('TestComponent', () => import('./TestComponent'));
+    populate();
+
+    await delay(20);
+
+    expect(document.body.innerHTML).toEqual(
+      `<div data-component="TestComponent" react-abode-populated="true"><div>testing 1 2 3 </div></div>`
+    );
   });
 
   it.skip('getActiveComponents', () => {});
   it.skip('setComponentSelector', () => {});
   it.skip('register', () => {});
-  it.skip('populate', () => {});
   it.skip('getSriptProps', () => {});
 });

yarn.lock

@@ -4137,6 +4137,11 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+mutationobserver-shim@^0.3.7:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/mutationobserver-shim/-/mutationobserver-shim-0.3.7.tgz#8bf633b0c0b0291a1107255ed32c13088a8c5bf3"
+  integrity sha512-oRIDTyZQU96nAiz2AQyngwx1e89iApl2hN5AOYwyxLUB47UYsU3Wv9lJWqH5y/QdiYkc5HQLi23ZNB3fELdHcQ==
+
 mute-stream@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"