mosaic-headless 1.29.0 → 1.29.2

package/tools/build_page.py

@@ -172,8 +172,14 @@ class Surface:
                          any(x in needs for x in (ancestors + ((parent_type,)
                                                                if parent_type else ()))))
 
+        # ...and the same question the `allow` branch asks below: is this type
+        # part of the required internal structure of something we are inside?
+        in_ancestor_structure = any(t in self.default_children.get(x, [])
+                                    for x in ancestors)
+
         outcome = self.outcome.get(t)
         if (not declared_child and not nested_as_family and not nested_ok
+                and not in_ancestor_structure
                 and (outcome == "BROKE_PAGE" or (outcome or "").startswith("COMMIT_5"))):
             problems.append("%s is measured %s under a plain container, and %s is not its declared parent"
                             % (t, outcome, parent_type or "<root>"))
@@ -205,6 +211,17 @@ class Surface:
                 # disagreement, take the rule from the grandparent, which is both
                 # types' actual authority.
                 # ancestors[-1] IS the parent; the grandparent is one further up
+                # A type that is part of the required internal structure of
+                # something we are INSIDE is legal wherever that structure puts
+                # it. `multi-steps-forms` declares `canBeParentFor` ->
+                # `form-multi-steps`, which is its own parent; the real child,
+                # `multi-steps-form-step`, is in `form-multi-steps`'s healed
+                # default children. Same disagreement as the loop containers.
+                if t not in allowed:
+                    for anc in ancestors:
+                        if t in self.default_children.get(anc, []):
+                            allowed = allowed + [t]
+                            break
                 if t not in allowed and "-loop-" in parent_type and len(ancestors) > 1:
                     gp = self.rules.get(ancestors[-2], {})
                     allowed = allowed + (gp.get("allowed_children") or "").split("|")

package/tools/verify_components.py

@@ -53,6 +53,14 @@ def main():
                     help="a loop-pagination-numbers whose children are page links")
     ap.add_argument("--paged-item", default="ct-arch-title",
                     help="the repeated attrID whose text should change per page")
+    ap.add_argument("--navbar", default="nb",
+                    help="a navbar; its toggle is <id>-toggle and its nav <id>-nav")
+    ap.add_argument("--media", default="md-img",
+                    help="an image node; icons are looked for beside it")
+    ap.add_argument("--shortcode", default="wp-sc",
+                    help="a wpShortcode node")
+    ap.add_argument("--steps", default="ms-panel-%d:3",
+                    help="multi-step panel attrID pattern and how many")
     ap.add_argument("--instances", default="cs-card",
                     help="a component's root attrID; instances are prefixed")
     a = ap.parse_args()
@@ -167,6 +175,111 @@ def main():
             check("FORM/required_blocks", bool(invalid),
                   "empty form reports invalid: %s" % invalid[:4])
 
+        # ---- navbar: the toggle only exists below its breakpoint
+        if not present(a.navbar):
+            skip("NAVBAR", "not on this page")
+        else:
+            wide = p.evaluate("""(id) => {
+              const t = document.getElementById(id + '-toggle');
+              const n = document.getElementById(id + '-nav');
+              const vis = e => { const r = e.getBoundingClientRect(),
+                                       s = getComputedStyle(e);
+                return r.height > 2 && s.display !== 'none'
+                       && s.visibility !== 'hidden'; };
+              return {toggle: vis(t), nav: vis(n),
+                      links: n.querySelectorAll('a').length};
+            }""", a.navbar)
+            check("NAVBAR/wide", wide["nav"] and not wide["toggle"],
+                  "at this width the links are shown and the toggle is not "
+                  "(nav=%s toggle=%s, %d links)"
+                  % (wide["nav"], wide["toggle"], wide["links"]))
+            p.set_viewport_size({"width": 900, "height": 900})
+            p.wait_for_timeout(900)
+            narrow = p.evaluate("""(id) => {
+              const t = document.getElementById(id + '-toggle');
+              const n = document.getElementById(id + '-nav');
+              const vis = e => { const r = e.getBoundingClientRect(),
+                                       s = getComputedStyle(e);
+                return r.height > 2 && s.display !== 'none'; };
+              return {toggle: vis(t), nav: vis(n),
+                      mode: String(document.getElementById(id).className)
+                              .includes('dropdown-mode')};
+            }""", a.navbar)
+            check("NAVBAR/narrow", narrow["toggle"] and not narrow["nav"]
+                  and narrow["mode"],
+                  "below buttonBreakpoint it collapses behind the toggle "
+                  "(dropdown-mode=%s)" % narrow["mode"])
+            p.click("#%s-toggle" % a.navbar)
+            p.wait_for_timeout(800)
+            opened = p.evaluate("""(id) => {
+              const n = document.getElementById(id + '-nav');
+              const r = n.getBoundingClientRect();
+              return r.height > 2 && getComputedStyle(n).display !== 'none'; }""",
+                                a.navbar)
+            check("NAVBAR/toggle_opens", opened, "clicking it reveals the links")
+            p.set_viewport_size({"width": 1280, "height": 900})
+            p.wait_for_timeout(700)
+
+        # ---- media: an attachment-protocol image and raw-SVG icons
+        if not present(a.media):
+            skip("MEDIA", "not on this page")
+        else:
+            img = p.evaluate("""(id) => {
+              const e = document.querySelector('#' + id + ' img, img#' + id);
+              if (!e) return null;
+              return {w: Math.round(e.getBoundingClientRect().width),
+                      natural: e.naturalWidth, src: (e.currentSrc || e.src || '')};
+            }""", a.media)
+            # naturalWidth > 0 is the only proof the file actually loaded; a broken
+            # src renders an <img> of the right size and no picture
+            check("MEDIA/image_loaded",
+                  bool(img) and img["natural"] > 0 and img["w"] > 0,
+                  "%dpx wide, natural %spx" % (img["w"], img["natural"]) if img
+                  else "no <img> rendered")
+            icons = p.evaluate("""() => [...document.querySelectorAll('svg')]
+                .filter(s => s.closest('[id^=md-i]')).length""")
+            check("MEDIA/icons_inline", icons > 0,
+                  "%d inline <svg> - `icon` takes RAW SVG in its `svg` property, "
+                  "not a URL or a library name" % icons)
+
+        # ---- WordPress interop
+        if not present(a.shortcode):
+            skip("WORDPRESS", "not on this page")
+        else:
+            n = p.evaluate("""(id) => document.querySelectorAll(
+                '#' + id + ' .product, #' + id + ' li').length""", a.shortcode)
+            check("WORDPRESS/shortcode_ran", n > 0,
+                  "%d items from the shortcode - this is WooCommerce's own "
+                  "output, not a reimplementation" % n)
+
+        # ---- a multi-step form shows ONE step at a time
+        step_pat, n_steps = a.steps.rsplit(":", 1)
+        n_steps = int(n_steps)
+        if not present(step_pat % 0):
+            skip("MULTISTEP", "not on this page")
+        else:
+            def steps_shown():
+                return [i for i in range(n_steps)
+                        if p.evaluate(VISIBLE, step_pat % i)]
+            at_rest = steps_shown()
+            # Mosaic ships NO visibility CSS for a form step - the plugin moves
+            # `m-form-step--active` and leaves the hiding to the theme's variant.
+            # Without that rule every panel is on screen at once and the form
+            # looks like one long page with three sets of buttons.
+            check("MULTISTEP/one_at_rest", at_rest == [0],
+                  "visible steps: %s" % at_rest
+                  + ("" if at_rest == [0] else
+                     " - nothing hides the inactive ones; style .m-form-step"))
+            if at_rest == [0]:
+                p.click("#ms-next-0")
+                p.wait_for_timeout(900)
+                check("MULTISTEP/next", steps_shown() == [1],
+                      "NEXT -> %s" % steps_shown())
+                p.click("#ms-back-1")
+                p.wait_for_timeout(900)
+                check("MULTISTEP/back", steps_shown() == [0],
+                      "BACK -> %s" % steps_shown())
+
         # ---- component instances
         #
         # An instance's ids are PREFIXED with the instance's own attrID