[IMP] add some comparison testing for flex box

odoo · Sep 19, 2024 · ee9f5e1 · ee9f5e1
1 parent 97b9d1f
commit ee9f5e1
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 2 deletions.
diff --git a/ck b/ck
@@ -65,7 +65,7 @@ if [ ! -f .cutekit/tools-ready ]; then
     mkdir -p .cutekit
     if [ ! -d .cutekit/venv ]; then
         echo "Setting up Python virtual environment..."
-        python3 -m venv .cutekit/venv
+        python3.11 -m venv .cutekit/venv
     fi
     source .cutekit/venv/bin/activate
 

diff --git a/meta/plugins/reftest.py b/meta/plugins/reftest.py
@@ -1,8 +1,11 @@
 from cutekit import shell, vt100, cli, builder, model
-from pathlib import Path
+from pathlib import Path, PurePath
 import dataclasses as dt
 from dataclasses_json import DataClassJsonMixin
 import tempfile
+import re
+import textwrap
+import difflib
 
 
 def buildPaperMuncher(args: model.TargetArgs) -> builder.ProductScope:
@@ -38,3 +41,57 @@ def _(args: model.TargetArgs):
                 print(f"{vt100.GREEN}Passed{vt100.RESET}")
             else:
                 print(f"{vt100.RED}Failed{vt100.RESET}")
+
+    for file in shell.find("tests", ["*.xml"]):
+        print(f"Running comparison test {file}...")
+
+        temp = Path(file).parent / '.tmp.xhtml'
+
+        with Path(file).open() as ref:
+            content = ref.read()
+
+            for name, test in re.findall(r"""<test\s*(?:name=['"]([^'"]+)['"])?\s*>([\w\W]+?)</test>""", content):
+                search = re.search(r"""<container>([\w\W]+?)</container>""", content)
+                container = search and search.group(1)
+
+                ref = None
+                ref_xhtml = None
+                for rendering in re.findall(r"""<rendering>([\w\W]+?)</rendering>""", test):
+                    if container:
+                        xhtml = container.replace("<slot/>", rendering)
+                    else:
+                        xhtml = rendering
+
+                    with temp.open("w") as f:
+                        f.write(f"<!DOCTYPE html>\n{textwrap.dedent(xhtml)}")
+
+                    output = paperMuncher.popen("html2pdf", "-sdlpo", "/dev/null", temp)
+
+                    if not ref_xhtml:
+                        ref_xhtml = rendering
+                        ref = output
+                        continue
+
+                    if ref == output:
+                        print(f"{vt100.GREEN}Passed{vt100.RESET}")
+                    else:
+                        print(f"{vt100.RED}Failed {name!r}{vt100.RESET}")
+                        print(textwrap.dedent(ref_xhtml).strip())
+                        print(f"{vt100.RED}{textwrap.dedent(rendering).strip()}{vt100.RESET}")
+
+                        ref_result = ref.split('---')[-3]
+                        output_result = output.split('---')[-3]
+                        diff_html = []
+                        theDiffs = difflib.ndiff(ref_result.splitlines(), output_result.splitlines())
+                        for eachDiff in theDiffs:
+                            if eachDiff[0] == "-":
+                                diff_html.append(f"{vt100.RED}{eachDiff}{vt100.RESET}")
+                            elif eachDiff[0] == "+":
+                                diff_html.append(f"{vt100.GREEN}{eachDiff}{vt100.RESET}")
+                            elif eachDiff[0] != "?":
+                                diff_html.append(eachDiff)
+                        print('\n'.join(diff_html))
+
+                        break
+
+        temp.unlink()
diff --git a/tests/css/flex.xml b/tests/css/flex.xml
@@ -0,0 +1,87 @@
+<test name="flex box">
+    <container>
+        <html lang="en">
+            <head>
+                <style>
+                    div {
+                        width: 100px;
+                        height: 100px;
+                    }
+                    div.flex {
+                        display: flex;
+                    }
+                    .red {
+                        background-color: red;
+                    }
+                    .green {
+                        background-color: green;
+                    }
+                    div.ref div {
+                        width: 50%;
+                        float: left;
+                    }
+                </style>
+            </head>
+            <body>
+                <slot/>
+            </body>
+        </html>
+    </container>
+
+    <rendering>
+        <div class="ref">
+            <div class="ref red"></div>
+            <div class="ref green"></div>
+        </div>
+    </rendering>
+
+    <rendering>
+        <div class="flex">
+            <div class="red"></div>
+            <div class="green"></div>
+        </div>
+    </rendering>
+
+    <rendering>
+        <div style="display: flex;">
+            <div class="red"></div>
+            <div class="green"></div>
+        </div>
+    </rendering>
+
+    <rendering>
+        <div style="display: flex; flex-flow: nowrap;">
+            <div class="red"></div>
+            <div class="green"></div>
+        </div>
+    </rendering>
+
+    <rendering>
+        <div style="display: flex; flex-flow: inherit;">
+            <div class="red"></div>
+            <div class="green"></div>
+        </div>
+    </rendering>
+
+    <rendering>
+        <div style="display: flex; flex-flow: initial;">
+            <div class="red"></div>
+            <div class="green"></div>
+        </div>
+    </rendering>
+
+    <rendering>
+        <div style="display: flex; flex-flow: row;">
+            <div class="red"></div>
+            <div class="green"></div>
+        </div>
+    </rendering>
+
+    <rendering>
+        <div style="display: flex; flex-flow: row-reverse;">
+            <div class="green"></div>
+            <div class="red"></div>
+        </div>
+    </rendering>
+</test>
+