fix spacing calculation for width

tests-rendering/automation/view.js

@@ -10,6 +10,7 @@ const http = require("http");
 var filepath = null;
 program
   .option("--run", "run all the tests")
+  .option("--debug", "run with debug on")
   .arguments("<filepath>")
   .action(function (p) {
     filepath = path.join("./cases/open", p);
@@ -17,7 +18,7 @@ program
   .parse(process.argv);
 
 (async () => {
-  if (filepath == null) {
+  if (filepath == null && !program.run) {
     console.log("Open Cases");
     console.log("");
     fs.readdirSync("./tests-rendering/cases/open").forEach((file) => {
@@ -29,13 +30,13 @@ program
     return;
   }
   if (program.run) {
-    filepath = "src/";
+    filepath = "./src/Tests/Run.elm";
   }
   console.log("Compiling tests");
   let content = await build.compile_to_string({
     template: "./tests-rendering/automation/templates/gather-styles.html",
     elm: filepath,
-    elmOptions: { cwd: "./tests-rendering" },
+    elmOptions: { cwd: "./tests-rendering", debug: program.debug },
   });
   console.log("Finished compiling");
   //   console.log(content);
@@ -45,7 +46,7 @@ program
     content = build.compile_to_string({
       template: "./tests-rendering/automation/templates/gather-styles.html",
       elm: filepath,
-      elmOptions: { cwd: "./tests-rendering" },
+      elmOptions: { cwd: "./tests-rendering", debug: program.debug },
     });
   });
   console.log("Serving on http://localhost:8080");

tests-rendering/src/Testable.elm

@@ -19,6 +19,7 @@ module Testable exposing
     , formatColorWithAlpha
     , getIds
     , getSpacing
+    , getSpacingFromAttributes
     , runTests
     , textHeight
     , toElement
@@ -481,6 +482,10 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
 
         id =
             levelToString level
+                |> Debug.log "id"
+
+        _ =
+            Debug.log "element" element
 
         testChildren : Found -> List (Element msg) -> List LayoutTest
         testChildren found children =
@@ -620,6 +625,7 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
 
                 attributeTests =
                     attributes
+                        |> Debug.log "attributes"
                         |> List.indexedMap
                             -- Found -> Dict String Found -> List Int -> Int -> Surroundings -> Attr msg -> List Test
                             (\i attr ->
@@ -698,8 +704,13 @@ createAttributeTest :
     -> List LayoutTest
 createAttributeTest parent cache level attrIndex surroundings attr =
     let
+        _ =
+            Debug.log "attribute test" attr
+
         domId =
-            "#" ++ levelToString level
+            "#"
+                ++ levelToString level
+                |> Debug.log "domid"
     in
     case attr of
         Attr _ ->
@@ -739,7 +750,7 @@ createAttributeTest parent cache level attrIndex surroundings attr =
 
         Batch batch ->
             batch
-                |> List.indexedMap (\i attribute -> createAttributeTest parent cache (attrIndex :: level) i surroundings attribute)
+                |> List.indexedMap (\i attribute -> createAttributeTest parent cache level i surroundings attribute)
                 |> List.concat
 
         LabeledTest { label, test } ->
@@ -812,6 +823,21 @@ formatColor (Internal.Rgba red green blue alpha) =
             ++ ")"
 
 
+getSpacingFromAttributes attrs =
+    case attrs of
+        [] ->
+            0
+
+        (Spacing i) :: remain ->
+            i
+
+        (Batch batched) :: remain ->
+            getSpacingFromAttributes (batched ++ remain)
+
+        _ :: remain ->
+            getSpacingFromAttributes remain
+
+
 getSpacing : Element msg -> Maybe Int
 getSpacing el =
     let

tests-rendering/src/Testable/Element.elm

@@ -436,7 +436,7 @@ widthHelper maybeMin maybeMax len =
                                     }
                                 ]
 
-                            Testable.Row _ _ ->
+                            Testable.Row rowAttrs _ ->
                                 -- width of row is the sum of all children widths
                                 -- both text elements and others.
                                 let
@@ -452,11 +452,14 @@ widthHelper maybeMin maybeMax len =
                                     horizontalPadding =
                                         context.self.bbox.padding.left + context.self.bbox.padding.right
 
-                                    spacingValue =
+                                    spacingAmount =
-                                        toFloat context.parentSpacing * (toFloat (List.length context.children) - 1)
+                                        Testable.getSpacingFromAttributes rowAttrs
+
+                                    totalSpacing =
+                                        toFloat spacingAmount * (toFloat (List.length context.children) - 1)
                                 in
                                 [ expectRoundedEquality
-                                    { expected = totalChildren + horizontalPadding + spacingValue
+                                    { expected = totalChildren + horizontalPadding + totalSpacing
                                     , found = context.self.bbox.width
                                     }
                                 ]

tests-rendering/src/Testable/Runner.elm

@@ -246,11 +246,17 @@ view model =
                         Element.layout
                             [ Font.size 16
                             , Element.inFront (Element.html (viewElementHighlight model))
+                            , Element.height Element.fill
                             ]
                         <|
-                            Element.row [ Element.width Element.fill ]
+                            Element.row [ Element.width Element.fill, Element.height Element.fill ]
                                 [ Element.el
-                                    [ Element.width Element.fill
+                                    [ Element.width 
+                                        (Element.fill
+                                        |> Element.maximum 900)
+                                    , Element.alignTop
+                                     , Element.height Element.fill
+                                    , Element.scrollbars
                                     ]
                                     (Element.el
                                         [ Element.centerX
@@ -273,6 +279,8 @@ view model =
                                     [ Element.spacing 20
                                     , Element.padding 20
                                     , Element.width Element.fill
+                                    , Element.height Element.fill
+                                    , Element.scrollbarY
                                     ]
                                     (List.map viewResult (finished :: remaining))
                                 ]
@@ -292,7 +300,7 @@ viewElementHighlight model =
         Just highlightDomId ->
             let
                 elementHighlight =
-                    highlightDomId ++ " { outline: solid;  }"
+                    highlightDomId ++ " { outline: solid black;  }"
 
                 testId =
                     highlightDomId
@@ -300,7 +308,7 @@ viewElementHighlight model =
                         |> String.append "#tests-"
 
                 testHighlight =
-                    testId ++ " { outline: dashed;  }"
+                    testId ++ " { outline: dashed black;  }"
 
                 styleSheet =
                     String.join "\n"

tests-rendering/src/Tests/Basic.elm

@@ -5,7 +5,7 @@ module Tests.Basic exposing (view)
 import Element as Actual
 import Html
 import Testable
-import Testable.Element as Element exposing (..)
+import Testable.Element exposing (..)
 import Testable.Element.Background as Background
 import Testable.Element.Font as Font
 import Testable.Runner