@rokkit/helpers 1.0.0-next.101

package/spec/mocks/match-media.spec.js

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest'
+import { matchMediaMock, updateMedia } from '../../src/mocks/match-media'
+
+describe('match-media', () => {
+	describe('matchMediaMock', () => {
+		it('should return a mock media query', () => {
+			const query = matchMediaMock('(min-width: 100px)')
+			expect(query.media).toBe('(min-width: 100px)')
+			expect(query.matches).toBe(true)
+			expect(query.addListener).toEqual(expect.any(Function))
+			expect(query.removeListener).toEqual(expect.any(Function))
+		})
+	})
+
+	describe('updateMedia', () => {
+		it('should mock min-width media query', () => {
+			const query = matchMediaMock('(min-width: 100px)')
+
+			window.innerWidth = 50
+			updateMedia()
+			expect(query.matches).toBe(false)
+
+			window.innerWidth = 200
+			updateMedia()
+			expect(query.matches).toBe(true)
+		})
+
+		it('should mock max-width media query', () => {
+			const query = matchMediaMock('(max-width: 100px)')
+
+			window.innerWidth = 500
+			updateMedia()
+			expect(query.matches).toBe(false)
+
+			window.innerWidth = 100
+			updateMedia()
+			expect(query.matches).toBe(true)
+		})
+
+		it('should mock the media queries', () => {
+			const query = matchMediaMock('(min-width: 100px) and (max-width: 200px)')
+
+			window.innerWidth = 50
+			updateMedia()
+			expect(query.matches).toBe(false)
+
+			window.innerWidth = 500
+			updateMedia()
+			expect(query.matches).toBe(false)
+
+			window.innerWidth = 150
+			updateMedia()
+			expect(query.matches).toBe(true)
+		})
+
+		it('should mock multiple media queries', () => {
+			const query1 = matchMediaMock('(min-width: 100px)')
+			const query2 = matchMediaMock('(max-width: 100px)')
+
+			window.innerWidth = 50
+			updateMedia()
+			expect(query1.matches).toBe(false)
+			expect(query2.matches).toBe(true)
+
+			window.innerWidth = 500
+			updateMedia()
+			expect(query1.matches).toBe(true)
+			expect(query2.matches).toBe(false)
+
+			// should remove the listener
+			query1.removeListener()
+			query2.removeListener()
+		})
+	})
+})

package/spec/mocks/resize-observer.spec.js

@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { ResizeObserver } from '../../src/mocks/resize-observer'
+
+global.ResizeObserver = ResizeObserver
+
+describe('ResizeObserver', () => {
+	let resizeObserver
+	let callback
+	let element
+
+	beforeEach(() => {
+		callback = vi.fn()
+		resizeObserver = new ResizeObserver(callback)
+		element = document.createElement('div')
+		document.body.appendChild(element)
+	})
+
+	it('should observe an element and trigger the callback with initial size', () => {
+		resizeObserver.observe(element)
+
+		expect(callback).toHaveBeenCalledTimes(1)
+		const [entry] = callback.mock.calls[0][0]
+		expect(entry.target).toBe(element)
+		expect(entry.contentRect).toEqual(element.getBoundingClientRect())
+	})
+
+	it('should unobserve an element', () => {
+		resizeObserver.observe(element)
+		resizeObserver.unobserve(element)
+
+		expect(resizeObserver.elements.has(element)).toBe(false)
+	})
+
+	it('should disconnect and clear all observed elements', () => {
+		resizeObserver.observe(element)
+		resizeObserver.disconnect()
+
+		expect(resizeObserver.elements.size).toBe(0)
+	})
+
+	it('should simulate a resize event', () => {
+		resizeObserver.observe(element)
+		const newSize = { width: 500, height: 300, top: 0, left: 0, right: 500, bottom: 300 }
+
+		resizeObserver.simulateResize(element, newSize)
+
+		expect(callback).toHaveBeenCalledTimes(2)
+		const [entry] = callback.mock.calls[1][0]
+		expect(entry.target).toBe(element)
+		expect(entry.contentRect).toEqual(newSize)
+	})
+})

package/spec/simulator.spec.js

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { toHaveBeenDispatchedWith } from '../src/matchers/event'
+import {
+	simulateMouseEvent,
+	simulateTouchEvent,
+	simulateMouseSwipe,
+	simulateTouchSwipe
+} from '../src/simulators/touch'
+
+expect.extend({ toHaveBeenDispatchedWith })
+describe('events', () => {
+	const node = document.createElement('div')
+
+	describe('simulateMouseEvent', () => {
+		it('should simulate a mouse event', () => {
+			const event = simulateMouseEvent(10, 10)
+			expect(event).toEqual({
+				clientX: 10,
+				clientY: 10,
+				stopPropagation: expect.any(Function),
+				preventDefault: expect.any(Function)
+			})
+		})
+	})
+	describe('simulateTouchEvent', () => {
+		it('should simulate a touch event', () => {
+			const event = simulateTouchEvent(10, 10)
+
+			expect(event).toEqual({
+				touches: [{ clientX: 10, clientY: 10 }],
+				stopPropagation: expect.any(Function),
+				preventDefault: expect.any(Function)
+			})
+		})
+	})
+
+	describe('simulateMouseSwipe', () => {
+		const events = ['mousedown', 'mouseup']
+
+		const handlers = {}
+
+		beforeEach(() => {
+			vi.useFakeTimers()
+			events.forEach((event) => {
+				handlers[event] = vi.fn()
+				node.addEventListener(event, handlers[event])
+			})
+		})
+		afterEach(() => {
+			vi.useRealTimers()
+			events.forEach((event) => node.removeEventListener(event, handlers[event]))
+		})
+		it('should simulate a mouse swipe', () => {
+			simulateMouseSwipe(node, { x: 10, y: 20 })
+			expect(handlers.mousedown).toHaveBeenCalledOnce()
+			expect(handlers.mouseup).toHaveBeenCalledOnce()
+
+			let mouseEvent = handlers.mousedown.mock.calls[0][0]
+			expect(mouseEvent.clientX).toEqual(0)
+			expect(mouseEvent.clientY).toEqual(0)
+
+			mouseEvent = handlers.mouseup.mock.calls[0][0]
+			expect(mouseEvent.clientX).toEqual(10)
+			expect(mouseEvent.clientY).toEqual(20)
+		})
+	})
+	describe('simulateTouchSwipe', () => {
+		const events = ['touchstart', 'touchend']
+
+		const handlers = {}
+
+		beforeEach(() => {
+			vi.useFakeTimers()
+			events.forEach((event) => {
+				handlers[event] = vi.fn()
+				node.addEventListener(event, handlers[event])
+			})
+		})
+		afterEach(() => {
+			events.forEach((event) => node.removeEventListener(event, handlers[event]))
+			vi.useRealTimers()
+		})
+
+		it('should simulate a touch swipe', () => {
+			simulateTouchSwipe(node, { x: 100, y: 50 })
+			expect(handlers.touchstart).toHaveBeenCalledOnce()
+			expect(handlers.touchend).toHaveBeenCalledOnce()
+			expect(handlers.touchstart.mock.calls[0][0].touches).toEqual([
+				{ clientX: 0, clientY: 0, identifier: 0, target: node }
+			])
+			expect(handlers.touchend.mock.calls[0][0].changedTouches).toEqual([
+				{ clientX: 100, clientY: 50, identifier: 0, target: node }
+			])
+		})
+	})
+})

package/src/components/MockItem.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { value } = $props()
+</script>
+
+{value}

package/src/index.js

@@ -0,0 +1 @@
+export * from './simulators/touch'

package/src/matchers/action.js

@@ -0,0 +1,88 @@
+import { getMockNode } from '../mocks'
+
+/**
+ * Generates a message based on the validation state
+ * @param {Array<string>} events
+ * @param {Array<string>} handlerKeys
+ * @param {boolean} pass
+ * @param {boolean} validEvents
+ * @returns {string}
+ */
+function getMessage(events, handlerKeys, pass, validEvents) {
+	let message = ''
+	const names = events.join(', ')
+	const keys = handlerKeys.join(', ')
+
+	if (pass) {
+		message = `Expected other handlers besides [${names}] to be called, but none were`
+	} else if (validEvents) {
+		message = `Expected only [${names}] to be called once and the other handlers to not be called`
+	} else {
+		message = `Expected events from [${keys}] but got unexpected events [${names}]`
+	}
+
+	return message
+}
+
+/**
+ * Checks if all the given events are registered by the action and cleaned up on destroy.
+ *
+ * @param {*} action
+ * @param {Object<string,any>} options
+ * @param {string|Array<string>} events
+ * @returns
+ */
+export function toUseHandlersFor(action, options, events) {
+	if (typeof events === 'string') {
+		events = [events]
+	}
+	const mock = getMockNode(events)
+	const actionHandler = action(mock.node, options)
+	let result = events.map((event) => ({
+		event,
+		created: mock.listeners[event] === 1
+	}))
+
+	actionHandler.destroy()
+	result = result
+		.map((r) => ({ ...r, destroyed: mock.listeners[r.event] === 0 }))
+		.map((r) => ({ ...r, pass: r.created && r.destroyed }))
+
+	const pass = result.every((r) => r.pass)
+	const message = [
+		'Expected action',
+		pass ? 'not to' : 'to',
+		'manage handlers for',
+		`[${events.join(',')}]`,
+		'but result is',
+		JSON.stringify(result)
+	].join(' ')
+
+	return { message: () => message, pass }
+}
+
+/**
+ * Verifies that only the specified events are triggered. Expects an object of spies with key as event names.
+ *
+ * @param {Object<string,any>} handler : Object with keys as event names and values as spies
+ * @param {string|Array<string>} events : An event name or an array of event names
+ * @returns
+ */
+export function toOnlyTrigger(handler, events) {
+	events = Array.isArray(events) ? events : [events]
+	const handlerKeys = Object.keys(handler)
+
+	const isEventValid = (event) => handlerKeys.includes(event)
+	const isCallCountCorrect = (key) => {
+		const callCount = handler[key].mock.calls.length
+		return events.includes(key) ? callCount === 1 : callCount === 0
+	}
+
+	const validEvents = events.every(isEventValid)
+	const pass = validEvents && handlerKeys.every(isCallCountCorrect)
+
+	return {
+		message: () => getMessage(events, handlerKeys, pass, validEvents),
+		pass
+	}
+}

package/src/matchers/array.js

@@ -0,0 +1,16 @@
+import { getMessage } from './internal'
+
+/**
+ * Verify that an array contains all of the expected values
+ *
+ * @param {Array} received - the array to inspect
+ * @param {Array} expected - the values to check for
+ */
+export function toIncludeAll(received, expected) {
+	const pass = expected.every((v) => received.includes(v))
+
+	return {
+		message: () => getMessage(received, expected, pass, 'include all of'),
+		pass
+	}
+}

package/src/matchers/dataset.js

@@ -0,0 +1,18 @@
+import { equals } from 'ramda'
+import { getMessage } from './internal'
+
+/**
+ * Check if the element has valid data attributes
+ *
+ * @param {HTMLElement} received - HTML element to be checked
+ * @param {Object}      expected - data to be compared
+ */
+export function toHaveValidData(received, expected) {
+	const actual = { ...received.dataset }
+	const pass = equals(actual, expected)
+
+	return {
+		message: () => getMessage(actual, expected, pass),
+		pass
+	}
+}

package/src/matchers/event.js

@@ -0,0 +1,18 @@
+import { equals } from '@vitest/expect'
+import { getMessage } from './internal'
+
+/**
+ * Verify that a spy event has been dispatched with data in event detail
+ *
+ * @param {Function} spy  - the event handler to inspect
+ * @param {Object}   data - data expected inthe event detail
+ */
+export function toHaveBeenDispatchedWith(spy, data) {
+	const detail = spy.mock.lastCall[0].detail
+	const pass = equals(detail, data)
+
+	return {
+		message: () => getMessage(detail, data, pass),
+		pass
+	}
+}

package/src/matchers/index.js

@@ -0,0 +1,4 @@
+export * from './array'
+export * from './action'
+export * from './dataset'
+export * from './event'

package/src/matchers/internal.js

@@ -0,0 +1,9 @@
+export function getMessage(actual, expected, pass, condition = 'deeply equal') {
+	return [
+		'expected',
+		JSON.stringify(actual),
+		pass ? 'to not' : 'to',
+		condition,
+		JSON.stringify(expected)
+	].join(' ')
+}

package/src/mocks/animate.js

@@ -0,0 +1,26 @@
+import { vi } from 'vitest'
+
+// Mock the animate function
+if (!global.Element.prototype.animate) {
+	global.Element.prototype.animate = vi.fn().mockImplementation(() => {
+		return {
+			play: vi.fn(),
+			pause: vi.fn(),
+			finish: vi.fn(),
+			cancel: vi.fn(),
+			reverse: vi.fn(),
+			persist: vi.fn(),
+			onfinish: vi.fn(),
+			oncancel: vi.fn(),
+			currentTime: 0,
+			startTime: 0,
+			playbackRate: 1,
+			playState: 'idle',
+			finished: Promise.resolve(),
+			effect: {
+				getTiming: vi.fn(),
+				getComputedTiming: vi.fn()
+			}
+		}
+	})
+}

package/src/mocks/element.js

@@ -0,0 +1,83 @@
+import { vi } from 'vitest'
+
+/**
+ * Creates an array of elements with the specified size
+ *
+ * @param {number} count
+ * @param {number} size
+ * @param {string} [prop='offsetHeight']
+ * @returns {Array<Object<string, number>>}
+ */
+export function elementsWithSize(count, size, prop = 'offsetHeight') {
+	return Array.from({ length: count }, () => ({
+		[prop]: size
+	}))
+}
+
+/**
+ * Creates an array of elements with mixed sizes
+ *
+ * @param {Array<{count: number, size: number}>} data
+ * @param {string} prop
+ * @returns {Array<Object<string, number>>}
+ */
+export function mixedSizeElements(data, prop) {
+	return data.reduce(
+		(elements, { count, size }) => [...elements, ...elementsWithSize(count, size, prop)],
+		[]
+	)
+}
+
+/**
+ * Creates a mock node with functions to add and remove event handlers
+ *
+ * @param {Array<string} events
+ * @returns {{node: HTMLElement, listeners: Object<string, integer>}}
+ */
+export function getMockNode(events) {
+	const listeners = events.reduce((acc, event) => ({ ...acc, [event]: 0 }), {})
+
+	const node = {
+		dispatchEvent: vi.fn(),
+		scrollTo: vi.fn(),
+		querySelectorAll: vi.fn().mockImplementation((selector) => {
+			return [document.createElement(selector)]
+		}),
+		querySelector: vi.fn().mockImplementation((selector) => {
+			return document.createElement(selector)
+		}),
+		addEventListener: vi.fn().mockImplementation((name) => ++listeners[name]),
+		removeEventListener: vi.fn().mockImplementation((name) => --listeners[name])
+	}
+	return { node, listeners }
+}
+
+/**
+ * @typedef {Object} NestedItem
+ * @property {string} name
+ * @property {string} [dataPath]
+ * @property {string} [id]
+ * @property {Array<NestedItem>} [children]
+ */
+
+/**
+ * Creates a nested HTML element structure using the provided data
+ *
+ * @param {NestedItem} item
+ * @returns {HTMLElement}
+ */
+export function createNestedElement(item) {
+	const { name, dataPath, id, children } = item
+	const element = document.createElement(name)
+
+	if (dataPath) element.dataset.path = dataPath
+	if (id) element.id = id
+
+	element.scrollIntoView = vi.fn()
+
+	if (Array.isArray(children)) {
+		children.forEach((child) => element.appendChild(createNestedElement(child)))
+	}
+
+	return element
+}

package/src/mocks/index.js

@@ -0,0 +1,7 @@
+import './animate'
+import { ResizeObserver } from './resize-observer'
+
+export * from './match-media'
+export * from './element'
+
+global.ResizeObserver = ResizeObserver

package/src/mocks/match-media.js

@@ -0,0 +1,90 @@
+import { vi } from 'vitest'
+
+const watchMediaQueries = []
+const listeners = []
+
+/**
+ * @typedef {Object} MediaQuery
+ * @property {integer} [min-width]
+ * @property {integer} [max-width]
+ * @property {integer} [min-height]
+ * @property {integer} [max-height]
+ * @property {integer} [width]
+ * @property {integer} [height]
+ * @property {integer} [orientation]
+ * @property {integer} [aspect-ratio]
+ * @property {integer} [min-aspect-ratio]
+ * @property {integer} [max-aspect-ratio]
+ * @property {integer} [resolution]
+ * @property {integer} [min-resolution]
+ * @property {integer} [max-resolution]
+ * @property {integer} [scan]
+ * @property {integer} [grid]
+ * @property {integer} [update]
+ * @property {integer} [overflow-block]
+ */
+
+/**
+ * Parses a media query string into an object
+ *
+ * @param {string} mediaQuery
+ * @returns {MediaQuery}
+ */
+function parseMediaQuery(mediaQuery) {
+	const regex = /\(([^:]+):\s*([^)]+)\)/g
+	const result = {}
+
+	let match = null
+	while ((match = regex.exec(mediaQuery)) !== null) {
+		const [, property, value] = match
+		result[property.trim()] = parseInt(value.trim(), 10)
+	}
+
+	return result
+}
+
+/**
+ * Simulates the evaluation of a media query
+ *
+ * @param {MediaQuery} mediaQuery
+ * @param {integer} width
+ * @returns
+ */
+function evaluateMediaQuery(mediaQuery, width) {
+	const { 'min-width': minWidth = 0, 'max-width': maxWidth = width } = mediaQuery
+
+	return width >= minWidth && width <= maxWidth
+}
+
+/**
+ * Mocks the window.matchMedia function
+ * @param {string} query
+ * @returns {Object}
+ */
+export const matchMediaMock = vi.fn().mockImplementation((query) => {
+	const mediaQuery = parseMediaQuery(query)
+	const handler = (width) => evaluateMediaQuery(mediaQuery, width)
+
+	const queryObject = {
+		media: query,
+		matches: handler(window.innerWidth),
+		addListener: vi.fn().mockImplementation((listener) => listeners.push(listener)),
+		removeListener: vi
+			.fn()
+			.mockImplementation((listener) => listeners.splice(listeners.indexOf(listener), 1)),
+		handler
+	}
+	watchMediaQueries.push(queryObject)
+	return watchMediaQueries[watchMediaQueries.length - 1]
+})
+
+/**
+ * Updates the media query matches
+ * @returns {void}
+ */
+export function updateMedia() {
+	watchMediaQueries.forEach((query) => {
+		query.matches = query.handler(window.innerWidth)
+	})
+	listeners.forEach((listener) => listener())
+}

package/src/mocks/resize-observer.js

@@ -0,0 +1,25 @@
+export class ResizeObserver {
+	constructor(callback) {
+		this.callback = callback
+		this.elements = new Map()
+	}
+
+	observe(element) {
+		this.elements.set(element, { contentRect: element.getBoundingClientRect() })
+		// Immediately invoke the callback with the initial size
+		this.callback([{ target: element, contentRect: element.getBoundingClientRect() }])
+	}
+
+	unobserve(element) {
+		this.elements.delete(element)
+	}
+
+	disconnect() {
+		this.elements.clear()
+	}
+
+	// Simulate a resize event
+	simulateResize(element, contentRect) {
+		this.callback([{ target: element, contentRect }])
+	}
+}

package/src/simulators/touch.js

@@ -0,0 +1,67 @@
+import { vi } from 'vitest'
+
+global.Touch = vi.fn().mockImplementation((input) => input)
+
+export function simulateMouseEvent(x, y) {
+	return {
+		clientX: x,
+		clientY: y,
+		stopPropagation: vi.fn(),
+		preventDefault: vi.fn()
+	}
+}
+export function simulateTouchEvent(clientX, clientY) {
+	return {
+		touches: [{ clientX, clientY }],
+		preventDefault: vi.fn(),
+		stopPropagation: vi.fn()
+	}
+}
+
+export function simulateTouchSwipe(node, distance, delay = 0) {
+	const touchStart = new Touch({
+		identifier: 0,
+		target: node,
+		clientX: 0,
+		clientY: 0
+	})
+	const touchEnd = new Touch({
+		identifier: 0,
+		target: node,
+		clientX: distance.x,
+		clientY: distance.y
+	})
+	const touchStartEvent = new TouchEvent('touchstart', {
+		touches: [touchStart]
+	})
+	node.dispatchEvent(touchStartEvent)
+	vi.advanceTimersByTime(delay)
+	const touchEndEvent = new TouchEvent('touchend', {
+		changedTouches: [touchEnd]
+	})
+	node.dispatchEvent(touchEndEvent)
+}
+
+export function simulateMouseSwipe(node, distance, delay = 0) {
+	node.dispatchEvent(new MouseEvent('mousedown', { clientX: 0, clientY: 0 }))
+	node.dispatchEvent(
+		new MouseEvent('mousemove', {
+			clientX: distance.x / 2,
+			clientY: distance.y / 2
+		})
+	)
+	vi.advanceTimersByTime(delay)
+	node.dispatchEvent(new MouseEvent('mouseup', { clientX: distance.x, clientY: distance.y }))
+}
+
+// export function getCustomEventMock() {
+// 	return vi.fn().mockImplementation((eventType, eventInit) => {
+// 		class CustomEvent extends Event {
+// 			constructor(type, init) {
+// 				super(type, init)
+// 				this.detail = init
+// 			}
+// 		}
+// 		return new CustomEvent(eventType, eventInit)
+// 	})
+// }