piral-core 0.15.0-alpha.3905 → 0.15.0-alpha.4005

package/src/components/ForeignComponentContainer.test.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { ForeignComponentContainer } from './ForeignComponentContainer';
+
+describe('ForeignComponentContainer component', () => {
+  it('mounts an HTML component', () => {
+    const container = document.body.appendChild(document.createElement('div'));
+    const mount = jest.fn();
+    const component = { mount };
+    render(
+      <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
+      container,
+    );
+    expect(mount).toHaveBeenCalled();
+    container.remove();
+  });
+
+  it('unmounts an HTML component', () => {
+    const container = document.body.appendChild(document.createElement('div'));
+    const mount = jest.fn();
+    const unmount = jest.fn();
+    const component = { mount, unmount };
+    render(
+      <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
+      container,
+    );
+    expect(mount).toHaveBeenCalled();
+    expect(unmount).not.toHaveBeenCalled();
+    unmountComponentAtNode(container);
+    expect(unmount).toHaveBeenCalled();
+    container.remove();
+  });
+
+  it('updates an HTML component', () => {
+    const container = document.body.appendChild(document.createElement('div'));
+    const mount = jest.fn();
+    const update = jest.fn();
+    const component = { mount, update };
+    render(
+      <ForeignComponentContainer
+        $component={component}
+        $context={undefined}
+        $portalId="foo"
+        innerProps={{ a: 'bar' }}
+      />,
+      container,
+    );
+    expect(mount).toHaveBeenCalled();
+    expect(update).not.toHaveBeenCalled();
+    render(
+      <ForeignComponentContainer
+        $component={component}
+        $context={undefined}
+        $portalId="foo"
+        innerProps={{ a: 'foo' }}
+      />,
+      container,
+    );
+    expect(update).toHaveBeenCalled();
+    container.remove();
+  });
+
+  it('forces re-rendering of an HTML component', () => {
+    const container = document.body.appendChild(document.createElement('div'));
+    const componentDidMount = ForeignComponentContainer.prototype.componentDidMount;
+    ForeignComponentContainer.prototype.componentDidMount = function () {
+      componentDidMount.call(this);
+      this.previous = {
+        removeEventListener() {},
+      };
+    };
+    const mount = jest.fn();
+    const update = jest.fn();
+    const unmount = jest.fn();
+    const component = { mount, update, unmount };
+    render(
+      <ForeignComponentContainer
+        $component={component}
+        $context={undefined}
+        $portalId="foo"
+        innerProps={{ a: 'bar' }}
+      />,
+      container,
+    );
+    expect(mount).toHaveBeenCalled();
+    expect(unmount).not.toHaveBeenCalled();
+    expect(update).not.toHaveBeenCalled();
+    render(
+      <ForeignComponentContainer
+        $component={component}
+        $context={undefined}
+        $portalId="foo"
+        innerProps={{ a: 'foo' }}
+      />,
+      container,
+    );
+    expect(update).not.toHaveBeenCalled();
+    expect(unmount).toHaveBeenCalled();
+    container.remove();
+  });
+
+  it('listens to render-html', () => {
+    const container = document.body.appendChild(document.createElement('div'));
+    const mount = jest.fn();
+    const renderHtmlExtension = jest.fn();
+    const component = { mount };
+    const props = { piral: { renderHtmlExtension }, meta: {} };
+    render(
+      <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={props} />,
+      container,
+    );
+    expect(mount).toHaveBeenCalled();
+    const node = document.querySelector('[data-portal-id=foo]');
+    expect(renderHtmlExtension).not.toHaveBeenCalled();
+    node.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
+    expect(renderHtmlExtension).toHaveBeenCalled();
+    container.remove();
+  });
+});

package/src/components/PiralView-server.test.tsx

@@ -0,0 +1,60 @@
+/**
+ * @jest-environment node
+ */
+
+import * as React from 'react';
+import * as hooks from '../hooks';
+import * as routes from './PiralRoutes';
+import { render } from 'enzyme';
+import { PiralView } from './PiralView';
+
+const StubDashboard: React.FC = () => <div />;
+StubDashboard.displayName = 'StubDashboard';
+
+const StubErrorInfo: React.FC = () => <div />;
+StubErrorInfo.displayName = 'StubErrorInfo';
+
+const StubLoader: React.FC = () => <div />;
+StubLoader.displayName = 'StubLoader';
+
+const StubRouter: React.FC = ({ children }) => <div>{children}</div>;
+StubRouter.displayName = 'StubRouter';
+
+const StubLayout: React.FC = ({ children }) => <div>{children}</div>;
+StubLayout.displayName = 'StubLayout';
+
+jest.mock('../hooks');
+jest.mock('./PiralRoutes');
+
+const state = {
+    app: {
+        error: undefined,
+        loading: true,
+    },
+    components: {
+        ErrorInfo: StubErrorInfo,
+        LoadingIndicator: StubLoader,
+        Router: StubRouter,
+        Layout: StubLayout,
+    },
+    registry: {
+        pages: {},
+        extensions: {},
+    },
+    routes: {},
+    provider: undefined,
+};
+
+(hooks as any).useGlobalState = (select: any) => select(state);
+
+(routes as any).PiralRoutes = ({ }) => <StubDashboard />;
+
+describe('Portal Module', () => {
+    it('In this test window should be undefined', () => {
+        state.app.loading = false;
+        state.app.error = undefined;
+        const node = render(<PiralView />);
+        expect(typeof window).toBe("undefined")
+        expect(node.length).toBe(1);
+    });
+});

package/src/components/PiralView.test.tsx

@@ -43,7 +43,7 @@ const state = {
 
 (hooks as any).useGlobalState = (select: any) => select(state);
 
-(routes as any).PiralRoutes = ({}) => <StubDashboard />;
+(routes as any).PiralRoutes = ({ }) => <StubDashboard />;
 
 describe('Portal Module', () => {
   it('renders the dashboard / content in layout if loaded without error', () => {

package/src/components/PiralView.tsx

@@ -42,7 +42,7 @@ const PiralProvider: React.FC = ({ children }) => {
 /**
  * The props for the PiralView component.
  */
-export interface PiralViewProps {}
+export interface PiralViewProps { }
 
 /**
  * The component responsible for the generic view of the application.

package/src/components/SwitchErrorInfo.test.tsx

@@ -0,0 +1,38 @@
+import *  as React from 'react';
+import { mount } from 'enzyme';
+import { SwitchErrorInfo } from './SwitchErrorInfo';
+
+jest.mock('../hooks/globalState', () => ({
+    useGlobalState(select: any) {
+        return select(state);
+    },
+}));
+
+const StubComponent1: React.FC = (props) => <div children={props.children} />;
+const Unknown: React.FC = (props) => <div children={props.children} />;
+
+const state = {
+    registry: {
+        extensions: {},
+    },
+    errorComponents: {
+        stubComponent1: StubComponent1,
+        unknown: Unknown,
+    },
+};
+
+(React as any).useMemo = (cb) => cb();
+
+describe('SwitchErrorInfo Module', () => {
+    it('is able to render StubComponent1 component', () => {
+        const node = mount(<SwitchErrorInfo type="stubComponent1" />);
+        expect(node.at(0).exists()).toBe(true);
+        expect(node.find(StubComponent1).length).toBe(1);
+    });
+
+    it('is able to default render Unknow component if the compenent name not available in state data', () => {
+        const node = mount(<SwitchErrorInfo type="notRealComponent" />);
+        expect(node.at(0).exists()).toBe(true);
+        expect(node.find(Unknown).length).toBe(1);
+    });
+})

package/src/createInstance.test.tsx

@@ -11,4 +11,14 @@ describe('Piral-Core createInstance module', () => {
     const instance = createInstance({ async: true });
     expect(instance.options.strategy).toBe(blazingStrategy);
   });
+
+  it('createInstance with empty actions and plugins uses the standard strategy', () => {
+    const instance = createInstance({ plugins: {}, actions: {} });
+    expect(instance.options.strategy).toBe(standardStrategy);
+  })
+
+  it('createInstance with async function uses the blazing strategy', () => {
+    const instance = createInstance({ async: () => { } });
+    expect(instance.options.strategy).not.toBe(blazingStrategy);
+  })
 });

package/src/hooks/globalState-server.test.ts

@@ -0,0 +1,41 @@
+/**
+ * @jest-environment node
+ */
+import { useGlobalState } from './globalState';
+
+jest.mock('react', () => {
+  const { Atom } = require('@libre/atom');
+  const state = Atom.of({
+    foo: 5,
+    bar: {
+      qxz: 'hello',
+    },
+    list: [1, 2, 3],
+  });
+  return {
+    createContext: jest.fn(),
+    useContext: () => ({ state }),
+    useState: (v) => [v, jest.fn()],
+    useMemo: (f) => f(),
+    useLayoutEffect: (f) => f(),
+  };
+});
+
+describe('Media Module', () => {
+  it('in here window should be undefined', () => {
+    expect(typeof window).toBe('undefined');
+    const result = useGlobalState((m) => (m as any).foo);
+    expect(result).toBe(5);
+  });
+
+  it('gets full state object', () => {
+    const result = useGlobalState();
+    expect(result).toEqual({
+      foo: 5,
+      bar: {
+        qxz: 'hello',
+      },
+      list: [1, 2, 3],
+    });
+  });
+});

package/src/hooks/setter-server.test.ts

@@ -0,0 +1,22 @@
+/**
+ * @jest-environment node
+ */
+
+import * as React from 'react';
+import { renderToString } from 'react-dom/server';
+import { useSetter } from './setter';
+
+describe('UseSetter Hook Module', () => {
+  it('UseSetter', () => {
+    const cb = jest.fn();
+
+    const MyComponent = () => {
+      useSetter(cb);
+      return null;
+    };
+
+    const result = renderToString(React.createElement(MyComponent));
+    expect(result).toEqual('');
+    expect(cb).toHaveBeenCalled();
+  });
+});

package/src/hooks/setter.test.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { act } from 'react-dom/test-utils';
+import { render } from 'react-dom';
+import { useSetter } from './setter';
+
+describe('UseSetter Hook Module', () => {
+  it('UseSetter', async () => {
+    const cb = jest.fn();
+
+    const MyComponent = () => {
+      useSetter(cb);
+      return null;
+    };
+
+    render(React.createElement(MyComponent), document.body.appendChild(document.createElement('div')));
+    await act(() => Promise.resolve());
+    expect(cb).toHaveBeenCalled();
+  });
+});

package/src/modules/element-server.test.ts

@@ -0,0 +1,29 @@
+/**
+ * @jest-environment node
+ */
+
+import { Atom, deref } from '@dbeining/react-atom';
+import { createListener } from 'piral-base';
+import { createActions } from '../state';
+import { renderElement } from './element';
+
+function createMockContext(): [any, any] {
+  const state = Atom.of({
+    portals: {
+      root: [],
+    },
+  });
+  const context = createActions(state, createListener({}));
+  return [context, state];
+}
+
+describe('Elements Module from SSR', () => {
+  it('Should not have piral-extensions web component', () => {
+    const [context, state] = createMockContext();
+    const element: any = {
+      addEventListener() {},
+    };
+    renderElement(context, element, {});
+    expect(deref(state)['portals']['root'].length).toBe(0);
+  });
+});

package/src/modules/element.test.ts

@@ -0,0 +1,77 @@
+import { Atom, deref } from '@dbeining/react-atom';
+import { createListener } from 'piral-base';
+import { createActions } from '../state';
+import { renderElement } from './element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "piral-extension": HTMLElement & {
+      params: any;
+      name: string;
+      empty: any;
+    };
+  }
+}
+
+function createMockContext(): [any, any] {
+  const state = Atom.of({
+    portals: {},
+  });
+  const context = createActions(state, createListener({}));
+  return [context, state];
+}
+
+describe('Elements Module', () => {
+  it('testing basic renderElement functionality of piral-extension web component', () => {
+    const [context, state] = createMockContext();
+    const element = document.createElement('piral-extension');
+    const event = new Event('extension-props-changed');
+    document.body.appendChild(element);
+    renderElement(context, element, {});
+    element.dispatchEvent(event);
+    document.body.removeChild(element);
+    (element as any).connectedCallback();
+    expect(deref(state)['portals']['root'].length).toBe(1);
+  });
+
+  it('disposing piral-extension web component', () => {
+    const [context, state] = createMockContext();
+    const element = document.createElement('piral-extension');
+    document.body.appendChild(element);
+    const [dispose] = renderElement(context, element, {});
+    expect(deref(state)['portals']['root'].length).toBe(1);
+    dispose();
+    expect(deref(state)['portals']['root'].length).toBe(0);
+  });
+
+  it('testing setters and getters in piral-extension web component', () => {
+    const [context] = createMockContext();
+    const element = document.createElement('piral-extension');
+    document.body.appendChild(element);
+    renderElement(context, element, {});
+    expect(element.params).toEqual(null);
+    expect(element.name).toEqual(null);
+    expect(element.empty).toEqual(undefined);
+    element.params = 'anything';
+    element.name = 'foo';
+    element.empty = 'anything';
+    expect(element.params).toEqual('anything');
+    expect(element.name).toEqual('foo');
+    expect(element.empty).toEqual('anything');
+    element.setAttribute('name', 'bar');
+    element.setAttribute('params', '{}');
+    expect(element.params).toEqual({});
+    expect(element.name).toEqual('bar');
+  });
+
+  it('testing attributes of piral-extension web component', () => {
+    const [context] = createMockContext();
+    const element = document.createElement('piral-extension');
+    document.body.appendChild(element);
+    renderElement(context, element, {});
+    element.setAttribute('name', 'bar');
+    element.setAttribute('params', '{}');
+    expect(element.params).toEqual({});
+    expect(element.name).toEqual('bar');
+  });
+});

package/src/modules/element.ts

@@ -88,16 +88,20 @@ export function renderElement(
   element: HTMLElement | ShadowRoot,
   props: any,
 ): [Disposable, Updatable] {
-  let [id, portal] = renderInDom(context, element, ExtensionSlot, props);
-  const evName = 'extension-props-changed';
-  const handler = (ev: CustomEvent) => update(ev.detail);
-  const dispose: Disposable = () => {
-    context.hidePortal(id, portal);
-    element.removeEventListener(evName, handler);
-  };
-  const update: Updatable = (newProps) => {
-    [id, portal] = changeDomPortal(id, portal, context, element, ExtensionSlot, newProps);
-  };
-  element.addEventListener(evName, handler);
-  return [dispose, update];
+  if (typeof window !== 'undefined') {
+    let [id, portal] = renderInDom(context, element, ExtensionSlot, props);
+    const evName = 'extension-props-changed';
+    const handler = (ev: CustomEvent) => update(ev.detail);
+    const dispose: Disposable = () => {
+      context.hidePortal(id, portal);
+      element.removeEventListener(evName, handler);
+    };
+    const update: Updatable = (newProps) => {
+      [id, portal] = changeDomPortal(id, portal, context, element, ExtensionSlot, newProps);
+    };
+    element.addEventListener(evName, handler);
+    return [dispose, update];
+  }
+
+  return [noop, noop];
 }

package/src/state/withApi.test.tsx

@@ -6,6 +6,29 @@ import { withApi } from './withApi';
 import { StateContext } from '../state';
 
 function createMockContainer() {
+  const state = Atom.of({
+    portals: {},
+  });
+  return {
+    context: {
+      converters: {},
+      readState(cb) {
+        return cb({
+          registry: {
+            wrappers: { "feed": "test", "*": "test" },
+          },
+        });
+      },
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+      state,
+      destroyPortal: (id) => { },
+    } as any,
+  };
+}
+
+function createMockContainerWithNoWrappers() {
   const state = Atom.of({
     portals: {},
   });
@@ -23,7 +46,7 @@ function createMockContainer() {
       off: jest.fn(),
       emit: jest.fn(),
       state,
-      destroyPortal: (id) => {},
+      destroyPortal: (id) => { },
     } as any,
   };
 }
@@ -103,11 +126,9 @@ describe('withApi Module', () => {
     };
     const { context } = createMockContainer();
     context.converters = {
-      html: (component) => {
-        return component.component;
-      },
+      html: ({ component }) => component,
     };
-    const Component = withApi(context, { type: 'html', component: { mount: () => {} } }, api, 'unknown');
+    const Component = withApi(context, { type: 'html', component: { mount: () => { } } }, api, 'unknown');
 
     const node = mount(
       <StateContext.Provider value={context}>
@@ -124,11 +145,9 @@ describe('withApi Module', () => {
         name: 'foo',
       },
     };
-    const { context } = createMockContainer();
+    const { context } = createMockContainerWithNoWrappers();
     context.converters = {
-      html: (component) => {
-        return component.component;
-      },
+      html: ({ component }) => component,
     };
     const Component = withApi(context, null, api, 'unknown');
 

package/src/utils/extension.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
-import { toExtension } from './extension';
+import { reactifyContent, toExtension } from './extension';
+
 
 describe('Util Extension.', () => {
   it('Convert some component to an extension component.', () => {
@@ -9,4 +10,13 @@ describe('Util Extension.', () => {
     const node = mount(<Extension piral={undefined} params={{ title: 'Foo' }} />);
     expect(node.find('b').length).toBe(1);
   });
+
+  it('reactifyContent.', async () => {
+    const container = document.body.appendChild(document.createElement('div'));
+    container.innerHTML = `<div>FOO<</div>`;
+    const result = reactifyContent(container.childNodes) as React.ReactElement;
+    const node = await mount(result)
+    expect(node.find("slot").length).toBe(1);
+  });
 });
+

package/src/utils/foreign.test.ts

@@ -1,12 +1,30 @@
-import { createElement } from 'react';
-import { convertComponent, renderInDom } from './foreign';
+import * as React from 'react';
+import { changeDomPortal, convertComponent, renderInDom } from './foreign';
 import { ForeignComponent } from '../types';
 import { DefaultLoadingIndicator } from '../components/DefaultLoader';
 
+// const StubComponent: React.FC = (props) => <div />;
+// StubComponent.displayName = 'StubComponent';
+
 describe('Util Foreign.', () => {
+  it('changeDomPortal changes dom in portal', () => {
+    const children = React.createElement('div');
+    const current: React.ReactPortal = { key: 'current', children: { children }, type: 'div', props: null };
+
+    const context = {
+      updatePortal: jest.fn(),
+    } as any;
+    const portalId = 'data-portal-id';
+    const element = document.createElement('div') as HTMLDivElement;
+    element.setAttribute(portalId, '100');
+
+    const result = changeDomPortal(portalId, current, context, element, DefaultLoadingIndicator, {});
+    expect(result).not.toEqual({});
+  });
+
   it('Convert component function throws error due to missing converter function.', () => {
     const t = () => {
-      convertComponent(null, createElement('div'));
+      convertComponent(null, React.createElement('div'));
     };
     expect(t).toThrow('No converter for component of type "div" registered.');
   });
@@ -17,7 +35,7 @@ describe('Util Foreign.', () => {
     };
     const result = convertComponent(() => {
       return fComponent;
-    }, createElement('div'));
+    }, React.createElement('div'));
     expect(result).toEqual(fComponent);
   });
 

package/src/utils/guid.test.ts

@@ -1,6 +1,11 @@
-import { generateId } from './guid';
+import { buildName, generateId } from './guid';
 
 describe('Guid Utility Module', () => {
+  it('buildName returns name with its prefix', () => {
+    const result = buildName('Ma', 'Majd');
+    expect(result).toEqual('Ma://Majd');
+  });
+
   it('Generates two consecutive different guids', () => {
     const guid1 = generateId();
     const guid2 = generateId();