Support setting the background color for widgets in flex container te…

…sts. (#1730)

* Support setting the background color for widgets in flex container tests.

* Spotless.

* Spotless.

* Fix overload ambiguity.

* Formatting.

* Fix duplicate copyright and UIView tests.

redwood-layout-composeui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiFlexContainerTest.kt

@@ -31,7 +31,6 @@ import app.cash.redwood.Modifier as RedwoodModifier
 import app.cash.redwood.layout.AbstractFlexContainerTest
 import app.cash.redwood.layout.TestFlexContainer
 import app.cash.redwood.layout.Text
-import app.cash.redwood.layout.widget.Column
 import app.cash.redwood.layout.widget.FlexContainer
 import app.cash.redwood.widget.Widget
 import app.cash.redwood.yoga.FlexDirection
@@ -53,16 +52,25 @@ class ComposeUiFlexContainerTest(
     supportsRtl = true,
   )
 
-  override fun flexContainer(direction: FlexDirection) = ComposeTestFlexContainer(direction)
+  override fun flexContainer(
+    direction: FlexDirection,
+    backgroundColor: Int,
+  ): ComposeTestFlexContainer {
+    return ComposeTestFlexContainer(direction, backgroundColor)
+  }
+
+  override fun row() = flexContainer(FlexDirection.Row)
 
-  override fun widget() = object : Text<@Composable () -> Unit> {
+  override fun column() = flexContainer(FlexDirection.Column)
+
+  override fun widget(backgroundColor: Int) = object : Text<@Composable () -> Unit> {
     private var text by mutableStateOf("")
 
     override val value = @Composable {
       BasicText(
         text = this.text,
         style = TextStyle(fontSize = 18.sp, color = Color.Black),
-        modifier = Modifier.background(Color.Green),
+        modifier = Modifier.background(Color(backgroundColor)),
       )
     }
 
@@ -73,9 +81,6 @@ class ComposeUiFlexContainerTest(
     }
   }
 
-  override fun column(): Column<@Composable () -> Unit> =
-    ComposeUiFlexContainer(FlexDirection.Column)
-
   override fun verifySnapshot(container: Widget<@Composable () -> Unit>, name: String?) {
     paparazzi.snapshot(name) {
       container.value()
@@ -87,9 +92,9 @@ class ComposeUiFlexContainerTest(
   ) : TestFlexContainer<@Composable () -> Unit>, FlexContainer<@Composable () -> Unit> by delegate {
     private var childCount = 0
 
-    constructor(direction: FlexDirection) : this(
+    constructor(direction: FlexDirection, backgroundColor: Int) : this(
       ComposeUiFlexContainer(direction).apply {
-        testOnlyModifier = Modifier.background(Color(0, 0, 255, 51))
+        testOnlyModifier = Modifier.background(Color(backgroundColor))
       },
     )
 

redwood-layout-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/AbstractFlexContainerTest.kt

@@ -29,26 +29,45 @@ import app.cash.redwood.layout.modifier.Size
 import app.cash.redwood.layout.modifier.VerticalAlignment
 import app.cash.redwood.layout.modifier.Width
 import app.cash.redwood.layout.widget.Column
+import app.cash.redwood.layout.widget.Row
 import app.cash.redwood.ui.Dp
 import app.cash.redwood.ui.Margin
 import app.cash.redwood.ui.dp
 import app.cash.redwood.widget.ChangeListener
 import app.cash.redwood.widget.Widget
 import app.cash.redwood.yoga.FlexDirection
 import kotlin.test.Test
-import kotlin.test.assertTrue
 
 abstract class AbstractFlexContainerTest<T : Any> {
-  abstract fun flexContainer(direction: FlexDirection): TestFlexContainer<T>
-  abstract fun widget(): Text<T>
+  abstract fun flexContainer(
+    direction: FlexDirection,
+    backgroundColor: Int = Color(51, 0, 0, 255),
+  ): TestFlexContainer<T>
+
+  abstract fun row(): Row<T>
+
   abstract fun column(): Column<T>
-  abstract fun verifySnapshot(container: Widget<T>, name: String? = null)
 
-  private fun widget(text: String, modifier: Modifier = Modifier): Text<T> = widget().apply {
-    text(text)
-    this.modifier = modifier
+  abstract fun widget(
+    backgroundColor: Int = Green,
+  ): Text<T>
+
+  fun widget(
+    text: String,
+    modifier: Modifier = Modifier,
+    backgroundColor: Int = Green,
+  ): Text<T> {
+    val widget = widget(backgroundColor)
+    widget.text(text)
+    widget.modifier = modifier
+    return widget
   }
 
+  abstract fun verifySnapshot(
+    container: Widget<T>,
+    name: String? = null,
+  )
+
   @Test fun testEmptyLayout_Column() {
     emptyLayout(FlexDirection.Column)
   }
@@ -232,8 +251,7 @@ abstract class AbstractFlexContainerTest<T : Any> {
     verifySnapshot(container)
   }
 
-  @Test
-  fun columnWithUpdatedCrossAxisAlignment() {
+  @Test fun columnWithUpdatedCrossAxisAlignment() {
     val container = flexContainer(FlexDirection.Column)
     container.width(Constraint.Fill)
     container.height(Constraint.Fill)
@@ -419,8 +437,7 @@ abstract class AbstractFlexContainerTest<T : Any> {
     verifySnapshot(column)
   }
 
-  @Test
-  fun testDynamicElementUpdates() {
+  @Test fun testDynamicElementUpdates() {
     val container = flexContainer(FlexDirection.Column)
     container.width(Constraint.Fill)
     container.height(Constraint.Fill)
@@ -441,8 +458,7 @@ abstract class AbstractFlexContainerTest<T : Any> {
     verifySnapshot(container, "BCDE")
   }
 
-  @Test
-  fun testDynamicContainerSize() {
+  @Test fun testDynamicContainerSize() {
     val parent = column().apply {
       width(Constraint.Fill)
       height(Constraint.Fill)
@@ -497,8 +513,7 @@ abstract class AbstractFlexContainerTest<T : Any> {
     verifySnapshot(parent, "single")
   }
 
-  @Test
-  fun testFlexDistributesWeightEqually() {
+  @Test fun testFlexDistributesWeightEqually() {
     val container = flexContainer(FlexDirection.Row)
     container.width(Constraint.Fill)
     container.height(Constraint.Fill)
@@ -509,8 +524,7 @@ abstract class AbstractFlexContainerTest<T : Any> {
     verifySnapshot(container)
   }
 
-  @Test
-  fun testFlexDistributesWeightUnequally() {
+  @Test fun testFlexDistributesWeightUnequally() {
     val container = flexContainer(FlexDirection.Row)
     container.width(Constraint.Fill)
     container.height(Constraint.Fill)
@@ -520,11 +534,6 @@ abstract class AbstractFlexContainerTest<T : Any> {
     container.add(widget("LINE1\nLINE2\nLINE3", FlexImpl(1.0)))
     verifySnapshot(container)
   }
-
-  /** We don't have assume() on kotlin.test. Tests that fail here should be skipped instead. */
-  private fun assumeTrue(b: Boolean) {
-    assertTrue(b)
-  }
 }
 
 interface TestFlexContainer<T : Any> : Widget<T>, ChangeListener {

redwood-layout-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/utils.common.kt

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2023 Square, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@file:Suppress("ktlint:standard:function-naming", "ktlint:standard:property-naming")
+
+package app.cash.redwood.layout
+
+import kotlin.test.assertTrue
+
+const val Transparent: Int = 0x00000000
+const val Red: Int = 0xffff0000.toInt()
+const val Green: Int = 0xff00ff00.toInt()
+const val Blue: Int = 0xff0000ff.toInt()
+
+fun Color(
+  alpha: Int,
+  red: Int,
+  green: Int,
+  blue: Int,
+): Int {
+  return (alpha shl 24) or (red shl 16) or (green shl 8) or (blue)
+}
+
+/** We don't have assume() on kotlin.test. Tests that fail here should be skipped instead. */
+fun assumeTrue(b: Boolean) {
+  assertTrue(b)
+}

redwood-layout-shared-test/src/iosMain/kotlin/app/cash/redwood/layout/utils.kt

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2023 Square, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package app.cash.redwood.layout
+
+import platform.UIKit.UIColor
+
+fun Int.toUIColor(): UIColor {
+  return UIColor(
+    red = ((this shr 16) and 0xff) / 255.0,
+    green = ((this shr 8) and 0xff) / 255.0,
+    blue = (this and 0xff) / 255.0,
+    alpha = ((this shr 24) and 0xff) / 255.0,
+  )
+}

redwood-layout-uiview/src/commonTest/kotlin/app/cash/redwood/layout/uiview/UIViewFlexContainerTest.kt

@@ -19,7 +19,7 @@ import app.cash.redwood.Modifier
 import app.cash.redwood.layout.AbstractFlexContainerTest
 import app.cash.redwood.layout.TestFlexContainer
 import app.cash.redwood.layout.Text
-import app.cash.redwood.layout.widget.Column
+import app.cash.redwood.layout.toUIColor
 import app.cash.redwood.layout.widget.FlexContainer
 import app.cash.redwood.widget.ChangeListener
 import app.cash.redwood.widget.Widget
@@ -32,16 +32,25 @@ import platform.UIKit.UIView
 class UIViewFlexContainerTest(
   private val callback: UIViewSnapshotCallback,
 ) : AbstractFlexContainerTest<UIView>() {
-  override fun flexContainer(direction: FlexDirection): TestFlexContainer<UIView> {
-    return UIViewTestFlexContainer(UIViewFlexContainer(direction))
+  override fun flexContainer(
+    direction: FlexDirection,
+    backgroundColor: Int,
+  ): UIViewTestFlexContainer {
+    val container = UIViewTestFlexContainer(UIViewFlexContainer(direction))
+    container.value.backgroundColor = backgroundColor.toUIColor()
+    return container
   }
 
-  override fun widget(): Text<UIView> {
+  override fun row() = flexContainer(FlexDirection.Row)
+
+  override fun column() = flexContainer(FlexDirection.Column)
+
+  override fun widget(backgroundColor: Int): Text<UIView> {
     return object : Text<UIView> {
       override val value = UILabel().apply {
-        numberOfLines = 0
-        backgroundColor = UIColor.greenColor
-        textColor = UIColor.blackColor
+        this.numberOfLines = 0
+        this.backgroundColor = backgroundColor.toUIColor()
+        this.textColor = UIColor.blackColor
       }
 
       override var modifier: Modifier = Modifier
@@ -52,8 +61,6 @@ class UIViewFlexContainerTest(
     }
   }
 
-  override fun column(): Column<UIView> = UIViewFlexContainer(FlexDirection.Column)
-
   class UIViewTestFlexContainer internal constructor(
     private val delegate: UIViewFlexContainer,
   ) : TestFlexContainer<UIView>, FlexContainer<UIView> by delegate, ChangeListener by delegate {

redwood-layout-view/src/test/kotlin/app/cash/redwood/layout/view/ViewFlexContainerTest.kt

@@ -17,7 +17,6 @@ package app.cash.redwood.layout.view
 
 import android.content.Context
 import android.graphics.Color
-import android.graphics.drawable.ColorDrawable
 import android.view.View
 import android.widget.TextView
 import app.cash.paparazzi.DeviceConfig
@@ -26,7 +25,6 @@ import app.cash.redwood.Modifier
 import app.cash.redwood.layout.AbstractFlexContainerTest
 import app.cash.redwood.layout.TestFlexContainer
 import app.cash.redwood.layout.Text
-import app.cash.redwood.layout.widget.Column
 import app.cash.redwood.layout.widget.FlexContainer
 import app.cash.redwood.widget.ChangeListener
 import app.cash.redwood.widget.Widget
@@ -49,13 +47,20 @@ class ViewFlexContainerTest(
     supportsRtl = true,
   )
 
-  override fun flexContainer(direction: FlexDirection): TestFlexContainer<View> {
-    return ViewTestFlexContainer(paparazzi.context, direction)
+  override fun flexContainer(
+    direction: FlexDirection,
+    backgroundColor: Int,
+  ): ViewTestFlexContainer {
+    return ViewTestFlexContainer(paparazzi.context, direction, backgroundColor)
   }
 
-  override fun widget() = object : Text<View> {
+  override fun row() = flexContainer(FlexDirection.Row)
+
+  override fun column() = flexContainer(FlexDirection.Column)
+
+  override fun widget(backgroundColor: Int) = object : Text<View> {
     override val value = TextView(paparazzi.context).apply {
-      background = ColorDrawable(Color.GREEN)
+      setBackgroundColor(backgroundColor)
       textSize = 18f
       textDirection = View.TEXT_DIRECTION_LOCALE
       setTextColor(Color.BLACK)
@@ -68,8 +73,6 @@ class ViewFlexContainerTest(
     }
   }
 
-  override fun column(): Column<View> = ViewFlexContainer(paparazzi.context, FlexDirection.Column)
-
   override fun verifySnapshot(container: Widget<View>, name: String?) {
     paparazzi.snapshot(container.value, name)
   }
@@ -79,9 +82,9 @@ class ViewFlexContainerTest(
   ) : TestFlexContainer<View>, FlexContainer<View> by delegate, ChangeListener by delegate {
     private var childCount = 0
 
-    constructor(context: Context, direction: FlexDirection) : this(
+    constructor(context: Context, direction: FlexDirection, backgroundColor: Int) : this(
       ViewFlexContainer(context, direction).apply {
-        value.setBackgroundColor(Color.argb(51, 0, 0, 255))
+        value.setBackgroundColor(backgroundColor)
       },
     )