Add breakpoint middleware mock

src/testing/mocks/middleware/breakpoint.ts

@@ -0,0 +1,66 @@
+import { create, destroy, invalidator, node } from '../../../core/vdom';
+import resize from '../../../core/middleware/resize';
+import icache from '../../../core/middleware/icache';
+import breakpoint, { Breakpoints } from '../../../core/middleware/breakpoint';
+import createResizeMock from './resize';
+import { MiddlewareResult } from '../../../core/interfaces';
+
+export function createBreakpointMock(breakpoints: Breakpoints = { SM: 0, MD: 576, LG: 768, XL: 960 }) {
+	const mockBreakpoints: any = {};
+	const defaultBreakpoints = breakpoints;
+	const resizeMockFactory = createResizeMock();
+	const factory = create({ resize, node, destroy, icache, invalidator });
+
+	const mockBreakpointFactory = factory((payload) => {
+		const { id, properties, children } = payload;
+		const { callback } = breakpoint();
+		const mock = callback({
+			id,
+			middleware: { resize: resizeMockFactory().callback(payload) },
+			properties,
+			children
+		});
+
+		return {
+			get(key: string | number, breakpoints: Breakpoints = defaultBreakpoints) {
+				const result = mock.get(key, breakpoints);
+				if (mockBreakpoints[key]) {
+					return {
+						breakpoint: mockBreakpoints[key].breakpoint || (result && result.breakpoint),
+						contentRect: result && result.contentRect
+					};
+				}
+				return null;
+			}
+		};
+	});
+
+	function mockBreakpoint(): MiddlewareResult<any, any, any>;
+	function mockBreakpoint(
+		key: string,
+		breakpointResult: {
+			breakpoint: string;
+			contentRect: Partial<DOMRectReadOnly>;
+		}
+	): void;
+	function mockBreakpoint(
+		key?: string,
+		breakpointResult?: {
+			breakpoint: string;
+			contentRect: Partial<DOMRectReadOnly>;
+		}
+	): void | MiddlewareResult<any, any, any> {
+		if (key && breakpointResult) {
+			if (!mockBreakpoints[key]) {
+				mockBreakpoints[key] = breakpointResult.breakpoint;
+			}
+			resizeMockFactory(key, breakpointResult.contentRect);
+		} else {
+			return mockBreakpointFactory();
+		}
+	}
+
+	return mockBreakpoint;
+}
+
+export default createBreakpointMock;

tests/testing/unit/mocks/middleware/all.ts

@@ -2,3 +2,4 @@ import './intersection';
 import './node';
 import './resize';
 import './store';
+import './breakpoint';

tests/testing/unit/mocks/middleware/breakpoint.tsx

@@ -0,0 +1,60 @@
+const { it } = intern.getInterface('bdd');
+const { describe } = intern.getPlugin('jsdom');
+import createBreakpointMock from '../../../../../src/testing/mocks/middleware/breakpoint';
+import breakpoint from '../../../../../src/core/middleware/breakpoint';
+import { tsx, create } from '../../../../../src/core/vdom';
+import harness from '../../../../../src/testing/harness';
+
+describe('breakpoint mock', () => {
+	it('should mock breakpoint middleware calls', () => {
+		const breakpointMock = createBreakpointMock();
+		const factory = create({ breakpoint });
+		const App = factory(({ middleware: { breakpoint } }) => {
+			const breakpointResult = breakpoint.get('root');
+			return <div key="root">{JSON.stringify(breakpointResult)}</div>;
+		});
+		const h = harness(() => <App key="app" />, { middleware: [[breakpoint, breakpointMock]] });
+		h.expect(() => <div key="root">null</div>);
+		breakpointMock('root', { breakpoint: 'SM', contentRect: { width: 20 } });
+		h.expect(() => <div key="root">{'{"breakpoint":"SM","contentRect":{"width":20}}'}</div>);
+		breakpointMock('root', { breakpoint: 'XL', contentRect: { width: 1020 } });
+		h.expect(() => <div key="root">{'{"breakpoint":"XL","contentRect":{"width":1020}}'}</div>);
+	});
+
+	it('should deal with multiple mocked keys', () => {
+		const breakpointMock = createBreakpointMock();
+		const factory = create({ breakpoint });
+		const App = factory(({ middleware: { breakpoint } }) => {
+			const rootBreakpoint = breakpoint.get('root');
+			const otherBreakpoint = breakpoint.get('other');
+			return (
+				<div>
+					<div key="root">{JSON.stringify(rootBreakpoint)}</div>
+					<div key="other">{JSON.stringify(otherBreakpoint)}</div>
+				</div>
+			);
+		});
+		const h = harness(() => <App key="app" />, { middleware: [[breakpoint, breakpointMock]] });
+		h.expect(() => (
+			<div>
+				<div key="root">null</div>
+				<div key="other">null</div>
+			</div>
+		));
+		breakpointMock('root', { breakpoint: 'SM', contentRect: { width: 50 } });
+		h.expect(() => (
+			<div>
+				<div key="root">{'{"breakpoint":"SM","contentRect":{"width":50}}'}</div>
+				<div key="other">null</div>
+			</div>
+		));
+		breakpointMock('root', { breakpoint: 'XL', contentRect: { width: 1020 } });
+		breakpointMock('other', { breakpoint: 'MD', contentRect: { width: 620 } });
+		h.expect(() => (
+			<div>
+				<div key="root">{'{"breakpoint":"XL","contentRect":{"width":1020}}'}</div>
+				<div key="other">{'{"breakpoint":"MD","contentRect":{"width":620}}'}</div>
+			</div>
+		));
+	});
+});