https://github.com/staltz/html-looks-like

Assert that an HTML string looks approximately the same as another HTML
https://github.com/staltz/html-looks-like

Last synced: about 2 months ago
JSON representation

Assert that an HTML string looks approximately the same as another HTML

• Host: GitHub
• URL: https://github.com/staltz/html-looks-like
• Owner: staltz
• License: mit
• Created: 2017-03-11T13:35:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-15T22:49:23.000Z (over 6 years ago)
• Last Synced: 2024-05-20T17:14:32.956Z (4 months ago)
• Language: TypeScript
• Size: 11.7 KB
• Stars: 175
• Watchers: 6
• Forks: 8
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `html-looks-like`

#### Assert that an HTML string looks approximately the same as another HTML

**Install:** `npm install html-looks-like`

**Example:**

```js

const htmlLooksLike = require('html-looks-like');

const actual = `

  


    
This is a title

    
This is some text content

  

`;


// I just want to know if there is a highlighted 
 inside a 


const expected = `

  


    {{ ... }}

    
This is some text content

    {{ ... }}

  

`;


htmlLooksLike(actual, expected);

```

```

Error: HTML is missing the attribute `class="highlighted"` on the element

``html

This is some text content

``

```


## How this works

This library does much more than assert that the string `actual === expected`. To start with, it ignores differences in whitespaces in the two strings, but most importantly, it uses `expected` as a template and checks if `actual` matches the shape.

`htmlLooksLike(actual, expected)` will check whether the HTML string `actual` has **at least** everything that is specified in the HTML string `expected`. It is certainly valid that `actual` is much larger and more specific than `expected`, and for expressing those situations, we use *placeholders*.

The placeholder syntax is `{{ }}` and it stands for "some stuff here, either nothing or many elements". Inside the brackets you can write whatever you want, it doesn't get processed, it is just a comment. By including or omitting placeholders we can control what is the HTML shape we expect. Notice the difference between the following examples:

```js

// This means "we expect a 
 with children, where somewhere in the middle

// there is a 
 as a child".

const expected = `

  



    {{ more stuff before the paragraph }}

    
This is some text content

    {{ more stuff after the paragraph }}

  

`;

```


```js

// This means "we expect a 
 with children,

// where THE FIRST child MUST be 
".

const expected = `

  



    
This is some text content

    {{ more stuff after the paragraph }}

  

`;

```


```js

// This means "we expect a 
 with only one child, which is 
".

const expected = `

  



    
This is some text content

  

`;

```


## API

#### `function htmlLooksLike(actual: string, expected: string): void`

Tests if `actual` as an HTML string fits the template described in `expected`. If it matches, this function returns nothing (undefined), and no other effect happens. If it does not match, an error is thrown describing the mismatch.

#### `htmlLooksLike.bool = function(actual: string, expected: string): boolean`

If you want a simple boolean to indicate the match result, call `htmlLooksLike.bool(actual, expected)`. No error is thrown in case of a mismatch.

## License

MIT

## Thanks

This library uses these dependencies. Thanks to their respective authors:

- `diff-dom`

- `domwalk`

- `jsdom`

- `lodash`