@happy-dom/jest-environment 9.20.3 → 10.0.1

package/.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require('happy-dom/.eslintrc.cjs');

package/.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require('../happy-dom/.prettierrc.cjs');

package/README.md

@@ -38,6 +38,10 @@ And much more..
 
 - [Vue](https://vuejs.org/)
 
+### Module Systems
+
+- [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules) (ESM is not supported due to limitations with Jest)
+
 # Installation
 
 ```bash
@@ -91,43 +95,9 @@ Jest uses `node` as test environment by default. In order to tell Jest to use a
 
 3. Save the file.
 
-# Additional Features
-
-Happy DOM exposes two functions that may be useful when testing asynchrounous code.
-
-**whenAsyncComplete()**
-
-Returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that is resolved when all async tasks has been completed.
-
-```javascript
-describe('scrollToTop()', () => {
-	it('scrolls to top using the built in browser animation', async () => {
-		element.scrollToTop();
-
-		// Waits for asynchronous tasks like setTimeout(), requestAnimationFrame() etc. to complete
-		await happyDOM.whenAsyncComplete();
+# Documentation
 
-		expect(document.documentElement.scrollTop).toBe(0);
-	});
-});
-```
-
-**cancelAsync()**
-
-This method will cancel all running async tasks.
-
-```javascript
-describe('runAnimation()', () => {
-	it('runs animation', () => {
-		element.runAnimation();
-
-		// Cancels all asynchronous tasks like setTimeout(), requestAnimationFrame() etc.
-		happyDOM.cancelAsync();
-
-		expect(element.animationCompleted).toBe(true);
-	});
-});
-```
+Read more about how Happy DOM works in our [documentation](https://github.com/capricorn86/happy-dom/wiki).
 
 # Performance
 
@@ -143,7 +113,7 @@ describe('runAnimation()', () => {
 | querySelectorAll('[class~="name"]')  | 5.5 ms  | 2.9 ms    |
 | querySelectorAll(':nth-child(2n+1)') | 10.4 ms | 3.8 ms    |
 
-[See how the test was done here](https://github.com/capricorn86/happy-dom-performance-test)
+See how the test was done [here](https://github.com/capricorn86/happy-dom-performance-test)
 
 # Sponsors
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@happy-dom/jest-environment",
-    "version": "9.20.3",
+    "version": "10.0.1",
     "license": "MIT",
     "homepage": "https://github.com/capricorn86/happy-dom/tree/master/packages/jest-environment",
     "repository": "https://github.com/capricorn86/happy-dom",
@@ -54,7 +54,7 @@
         "@jest/types": "^29.4.0",
         "jest-mock": "^29.4.0",
         "jest-util": "^29.4.0",
-        "happy-dom": "^9.20.3"
+        "happy-dom": "^10.0.1"
     },
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^5.16.0",
@@ -64,19 +64,20 @@
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^14.4.3",
         "@types/react-dom": "^17.0.2",
+        "@types/jest": "29.5.2",
         "eslint": "^8.11.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-filenames": "^1.3.2",
-        "eslint-plugin-import": "^2.25.4",
+        "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-jest": "^26.1.2",
         "eslint-plugin-jsdoc": "^38.0.6",
         "eslint-plugin-json": "^3.1.0",
         "eslint-plugin-turbo": "^0.0.7",
         "prettier": "^2.6.0",
-        "typescript": "^4.6.2",
+        "typescript": "^5.0.4",
         "jest": "^29.4.0",
-        "ts-jest": "^29.0.5",
+        "ts-jest": "^29.1.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "vue": "^3.2.31",
@@ -89,6 +90,7 @@
         "@angular/platform-browser": "^10.0.7",
         "@angular/compiler": "^10.0.7",
         "@angular/common": "^10.0.7",
+        "rxjs": "^6.5.3",
         "jquery": "^3.6.0",
         "zone.js": "^0.10.3",
         "glob": "^7.2.0",

package/tsconfig.json

@@ -21,20 +21,16 @@
 		"baseUrl": ".",
 		"composite": true,
 		"incremental": true,
-		"jsx": "react",
 		"types": [
 			"node"
 		],
 		"lib": [
-			"es2015",
-			"es2016",
-			"es2017",
+			"es2020",
 			"dom"
 		]
 	},
 	"include": [
 		"@types/node",
-		"src",
-		"src/**/*.json"
+		"src"
 	]
 }

package/.eslintrc.js

@@ -1 +0,0 @@
-module.exports = require('happy-dom/.eslintrc');

package/.prettierrc.js

@@ -1 +0,0 @@
-module.exports = require('../happy-dom/.prettierrc.js');

package/test/angular/Angular.test.ts

@@ -1,23 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { enableProdMode } from '@angular/core';
-import 'zone.js';
-import AngularModule from './AngularModule';
-
-describe('React', () => {
-	let appElement: Element;
-
-	beforeEach(() => {
-		appElement = document.createElement('app');
-		document.body.appendChild(appElement);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(appElement);
-	});
-
-	it('Tests integration with Angular.', async () => {
-		enableProdMode();
-		await platformBrowserDynamic().bootstrapModule(AngularModule);
-		expect(appElement.innerHTML).toBe('<div>Test</div>');
-	});
-});

package/test/angular/AngularComponent.ts

@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-/**
- *
- */
-@Component({
-	selector: 'app',
-	template: ` <div>Test</div> `
-})
-export default class AngularComponent {}

package/test/angular/AngularModule.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import AngularComponent from './AngularComponent';
-
-/**
- *
- */
-@NgModule({
-	imports: [BrowserModule],
-	declarations: [AngularComponent],
-	bootstrap: [AngularComponent]
-})
-export default class AngularModule {}

package/test/javascript/JavaScript.test.ts

@@ -1,140 +0,0 @@
-import Express from 'express';
-
-describe('JavaScript', () => {
-	it('Functions should have the constructor global.Function', () => {
-		expect((() => {}).constructor).toBe(Function);
-	});
-
-	it('Object should have the constructor global.Object', () => {
-		expect({}.constructor).toBe(Object);
-	});
-
-	it('Can perform a real fetch()', async () => {
-		const express = Express();
-
-		express.get('/get/json', (_req, res) => {
-			res.set('Content-Type', 'application/json');
-			res.send('{ "key1": "value1" }');
-		});
-
-		const server = express.listen(3000);
-
-		const response = await fetch('http://localhost:3000/get/json');
-
-		server.close();
-
-		expect(response.headers.get('content-type')).toBe('application/json; charset=utf-8');
-		expect(response.ok).toBe(true);
-		expect(response.status).toBe(200);
-		expect(response.statusText).toBe('OK');
-		expect(response.url).toBe('http://localhost:3000/get/json');
-		expect(response.redirected).toBe(false);
-
-		const json = await response.json();
-
-		expect(json.key1).toBe('value1');
-	});
-
-	it('Can perform a real FormData post request using fetch()', async () => {
-		const express = Express();
-
-		express.post('/post/formdata', (req, res) => {
-			let body = '';
-			res.set('Content-Type', 'text/html');
-			req.on('data', function (chunk) {
-				body += chunk.toString();
-			});
-			req.on('end', function () {
-				res.send(`header:\n${req.headers['content-type']}\n\nbody:\n${body}`);
-			});
-		});
-
-		const server = express.listen(3000);
-
-		const requestFormData = new FormData();
-
-		requestFormData.append('key1', 'value1');
-		requestFormData.append('key2', 'value2');
-
-		const response = await fetch('http://localhost:3000/post/formdata', {
-			method: 'POST',
-			body: requestFormData
-		});
-
-		expect(response.headers.get('content-type')).toBe('text/html; charset=utf-8');
-		expect(response.ok).toBe(true);
-		expect(response.status).toBe(200);
-		expect(response.statusText).toBe('OK');
-		expect(response.url).toBe('http://localhost:3000/post/formdata');
-		expect(response.redirected).toBe(false);
-
-		const text = await response.text();
-
-		server.close();
-
-		expect(
-			text.replace(
-				/\-\-\-\-HappyDOMFormDataBoundary0\.[a-zA-Z0-9]+/gm,
-				'----HappyDOMFormDataBoundary0.noRandom'
-			)
-		).toBe(
-			'header:\nmultipart/form-data; boundary=----HappyDOMFormDataBoundary0.noRandom\n\nbody:\n------HappyDOMFormDataBoundary0.noRandom\r\nContent-Disposition: form-data; name="key1"\r\n\r\nvalue1\r\n------HappyDOMFormDataBoundary0.noRandom\r\nContent-Disposition: form-data; name="key2"\r\n\r\nvalue2\r\n'
-		);
-	});
-
-	it('Can perform a real asynchronous XMLHttpRequest request', (done) => {
-		const express = Express();
-
-		express.get('/get/json', (_req, res) => {
-			res.set('Content-Type', 'application/json');
-			res.send('{ "key1": "value1" }');
-		});
-
-		const server = express.listen(3000);
-
-		const request = new XMLHttpRequest();
-
-		request.open('GET', 'http://localhost:3000/get/json', true);
-
-		request.addEventListener('load', () => {
-			expect(request.getResponseHeader('content-type')).toBe('application/json; charset=utf-8');
-			expect(request.responseText).toBe('{ "key1": "value1" }');
-			expect(request.status).toBe(200);
-			expect(request.statusText).toBe('OK');
-			expect(request.responseURL).toBe('http://localhost:3000/get/json');
-
-			server.close();
-
-			done();
-		});
-
-		request.send();
-	});
-
-	it('Can perform a real synchronous XMLHttpRequest request to Github.com', () => {
-		const request = new XMLHttpRequest();
-
-		request.open(
-			'GET',
-			'https://raw.githubusercontent.com/capricorn86/happy-dom/master/.gitignore',
-			false
-		);
-
-		request.send();
-
-		expect(request.getResponseHeader('content-type')).toBe('text/plain; charset=utf-8');
-		expect(request.responseText.includes('node_modules')).toBe(true);
-		expect(request.status).toBe(200);
-		expect(request.statusText).toBe('OK');
-		expect(request.responseURL).toBe(
-			'https://raw.githubusercontent.com/capricorn86/happy-dom/master/.gitignore'
-		);
-	});
-
-	it('Binds global methods to the Window context', () => {
-		const eventListener = (): void => {};
-		addEventListener('click', eventListener);
-		removeEventListener('click', eventListener);
-		clearTimeout(setTimeout(eventListener));
-	});
-});

package/test/jquery/JQuery.test.ts

@@ -1,28 +0,0 @@
-import JQuery from 'jquery';
-
-describe('JQuery', () => {
-	beforeEach(() => {
-		document.body.innerHTML = `
-            <div class="class1 class2" id="id">
-                <!-- Comment 1 !-->
-                <b>Bold</b>
-                <!-- Comment 2 !-->
-                <span>Span</span>
-            </div>
-            <article class="class1 class2" id="id">
-                <!-- Comment 1 !-->
-                <b>Bold</b>
-                <!-- Comment 2 !-->
-            </article>
-        `;
-	});
-
-	afterEach(() => {
-		document.body.innerHTML = '';
-	});
-
-	it('Tests integration.', () => {
-		JQuery('span').addClass('test-span');
-		expect(document.body.children[0].children[1].getAttribute('class')).toBe('test-span');
-	});
-});

package/test/lit-element/LitElement.test.ts

@@ -1,40 +0,0 @@
-import LitElementComponent from './LitElementComponent';
-import './LitElementComponent';
-
-const PROP1 = 'PROP1';
-
-describe('LitElementComponent', () => {
-	beforeEach(() => {
-		document.body.innerHTML = `<lit-element-component prop1="${PROP1}"></lit-element-component>`;
-	});
-
-	afterEach(() => {
-		document.body.innerHTML = '';
-	});
-
-	it('Tests integration.', () => {
-		const litElement = <LitElementComponent>document.body.querySelector('lit-element-component');
-		const shadowRoot = litElement.shadowRoot;
-
-		expect(document.body.innerHTML).toBe(
-			`<lit-element-component prop1="${PROP1}"></lit-element-component>`
-		);
-
-		expect(shadowRoot.querySelector('span').innerText).toBe(PROP1);
-		expect(
-			shadowRoot.innerHTML
-				.replace(/[\s]/gm, '')
-				.replace(/<!--\?lit\$[0-9]+\$-->/gm, '<!--?lit$123456$-->')
-		).toBe(
-			`
-			<!---->Some text
-			<span><!--?lit$123456$-->${PROP1}</span>!
-			<style>
-				span {
-					color: green;
-				}
-		    </style>
-		`.replace(/[\s]/gm, '')
-		);
-	});
-});

package/test/lit-element/LitElementComponent.ts

@@ -1,24 +0,0 @@
-import { LitElement, TemplateResult, html, css, CSSResult } from '../../lib/node_modules/lit';
-import { customElement, property } from '../../lib/node_modules/lit/decorators';
-
-/**
- *
- */
-@customElement('lit-element-component')
-export default class LitElementComponent extends LitElement {
-	public static styles: CSSResult = css`
-		span {
-			color: green;
-		}
-	`;
-
-	@property({ type: String })
-	public prop1: string = null;
-
-	/**
-	 * Renders the component.
-	 */
-	public render(): TemplateResult {
-		return html` Some text <span>${this.prop1}</span>! `;
-	}
-}

package/test/react/React.test.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import * as ReactTestingLibrary from '@testing-library/react';
-import ReactTestingLibraryUserEvent from '@testing-library/user-event';
-import { ReactDivComponent, ReactSelectComponent, ReactInputComponent } from './ReactComponents';
-
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
-
-const TESTING_LIBRARY_USER = ReactTestingLibraryUserEvent.setup();
-
-describe('React', () => {
-	let appElement: Element;
-
-	beforeEach(() => {
-		appElement = document.createElement('app');
-		document.body.appendChild(appElement);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(appElement);
-	});
-
-	it('Tests integration.', () => {
-		ReactDOM.render(<ReactDivComponent />, appElement);
-		expect(appElement.innerHTML).toBe('<div>Test</div>');
-	});
-
-	it('Can unmount a component.', () => {
-		ReactDOM.render(<ReactDivComponent />, appElement);
-		ReactDOM.unmountComponentAtNode(appElement);
-		expect(appElement.innerHTML).toBe('');
-	});
-
-	it('Handles adding and removing event listeners.', () => {
-		ReactDOM.render(<ReactSelectComponent onChange={() => {}} />, appElement);
-	});
-
-	it('Testing library handles input', async () => {
-		const { getByPlaceholderText } = ReactTestingLibrary.render(<ReactInputComponent />);
-		const input: HTMLInputElement = getByPlaceholderText('input field') as HTMLInputElement;
-
-		await TESTING_LIBRARY_USER.type(input, 'hello');
-
-		expect(input.value).toBe('hello');
-	});
-});

package/test/react/ReactComponents.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-
-/* eslint-disable @typescript-eslint/consistent-type-assertions */
-
-/**
- *
- */
-export class ReactDivComponent extends React.Component<{}, {}> {
-	public $props = {};
-
-	/**
-	 * @override
-	 */
-	public render(): React.ReactElement {
-		return <div>Test</div>;
-	}
-}
-
-const OPTIONS = [
-	{ value: 't1', label: 'test 1' },
-	{ value: 't2', label: 'test 2' }
-];
-
-/**
- *
- */
-export class ReactSelectComponent extends React.Component<
-	{
-		value?: string;
-		onChange?: (value: string) => void;
-	},
-	{}
-> {
-	public $props = {
-		value: OPTIONS[0].value,
-		onChange: null
-	};
-
-	/**
-	 * @override
-	 */
-	public render(): React.ReactElement {
-		return (
-			<select
-				value={this.props.value}
-				onChange={
-					this.props.onChange
-						? (event: React.ChangeEvent) =>
-								this.props.onChange((event.target as HTMLSelectElement).value)
-						: undefined
-				}
-			>
-				{OPTIONS.map((option) => (
-					<option key={option.value} value={option.value}>
-						{option.label}
-					</option>
-				))}
-			</select>
-		);
-	}
-}
-
-/**
- *
- */
-export class ReactInputComponent extends React.Component<{}, {}> {
-	public $props = {};
-
-	/**
-	 * @override
-	 */
-	public render(): React.ReactElement {
-		return <input placeholder="input field" />;
-	}
-}

package/test/testing-library/TestingLibrary.test.tsx

@@ -1,59 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-
-describe('TestingLibrary', () => {
-	it('Triggers change event in input when typing.', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-
-		render(<input onChange={(event) => onChange(event.target.value)} />);
-
-		await user.type(screen.getByRole('textbox'), 'hello');
-		expect(onChange).toHaveBeenCalledWith('hello');
-	});
-
-	it('Triggers click and submit event once.', async () => {
-		const user = userEvent.setup();
-		const handleSubmit = jest.fn((ev) => {
-			ev.preventDefault();
-		});
-		const clickHandler = jest.fn();
-
-		render(
-			<form onSubmit={handleSubmit}>
-				<button type="submit" onClick={clickHandler}>
-					submit
-				</button>
-			</form>
-		);
-
-		await user.click(screen.getByRole('button'));
-		expect(handleSubmit).toHaveBeenCalledTimes(1);
-		expect(clickHandler).toHaveBeenCalledTimes(1);
-	});
-
-	it('Triggers change event once.', async () => {
-		const user = userEvent.setup();
-		const changeHandler = jest.fn();
-
-		render(<input type="checkbox" onChange={changeHandler} />);
-
-		await user.click(screen.getByRole('checkbox'));
-
-		expect(changeHandler).toHaveBeenCalledTimes(1);
-	});
-
-	it('Finds elements using "screen.getByText()".', async () => {
-		const user = userEvent.setup();
-		const clickHandler = jest.fn();
-
-		render(<input type="submit" value="Submit Button" onClick={clickHandler} />);
-
-		const element = screen.getByText('Submit Button');
-
-		await user.click(element);
-
-		expect(clickHandler).toHaveBeenCalledTimes(1);
-	});
-});

package/test/tsconfig.json

@@ -1,41 +0,0 @@
-{
-	"compilerOptions": {
-		"outDir": "../tmp",
-		"rootDir": ".",
-		"tsBuildInfoFile": "../tmp/.tsbuildinfo-test",
-		"target": "es2020",
-		"declaration": true,
-		"module": "CommonJS",
-		"moduleResolution": "node",
-		"esModuleInterop": true,
-		"experimentalDecorators": true,
-		"allowSyntheticDefaultImports": true,
-		"resolveJsonModule": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"removeComments": false,
-		"preserveConstEnums": true,
-		"sourceMap": true,
-		"skipLibCheck": true,
-		"baseUrl": ".",
-		"composite": true,
-		"incremental": true,
-		"jsx": "react",
-		"types": [
-			"jest"
-		],
-		"lib": [
-			"es2015",
-			"es2016",
-			"es2017",
-			"dom"
-		]
-	},
-	"include": [
-		"@types/node",
-		"@types/jest",
-        "@types/react",
-        "@types/react-dom",
-		"."
-	]
-}

package/test/vue/Vue.test.ts

@@ -1,28 +0,0 @@
-import { createApp } from 'vue';
-
-describe('Vue', () => {
-	let appElement: Element;
-
-	beforeEach(() => {
-		appElement = document.createElement('div');
-		appElement.id = 'app';
-		appElement.innerHTML = '{{ message }}';
-		document.body.appendChild(appElement);
-	});
-
-	afterEach(() => {
-		document.body.innerHTML = '';
-	});
-
-	it('Tests integration.', () => {
-		const app = createApp({
-			data() {
-				return {
-					message: 'Test'
-				};
-			}
-		});
-		app.mount('#app');
-		expect(document.body.innerHTML).toBe('<div id="app" data-v-app="">Test</div>');
-	});
-});