@24i/bigscreen-sdk 1.0.25-alpha.2440 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.25-alpha.2440",
+    "version": "1.0.25",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {

package/packages/focus/README.md

@@ -40,6 +40,7 @@ to the focused element and its index. Ideal place to change other elements
 - onBeforeFocusChange: Optional callback just before focus change. It receives a reference
 to the focused element and its index. Ideal place for preparing for the change
 (e.g. moving the container to fit new element in the screen)
+- circular: makes focus circular, e.g. when pressing left at leftmost element focus will go to rightmost element
 - dir: Optional forceful setting of the component direction. Defaults to `'auto'` which follows
 the direction of the app.
 `'ltr'` always forces left-to-right layout,

package/packages/focus/src/Layout/Base.tsx

@@ -12,6 +12,7 @@ export type Props = SharedProps & {
     focusableChildren: Array<Reference>,
     onFocusChanged?: (focused: Reference, index: number) => any,
     onBeforeFocusChange?: (focused: Reference, index: number) => any,
+    circular?: boolean,
     preventBlurOnLongPress?: {
         forward?: boolean,
         backward?: boolean,
@@ -39,6 +40,7 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
             onBeforeFocusChange: noop,
             focusOptions: { preventScroll: true },
             dir: 'auto',
+            circular: false,
             preventBlurOnLongPress: {},
         } as const;
 
@@ -94,7 +96,7 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
         }
 
         backward(e: KeyboardEvent) {
-            const { preventBlurOnLongPress } = this.props;
+            const { focusableChildren, preventBlurOnLongPress, circular } = this.props;
             const { target } = e;
             const fromIndex = this.getFromIndex(target as HTMLElement);
             if (preventBlurOnLongPress.backward) {
@@ -104,13 +106,17 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
                 this.setIndex(fromIndex - 1);
                 this.focusCurrentIndex();
                 stopEvent(e);
+            } else if (circular) {
+                this.setIndex(focusableChildren.length - 1);
+                this.focusCurrentIndex();
+                stopEvent(e);
             } else if (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS) {
                 stopEvent(e);
             }
         }
 
         forward(e: KeyboardEvent) {
-            const { focusableChildren, preventBlurOnLongPress } = this.props;
+            const { focusableChildren, preventBlurOnLongPress, circular } = this.props;
             const { target } = e;
             const fromIndex = this.getFromIndex(target as HTMLElement);
             if (preventBlurOnLongPress.forward) {
@@ -120,6 +126,10 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
                 this.setIndex(fromIndex + 1);
                 this.focusCurrentIndex();
                 stopEvent(e);
+            } else if (circular) {
+                this.setIndex(0);
+                this.focusCurrentIndex();
+                stopEvent(e);
             } else if (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS) {
                 stopEvent(e);
             }

package/packages/focus/src/Layout/__test__/Base.spec.ts

@@ -1,191 +0,0 @@
-import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
-import { IFocusable } from '../../IFocusable';
-import { getLayoutBase } from '../Base';
-import { rootRef, refChildA, refChildB, refChildC, refChildD } from './shared';
-
-jest.mock('@24i/bigscreen-sdk/utils/stopEvent');
-
-const mockKeydown = jest.fn();
-const mockEvent: any = {
-    target: null,
-};
-
-const Base = getLayoutBase(mockKeydown);
-
-describe('Focus Layout Base', () => {
-    let base: any;
-    beforeEach(() => {
-        base = new Base({
-            ...Base.defaultProps,
-            domRef: rootRef,
-            children: 'children',
-            focusableChildren: [refChildA, refChildB, refChildC],
-            onFocusChanged: jest.fn(),
-            onBeforeFocusChange: jest.fn(),
-        });
-        jest.clearAllMocks();
-    });
-
-    it('should throw without domRef on componentDidMount', () => {
-        // @ts-ignore - the point of the test is to test possible runtime problem
-        const invalidBase = new Base({ domRef: null, children: [], focusableChildren: [] });
-        expect(() => invalidBase.componentDidMount()).toThrow();
-    });
-
-    it('should throw without domRef on componentWillUnmount', () => {
-        // @ts-ignore - the point of the test is to test possible runtime problem
-        const invalidBase = new Base({ domRef: null, children: [], focusableChildren: [] });
-        expect(() => invalidBase.componentWillUnmount()).toThrow();
-    });
-
-    it('should not throw with valid domRef on componentDidMount', () => {
-        expect(() => base.componentDidMount()).not.toThrow();
-    });
-
-    it('should not throw with valid domRef on componentWillUnmount', () => {
-        expect(() => base.componentWillUnmount()).not.toThrow();
-    });
-
-    it('should render children', () => {
-        expect(base.render()).toBe('children');
-    });
-
-    it('should return false when setting index out of range', () => {
-        expect(base.setIndex(4)).toBe(false);
-    });
-
-    it('should return true when setting index out of range', () => {
-        expect(base.setIndex(1)).toBe(true);
-    });
-
-    it('should increase index by one on forward', () => {
-        const oldIndex = base.index;
-        base.forward(mockEvent);
-        expect(base.index).toBe(oldIndex + 1);
-    });
-
-    it('should deecrease index by one on backward', () => {
-        base.index = 2;
-        const oldIndex = base.index;
-        base.backward(mockEvent);
-        expect(base.index).toBe(oldIndex - 1);
-    });
-
-    it('should not increase index above focusableChildren.length - 1', () => {
-        base.index = base.props.focusableChildren.length - 1;
-        base.forward(mockEvent);
-        expect(base.index).toBe(base.props.focusableChildren.length - 1);
-    });
-
-    it('should not decrease index below 0', () => {
-        base.index = 0;
-        base.backward(mockEvent);
-        expect(base.index).toBe(0);
-    });
-
-    it('should call focus on new element when going forward', () => {
-        base.forward(mockEvent);
-        expect(refChildB.current!.focus).toHaveBeenCalled();
-    });
-
-    it('should call focus on new element when going backward', () => {
-        base.index = 1;
-        base.backward(mockEvent);
-        expect(refChildA.current!.focus).toHaveBeenCalled();
-    });
-
-    it('should not call focus when can\'t go forward', () => {
-        base.index = 2;
-        base.forward(mockEvent);
-        expect(refChildC.current!.focus).not.toHaveBeenCalled();
-    });
-
-    it('should not call focus when can\'t go backward', () => {
-        base.backward(mockEvent);
-        expect(refChildA.current!.focus).not.toHaveBeenCalled();
-    });
-
-    it('should call stopEvent when going forward', () => {
-        base.forward(mockEvent);
-        expect(stopEvent).toHaveBeenCalledTimes(1);
-    });
-
-    it('should call stopEvent when going backward', () => {
-        base.index = 1;
-        base.backward(mockEvent);
-        expect(stopEvent).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not call stopEvent when can\'t go forward', () => {
-        base.index = 2;
-        base.forward(mockEvent);
-        expect(stopEvent).not.toHaveBeenCalledTimes(1);
-    });
-
-    it('should not call stopEvent when can\'t go backward', () => {
-        base.backward(mockEvent);
-        expect(stopEvent).not.toHaveBeenCalledTimes(1);
-    });
-
-    it('should call stopEvent when going forward and preventBlurOnLongPress is on', () => {
-        base.props.preventBlurOnLongPress.forward = true;
-        base.forward(mockEvent);
-        base.forward(mockEvent);
-        base.forward(mockEvent);
-        expect(stopEvent).toHaveBeenCalledTimes(3);
-    });
-
-    it('should call stopEvent when going backward and preventBlurOnLongPress is on', () => {
-        base.index = 2;
-        base.props.preventBlurOnLongPress.backward = true;
-        base.backward(mockEvent);
-        base.backward(mockEvent);
-        base.backward(mockEvent);
-        expect(stopEvent).toHaveBeenCalledTimes(3);
-    });
-
-    it('should call onFocusChanged when focusing current index', () => {
-        base.focusCurrentIndex();
-        expect(base.props.onFocusChanged).toHaveBeenCalled();
-    });
-
-    it('should call onBeforeFocusChange when focusing current index', () => {
-        base.focusCurrentIndex();
-        expect(base.props.onBeforeFocusChange).toHaveBeenCalled();
-    });
-
-    it('should focus current index on focus', () => {
-        base.index = 2;
-        base.focus();
-        expect(refChildC.current!.focus).toHaveBeenCalled();
-    });
-
-    it('should call passed onKeyDown on onKeyDown', () => {
-        base.onKeyDown();
-        expect(mockKeydown).toHaveBeenCalled();
-    });
-
-    it('should throw in focusCurrentIndex when element does not implement focus', () => {
-        base.props.focusableChildren[2] = {};
-        base.index = 2;
-        expect(() => base.focusCurrentIndex()).toThrow();
-    });
-
-    it('should take result of hasDom into account of determining current focus position', () => {
-        base = new Base({
-            ...Base.defaultProps,
-            domRef: rootRef,
-            children: 'children',
-            focusableChildren: [refChildA, refChildB, refChildC, refChildD],
-            onFocusChanged: jest.fn(),
-            onBeforeFocusChange: jest.fn(),
-        });
-        ((refChildD.current as IFocusable).hasDom as jest.MockedFn<
-        Exclude<IFocusable['hasDom'], undefined>
-        >).mockReturnValueOnce(true);
-        base.backward(mockEvent);
-        expect(base.index).toBe(2);
-        base.backward(mockEvent);
-        expect(base.index).toBe(1);
-    });
-});

package/packages/focus/src/Layout/__test__/Horizontal.spec.ts

@@ -1,92 +0,0 @@
-import { isRtl } from '@24i/bigscreen-sdk/i18n';
-import { Horizontal } from '../Horizontal';
-import { rootRef, refChildA, refChildB, refChildC } from './shared';
-
-jest.mock('@24i/bigscreen-sdk/i18n', () => ({
-    ...jest.requireActual('@24i/bigscreen-sdk/i18n'),
-    isRtl: jest.fn().mockReturnValue(false),
-}));
-const isRtlMock = isRtl as jest.MockedFn<typeof isRtl>;
-
-const mockEvent = {
-    target: false,
-};
-const mockLEFTEvent = {
-    code: 'ArrowLeft',
-    ...mockEvent,
-};
-const mockRIGHTEvent = {
-    code: 'ArrowRight',
-    ...mockEvent,
-};
-
-describe('Horizontal Focus Layout', () => {
-    let horizontal: any;
-    beforeEach(() => {
-        horizontal = new Horizontal({
-            domRef: rootRef,
-            children: 'children',
-            focusableChildren: [refChildA, refChildB, refChildC],
-            onFocusChanged: jest.fn(),
-            onBeforeFocusChange: jest.fn(),
-        });
-        horizontal.forward = jest.fn();
-        horizontal.backward = jest.fn();
-    });
-
-    it('should be a class component', () => {
-        expect(Horizontal.isClass).toBe(true);
-    });
-
-    it('should call forward on RIGHT', () => {
-        horizontal.onKeyDown(mockRIGHTEvent);
-        expect(horizontal.forward).toHaveBeenCalled();
-    });
-
-    it('should call backward on LEFT', () => {
-        horizontal.setIndex(1);
-        horizontal.onKeyDown(mockLEFTEvent);
-        expect(horizontal.backward).toHaveBeenCalled();
-    });
-
-    it('should call backward on RIGHT when RTL', () => {
-        isRtlMock.mockReturnValueOnce(true);
-        horizontal.setIndex(1);
-        horizontal.onKeyDown(mockRIGHTEvent);
-        expect(horizontal.backward).toHaveBeenCalled();
-    });
-
-    it('should call forward on LEFT when RTL', () => {
-        isRtlMock.mockReturnValueOnce(true);
-        horizontal.onKeyDown(mockLEFTEvent);
-        expect(horizontal.forward).toHaveBeenCalled();
-    });
-
-    it('should call backward on RIGHT when forced RTL', () => {
-        horizontal.props.dir = 'rtl';
-        horizontal.setIndex(1);
-        horizontal.onKeyDown(mockRIGHTEvent);
-        expect(horizontal.backward).toHaveBeenCalled();
-    });
-
-    it('should call forward on LEFT when forced RTL', () => {
-        horizontal.props.dir = 'rtl';
-        horizontal.onKeyDown(mockLEFTEvent);
-        expect(horizontal.forward).toHaveBeenCalled();
-    });
-
-    it('should call backward on LEFT when RTL and forced LTR', () => {
-        isRtlMock.mockReturnValueOnce(true);
-        horizontal.props.dir = 'ltr';
-        horizontal.setIndex(1);
-        horizontal.onKeyDown(mockLEFTEvent);
-        expect(horizontal.backward).toHaveBeenCalled();
-    });
-
-    it('should call forward on RIGHT when RTL and forced LTR', () => {
-        isRtlMock.mockReturnValueOnce(true);
-        horizontal.props.dir = 'ltr';
-        horizontal.onKeyDown(mockRIGHTEvent);
-        expect(horizontal.forward).toHaveBeenCalled();
-    });
-});

package/packages/focus/src/Layout/__test__/Matrix.spec.ts

@@ -1,299 +0,0 @@
-import { createRef } from '@24i/bigscreen-sdk/jsx';
-import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
-import { LEFT, RIGHT, UP, DOWN, Key } from '@24i/bigscreen-sdk/device/keymap';
-import { Matrix, CircularDirection } from '../Matrix';
-
-jest.mock('@24i/bigscreen-sdk/utils/stopEvent');
-
-const simulateKey = (key: Key): KeyboardEvent => ({
-    code: key.code,
-} as unknown as KeyboardEvent);
-
-const getFocusable = () => ({
-    focus: jest.fn(),
-});
-
-const domRef = createRef(document.createElement('div'));
-
-const A1 = createRef(getFocusable());
-const A2 = createRef(getFocusable());
-const A3 = createRef(getFocusable());
-const B1 = createRef(getFocusable());
-const C1 = createRef(getFocusable());
-const C2 = createRef(getFocusable());
-const C3 = createRef(getFocusable());
-const D1 = createRef(getFocusable());
-const D2 = createRef(getFocusable());
-
-const MATRIX = [
-    [A1, B1, C1, D1],
-    [A2, B1, C2, C2],
-    [A3, B1, C3, D2],
-];
-
-describe('Matrix focus', () => {
-    let matrix: Matrix;
-
-    beforeEach(() => {
-        matrix = new Matrix({ ...Matrix.defaultProps, matrix: MATRIX, domRef, children: [] });
-        jest.clearAllMocks();
-    });
-
-    it('should have default index at 0, 0', () => {
-        expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
-    });
-
-    it('should go A1 -> RIGHT -> B1', () => {
-        matrix.index = { x: 0, y: 0 };
-        const event = simulateKey(RIGHT);
-        matrix.onKeyDown(event);
-        expect(B1.current!.focus).toHaveBeenCalled();
-        expect(stopEvent).toHaveBeenCalledTimes(1);
-        B1.current!.focus.mockClear();
-    });
-
-    it('should go A1 -> DOWN -> A2', () => {
-        matrix.index = { x: 0, y: 0 };
-        const event = simulateKey(DOWN);
-        matrix.onKeyDown(event);
-        expect(A2.current!.focus).toHaveBeenCalled();
-        expect(stopEvent).toHaveBeenCalledTimes(1);
-        A2.current!.focus.mockClear();
-    });
-
-    it('should go D2 -> LEFT -> C3', () => {
-        matrix.index = { x: 3, y: 2 };
-        const event = simulateKey(LEFT);
-        matrix.onKeyDown(event);
-        expect(C3.current!.focus).toHaveBeenCalled();
-        expect(stopEvent).toHaveBeenCalledTimes(1);
-        C3.current!.focus.mockClear();
-    });
-
-    it('should go D2 -> UP -> C2', () => {
-        matrix.index = { x: 3, y: 2 };
-        const event = simulateKey(UP);
-        matrix.onKeyDown(event);
-        expect(C2.current!.focus).toHaveBeenCalled();
-        expect(stopEvent).toHaveBeenCalledTimes(1);
-        C2.current!.focus.mockClear();
-    });
-
-    it('should not leave left boundary', () => {
-        matrix.index = { x: 0, y: 0 };
-        const event = simulateKey(LEFT);
-        matrix.onKeyDown(event);
-        expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
-        expect(stopEvent).not.toHaveBeenCalledTimes(1);
-    });
-
-    it('should not leave top boundary', () => {
-        matrix.index = { x: 1, y: 2 };
-        const event = simulateKey(UP);
-        matrix.onKeyDown(event);
-        expect(matrix.index).toStrictEqual({ x: 1, y: 2 });
-        expect(stopEvent).not.toHaveBeenCalledTimes(1);
-    });
-
-    it('should not leave right boundary', () => {
-        matrix.index = { x: 2, y: 1 };
-        const event = simulateKey(RIGHT);
-        matrix.onKeyDown(event);
-        expect(matrix.index).toStrictEqual({ x: 2, y: 1 });
-        expect(stopEvent).not.toHaveBeenCalledTimes(1);
-    });
-
-    it('should not leave bottom boundary', () => {
-        matrix.index = { x: 3, y: 2 };
-        const event = simulateKey(DOWN);
-        matrix.onKeyDown(event);
-        expect(matrix.index).toStrictEqual({ x: 3, y: 2 });
-        expect(stopEvent).not.toHaveBeenCalledTimes(1);
-    });
-
-    it('should call stopEvent when on left and preventBlurOnLongPress is on', () => {
-        matrix.props.preventBlurOnLongPress.left = true;
-        matrix.index = { x: 1, y: 0 };
-        const event = simulateKey(LEFT);
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
-        expect(stopEvent).toHaveBeenCalledTimes(3);
-    });
-
-    it('should call stopEvent when on up and preventBlurOnLongPress is on', () => {
-        matrix.props.preventBlurOnLongPress.up = true;
-        matrix.index = { x: 0, y: 1 };
-        const event = simulateKey(UP);
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
-        expect(stopEvent).toHaveBeenCalledTimes(3);
-    });
-
-    it('should call stopEvent when on right and preventBlurOnLongPress is on', () => {
-        matrix.props.preventBlurOnLongPress.right = true;
-        matrix.index = { x: 2, y: 0 };
-        const event = simulateKey(RIGHT);
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        expect(matrix.index).toStrictEqual({ x: 3, y: 0 });
-        expect(stopEvent).toHaveBeenCalledTimes(3);
-    });
-
-    it('should call stopEvent when on down and preventBlurOnLongPress is on', () => {
-        matrix.props.preventBlurOnLongPress.down = true;
-        matrix.index = { x: 0, y: 1 };
-        const event = simulateKey(DOWN);
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        expect(matrix.index).toStrictEqual({ x: 0, y: 2 });
-        expect(stopEvent).toHaveBeenCalledTimes(3);
-    });
-
-    it('should keep row (Ax -> RIGHT -> B1 -> RIGHT -> Cx)', () => {
-        const event = simulateKey(RIGHT);
-        matrix.index = { x: 0, y: 0 };
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        expect(C1.current!.focus).toHaveBeenCalled();
-        matrix.index = { x: 0, y: 1 };
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        expect(C2.current!.focus).toHaveBeenCalled();
-        matrix.index = { x: 0, y: 2 };
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        expect(C3.current!.focus).toHaveBeenCalled();
-        C1.current!.focus.mockClear();
-        C2.current!.focus.mockClear();
-        C3.current!.focus.mockClear();
-    });
-
-    it('should keep column (C3/D2 -> UP -> C2 -> UP -> C1/D1)', () => {
-        const event = simulateKey(UP);
-        matrix.index = { x: 2, y: 2 };
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        expect(C1.current!.focus).toHaveBeenCalled();
-        matrix.index = { x: 3, y: 2 };
-        matrix.onKeyDown(event);
-        matrix.onKeyDown(event);
-        expect(D1.current!.focus).toHaveBeenCalled();
-        C1.current!.focus.mockClear();
-        D1.current!.focus.mockClear();
-    });
-
-    it('should skip same and focus next (C2 -> LEFT -> C2 -> B1)', () => {
-        matrix.index = { x: 3, y: 1 };
-        matrix.onKeyDown(simulateKey(LEFT));
-        expect(B1.current!.focus).toHaveBeenCalled();
-        B1.current!.focus.mockClear();
-    });
-
-    describe('circular focus', () => {
-        const commonProps = {
-            ...Matrix.defaultProps,
-            matrix: MATRIX,
-            domRef,
-            children: null as any,
-        };
-        it('should circle to the left (A1 -> left -> D1)', () => {
-            matrix = new Matrix({ ...commonProps, circular: CircularDirection.HORIZONTAL });
-            matrix.index = { x: 0, y: 0 };
-            const event = simulateKey(LEFT);
-            matrix.onKeyDown(event);
-            expect(D1.current!.focus).toHaveBeenCalled();
-            expect(matrix.index).toEqual({ x: 3, y: 0 });
-            D1.current!.focus.mockClear();
-        });
-
-        it('should circle to the right (A1 -> right -> D1)', () => {
-            matrix = new Matrix({ ...commonProps, circular: CircularDirection.HORIZONTAL });
-            matrix.index = { x: 3, y: 0 };
-            const event = simulateKey(RIGHT);
-            matrix.onKeyDown(event);
-            expect(A1.current!.focus).toHaveBeenCalled();
-            expect(matrix.index).toEqual({ x: 0, y: 0 });
-            A1.current!.focus.mockClear();
-        });
-
-        it('should circle to upwards (A1 -> up -> A3)', () => {
-            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
-            matrix.index = { x: 0, y: 0 };
-            const event = simulateKey(UP);
-            matrix.onKeyDown(event);
-            expect(A3.current!.focus).toHaveBeenCalled();
-            expect(matrix.index).toEqual({ x: 0, y: 2 });
-            A3.current!.focus.mockClear();
-        });
-
-        it('should circle to downwards (A3 -> down -> A1)', () => {
-            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
-            matrix.index = { x: 0, y: 2 };
-            const event = simulateKey(DOWN);
-            matrix.onKeyDown(event);
-            expect(A1.current!.focus).toHaveBeenCalled();
-            expect(matrix.index).toEqual({ x: 0, y: 0 });
-            A1.current!.focus.mockClear();
-        });
-
-        it('should circle horizontally and vertically (A3 -> down -> A1 -> left -> D1)', () => {
-            matrix = new Matrix({ ...commonProps, circular: CircularDirection.ALL });
-            matrix.index = { x: 0, y: 2 };
-            let event = simulateKey(DOWN);
-            matrix.onKeyDown(event);
-            expect(matrix.index).toEqual({ x: 0, y: 0 });
-
-            event = simulateKey(LEFT);
-            matrix.onKeyDown(event);
-            expect(matrix.index).toEqual({ x: 3, y: 0 });
-            A1.current!.focus.mockClear();
-            D1.current!.focus.mockClear();
-        });
-
-        it('given vertical should not circle to horizontally (A1 -> left -> A1)', () => {
-            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
-            matrix.index = { x: 0, y: 0 };
-            const event = simulateKey(LEFT);
-            matrix.onKeyDown(event);
-            expect(matrix.index).toEqual({ x: 0, y: 0 });
-        });
-
-        it('given horizontal should not circle to vertically (A1 -> up -> A1)', () => {
-            matrix = new Matrix({ ...commonProps, circular: CircularDirection.HORIZONTAL });
-            matrix.index = { x: 0, y: 0 };
-            const event = simulateKey(UP);
-            matrix.onKeyDown(event);
-            expect(matrix.index).toEqual({ x: 0, y: 0 });
-        });
-
-        it('given 1 vertical key should not loop infinitely', () => {
-            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
-            matrix.index = { x: 1, y: 0 };
-            const event = simulateKey(UP);
-            matrix.onKeyDown(event);
-            expect(matrix.index).toEqual({ x: 1, y: 0 });
-        });
-
-        it('given 1 horizontal key should not loop infinitely', () => {
-            const keyMatrix = [
-                [A1, B1, C1, D1],
-                [C2, C2, C2, C2],
-            ];
-            matrix = new Matrix({
-                ...commonProps,
-                matrix: keyMatrix,
-                circular: CircularDirection.VERTICAL,
-            });
-            matrix.index = { x: 0, y: 1 };
-            const event = simulateKey(LEFT);
-            matrix.onKeyDown(event);
-            expect(matrix.index).toEqual({ x: 0, y: 1 });
-        });
-    });
-});

package/packages/focus/src/Layout/__test__/Vertical.spec.ts

@@ -1,44 +0,0 @@
-import { Vertical } from '../Vertical';
-import { rootRef, refChildA, refChildB, refChildC } from './shared';
-
-const mockEvent = {
-    target: false,
-};
-const mockUPEvent = {
-    code: 'ArrowUp',
-    ...mockEvent,
-};
-const mockDOWNEvent = {
-    code: 'ArrowDown',
-    ...mockEvent,
-};
-
-describe('Vertical Focus Layout', () => {
-    let vertical: any;
-    beforeEach(() => {
-        vertical = new Vertical({
-            domRef: rootRef,
-            children: 'children',
-            focusableChildren: [refChildA, refChildB, refChildC],
-            onFocusChanged: jest.fn(),
-            onBeforeFocusChange: jest.fn(),
-        });
-        vertical.forward = jest.fn();
-        vertical.backward = jest.fn();
-    });
-
-    it('should be a class component', () => {
-        expect(Vertical.isClass).toBe(true);
-    });
-
-    it('should call forward on DOWN', () => {
-        vertical.onKeyDown(mockDOWNEvent);
-        expect(vertical.forward).toHaveBeenCalled();
-    });
-
-    it('should call forward on UP', () => {
-        vertical.setIndex(1);
-        vertical.onKeyDown(mockUPEvent);
-        expect(vertical.backward).toHaveBeenCalled();
-    });
-});

package/packages/focus/src/Layout/__test__/isRtl.spec.ts

@@ -1,23 +0,0 @@
-import * as i18n from '@24i/bigscreen-sdk/i18n';
-import { isRtl } from '../isRtl';
-import { SharedProps } from '../types';
-
-describe('isRtl', () => {
-    const mockIsRtl = jest.spyOn(i18n, 'isRtl');
-
-    it.each([
-        { focusDir: 'ltr', langDir: 'ltr', expectedIsRtl: false },
-        { focusDir: 'rtl', langDir: 'ltr', expectedIsRtl: true },
-        { focusDir: 'auto', langDir: 'ltr', expectedIsRtl: false },
-        { focusDir: undefined, langDir: 'ltr', expectedIsRtl: false },
-        { focusDir: 'ltr', langDir: 'rtl', expectedIsRtl: false },
-        { focusDir: 'rtl', langDir: 'rtl', expectedIsRtl: true },
-        { focusDir: 'auto', langDir: 'rtl', expectedIsRtl: true },
-        { focusDir: undefined, langDir: 'rtl', expectedIsRtl: true },
-    ])('should for $focusDir focus and $langDir language return $expectedIsRtl', ({
-        focusDir, langDir, expectedIsRtl,
-    }) => {
-        mockIsRtl.mockReturnValue(langDir === 'rtl');
-        expect(isRtl(focusDir as SharedProps['dir'])).toBe(expectedIsRtl);
-    });
-});

package/packages/focus/src/Layout/__test__/shared.ts

@@ -1,19 +0,0 @@
-import { createRef } from '@24i/bigscreen-sdk/jsx';
-import { IFocusable } from '../../IFocusable';
-
-class ChildMock {
-    focus = jest.fn();
-}
-
-const root = document.createElement('div');
-export const rootRef = createRef(root);
-
-const childA = new ChildMock();
-const childB = new ChildMock();
-const childC = new ChildMock();
-const childD = new ChildMock();
-(childD as IFocusable).hasDom = jest.fn().mockReturnValue(false);
-export const refChildA = createRef(childA);
-export const refChildB = createRef(childB);
-export const refChildC = createRef(childC);
-export const refChildD = createRef(childD);