@matrixreq/htmldiff 1.0.0

package/test/find_matching_blocks.spec.js

@@ -0,0 +1,168 @@
+describe('findMatchingBlocks', function(){
+    var diff, cut, res, createToken, tokenize, createSegment, htmlToTokens;
+
+    beforeEach(function(){
+        diff = require('../js/htmldiff');
+        createSegment = diff.findMatchingBlocks.createSegment;
+        htmlToTokens = diff.htmlToTokens;
+        createToken = diff.findMatchingBlocks.createToken;
+        tokenize = function(tokens){
+            return tokens.map(function(token){
+                return createToken(token);
+            });
+        };
+    });
+
+    describe('createMap', function(){
+        beforeEach(function(){
+            cut = diff.findMatchingBlocks.createMap;
+        });
+
+        it('should be a function', function(){
+            expect(cut).is.a('function');
+        });
+
+        describe('When the items exist in the search target', function(){
+            beforeEach(function(){
+                res = cut(tokenize(['a', 'apple', 'has', 'a', 'worm']));
+            });
+
+            it('should find "a" twice', function(){
+                expect(res['a'].length).to.equal(2);
+            });
+
+            it('should find "a" at 0', function(){
+                expect(res['a'][0]).to.equal(0);
+            });
+
+            it('should find "a" at 3', function(){
+                expect(res['a'][1]).to.equal(3);
+            });
+
+            it('should find "has" at 2', function(){
+                expect(res['has'][0]).to.equal(2);
+            });
+        });
+    });
+
+    describe('findBestMatch', function(){
+        var invoke;
+
+        beforeEach(function(){
+            cut = diff.findMatchingBlocks.findBestMatch;
+            invoke = function(before, after){
+                var segment = createSegment(before, after, 0, 0);
+
+                res = cut(segment);
+            };
+        });
+
+        describe('When there is a match', function(){
+            beforeEach(function(){
+                var before = tokenize(['a', 'dog', 'bites']);
+                var after = tokenize(['a', 'dog', 'bites', 'a', 'man']);
+                invoke(before, after);
+            });
+
+            it('should match the match', function(){
+                expect(res).to.exist;
+                expect(res.startInBefore).equal(0);
+                expect(res.startInAfter).equal(0);
+                expect(res.length).equal(3);
+                expect(res.endInBefore).equal(2);
+                expect(res.endInAfter).equal(2);
+            });
+
+            describe('When the match is surrounded', function(){
+                beforeEach(function(){
+                    before = tokenize(['dog', 'bites']);
+                    after = tokenize(['the', 'dog', 'bites', 'a', 'man']);
+                    invoke(before, after);
+                });
+
+                it('should match with appropriate indexing', function(){
+                    expect(res).to.exist;
+                    expect(res.startInBefore).to.equal(0);
+                    expect(res.startInAfter).to.equal(1);
+                    expect(res.endInBefore).to.equal(1);
+                    expect(res.endInAfter).to.equal(2);
+                });
+            });
+        });
+
+        describe('When there is no match', function(){
+            beforeEach(function(){
+                var before = tokenize(['the', 'rat', 'sqeaks']);
+                var after = tokenize(['a', 'dog', 'bites', 'a', 'man']);
+                invoke(before, after);
+            });
+
+            it('should return nothing', function(){
+                expect(res).to.not.exist;
+            });
+        });
+    });
+
+    describe('findMatchingBlocks', function(){
+        var segment;
+
+        beforeEach(function(){
+            cut = diff.findMatchingBlocks;
+        });
+
+        it('should be a function', function(){
+            expect(cut).is.a('function');
+        });
+
+        describe('When called with a single match', function(){
+            beforeEach(function(){
+                var before = htmlToTokens('a dog bites');
+                var after = htmlToTokens('when a dog bites it hurts');
+                segment = createSegment(before, after, 0, 0);
+
+                res = cut(segment);
+            });
+
+            it('should return a match', function(){
+                expect(res.length).to.equal(1);
+            });
+        });
+
+        describe('When called with multiple matches', function(){
+            beforeEach(function(){
+                var before = htmlToTokens('the dog bit a man');
+                var after = htmlToTokens('the large brown dog bit a tall man');
+                segment = createSegment(before, after, 0, 0);
+                res = cut(segment);
+            });
+
+            it('should return 3 matches', function(){
+                expect(res.length).to.equal(3);
+            });
+
+            it('should match "the"', function(){
+                expect(res[0].startInBefore).eql(0);
+                expect(res[0].startInAfter).eql(0);
+                expect(res[0].endInBefore).eql(0);
+                expect(res[0].endInAfter).eql(0);
+                expect(res[0].length).eql(1);
+            });
+
+            it('should match "dog bit a"', function(){
+                expect(res[1].startInBefore).eql(1);
+                expect(res[1].startInAfter).eql(5);
+                expect(res[1].endInBefore).eql(7);
+                expect(res[1].endInAfter).eql(11);
+                expect(res[1].length).eql(7);
+            });
+
+            it('should match "man"', function(){
+                expect(res[2].startInBefore).eql(8);
+                expect(res[2].startInAfter).eql(14);
+                expect(res[2].endInBefore).eql(8);
+                expect(res[2].endInAfter).eql(14);
+                expect(res[2].length).eql(1);
+            });
+        });
+    });
+});

package/test/from_port_source.spec.js

@@ -0,0 +1,30 @@
+describe('The specs from the ruby source project', function(){
+    var cut;
+
+    beforeEach(function(){
+        cut = require('../js/htmldiff');
+    });
+
+    it('should diff text', function(){
+        var diff = cut('a word is here', 'a nother word is there');
+        expect(diff).equal('a<ins data-operation-index="1"> nother</ins> word is ' +
+                '<del data-operation-index="3">here</del><ins data-operation-index="3">' +
+                'there</ins>');
+    });
+
+    it('should insert a letter and a space', function(){
+        var diff = cut('a c', 'a b c');
+        expect(diff).equal('a <ins data-operation-index="1">b </ins>c');
+    });
+
+    it('should remove a letter and a space', function(){
+        var diff = cut('a b c', 'a c');
+        diff.should == 'a <del data-operation-index="1">b </del>c';
+    });
+
+    it('should change a letter', function(){
+        var diff = cut('a b c', 'a d c');
+        expect(diff).equal('a <del data-operation-index="1">b</del>' +
+                '<ins data-operation-index="1">d</ins> c');
+    });
+});

package/test/html_to_tokens.spec.js

@@ -0,0 +1,128 @@
+describe('htmlToTokens', function(){
+    var cut, res, diff, createToken, tokenize;
+
+    beforeEach(function(){
+        diff = require('../js/htmldiff')
+        cut = diff.htmlToTokens;
+
+        createToken = diff.findMatchingBlocks.createToken;
+        tokenize = function(tokens){
+            return tokens.map(function(token){
+                return createToken(token);
+            });
+        };
+    });
+
+    it('should be a function', function(){
+        expect(cut).is.a('function');
+    });
+
+    describe('when called with text', function(){
+        beforeEach(function(){
+            res = cut('this is a test');
+        });
+
+        it('should return 4', function(){
+            expect(res.length).to.equal(7);
+        });
+    });
+
+    describe('when called with html', function(){
+        beforeEach(function(){
+            res = cut('<p>this is a <strong>test</strong></p>');
+        });
+
+        it('should return 11', function(){
+            expect(res.length).to.equal(11);
+        });
+
+        it('should remove any html comments', function(){
+            res = cut('<p> this is <!-- a comment! --> </p>');
+            expect(res.length).to.equal(8);
+        });
+    });
+
+    it('should identify contiguous whitespace as a single token', function(){
+        expect(cut('a   b')).to.eql(tokenize(['a', '   ', 'b']));
+    });
+
+    it('should identify a single space as a single token', function(){
+        expect(cut(' a b ')).to.eql(tokenize([' ', 'a', ' ', 'b', ' ']));
+    });
+
+    it('should identify self closing tags as tokens', function(){
+        expect(cut('<p>hello</br>goodbye</p>')).eql(
+                tokenize(['<p>', 'hello', '</br>', 'goodbye', '</p>']));
+    });
+
+    describe('when encountering atomic tags', function(){
+        it('should identify an image tag as a single token', function(){
+            expect(cut('<p><img src="1.jpg"><img src="2.jpg"></p>')).eql(
+                    tokenize(['<p>', '<img src="1.jpg">', '<img src="2.jpg">', '</p>']));
+        });
+
+        it('should identify an iframe tag as a single token', function(){
+            expect(cut('<p><iframe src="sample.html"></iframe></p>')).eql(
+                    tokenize(['<p>', '<iframe src="sample.html"></iframe>', '</p>']));
+        });
+
+        it('should identify an object tag as a single token', function(){
+            var cutResult = cut('<p><object><param name="1" /><param name="2" /></object></p>');
+            var tokenizeResult = tokenize(
+                    ['<p>', '<object><param name="1" /><param name="2" /></object>','</p>']);
+            expect(cutResult).eql(tokenizeResult);
+        });
+
+        it('should identify a math tag as a single token', function(){
+            var cutResult = cut('<p><math xmlns="http://www.w3.org/1998/Math/MathML">' +
+                    '<mi>&#x03C0;<!-- π --></mi>' +
+                    '<mo>&#x2062;<!-- &InvisibleTimes; --></mo>' +
+                    '<msup><mi>r</mi><mn>2</mn></msup></math></p>');
+            var tokenizeResult = tokenize([
+                '<p>',
+                '<math xmlns="http://www.w3.org/1998/Math/MathML">' +
+                '<mi>&#x03C0;<!-- π --></mi>' +
+                '<mo>&#x2062;<!-- &InvisibleTimes; --></mo>' +
+                '<msup><mi>r</mi><mn>2</mn></msup></math>',
+                '</p>'
+            ]);
+            expect(cutResult).eql(tokenizeResult);
+        });
+
+        it('should identify an svg tag as a single token', function(){
+            var cutResult = cut('<p><svg width="100" height="100">' +
+                    '<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" ' +
+                    'fill="yellow" /></svg></p>');
+            var tokenizeResult = tokenize([
+                '<p>',
+                '<svg width="100" height="100">' +
+                '<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />' +
+                '</svg>',
+                '</p>'
+            ]);
+            expect(cutResult).eql(tokenizeResult);
+        });
+
+        it('should identify a script tag as a single token', function(){
+            expect(cut('<p><script>console.log("hi");</script></p>')).eql(
+                    tokenize(['<p>', '<script>console.log("hi");</script>', '</p>']));
+        });
+
+
+
+        it('should identify tags with data-htmldiff-id attribute as single token', () => {
+            expect(
+                cut('<div><customtag data-htmldiff-id="1">hello</br>goodbye</customtag>' +
+                    '<custom-tag data-htmldiff-id="2">some stuff</custom-tag>' +
+                    '</div>')
+            ).eql(tokenize(
+                [
+                    '<div>',
+                    '<customtag data-htmldiff-id="1">hello</br>goodbye</customtag>',
+                    '<custom-tag data-htmldiff-id="2">some stuff</custom-tag>',
+                    '</div>'
+                ]
+            ));
+        });
+    });
+});

package/test/mocha.opts

@@ -0,0 +1,3 @@
+--require test/config.js
+--ui bdd
+--reporter spec

package/test/module.spec.js

@@ -0,0 +1,11 @@
+describe('The module', function(){
+    var cut;
+
+    beforeEach(function(){
+        cut = require('../js/htmldiff');
+    });
+
+    it('should return a function', function(){
+        expect(cut).is.a('function');
+    });
+});

package/test/pain_games.spec.js

@@ -0,0 +1,18 @@
+describe('Pain Games', function(){
+    var cut, res;
+
+    beforeEach(function(){
+        cut = require('../js/htmldiff');
+    });
+
+    describe('When an entire sentence is replaced', function(){
+        beforeEach(function(){
+            res = cut('this is what I had', 'and now we have a new one');
+        });
+
+        it('should replace the whole chunk', function(){
+            expect(res).to.equal('<del data-operation-index="0">this is what I had</del>' +
+                    '<ins data-operation-index="0">and now we have a new one</ins>');
+        });
+    });
+});

package/test/render_operations.spec.js

@@ -0,0 +1,177 @@
+describe('renderOperations', function(){
+    var cut, res, createToken, tokenize;
+
+    beforeEach(function(){
+        var diff = require('../js/htmldiff');
+        createToken = diff.findMatchingBlocks.createToken;
+
+        tokenize = function(tokens){
+            return tokens.map(function(token){
+                return createToken(token);
+            });
+        };
+
+        cut = function(before, after){
+            var ops = diff.calculateOperations(before, after);
+            return diff.renderOperations(before, after, ops);
+        };
+    });
+
+    it('should be a function', function(){
+        expect(cut).is.a('function');
+    });
+
+    describe('equal', function(){
+        beforeEach(function(){
+            var before = tokenize(['this', ' ', 'is', ' ', 'a', ' ', 'test']);
+            res = cut(before, before);
+        });
+
+        it('should output the text', function(){
+            expect(res).equal('this is a test');
+        });
+    });
+
+    describe('insert', function(){
+        beforeEach(function(){
+            before = tokenize(['this', ' ', 'is']);
+            after = tokenize(['this', ' ', 'is', ' ', 'a', ' ', 'test']);
+            res = cut(before, after);
+        });
+
+        it('should wrap in an <ins>', function(){
+            expect(res).equal('this is<ins data-operation-index="1"> a test</ins>');
+        });
+    });
+
+    describe('delete', function(){
+        beforeEach(function(){
+            var before = tokenize(['this', ' ', 'is', ' ', 'a', ' ', 'test',
+            ' ', 'of', ' ', 'stuff']);
+            var after = tokenize(['this', ' ', 'is', ' ', 'a', ' ', 'test']);
+            res = cut(before, after);
+        });
+
+        it('should wrap in a <del>', function(){
+            expect(res).to.equal('this is a test<del data-operation-index="1"> of stuff</del>');
+        });
+    });
+
+    describe('replace', function(){
+        beforeEach(function(){
+            var before = tokenize(['this', ' ', 'is', ' ', 'a', ' ', 'break']);
+            var after = tokenize(['this', ' ', 'is', ' ', 'a', ' ', 'test']);
+            res = cut(before, after);
+        });
+
+        it('should wrap in both <ins> and <del>', function(){
+            expect(res).to.equal('this is a <del data-operation-index="1">break</del>' +
+                    '<ins data-operation-index="1">test</ins>');
+        });
+    });
+
+    describe('Dealing with tags', function(){
+        var before, after;
+
+        beforeEach(function(){
+            before = tokenize(['<p>', 'a', '</p>']);
+            after = tokenize(['<p>', 'a', ' ', 'b', '</p>', '<p>', 'c', '</p>']);
+            res = cut(before, after);
+        });
+
+        it('should identify contained inserted tags', function(){
+            expect(res).to.equal('<p>a<ins data-operation-index="1"> b</ins></p>' +
+                    '<p data-diff-node="ins" data-operation-index="3">' +
+                    '<ins data-operation-index="3">c</ins></p>');
+        });
+
+        it('should identify contained deleted tags', function(){
+            res = cut(after, before);
+
+            expect(res).to.equal('<p>a<del data-operation-index="1"> b</del></p>' +
+                    '<p data-diff-node="del" data-operation-index="3">' +
+                    '<del data-operation-index="3">c</del></p>');
+        });
+
+        it('should not identify partial tags', function(){
+            var before = tokenize(['test', '</b>', 'non-bold']);
+            var after = tokenize(['test!', '</b>', 'non-bold', '<b>', 'bold']);
+            res = cut(before, after);
+
+            expect(res).to.equal('<del data-operation-index="0">test</del>' +
+                    '<ins data-operation-index="0">test!</ins></b>non-bold<b>' +
+                    '<ins data-operation-index="2">bold</ins>');
+        });
+
+        describe('When there is a change at the beginning, in a <p>', function(){
+            beforeEach(function(){
+                var before = tokenize(['<p>', 'this', ' ', 'is', ' ', 'awesome', '</p>']);
+                var after = tokenize(['<p>', 'I', ' ', 'is', ' ', 'awesome', '</p>']);
+                res = cut(before, after);
+            });
+
+            it('should keep the change inside the <p>', function(){
+                expect(res).to.equal('<p><del data-operation-index="1">this</del>' +
+                        '<ins data-operation-index="1">I</ins> is awesome</p>');
+            });
+        });
+    });
+
+    describe('empty tokens', function(){
+        it('should not be wrapped', function(){
+            var before = tokenize(['text']);
+            var after = tokenize(['text', ' ']);
+
+            res = cut(before, after);
+
+            expect(res).to.equal('text');
+        });
+    });
+
+    describe('tags with attributes', function(){
+        it('should treat attribute changes as equal and output the after tag', function(){
+            var before = tokenize(['<p>', 'this', ' ', 'is', ' ', 'awesome', '</p>']);
+            var after = tokenize(['<p style="margin: 2px;" class="after">', 'this', ' ', 'is', ' ',
+                    'awesome', '</p>']);
+
+            res = cut(before, after);
+
+            expect(res).to.equal('<p style="margin: 2px;" class="after">this is awesome</p>');
+        });
+
+        it('should show changes within tags with different attributes', function(){
+            var before = tokenize(['<p>', 'this', ' ', 'is', ' ', 'awesome', '</p>']);
+            var after = tokenize(['<p style="margin: 2px;" class="after">', 'that', ' ', 'is', ' ',
+                    'awesome', '</p>']);
+
+            res = cut(before, after);
+
+            expect(res).to.equal('<p style="margin: 2px;" class="after">' +
+                    '<del data-operation-index="1">this</del><ins data-operation-index="1">' +
+                    'that</ins> is awesome</p>');
+        });
+    });
+
+    describe('wrappable tags', function(){
+        it('should wrap void tags', function(){
+            var before = tokenize(['old', ' ', 'text']);
+            var after = tokenize(['new', '<br/>', ' ', 'text']);
+
+            res = cut(before, after);
+
+            expect(res).to.equal('<del data-operation-index="0">old</del>' +
+                    '<ins data-operation-index="0">new<br/></ins> text');
+        });
+
+        it('should wrap atomic tags', function(){
+            var before = tokenize(['old', '<iframe src="source.html"></iframe>', ' ', 'text']);
+            var after = tokenize(['new', ' ', 'text']);
+
+            res = cut(before, after);
+
+            expect(res).to.equal(
+                    '<del data-operation-index="0">old<iframe src="source.html"></iframe></del>' +
+                    '<ins data-operation-index="0">new</ins> text');
+        });
+    });
+});