@24i/bigscreen-sdk 1.0.34-beta.1 → 1.0.35-alpha.2578

package/packages/jsx/src/nodeUtils.ts

@@ -1,69 +1,69 @@
-import { NXGVNode } from './types';
-
-export const appendChildNode = (childNodes: NXGVNode[], node: NXGVNode) => {
-    childNodes.push(node);
-};
-
-export const removeChildNode = (childNodes: NXGVNode[], node: NXGVNode) => {
-    for (let i = 0; i < childNodes.length; i++) {
-        if (childNodes[i] === node) {
-            childNodes.splice(i, 1);
-            return;
-        }
-    }
-};
-
-export const insertBeforeChildNode = (
-    childNodes: NXGVNode[],
-    node: NXGVNode,
-    beforeNode: NXGVNode,
-) => {
-    for (let i = 0; i < childNodes.length; i++) {
-        if (childNodes[i] === beforeNode) {
-            childNodes.splice(i, 0, node);
-            return;
-        }
-    }
-};
-
-export const replaceChildNode = (
-    childNodes: NXGVNode[],
-    newNode: NXGVNode,
-    oldNode: NXGVNode,
-) => {
-    for (let i = 0; i < childNodes.length; i++) {
-        if (childNodes[i] === oldNode) {
-            childNodes[i] = newNode;
-            return;
-        }
-    }
-};
-
-export const swapChildNodes = (
-    childNodesNew: NXGVNode[],
-    childNodesOld: NXGVNode[],
-    newNode: NXGVNode,
-    oldNode: NXGVNode,
-) => {
-    let newNodeIndex = -1;
-    let oldNodeIndex = -1;
-
-    for (let i = 0; i < childNodesNew.length; i++) {
-        if (childNodesNew[i] === newNode) {
-            newNodeIndex = i;
-            break;
-        }
-    }
-
-    for (let i = 0; i < childNodesOld.length; i++) {
-        if (childNodesOld[i] === oldNode) {
-            oldNodeIndex = i;
-            break;
-        }
-    }
-
-    if (newNodeIndex !== -1 && oldNodeIndex !== -1) {
-        childNodesNew[newNodeIndex] = oldNode;
-        childNodesOld[oldNodeIndex] = newNode;
-    }
-};
+import { NXGVNode } from './types';
+
+export const appendChildNode = (childNodes: NXGVNode[], node: NXGVNode) => {
+    childNodes.push(node);
+};
+
+export const removeChildNode = (childNodes: NXGVNode[], node: NXGVNode) => {
+    for (let i = 0; i < childNodes.length; i++) {
+        if (childNodes[i] === node) {
+            childNodes.splice(i, 1);
+            return;
+        }
+    }
+};
+
+export const insertBeforeChildNode = (
+    childNodes: NXGVNode[],
+    node: NXGVNode,
+    beforeNode: NXGVNode,
+) => {
+    for (let i = 0; i < childNodes.length; i++) {
+        if (childNodes[i] === beforeNode) {
+            childNodes.splice(i, 0, node);
+            return;
+        }
+    }
+};
+
+export const replaceChildNode = (
+    childNodes: NXGVNode[],
+    newNode: NXGVNode,
+    oldNode: NXGVNode,
+) => {
+    for (let i = 0; i < childNodes.length; i++) {
+        if (childNodes[i] === oldNode) {
+            childNodes[i] = newNode;
+            return;
+        }
+    }
+};
+
+export const swapChildNodes = (
+    childNodesNew: NXGVNode[],
+    childNodesOld: NXGVNode[],
+    newNode: NXGVNode,
+    oldNode: NXGVNode,
+) => {
+    let newNodeIndex = -1;
+    let oldNodeIndex = -1;
+
+    for (let i = 0; i < childNodesNew.length; i++) {
+        if (childNodesNew[i] === newNode) {
+            newNodeIndex = i;
+            break;
+        }
+    }
+
+    for (let i = 0; i < childNodesOld.length; i++) {
+        if (childNodesOld[i] === oldNode) {
+            oldNodeIndex = i;
+            break;
+        }
+    }
+
+    if (newNodeIndex !== -1 && oldNodeIndex !== -1) {
+        childNodesNew[newNodeIndex] = oldNode;
+        childNodesOld[oldNodeIndex] = newNode;
+    }
+};

package/packages/jsx/src/setText.ts

@@ -1,15 +1,15 @@
-import { Reference } from './types';
-import { unwrapReference } from './utils';
-
-export const setText = (elementOrReference: HTMLElement | Reference<HTMLElement>, text: string) => {
-    const element = unwrapReference<HTMLElement>(elementOrReference);
-    if (!element.childNodes[0]) {
-        if (typeof element.append === 'function') {
-            element.append(text);
-        } else {
-            element.appendChild(document.createTextNode(text));
-        }
-    } else {
-        element.childNodes[0].nodeValue = text;
-    }
-};
+import { Reference } from './types';
+import { unwrapReference } from './utils';
+
+export const setText = (elementOrReference: HTMLElement | Reference<HTMLElement>, text: string) => {
+    const element = unwrapReference<HTMLElement>(elementOrReference);
+    if (!element.childNodes[0]) {
+        if (typeof element.append === 'function') {
+            element.append(text);
+        } else {
+            element.appendChild(document.createTextNode(text));
+        }
+    } else {
+        element.childNodes[0].nodeValue = text;
+    }
+};

package/packages/jsx/src/test-utils/MountedComponent.ts

@@ -1,50 +1,50 @@
-import { clearNode } from '../manipulation/clearNode';
-import { Reference } from '../index';
-
-const NO_USE_AFTER_UNMOUNT = 'This component is already unmounted. It cannot be used anymore';
-
-export class MountedComponent<T> {
-    private isUnmounted = false;
-
-    constructor(
-        private readonly reference: Reference<T>,
-        private readonly rootElement: HTMLDivElement,
-    ) {}
-
-    find<E = Element>(selector: string): E {
-        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
-        return this.rootElement.querySelector(selector) as unknown as E;
-    }
-
-    findAll(selector: string) {
-        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
-        return this.rootElement.querySelectorAll(selector);
-    }
-
-    ref() {
-        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
-        return this.reference.current!;
-    }
-
-    root() {
-        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
-        return this.rootElement;
-    }
-
-    has(selector: string) {
-        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
-        return this.rootElement.querySelector(selector) !== null;
-    }
-
-    hasText(text: string) {
-        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
-        return this.rootElement.innerHTML.indexOf(text) !== -1;
-    }
-
-    unmount() {
-        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
-        clearNode(this.rootElement);
-        document.body.removeChild(this.rootElement);
-        this.isUnmounted = true;
-    }
-}
+import { clearNode } from '../manipulation/clearNode';
+import { Reference } from '../index';
+
+const NO_USE_AFTER_UNMOUNT = 'This component is already unmounted. It cannot be used anymore';
+
+export class MountedComponent<T> {
+    private isUnmounted = false;
+
+    constructor(
+        private readonly reference: Reference<T>,
+        private readonly rootElement: HTMLDivElement,
+    ) {}
+
+    find<E = Element>(selector: string): E {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement.querySelector(selector) as unknown as E;
+    }
+
+    findAll(selector: string) {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement.querySelectorAll(selector);
+    }
+
+    ref() {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.reference.current!;
+    }
+
+    root() {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement;
+    }
+
+    has(selector: string) {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement.querySelector(selector) !== null;
+    }
+
+    hasText(text: string) {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        return this.rootElement.innerHTML.indexOf(text) !== -1;
+    }
+
+    unmount() {
+        if (this.isUnmounted) throw new Error(NO_USE_AFTER_UNMOUNT);
+        clearNode(this.rootElement);
+        document.body.removeChild(this.rootElement);
+        this.isUnmounted = true;
+    }
+}

package/packages/jsx/src/test-utils/README.md

@@ -1,73 +1,73 @@
----
-id: README
-title: BIGscreen JSX - Test Utils
-hide_title: true
-sidebar_label: BIGscreen JSX - Test Utils
----
-
-# BIGscreen JSX Test Utils
-This package exports some simple utils to make testing easier.
-- shallow - function to mount a component and easily test basic properties
-- click - function to perform a click on an Element
-- keydown - function to perform a keydown on an Element
-- enter - function to perform a keydown with ENTER keycode on an Element
-
-### shallow
-This function allows you to mount a component and test some basic properties.
-
-**IMPORTANT**
-If the component that you are mounting subscribes to events from other components/packages/document/window/etc.
-You need to manually call unmount at the end of the test.
-
-The returned object has these methods:
-- ref() - returns an instance of the top most component
-- root() - returns a wrapping div instance
-- find(selector: string) - returns an HTMLElement or null (equivalent of `root().querySelector()`) 
-- findAll(selector: string) - returns an NodeList or null (equivalent of `root().querySelectorAll()`) 
-- has(selector: string) - returns boolean whether there is a such Element inside the wrapping div (equivalent of `root.querySelector(selector) !== null`)
-- hasText(text: string) - returns boolean whether there is a such text inside the wrapping div (equivalent of `root.innerHTML.indexOf(text) !== -1`)
-- unmount() - unmounts the component to test componentWillUnmount cleanup. No methods can be called afterwards.
-```tsx
-const mounted = shallow(<div id="wrap"><div className="test" /></div>);
-expect(mounted.has('.test')).toBe(true);
-```
-If you need the ref to be on a different component than the top most one, you can do it like this:
-```tsx
-const mounted = shallow((ref) => <div className="wrap"><div ref={ref} id="test" /></div>);
-expect(mounted.ref().id).toBe('test');
-```
-
-### click
-This function allows you to easily simulate a click. Just pass an Element or BIGscreen JSX Reference to an element.
-
-```tsx
-const spy = jest.fn();
-const mounted = shallow(<div onClick={spy} />);
-click(mounted.ref());
-expect(spy).toBeHaveBeenCalled();
-```
-
-### keydown
-This function allows you to easily simulate a keydown. Just pass an Element or BIGscreen JSX Reference to an element and a keyCode.
-
-```tsx
-const spy = jest.fn();
-const mounted = shallow(<div onKeyDown={spy} />);
-keydown(mounted.ref(), LEFT); // import { LEFT } from '@24i/bigscreen-sdk/device/keymap';
-expect(spy).toBeHaveBeenCalledWith(expect.objectContaining({
-    code: 'ArrowLeft',
-    keyCode: 37,
-}));
-```
-
-### enter
-This function allows you to easily simulate a keydown with ENTER keycode. Just pass an Element or BIGscreen JSX Reference to an element.
-
-```tsx
-const spy = jest.fn();
-const mounted = shallow(<div onKeyDown={spy} tabIndex={0} />);
-enter(mounted.ref());
-expect(spy).toBeHaveBeenCalledWith(expect.objectContaining({
-    keyCode: 13,
-}));
+---
+id: README
+title: BIGscreen JSX - Test Utils
+hide_title: true
+sidebar_label: BIGscreen JSX - Test Utils
+---
+
+# BIGscreen JSX Test Utils
+This package exports some simple utils to make testing easier.
+- shallow - function to mount a component and easily test basic properties
+- click - function to perform a click on an Element
+- keydown - function to perform a keydown on an Element
+- enter - function to perform a keydown with ENTER keycode on an Element
+
+### shallow
+This function allows you to mount a component and test some basic properties.
+
+**IMPORTANT**
+If the component that you are mounting subscribes to events from other components/packages/document/window/etc.
+You need to manually call unmount at the end of the test.
+
+The returned object has these methods:
+- ref() - returns an instance of the top most component
+- root() - returns a wrapping div instance
+- find(selector: string) - returns an HTMLElement or null (equivalent of `root().querySelector()`) 
+- findAll(selector: string) - returns an NodeList or null (equivalent of `root().querySelectorAll()`) 
+- has(selector: string) - returns boolean whether there is a such Element inside the wrapping div (equivalent of `root.querySelector(selector) !== null`)
+- hasText(text: string) - returns boolean whether there is a such text inside the wrapping div (equivalent of `root.innerHTML.indexOf(text) !== -1`)
+- unmount() - unmounts the component to test componentWillUnmount cleanup. No methods can be called afterwards.
+```tsx
+const mounted = shallow(<div id="wrap"><div className="test" /></div>);
+expect(mounted.has('.test')).toBe(true);
+```
+If you need the ref to be on a different component than the top most one, you can do it like this:
+```tsx
+const mounted = shallow((ref) => <div className="wrap"><div ref={ref} id="test" /></div>);
+expect(mounted.ref().id).toBe('test');
+```
+
+### click
+This function allows you to easily simulate a click. Just pass an Element or BIGscreen JSX Reference to an element.
+
+```tsx
+const spy = jest.fn();
+const mounted = shallow(<div onClick={spy} />);
+click(mounted.ref());
+expect(spy).toBeHaveBeenCalled();
+```
+
+### keydown
+This function allows you to easily simulate a keydown. Just pass an Element or BIGscreen JSX Reference to an element and a keyCode.
+
+```tsx
+const spy = jest.fn();
+const mounted = shallow(<div onKeyDown={spy} />);
+keydown(mounted.ref(), LEFT); // import { LEFT } from '@24i/bigscreen-sdk/device/keymap';
+expect(spy).toBeHaveBeenCalledWith(expect.objectContaining({
+    code: 'ArrowLeft',
+    keyCode: 37,
+}));
+```
+
+### enter
+This function allows you to easily simulate a keydown with ENTER keycode. Just pass an Element or BIGscreen JSX Reference to an element.
+
+```tsx
+const spy = jest.fn();
+const mounted = shallow(<div onKeyDown={spy} tabIndex={0} />);
+enter(mounted.ref());
+expect(spy).toBeHaveBeenCalledWith(expect.objectContaining({
+    keyCode: 13,
+}));
 ```

package/packages/jsx/src/test-utils/click.ts

@@ -1,7 +1,7 @@
-import { Reference } from '..';
-import { unwrapReference } from '../utils';
-
-export const click = (toClick: Reference<Element> | Element) => {
-    const element = unwrapReference<Element>(toClick);
-    element.dispatchEvent(new MouseEvent('click'));
-};
+import { Reference } from '..';
+import { unwrapReference } from '../utils';
+
+export const click = (toClick: Reference<Element> | Element) => {
+    const element = unwrapReference<Element>(toClick);
+    element.dispatchEvent(new MouseEvent('click'));
+};

package/packages/jsx/src/test-utils/enter.ts

@@ -1,4 +1,4 @@
-/* eslint-disable no-magic-numbers */
-import { keydown } from './keydown';
-
-export const enter = (ref: Parameters<typeof keydown>[0]) => keydown(ref, 13);
+/* eslint-disable no-magic-numbers */
+import { keydown } from './keydown';
+
+export const enter = (ref: Parameters<typeof keydown>[0]) => keydown(ref, 13);

package/packages/jsx/src/test-utils/index.ts

@@ -1,6 +1,6 @@
-export { click } from './click';
-export { enter } from './enter';
-export { keydown } from './keydown';
-export { keyup } from './keyup';
-export { shallow } from './shallow';
-export { MountedComponent } from './MountedComponent';
+export { click } from './click';
+export { enter } from './enter';
+export { keydown } from './keydown';
+export { keyup } from './keyup';
+export { shallow } from './shallow';
+export { MountedComponent } from './MountedComponent';

package/packages/jsx/src/test-utils/keydown.ts

@@ -1,27 +1,27 @@
-import { Reference, Component } from '..';
-import { unwrapReference } from '../utils';
-
-type ToPress = Reference<HTMLElement> | HTMLElement | Window | Document | Component<any>;
-
-interface Key {
-    keyCode: number,
-    code: string,
-    key?: string,
-}
-
-export const keydown = (toPress: ToPress, keyOrKeyCode: number | Key) => {
-    const element = unwrapReference<ToPress>(toPress);
-    let kbEventOptions: KeyboardEventInit;
-    if (typeof keyOrKeyCode === 'number') {
-        kbEventOptions = { keyCode: keyOrKeyCode };
-    } else {
-        const { keyCode, code, key } = keyOrKeyCode;
-        kbEventOptions = { keyCode, code, key };
-    }
-    const event = new KeyboardEvent('keydown', kbEventOptions);
-    if ((element as any).onKeyDown) {
-        (element as any).onKeyDown(event);
-    } else if ((element as any).dispatchEvent) {
-        (element as Element).dispatchEvent(event);
-    }
-};
+import { Reference, Component } from '..';
+import { unwrapReference } from '../utils';
+
+type ToPress = Reference<HTMLElement> | HTMLElement | Window | Document | Component<any>;
+
+interface Key {
+    keyCode: number,
+    code: string,
+    key?: string,
+}
+
+export const keydown = (toPress: ToPress, keyOrKeyCode: number | Key) => {
+    const element = unwrapReference<ToPress>(toPress);
+    let kbEventOptions: KeyboardEventInit;
+    if (typeof keyOrKeyCode === 'number') {
+        kbEventOptions = { keyCode: keyOrKeyCode };
+    } else {
+        const { keyCode, code, key } = keyOrKeyCode;
+        kbEventOptions = { keyCode, code, key };
+    }
+    const event = new KeyboardEvent('keydown', kbEventOptions);
+    if ((element as any).onKeyDown) {
+        (element as any).onKeyDown(event);
+    } else if ((element as any).dispatchEvent) {
+        (element as Element).dispatchEvent(event);
+    }
+};

package/packages/jsx/src/test-utils/keyup.ts

@@ -1,27 +1,27 @@
-import { Reference, Component } from '../index';
-import { unwrapReference } from '../utils';
-
-type ToPress = Reference<HTMLElement> | HTMLElement | Window | Document | Component<any>;
-
-interface Key {
-    keyCode: number,
-    code: string,
-    key?: string,
-}
-
-export const keyup = (toPress: ToPress, keyOrKeyCode: number | Key) => {
-    const element = unwrapReference<ToPress>(toPress);
-    let kbEventOptions: KeyboardEventInit;
-    if (typeof keyOrKeyCode === 'number') {
-        kbEventOptions = { keyCode: keyOrKeyCode };
-    } else {
-        const { keyCode, code, key } = keyOrKeyCode;
-        kbEventOptions = { keyCode, code, key };
-    }
-    const event = new KeyboardEvent('keyup', kbEventOptions);
-    if ((element as any).onKeyUp) {
-        (element as any).onKeyUp(event);
-    } else if ((element as any).dispatchEvent) {
-        (element as Element).dispatchEvent(event);
-    }
-};
+import { Reference, Component } from '../index';
+import { unwrapReference } from '../utils';
+
+type ToPress = Reference<HTMLElement> | HTMLElement | Window | Document | Component<any>;
+
+interface Key {
+    keyCode: number,
+    code: string,
+    key?: string,
+}
+
+export const keyup = (toPress: ToPress, keyOrKeyCode: number | Key) => {
+    const element = unwrapReference<ToPress>(toPress);
+    let kbEventOptions: KeyboardEventInit;
+    if (typeof keyOrKeyCode === 'number') {
+        kbEventOptions = { keyCode: keyOrKeyCode };
+    } else {
+        const { keyCode, code, key } = keyOrKeyCode;
+        kbEventOptions = { keyCode, code, key };
+    }
+    const event = new KeyboardEvent('keyup', kbEventOptions);
+    if ((element as any).onKeyUp) {
+        (element as any).onKeyUp(event);
+    } else if ((element as any).dispatchEvent) {
+        (element as Element).dispatchEvent(event);
+    }
+};

package/packages/jsx/src/test-utils/shallow.ts

@@ -1,33 +1,33 @@
-import { createRef, mount, Reference } from '../index';
-import { MountedComponent } from './MountedComponent';
-
-type FunctionToMount<T> = ((ref?: Reference<T>) => JSX.Element);
-
-type Mountable<T> = JSX.Element | FunctionToMount<T>;
-
-type ElementWithNode<T> = JSX.Element & {
-    node: T,
-};
-
-const isNotFunction = <T>(toMount: Mountable<T>): toMount is ElementWithNode<T> => (
-    typeof toMount !== 'function'
-);
-
-const isFunction = <T>(toMount: Mountable<T>): toMount is FunctionToMount<T> => (
-    typeof toMount === 'function'
-);
-
-export const shallow = <T>(toMount: Mountable<T>): MountedComponent<T> => {
-    const ref = createRef<T>();
-    let toMountWithRef!: JSX.Element;
-    if (isNotFunction(toMount)) {
-        if (!toMount.props.ref) toMount.props.ref = ref;
-        toMountWithRef = toMount;
-    } else if (isFunction(toMount)) {
-        toMountWithRef = toMount(ref);
-    }
-    const root = document.createElement('div');
-    document.body.appendChild(root);
-    mount(toMountWithRef, root);
-    return new MountedComponent<T>(toMountWithRef.props.ref || ref, root);
-};
+import { createRef, mount, Reference } from '../index';
+import { MountedComponent } from './MountedComponent';
+
+type FunctionToMount<T> = ((ref?: Reference<T>) => JSX.Element);
+
+type Mountable<T> = JSX.Element | FunctionToMount<T>;
+
+type ElementWithNode<T> = JSX.Element & {
+    node: T,
+};
+
+const isNotFunction = <T>(toMount: Mountable<T>): toMount is ElementWithNode<T> => (
+    typeof toMount !== 'function'
+);
+
+const isFunction = <T>(toMount: Mountable<T>): toMount is FunctionToMount<T> => (
+    typeof toMount === 'function'
+);
+
+export const shallow = <T>(toMount: Mountable<T>): MountedComponent<T> => {
+    const ref = createRef<T>();
+    let toMountWithRef!: JSX.Element;
+    if (isNotFunction(toMount)) {
+        if (!toMount.props.ref) toMount.props.ref = ref;
+        toMountWithRef = toMount;
+    } else if (isFunction(toMount)) {
+        toMountWithRef = toMount(ref);
+    }
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    mount(toMountWithRef, root);
+    return new MountedComponent<T>(toMountWithRef.props.ref || ref, root);
+};

package/packages/jsx/src/test-utils/spec-utils.ts

@@ -1,6 +1,6 @@
-export const prepareElementAndSpy = (event: string) => {
-    const element = document.createElement('div');
-    const spy = jest.fn();
-    element.addEventListener(event, spy);
-    return { spy, element };
-};
+export const prepareElementAndSpy = (event: string) => {
+    const element = document.createElement('div');
+    const spy = jest.fn();
+    element.addEventListener(event, spy);
+    return { spy, element };
+};