@rokkit/helpers 1.0.0-next.105 → 1.0.0-next.106

package/dist/matchers/dataset.d.ts

@@ -6,5 +6,5 @@
  */
 export function toHaveValidData(received: HTMLElement, expected: Object): {
     message: () => string;
-    pass: any;
+    pass: boolean;
 };

package/dist/simulators/index.d.ts

@@ -0,0 +1 @@
+export * from "./touch";

package/dist/simulators/touch.d.ts

@@ -1,16 +1,40 @@
-export function simulateMouseEvent(x: any, y: any): {
-    clientX: any;
-    clientY: any;
+/**
+ * Simulates a mouse event on a given node.
+ * @param {number} x
+ * @param {number} y
+ * @returns
+ */
+export function simulateMouseEvent(x: number, y: number): {
+    clientX: number;
+    clientY: number;
     stopPropagation: import("vitest").Mock<(...args: any[]) => any>;
     preventDefault: import("vitest").Mock<(...args: any[]) => any>;
 };
-export function simulateTouchEvent(clientX: any, clientY: any): {
+/**
+ * Simulates a touch event on a given node.
+ * @param {number} clientX
+ * @param {number} clientY
+ * @returns
+ */
+export function simulateTouchEvent(clientX: number, clientY: number): {
     touches: {
-        clientX: any;
-        clientY: any;
+        clientX: number;
+        clientY: number;
     }[];
     preventDefault: import("vitest").Mock<(...args: any[]) => any>;
     stopPropagation: import("vitest").Mock<(...args: any[]) => any>;
 };
-export function simulateTouchSwipe(node: any, distance: any, delay?: number): void;
-export function simulateMouseSwipe(node: any, distance: any, delay?: number): void;
+/**
+ * Simulates a touch swipe on a given node.
+ * @param {HTMLElement} node
+ * @param {number} distance
+ * @param {number} [delay=0]
+ */
+export function simulateTouchSwipe(node: HTMLElement, distance: number, delay?: number): void;
+/**
+ * Simulates a mouse swipe on a given node.
+ * @param {HTMLElement} node
+ * @param {number} distance
+ * @param {number} [delay=0]
+ */
+export function simulateMouseSwipe(node: HTMLElement, distance: number, delay?: number): void;

package/dist/src/components/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/index.d.ts

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

package/dist/src/matchers/action.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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: any, options: {
+    [x: string]: any;
+}, events: string | Array<string>): {
+    message: () => string;
+    pass: boolean;
+};
+/**
+ * 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: {
+    [x: string]: any;
+}, events: string | Array<string>): {
+    message: () => string;
+    pass: boolean;
+};

package/dist/src/matchers/array.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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: any[], expected: any[]): {
+    message: () => string;
+    pass: boolean;
+};

package/dist/src/matchers/dataset.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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: HTMLElement, expected: Object): {
+    message: () => string;
+    pass: any;
+};

package/dist/src/matchers/event.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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: Function, data: Object): {
+    message: () => string;
+    pass: boolean;
+};

package/dist/src/matchers/index.d.ts

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

package/dist/src/matchers/internal.d.ts

@@ -0,0 +1 @@
+export function getMessage(actual: any, expected: any, pass: any, condition?: string): string;

package/dist/src/mocks/animate.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/mocks/element.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 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: number, size: number, prop?: string): Array<{
+    [x: string]: number;
+}>;
+/**
+ * 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: Array<{
+    count: number;
+    size: number;
+}>, prop: string): Array<{
+    [x: string]: number;
+}>;
+/**
+ * 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: Array<string>): {
+    node: HTMLElement;
+    listeners: {
+        [x: string]: integer;
+    };
+};
+/**
+ * @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: NestedItem): HTMLElement;
+export type NestedItem = {
+    name: string;
+    dataPath?: string | undefined;
+    id?: string | undefined;
+    children?: NestedItem[] | undefined;
+};

package/dist/src/mocks/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./match-media";
+export * from "./element";

package/dist/src/mocks/match-media.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Updates the media query matches
+ * @returns {void}
+ */
+export function updateMedia(): void;
+/**
+ * Mocks the window.matchMedia function
+ * @param {string} query
+ * @returns {Object}
+ */
+export const matchMediaMock: import("vitest").Mock<(...args: any[]) => any>;
+export type MediaQuery = {
+    "min-width"?: integer;
+    "max-width"?: integer;
+    "min-height"?: integer;
+    "max-height"?: integer;
+    width?: integer;
+    height?: integer;
+    orientation?: integer;
+    "aspect-ratio"?: integer;
+    "min-aspect-ratio"?: integer;
+    "max-aspect-ratio"?: integer;
+    resolution?: integer;
+    "min-resolution"?: integer;
+    "max-resolution"?: integer;
+    scan?: integer;
+    grid?: integer;
+    update?: integer;
+    "overflow-block"?: integer;
+};

package/dist/src/mocks/resize-observer.d.ts

@@ -0,0 +1,9 @@
+export class ResizeObserver {
+    constructor(callback: any);
+    callback: any;
+    elements: Map<any, any>;
+    observe(element: any): void;
+    unobserve(element: any): void;
+    disconnect(): void;
+    simulateResize(element: any, contentRect: any): void;
+}

package/dist/src/simulators/touch.d.ts

@@ -0,0 +1,16 @@
+export function simulateMouseEvent(x: any, y: any): {
+    clientX: any;
+    clientY: any;
+    stopPropagation: import("vitest").Mock<(...args: any[]) => any>;
+    preventDefault: import("vitest").Mock<(...args: any[]) => any>;
+};
+export function simulateTouchEvent(clientX: any, clientY: any): {
+    touches: {
+        clientX: any;
+        clientY: any;
+    }[];
+    preventDefault: import("vitest").Mock<(...args: any[]) => any>;
+    stopPropagation: import("vitest").Mock<(...args: any[]) => any>;
+};
+export function simulateTouchSwipe(node: any, distance: any, delay?: number): void;
+export function simulateMouseSwipe(node: any, distance: any, delay?: number): void;

package/dist/vitest.config.d.ts

@@ -0,0 +1 @@
+export default defineConfig;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rokkit/helpers",
-  "version": "1.0.0-next.105",
-  "description": "Custom matchers for vitest.",
+  "version": "1.0.0-next.106",
+  "description": "Custom matchers for vitest, mocks and simulators for testing.",
   "publishConfig": {
     "access": "public"
   },

package/spec/components/MockItem.spec.svelte.js

@@ -1,10 +1,28 @@
 import { describe, it, expect } from 'vitest'
 import { render } from '@testing-library/svelte'
 import MockItem from '../../src/components/MockItem.svelte'
+import { flushSync } from 'svelte'
 
 describe('MockItem', () => {
-	it('should render', () => {
-		const { getByText } = render(MockItem, { props: { value: 'Hello' } })
-		expect(getByText('Hello')).toBeTruthy()
+	it('should render a string', () => {
+		const props = $state({ value: 'Hello' })
+		const { container } = render(MockItem, { props })
+		expect(container).toMatchSnapshot()
+
+		props.value = 'World'
+		flushSync()
+
+		expect(container).toMatchSnapshot()
+	})
+
+	it('should render an object', () => {
+		const props = $state({ value: { text: 'Hello' } })
+
+		const { container } = render(MockItem, { props })
+		expect(container).toMatchSnapshot()
+		props.value = { text: 'World' }
+		flushSync()
+
+		expect(container).toMatchSnapshot()
 	})
 })

package/spec/components/StaticContent.spec.svelte.js

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import StaticContent from '../../src/components/StaticContent.svelte'
+
+describe('StaticContent', () => {
+	it('renders the content', () => {
+		const { container } = render(StaticContent)
+		expect(container).toMatchSnapshot()
+	})
+})

package/spec/components/__snapshots__/MockItem.spec.svelte.js.snap

@@ -0,0 +1,29 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MockItem > should render a string 1`] = `
+<div>
+  Hello
+  
+</div>
+`;
+
+exports[`MockItem > should render a string 2`] = `
+<div>
+  World
+  
+</div>
+`;
+
+exports[`MockItem > should render an object 1`] = `
+<div>
+  Hello
+  
+</div>
+`;
+
+exports[`MockItem > should render an object 2`] = `
+<div>
+  World
+  
+</div>
+`;

package/spec/components/__snapshots__/StaticContent.spec.svelte.js.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StaticContent > renders the content 1`] = `
+<div>
+  <p>
+    This is a static content component.
+  </p>
+  
+</div>
+`;

package/spec/components/index.spec.js

@@ -4,6 +4,6 @@ import * as components from '../../src/components/index'
 
 describe('components', () => {
 	it('should contain all exported components', () => {
-		expect(Object.keys(components)).toEqual(['MockItem'])
+		expect(Object.keys(components)).toEqual(['MockItem', 'StaticContent'])
 	})
 })

package/spec/mocks/animate.spec.js

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect } from 'vitest'
 import '../../src/mocks/animate'
 
 describe('animate', () => {

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

@@ -4,9 +4,9 @@ import { ResizeObserver } from '../../src/mocks/resize-observer'
 global.ResizeObserver = ResizeObserver
 
 describe('ResizeObserver', () => {
-	let resizeObserver
-	let callback
-	let element
+	let resizeObserver = null
+	let callback = null
+	let element = null
 
 	beforeEach(() => {
 		callback = vi.fn()

package/spec/simulator.spec.js

@@ -5,7 +5,7 @@ import {
 	simulateTouchEvent,
 	simulateMouseSwipe,
 	simulateTouchSwipe
-} from '../src/simulators/touch'
+} from '../src/simulators'
 
 expect.extend({ toHaveBeenDispatchedWith })
 describe('events', () => {

package/src/components/MockItem.svelte

@@ -1,5 +1,6 @@
 <script>
-	let { value } = $props()
+	let { value = null } = $props()
+	let text = $derived(typeof value === 'object' ? value?.text : value)
 </script>
 
-{value}
+{text}

package/src/components/StaticContent.svelte

@@ -0,0 +1 @@
+<p>This is a static content component.</p>

package/src/components/index.js

@@ -1 +1,2 @@
 export { default as MockItem } from './MockItem.svelte'
+export { default as StaticContent } from './StaticContent.svelte'

package/src/index.js

@@ -1 +1,2 @@
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './simulators/touch'

package/src/matchers/index.js

@@ -1,4 +1,8 @@
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './array'
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './action'
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './dataset'
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './event'

package/src/mocks/index.js

@@ -1,7 +1,9 @@
 import './animate'
 import { ResizeObserver } from './resize-observer'
 
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './match-media'
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './element'
 
 global.ResizeObserver = ResizeObserver

package/src/simulators/index.js

@@ -0,0 +1,2 @@
+// skipcq: JS-E1004 - Needed for exposing all functions
+export * from './touch'

package/src/simulators/touch.js

@@ -2,6 +2,12 @@ import { vi } from 'vitest'
 
 global.Touch = vi.fn().mockImplementation((input) => input)
 
+/**
+ * Simulates a mouse event on a given node.
+ * @param {number} x
+ * @param {number} y
+ * @returns
+ */
 export function simulateMouseEvent(x, y) {
 	return {
 		clientX: x,
@@ -10,6 +16,13 @@ export function simulateMouseEvent(x, y) {
 		preventDefault: vi.fn()
 	}
 }
+
+/**
+ * Simulates a touch event on a given node.
+ * @param {number} clientX
+ * @param {number} clientY
+ * @returns
+ */
 export function simulateTouchEvent(clientX, clientY) {
 	return {
 		touches: [{ clientX, clientY }],
@@ -18,6 +31,12 @@ export function simulateTouchEvent(clientX, clientY) {
 	}
 }
 
+/**
+ * Simulates a touch swipe on a given node.
+ * @param {HTMLElement} node
+ * @param {number} distance
+ * @param {number} [delay=0]
+ */
 export function simulateTouchSwipe(node, distance, delay = 0) {
 	const touchStart = new Touch({
 		identifier: 0,
@@ -42,6 +61,12 @@ export function simulateTouchSwipe(node, distance, delay = 0) {
 	node.dispatchEvent(touchEndEvent)
 }
 
+/**
+ * Simulates a mouse swipe on a given node.
+ * @param {HTMLElement} node
+ * @param {number} distance
+ * @param {number} [delay=0]
+ */
 export function simulateMouseSwipe(node, distance, delay = 0) {
 	node.dispatchEvent(new MouseEvent('mousedown', { clientX: 0, clientY: 0 }))
 	node.dispatchEvent(
@@ -53,15 +78,3 @@ export function simulateMouseSwipe(node, distance, delay = 0) {
 	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)
-// 	})
-// }