Skip to content

Commit

Permalink
#682@minor: Adds logo for new sponsor RTVision.
Browse files Browse the repository at this point in the history
  • Loading branch information
capricorn86 committed Feb 21, 2023
1 parent 285f41c commit f26427f
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 83 deletions.
39 changes: 16 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
![Happy DOM Logo](https://github.com/capricorn86/happy-dom/raw/master/docs/happy-dom-logo.jpg)


# About

[Happy DOM](https://github.com/capricorn86/happy-dom) is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG [DOM](https://dom.spec.whatwg.org/) and [HTML](https://html.spec.whatwg.org/multipage/).
Expand All @@ -9,43 +8,35 @@ The goal of [Happy DOM](https://github.com/capricorn86/happy-dom) is to emulate

[Happy DOM](https://github.com/capricorn86/happy-dom) focuses heavily on performance and can be used as an alternative to [JSDOM](https://github.com/jsdom/jsdom).


[Read more about how to use Happy DOM](https://github.com/capricorn86/happy-dom/tree/master/packages/happy-dom)



### DOM Features

- Custom Elements (Web Components)
- Custom Elements (Web Components)

- Shadow Root (Shadow DOM)
- Shadow Root (Shadow DOM)

- Declarative Shadow DOM
- Declarative Shadow DOM

- Mutation Observer
- Mutation Observer

- Tree Walker
- Tree Walker

- Fetch

- Fetch

And much more..



### Works With

- [Google LitHTML](https://lit-html.polymer-project.org)
- [Google LitHTML](https://lit-html.polymer-project.org)

- [Google LitElement](https://lit-element.polymer-project.org)
- [Google LitElement](https://lit-element.polymer-project.org)

- [React](https://reactjs.org)

- [Angular](https://angular.io/)

- [Vue](https://vuejs.org/)
- [React](https://reactjs.org)

- [Angular](https://angular.io/)

- [Vue](https://vuejs.org/)

# Packages

Expand Down Expand Up @@ -75,8 +66,6 @@ This package has been deprecated.

Happy DOM now supports [Declarative Shadow DOM](https://github.com/capricorn86/happy-dom/tree/master/packages/happy-dom#server-side-rendering-of-web-components) which can be used for server-side rendering of web components.



# Performance

| Operation | JSDOM | Happy DOM |
Expand All @@ -95,4 +84,8 @@ Happy DOM now supports [Declarative Shadow DOM](https://github.com/capricorn86/h

# Contributing

[Read more about how to develop and contribute](https://github.com/capricorn86/happy-dom/blob/master/docs/contributing.md)
[Read more about how to develop and contribute](https://github.com/capricorn86/happy-dom/blob/master/docs/contributing.md)

# Sponsors

[![RTVision](https://avatars.githubusercontent.com/u/8292810?s=200&v=4)](https://github.com/RTVision)
18 changes: 5 additions & 13 deletions packages/global-registrator/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
![Happy DOM Logo](https://github.com/capricorn86/happy-dom/raw/master/docs/happy-dom-logo.jpg)


# About

[Happy DOM](https://github.com/capricorn86/happy-dom) is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG [DOM](https://dom.spec.whatwg.org/) and [HTML](https://html.spec.whatwg.org/multipage/).
Expand All @@ -11,7 +10,6 @@ The goal of [Happy DOM](https://github.com/capricorn86/happy-dom) is to emulate

This package contains a utility that registers [Happy DOM](https://github.com/capricorn86/happy-dom) globally, which makes it possible to use [Happy DOM](https://github.com/capricorn86/happy-dom) for testing in a Node environment.


### DOM Features

- Custom Elements (Web Components)
Expand All @@ -28,8 +26,6 @@ This package contains a utility that registers [Happy DOM](https://github.com/ca

And much more..



### Works With

- [Google LitHTML](https://lit-html.polymer-project.org)
Expand All @@ -42,18 +38,12 @@ And much more..

- [Vue](https://vuejs.org/)




# Installation

```bash
npm install @happy-dom/global-registrator --save-dev
```




# Usage

## Register
Expand All @@ -68,7 +58,7 @@ document.body.innerHTML = `<button>My button</button>`;
const button = document.querySelector('button');

// Outputs: "My button"
console.log(button.innerText)
console.log(button.innerText);
```

## Unregister
Expand All @@ -81,10 +71,9 @@ GlobalRegistrator.register();
GlobalRegistrator.unregister();

// Outputs: "undefined"
console.log(global.document)
console.log(global.document);
```


# Performance

| Operation | JSDOM | Happy DOM |
Expand All @@ -101,3 +90,6 @@ console.log(global.document)

[See how the test was done here](https://github.com/capricorn86/happy-dom-performance-test)

# Sponsors

[![RTVision](https://avatars.githubusercontent.com/u/8292810?s=200&v=4)](https://github.com/RTVision)
4 changes: 4 additions & 0 deletions packages/happy-dom/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -318,3 +318,7 @@ Happy DOM provide with a package called [@happy-dom/jest-environment](https://gi
# Global Registration

Happy DOM provide with a package called [@happy-dom/global-registrator](https://github.com/capricorn86/happy-dom/tree/master/packages/global-registrator) that can register Happy DOM globally. It makes it possible to use Happy DOM for testing in a Node environment.

# Sponsors

[![RTVision](https://avatars.githubusercontent.com/u/8292810?s=200&v=4)](https://github.com/RTVision)
82 changes: 35 additions & 47 deletions packages/jest-environment/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
![Happy DOM Logo](https://github.com/capricorn86/happy-dom/raw/master/docs/happy-dom-logo.jpg)


# About

[Happy DOM](https://github.com/capricorn86/happy-dom) is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG [DOM](https://dom.spec.whatwg.org/) and [HTML](https://html.spec.whatwg.org/multipage/).
Expand All @@ -11,7 +10,6 @@ The goal of [Happy DOM](https://github.com/capricorn86/happy-dom) is to emulate

This package makes it possible to use [Happy DOM](https://github.com/capricorn86/happy-dom) with [Jest](https://jestjs.io/).


### DOM Features

- Custom Elements (Web Components)
Expand All @@ -28,8 +26,6 @@ This package makes it possible to use [Happy DOM](https://github.com/capricorn86

And much more..



### Works With

- [Google LitHTML](https://lit-html.polymer-project.org)
Expand All @@ -42,88 +38,77 @@ And much more..

- [Vue](https://vuejs.org/)




# Installation

```bash
npm install @happy-dom/jest-environment --save-dev
```




# Setup

Jest uses `node` as test environment by default. In order to tell Jest to use a different environment we will either have to set a CLI attribute, define it in "package.json" or add a property to your Jest config file.



## CLI

1. Edit your "package.json" file.
2. Add "--env=@happy-dom/jest-environment" as an attribute to your Jest command.

```json
{
"scripts": {
"test": "jest --env=@happy-dom/jest-environment"
}
}
```
```json
{
"scripts": {
"test": "jest --env=@happy-dom/jest-environment"
}
}
```

3. Save the file.


## In "package.json"

1. Edit your "package.json" file.
2. Add the following to it:

```json
{
"jest": {
"testEnvironment": "@happy-dom/jest-environment"
}
}
```
```json
{
"jest": {
"testEnvironment": "@happy-dom/jest-environment"
}
}
```

3. Save the file.



## Configuration File

1. Edit your Jest config file (usually jest.config.js)
2. Add the following to it:

```json
{
"testEnvironment": "@happy-dom/jest-environment"
}
```
```json
{
"testEnvironment": "@happy-dom/jest-environment"
}
```

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();
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();
// Waits for asynchronous tasks like setTimeout(), requestAnimationFrame() etc. to complete
await happyDOM.whenAsyncComplete();

expect(document.documentElement.scrollTop).toBe(0);
});
expect(document.documentElement.scrollTop).toBe(0);
});
});
```

Expand All @@ -133,14 +118,14 @@ This method will cancel all running async tasks.

```javascript
describe('runAnimation()', () => {
it('runs animation', () => {
element.runAnimation();
it('runs animation', () => {
element.runAnimation();

// Cancels all asynchronous tasks like setTimeout(), requestAnimationFrame() etc.
happyDOM.cancelAsync();
// Cancels all asynchronous tasks like setTimeout(), requestAnimationFrame() etc.
happyDOM.cancelAsync();

expect(element.animationCompleted).toBe(true);
});
expect(element.animationCompleted).toBe(true);
});
});
```

Expand All @@ -160,3 +145,6 @@ describe('runAnimation()', () => {

[See how the test was done here](https://github.com/capricorn86/happy-dom-performance-test)

# Sponsors

[![RTVision](https://avatars.githubusercontent.com/u/8292810?s=200&v=4)](https://github.com/RTVision)

0 comments on commit f26427f

Please sign in to comment.