https://github.com/wingify/dom-comparator
A JS Library that compares two DOM Nodes and outputs what changed between the two.
https://github.com/wingify/dom-comparator
Last synced: about 1 month ago
JSON representation
A JS Library that compares two DOM Nodes and outputs what changed between the two.
- Host: GitHub
- URL: https://github.com/wingify/dom-comparator
- Owner: wingify
- Created: 2014-08-07T14:18:44.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-06-26T08:10:15.000Z (almost 9 years ago)
- Last Synced: 2025-04-04T16:14:03.842Z (2 months ago)
- Language: JavaScript
- Homepage: http://engineering.wingify.com/dom-comparator/
- Size: 330 KB
- Stars: 154
- Watchers: 45
- Forks: 18
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DOM Comparator
DOM Comparator is a library that, simply put, compares two strings of DOM nodes (which are called `stringA` and `stringB`), and returns an output containing the minimal number of steps that must be taken (like attribute changes, style changes, text changes and DOM manimpulation) to convert `stringA` into `stringB`.
The output returned by DOM Comparator is an array of `VWO.Operation` objects, which can also be expressed as jQuery code. Here's a simple example:
```js
var stringA = '
- list item 1
- list item 2
var stringB = '
- list item 1
- list item 2
// Compare the two strings
var result = VWO.DOMComparator.create({
stringA: stringA,
stringB: stringB
});
// Expect an array of VWO.Operation objects to be returned.
expect(result).toEqual(jasmine.any(Array));
expect(result[0]).toEqual(jasmine.any(VWO.Operation));
// Expect the first operation to be a 'removeAttr' operation.
expect(result[0].name).toEqual('removeAttr');
// The operation is on an element identified by the following selector path
expect(result[0].selectorPath).toEqual('UL:first-child > LI:first-child');
// With below content
expect(result[0].content).toEqual({class: 'active'});
```
## Setting Up
### Installation
* To install all the dependencies run `npm install`.
* Then run `bower install` for `jasmine`, `jquery` and `underscore` library dependencies.
* Install grunt globally, which is a Javascript Task Runner `npm install -g grunt-cli`.
### Downloads
* [Development version](https://github.com/wingify/dom-comparator/blob/master/dist/dom-comparator.js) (unminified with comments)
* [Production version](https://github.com/wingify/dom-comparator/blob/master/dist/dom-comparator.min.js) (minified)
* [Source map](https://github.com/wingify/dom-comparator/blob/master/dist/dom-comparator.min.js.map)
### Live Demo
A live demo can be found here: http://engineering.wingify.com/dom-comparator/live-demo.html
### Running Tests
* For testing, we use Jasmine.
* Tests are written in the `test/unit` folder. Each file in the `src` directory have different test cases files associataed with them in the `test/unit` directory. The majority of the test cases that test the library as a black box are in `dom-comparator.spec.js`.
* To run tests, run `grunt; testem server;` (from the root directory of the repository)
* To see the final outputs open http://localhost:7357/ in the browser, open the JavaScript console and look for the `final_results` array.
### Cases which don't work
* If there are multiple occurrences of a node in the DOM. For example:
> `nodeA`:
```html
```
> `nodeB`:
```html
```
> Here, since there are 2 occurrences of `
* When the wrapping of the original node is changed. For example:
> `nodeA`:
```html
```
> `nodeB`:
```html
```
> Here, since the wrapping of `nodeB` is changed (wrapped by `
## Documentation
The general usage documentation can be found on http://engineering.wingify.com/dom-comparator/
## Authors
* Himanshu Kapoor ([@fleon](http://github.com/fleon))
* Himanshu Kela ([@himanshukela](http://github.com/himanshukela))
## License
[The MIT License](http://opensource.org/licenses/MIT)
Copyright (c) 2014-16 Wingify Software Pvt. Ltd.