ripple/tests/setup-client.js

Ripple is an elegant TypeScript UI framework

/**
 * @import { Component } from '#public';
 */

import { beforeEach, afterEach } from 'vitest';
import { mount } from 'ripple';

/**
 * @param {Component} component
 */
globalThis.render = function render(component) {
	mount(component, {
		target: /** @type {HTMLDivElement} */ (globalThis.container),
	});
};

beforeEach(() => {
	globalThis.container = document.createElement('div');
	document.body.appendChild(globalThis.container);

	globalThis.error = undefined;
	// @ts-ignore
	globalThis.MediaQueryList = class MediaQueryList {};
});

afterEach(() => {
	// Container is guaranteed to exist in all tests, so it was easier to type it without undefined.
	// And when we unset it, we just type-cast it to HTMLDivElement to avoid TS errors, because we
	// know it's guaranteed to exist in the next test again.
	document.body.removeChild(/** @type {HTMLDivElement} */ (globalThis.container));
	globalThis.container = /** @type {HTMLDivElement} */ (/** @type {unknown} */ (undefined));

	globalThis.error = undefined;
	// @ts-ignore
	globalThis.MediaQueryList = undefined;
});