Add happy test for shadow dom

krakenjs · Mar 4, 2020 · 2e43905 · 2e43905
1 parent b1d2465
commit 2e43905
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/src/index.js b/src/index.js
@@ -5,5 +5,5 @@ export { PopupOpenError } from 'belter/src';
 export type { ZoidComponent, ZoidComponentInstance } from './component';
 export type { RenderOptionsType } from './parent';
 
-export { create, destroy, destroyComponents, destroyAll, Component } from './component';
+export { create, destroy, destroyComponents, destroyAll } from './component';
 export { PROP_TYPE, PROP_SERIALIZATION, CONTEXT, EVENT } from './constants';
diff --git a/test/tests/dimensions.jsx b/test/tests/dimensions.jsx
@@ -42,7 +42,6 @@ describe('zoid dimensions cases', () => {
             }).render(document.body).then(() => {
                 return componentWindowPromise;
             }).then(componentWindow => {
-
                 if (componentWindow.innerWidth !== expectedWidth) {
                     throw new Error(`Expected width to be ${ expectedWidth }, got ${ componentWindow.innerWidth }`);
                 }

diff --git a/test/tests/happy.jsx b/test/tests/happy.jsx
@@ -410,4 +410,53 @@ describe('zoid happy cases', () => {
             });
         });
     });
+
+    it('should render a component into the shadow dom', () => {
+        return wrapPromise(({ expect }) => {
+
+            window.__component__ = () => {
+                return window.zoid.create({
+                    tag:    'test-render-shadow-dom',
+                    url:    'mock://www.child.com/base/test/windows/child/index.htm',
+                    domain: 'mock://www.child.com'
+                });
+            };
+
+            onWindowOpen().then(expect('onWindowOpen', win => {
+                if (getParent(win) !== window) {
+                    throw new Error(`Expected window parent to be current window`);
+                }
+            }));
+
+            const body = document.body;
+
+            if (!body) {
+                throw new Error(`Expected body to be present`);
+            }
+
+            const testElement = document.createElement('div');
+            body.appendChild(testElement);
+
+            if (!testElement.attachShadow) {
+                throw new Error(`Expected testElement to have attachShadow`);
+            }
+
+            testElement.attachShadow({ mode: 'open' });
+            const container = document.createElement('div');
+
+            if (!testElement.shadowRoot) {
+                throw new Error(`Expected testElement to have shadowRoot`);
+            }
+
+            testElement.shadowRoot.appendChild(container);
+
+            const component = window.__component__();
+            return component({
+                onRendered: expect('onRendered', () => {
+                    body.removeChild(testElement);
+                })
+            }).render(container);
+        });
+    });
+
 });