diffDOM/tests/xmlString.test.js at main · fiduswriter/diffDOM · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/**
 * @jest-environment jsdom
 */

import { DiffDOM, nodeToObj, stringToObj } from "../dist/index"

const stringsIncludingSVGs = [
    `<svg height=50 width=50>
        <defs>
            <clipPath id="clipPath">
                <rect x="15" y="15" width="40" height="40" />
            </clipPath>
        </defs>

        <circle cx=25 cy=25 r=20
            style="fill: #0000ff; clip-path: url(#clipPath);"
        />
    </svg>`,
    `<svg></svg>`,

    `<svg></svg>`,
    `<svg height=50 width=50>
        <defs>
            <clipPath id="clipPath">
                <rect x="15" y="15" width="40" height="40" />
            </clipPath>
        </defs>

        <circle cx=25 cy=25 r=20
            style="fill: #0000ff; clip-path: url(#clipPath);"
        />
    </svg>`,
]

const stringsInsideSVGs = [
    `<defs><clipPath id="clipPath"><rect x="15" y="15" width="40" height="40" /></clipPath></defs>`,
    `<defs></defs>`,

    `<defs></defs>`,
    `<defs><clipPath id="clipPath"><rect x="15" y="15" width="40" height="40" /></clipPath></defs>`,
]

describe("string", () => {
    it("can diff and patch case sensitive xml strings", () => {
        const dd = new DiffDOM({
            debug: true,
            diffcap: 500,
            caseSensitive: false,
        })

        for (let i = 0; i < stringsIncludingSVGs.length; i += 2) {
            const el1Outer = document.createElement("div")
            const el2Outer = document.createElement("div")
            el1Outer.innerHTML = stringsIncludingSVGs[i]
            el2Outer.innerHTML = stringsIncludingSVGs[i + 1]
            const diffs = dd.diff(stringsIncludingSVGs[i], stringsIncludingSVGs[i + 1])
            expect(diffs).not.toHaveLength(0)
            const el1 = el1Outer.firstElementChild
            const el2 = el2Outer.firstElementChild
            const el1a = el1.cloneNode(true)
            dd.apply(el1a, diffs)
            expect(
                el1a.innerHTML
            ).toEqual(el2.innerHTML)
            dd.undo(el1a, diffs)
            expect(
                el1a.innerHTML
            ).toEqual(el1.innerHTML)
        }

        const ddCaseSensitive = new DiffDOM({
            debug: true,
            diffcap: 500,
            caseSensitive: true,
        })

        for (let i = 0; i < stringsInsideSVGs.length; i += 2) {
            const el1Outer = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
            const el2Outer = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
            el1Outer.innerHTML = stringsInsideSVGs[i]
            el2Outer.innerHTML = stringsInsideSVGs[i + 1]
            const diffsCaseSensitive = ddCaseSensitive.diff(stringsInsideSVGs[i], stringsInsideSVGs[i + 1])
            const diffs = dd.diff(stringsInsideSVGs[i], stringsInsideSVGs[i + 1])
            expect(diffsCaseSensitive).not.toHaveLength(0)
            expect(diffs).not.toHaveLength(0)
            const el1 = el1Outer.firstElementChild
            const el2 = el2Outer.firstElementChild
            const el1a = el1.cloneNode(true)
            const el1b = el1.cloneNode(true)
            ddCaseSensitive.apply(el1a, diffsCaseSensitive)
            expect(
                el1a.innerHTML
            ).toEqual(el2.innerHTML)
            // Trying to do the same without case sensitivity should not work.
            dd.apply(el1b, diffs)
            if (el1b.innerHTML.length || el2.innerHTML.length) {
                expect(
                    el1b.innerHTML
                ).not.toEqual(el2.innerHTML)
            }
            ddCaseSensitive.undo(el1a, diffsCaseSensitive)
            expect(
                el1a.innerHTML
            ).toEqual(el1.innerHTML)
            // Trying to do the same without case sensitivity should not work.
            dd.undo(el1b, diffs)
            if (el1b.innerHTML.length || el1.innerHTML.length) {
                expect(
                    el1b.innerHTML
                ).not.toEqual(el1.innerHTML)
            }
        }
    })
})