Test to demonstrate that shrink() is necessary (#1578)

* Test to demonstrate that shrink() is necessary * More iOS screenshots * Fixup tests to use 0.0 * Spotless * Add missing snapshots
cashapp · Oct 12, 2023 · 7a87f14 · 7a87f14
1 parent 2b3d4c1
commit 7a87f14
Show file tree

Hide file tree

Showing 19 changed files with 163 additions and 0 deletions.
diff --git a/....redwood.layout.composeui_ComposeUiFlexContainerTest_testColumnThenRow[LTR].png b/....redwood.layout.composeui_ComposeUiFlexContainerTest_testColumnThenRow[LTR].png
diff --git a/....redwood.layout.composeui_ComposeUiFlexContainerTest_testColumnThenRow[RTL].png b/....redwood.layout.composeui_ComposeUiFlexContainerTest_testColumnThenRow[RTL].png
diff --git a/...ash.redwood.layout.composeui_ComposeUiFlexContainerTest_testRowMargins[LTR].png b/...ash.redwood.layout.composeui_ComposeUiFlexContainerTest_testRowMargins[LTR].png
diff --git a/...ash.redwood.layout.composeui_ComposeUiFlexContainerTest_testRowMargins[RTL].png b/...ash.redwood.layout.composeui_ComposeUiFlexContainerTest_testRowMargins[RTL].png
diff --git a/...ut-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/AbstractFlexContainerTest.kt b/...ut-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/AbstractFlexContainerTest.kt
@@ -19,8 +19,10 @@ import app.cash.redwood.Modifier
 import app.cash.redwood.layout.api.Constraint
 import app.cash.redwood.layout.api.CrossAxisAlignment
 import app.cash.redwood.layout.api.MainAxisAlignment
+import app.cash.redwood.layout.modifier.Grow
 import app.cash.redwood.layout.modifier.Height
 import app.cash.redwood.layout.modifier.HorizontalAlignment
+import app.cash.redwood.layout.modifier.Shrink
 import app.cash.redwood.layout.modifier.Size
 import app.cash.redwood.layout.modifier.VerticalAlignment
 import app.cash.redwood.layout.modifier.Width
@@ -331,6 +333,99 @@ abstract class AbstractFlexContainerTest<T : Any> {
     verifySnapshot(container, "updated")
   }
 
+  @Test fun testColumnThenRow() {
+    val column = flexContainer(FlexDirection.Column).apply {
+      width(Constraint.Fill)
+      height(Constraint.Fill)
+    }
+
+    column.add(
+      flexContainer(FlexDirection.Row).apply {
+        width(Constraint.Fill)
+        height(Constraint.Wrap)
+        margin(Margin(10.dp))
+        add(widget("first (grow 1.0)", GrowImpl(1.0).then(MarginImpl(5.dp))))
+        add(widget("second (grow 1.0)", GrowImpl(1.0).then(MarginImpl(5.dp))))
+      },
+    )
+
+    column.add(
+      flexContainer(FlexDirection.Row).apply {
+        width(Constraint.Fill)
+        height(Constraint.Wrap)
+        margin(Margin(10.dp))
+        add(widget("first (grow 1.0)", GrowImpl(1.0).then(MarginImpl(5.dp))))
+        add(widget("second (grow 0.0)", GrowImpl(0.0).then(MarginImpl(5.dp))))
+      },
+    )
+
+    column.add(
+      flexContainer(FlexDirection.Row).apply {
+        width(Constraint.Fill)
+        height(Constraint.Wrap)
+        margin(Margin(10.dp))
+        add(widget("first (grow 0.0)", GrowImpl(0.0).then(MarginImpl(5.dp))))
+        add(widget("second (grow 1.0)", GrowImpl(1.0).then(MarginImpl(5.dp))))
+      },
+    )
+
+    verifySnapshot(column)
+  }
+
+  /** This test demonstrates that margins are lost unless `shrink(1.0)` is added. */
+  @Test fun testRowMargins() {
+    val column = flexContainer(FlexDirection.Column).apply {
+      width(Constraint.Fill)
+      height(Constraint.Fill)
+    }
+
+    column.add(widget("All rows have a 100 px margin on the right!"))
+
+    column.add(widget("1 element + no shrink:"))
+    column.add(
+      flexContainer(FlexDirection.Row).apply {
+        width(Constraint.Fill)
+        height(Constraint.Wrap)
+        margin(Margin(end = 100.dp))
+        add(widget("x ".repeat(100), GrowImpl(1.0)))
+      },
+    )
+
+    column.add(widget("1 element + shrink:"))
+    column.add(
+      flexContainer(FlexDirection.Row).apply {
+        width(Constraint.Fill)
+        height(Constraint.Wrap)
+        margin(Margin(end = 100.dp))
+        add(widget("x ".repeat(100), GrowImpl(1.0).then(ShrinkImpl(1.0))))
+      },
+    )
+
+    column.add(widget("2 elements + no shrink:"))
+    column.add(
+      flexContainer(FlexDirection.Row).apply {
+        width(Constraint.Fill)
+        height(Constraint.Wrap)
+        margin(Margin(end = 100.dp))
+        add(widget("x ".repeat(100), GrowImpl(1.0)))
+        add(widget("abcdef", MarginImpl(Margin(start = 10.dp))))
+      },
+    )
+
+    column.add(widget("2 elements + shrink:"))
+    column.add(
+      flexContainer(FlexDirection.Row).apply {
+        width(Constraint.Fill)
+        height(Constraint.Wrap)
+        margin(Margin(end = 100.dp))
+        add(widget("x ".repeat(100), GrowImpl(1.0).then(ShrinkImpl(1.0))))
+        add(widget("abcdef", MarginImpl(Margin(start = 10.dp))))
+      },
+    )
+
+    verifySnapshot(column)
+  }
+
   /** We don't have assume() on kotlin.test. Tests that fail here should be skipped instead. */
   private fun assumeTrue(b: Boolean) {
     assertTrue(b)
@@ -383,6 +478,20 @@ private data class SizeImpl(
   override val height: Dp,
 ) : Size
 
+private data class MarginImpl(
+  override val margin: app.cash.redwood.ui.Margin,
+) : app.cash.redwood.layout.modifier.Margin {
+  constructor(all: Dp = 0.dp) : this(Margin(all))
+}
+
+private data class GrowImpl(
+  override val `value`: Double,
+) : Grow
+
+private data class ShrinkImpl(
+  override val `value`: Double,
+) : Shrink
+
 enum class FlexDirectionEnum(val value: FlexDirection) {
   Row(FlexDirection.Row),
   RowReverse(FlexDirection.RowReverse),

diff --git a/...ts__/UIViewFlexContainerTestHost/verifySnapshot-view-name.testColumnThenRow.png b/...ts__/UIViewFlexContainerTestHost/verifySnapshot-view-name.testColumnThenRow.png
diff --git a/...shots__/UIViewFlexContainerTestHost/verifySnapshot-view-name.testRowMargins.png b/...shots__/UIViewFlexContainerTestHost/verifySnapshot-view-name.testRowMargins.png
diff --git a/...s/app.cash.redwood.layout.view_ViewFlexContainerTest_testColumnThenRow[LTR].png b/...s/app.cash.redwood.layout.view_ViewFlexContainerTest_testColumnThenRow[LTR].png
diff --git a/...s/app.cash.redwood.layout.view_ViewFlexContainerTest_testColumnThenRow[RTL].png b/...s/app.cash.redwood.layout.view_ViewFlexContainerTest_testColumnThenRow[RTL].png
diff --git a/...ages/app.cash.redwood.layout.view_ViewFlexContainerTest_testRowMargins[LTR].png b/...ages/app.cash.redwood.layout.view_ViewFlexContainerTest_testRowMargins[LTR].png
diff --git a/...ages/app.cash.redwood.layout.view_ViewFlexContainerTest_testRowMargins[RTL].png b/...ages/app.cash.redwood.layout.view_ViewFlexContainerTest_testRowMargins[RTL].png
diff --git a/....cash.redwood.layout.composeui_ComposeUiLazyListTest_testColumnThenRow[LTR].png b/....cash.redwood.layout.composeui_ComposeUiLazyListTest_testColumnThenRow[LTR].png
diff --git a/....cash.redwood.layout.composeui_ComposeUiLazyListTest_testColumnThenRow[RTL].png b/....cash.redwood.layout.composeui_ComposeUiLazyListTest_testColumnThenRow[RTL].png
diff --git a/...app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testRowMargins[LTR].png b/...app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testRowMargins[LTR].png
diff --git a/...app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testRowMargins[RTL].png b/...app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testRowMargins[RTL].png
diff --git a/...es/app.cash.redwood.lazylayout.view_ViewLazyListTest_testColumnThenRow[LTR].png b/...es/app.cash.redwood.lazylayout.view_ViewLazyListTest_testColumnThenRow[LTR].png
diff --git a/...es/app.cash.redwood.lazylayout.view_ViewLazyListTest_testColumnThenRow[RTL].png b/...es/app.cash.redwood.lazylayout.view_ViewLazyListTest_testColumnThenRow[RTL].png
diff --git a/...mages/app.cash.redwood.lazylayout.view_ViewLazyListTest_testRowMargins[LTR].png b/...mages/app.cash.redwood.lazylayout.view_ViewLazyListTest_testRowMargins[LTR].png
diff --git a/...mages/app.cash.redwood.lazylayout.view_ViewLazyListTest_testRowMargins[RTL].png b/...mages/app.cash.redwood.lazylayout.view_ViewLazyListTest_testRowMargins[RTL].png