add html formatter example

mr-mixas · Dec 1, 2022 · 57fac9c · 57fac9c
1 parent ab3a3d4
commit 57fac9c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -77,7 +77,14 @@ mixas:~/$ nested_patch a.json patch.json
 >>>
 ```
 
-See more examples in [HOWTO](./HOWTO.md) and [tests](./tests/).
+Same diff formatted as
+<a href="https://raw.githubusercontent.com/mr-mixas/Nested-Diff.py/docs/tests/examples/html_formatter.exp">
+HTML
+</a>
+
+See more examples in
+[HOWTO](https://github.com/mr-mixas/Nested-Diff.py/blob/master/HOWTO.md) and
+[tests](https://github.com/mr-mixas/Nested-Diff.py/tree/master/tests).
 
 ## Diff structure
 

diff --git a/tests/examples/__init__.py b/tests/examples/__init__.py
diff --git a/tests/examples/html_formatter.html b/tests/examples/html_formatter.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="en"><head><title>Nested diff</title><style>div:has(> [class^="nDk"]){cursor:pointer}div:has(> [class^="nDv"]){cursor:text}[class^="nDk"]{cursor:pointer}[class^="nDk"],[class^="nDv"]:not(.nDvD){border-radius:2px;display:inline;}.nDkA{background-color:#cfc}.nDkD,.nDkN,.nDkO{color:#000}.nDkR{background-color:#fcc}.nDkU,.nDvU{color:#777}.nDvA,.nDvN{background-color:#dfd}.nDvC,.nDvE{color:#00b}.nDvD{display:block;font-family:monospace;overflow:hidden;transition-duration:.15s;transition-property:height;white-space:pre;}.nDvH{color:#707}.nDvO,.nDvR{background-color:#fdd}.nDvD div:not([class]):hover{background-color:rgba(0,0,0,.05)}</style></head><body><div class="nDvD" style="width:fit-content"><div class="nDvD"><div>  <div class="nDkO">{&#x27;one&#x27;}</div></div><div class="nDvD"><div>-   <div class="nDvO">1</div></div><div>+   <div class="nDvN">0</div></div></div><div>  <div class="nDkD">{&#x27;two&#x27;}</div></div><div class="nDvD"><div>#   <div class="nDvE">&lt;str&gt;</div></div><div>    <div class="nDvH">@@ -1,3 +1,2 @@</div></div><div>    <div class="nDvU">some</div></div><div>    <div class="nDvU">text</div></div><div>-   <div class="nDvR">inside</div></div></div></div></div><script>var PREV = null;document.querySelector('.nDvD').addEventListener('click', event => {tgt = event.target;if (tgt.className === '') {if (!tgt.firstElementChild.className.startsWith('nDk')) {return}} else if (tgt.className.startsWith('nDk')) {tgt = tgt.parentElement} else {return}dif = tgt.nextSibling;if (!!PREV && !Object.is(PREV, dif)) {PREV.style.height = 'initial';}dif.style.height = dif.offsetHeight + 'px';if (dif.style.height === '0px') {dif.style.height = dif.__nDh + 'px';PREV = dif;tgt.innerHTML = tgt.innerHTML.replace(/^./, dif.__nDc);tgt.style.fontWeight = 'normal'} else {dif.__nDh = dif.offsetHeight;dif.style.height = '0px';PREV = null;dif.__nDc = tgt.innerHTML.substring(0, 1);tgt.innerHTML = tgt.innerHTML.replace(/^./, '&#9660;');tgt.style.fontWeight = 'bold'}})</script></body></html>
diff --git a/tests/examples/test_formatters.py b/tests/examples/test_formatters.py
@@ -0,0 +1,17 @@
+from nested_diff import diff
+from nested_diff.formatters import HtmlFormatter
+
+
+def test_html_formatter_example(rpath):
+    a = {'one': 1, 'two': 'some\ntext\ninside'}
+    b = {'one': 0, 'two': 'some\ntext'}
+
+    d = diff(a, b, U=False, text_diff_ctx=3)
+    formatter = HtmlFormatter()
+
+    with open(rpath('html_formatter.html'), 'w') as f:
+        f.write(
+            formatter.get_page_header()
+            + formatter.format(d)
+            + formatter.get_page_footer()
+        )