AbstractFlexContainerTest.kt

/*
 * 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 app.cash.burst.Burst
import app.cash.burst.InterceptTest
import app.cash.burst.burstValues
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.api.Overflow
import app.cash.redwood.layout.widget.Column
import app.cash.redwood.layout.widget.Row
import app.cash.redwood.layout.widget.Spacer
import app.cash.redwood.snapshot.testing.Blue
import app.cash.redwood.snapshot.testing.Green
import app.cash.redwood.snapshot.testing.Red
import app.cash.redwood.snapshot.testing.Snapshotter
import app.cash.redwood.snapshot.testing.TestWidgetFactory
import app.cash.redwood.snapshot.testing.argb
import app.cash.redwood.snapshot.testing.color
import app.cash.redwood.snapshot.testing.text
import app.cash.redwood.ui.Margin
import app.cash.redwood.ui.Px
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.assertEquals
import kotlin.test.assertTrue
import kotlinx.coroutines.test.runTest

@Burst
abstract class AbstractFlexContainerTest<T : Any> {
  @InterceptTest
  abstract val snapshotterFactory: Snapshotter.Factory<T>

  abstract val widgetFactory: TestWidgetFactory<T>

  protected val defaultBackgroundColor = argb(51, 0, 0, 255)

  protected open val viewMeasurementIsImpreciseAfterAnItemSizeChanges = false

  abstract fun flexContainer(
    direction: FlexDirection,
    backgroundColor: Int = defaultBackgroundColor,
  ): TestFlexContainer<T>

  /**
   * Yoga node’s default values for properties like alignment are different from Redwood's default
   * values, so we explicitly apply those defaults here. This is only necessary in tests; in
   * production the framework explicitly sets every property.
   */
  protected fun TestFlexContainer<*>.applyDefaults() {
    width(Constraint.Wrap)
    height(Constraint.Wrap)
    margin(Margin.Zero)
    overflow(Overflow.Clip)
    crossAxisAlignment(CrossAxisAlignment.Start)
    mainAxisAlignment(MainAxisAlignment.Start)
    onScroll(null)
  }

  /**
   * Yoga node’s default values for properties like alignment are different from Redwood's default
   * values, so we explicitly apply those defaults here. This is only necessary in tests; in
   * production the framework explicitly sets every property.
   */
  protected fun Row<*>.applyDefaults() {
    width(Constraint.Wrap)
    height(Constraint.Wrap)
    margin(Margin.Zero)
    overflow(Overflow.Clip)
    verticalAlignment(CrossAxisAlignment.Start)
    horizontalAlignment(MainAxisAlignment.Start)
    onScroll(null)
  }

  /**
   * Yoga node’s default values for properties like alignment are different from Redwood's default
   * values, so we explicitly apply those defaults here. This is only necessary in tests; in
   * production the framework explicitly sets every property.
   */
  protected fun Column<*>.applyDefaults() {
    width(Constraint.Wrap)
    height(Constraint.Wrap)
    margin(Margin.Zero)
    overflow(Overflow.Clip)
    horizontalAlignment(CrossAxisAlignment.Start)
    verticalAlignment(MainAxisAlignment.Start)
    onScroll(null)
  }

  protected fun <T : Any> TestFlexContainer<T>.add(widget: Widget<T>) {
    addAt(children.widgets.size, widget)
  }

  protected fun <T : Any> TestFlexContainer<T>.addAt(index: Int, widget: Widget<T>) {
    children.insert(index, widget)
  }

  protected fun <T : Any> TestFlexContainer<T>.removeAt(index: Int) {
    children.remove(index, 1)
  }

  /** Returns a non-lazy flex container row, even if the test is for a LazyList. */
  abstract fun row(): Row<T>

  /** Returns a non-lazy flex container column, even if the test is for a LazyList. */
  abstract fun column(): Column<T>

  abstract fun spacer(): Spacer<T>

  @Test fun testEmptyLayout(
    flexDirection: FlexDirection = burstValues(FlexDirection.Row, FlexDirection.Column),
  ) = runTest {
    val container = flexContainer(flexDirection)
    container.crossAxisAlignment(CrossAxisAlignment.Start)
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testLayoutWithConstraints(
    flexDirection: FlexDirection = burstValues(FlexDirection.Row, FlexDirection.Column),
    width: Constraint = burstValues(Constraint.Wrap, Constraint.Fill),
    height: Constraint = burstValues(Constraint.Wrap, Constraint.Fill),
  ) = runTest {
    val container = flexContainer(flexDirection)
    container.width(width)
    container.height(height)
    container.add(
      widgetFactory.text(
        text = movies.first(),
        modifier = Modifier
          .then(HorizontalAlignmentImpl(CrossAxisAlignment.Stretch))
          .then(VerticalAlignmentImpl(CrossAxisAlignment.Stretch)),
      ),
    )
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testShortLayout(
    flexDirection: FlexDirection = burstValues(FlexDirection.Row, FlexDirection.Column),
  ) = runTest {
    val container = flexContainer(flexDirection)
    container.crossAxisAlignment(CrossAxisAlignment.Start)
    movies.take(5).forEach { movie ->
      container.add(widgetFactory.text(movie))
    }
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testLongLayout(
    flexDirection: FlexDirection = burstValues(FlexDirection.Row, FlexDirection.Column),
  ) = runTest {
    val container = flexContainer(flexDirection)
    container.crossAxisAlignment(CrossAxisAlignment.Start)
    movies.forEach { movie ->
      container.add(widgetFactory.text(movie))
    }
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testLayoutWithMarginAndDifferentAlignments(
    flexDirection: FlexDirection = burstValues(FlexDirection.Row, FlexDirection.Column),
  ) = runTest {
    val container = flexContainer(flexDirection)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.margin(Margin(start = 5.dp, end = 10.dp, top = 20.dp, bottom = 20.dp))
    movies.forEachIndexed { index, movie ->
      val modifier = when (index % 4) {
        0 -> CrossAxisAlignmentImpl(CrossAxisAlignment.Start)
        1 -> CrossAxisAlignmentImpl(CrossAxisAlignment.Center)
        2 -> CrossAxisAlignmentImpl(CrossAxisAlignment.End)
        else -> CrossAxisAlignmentImpl(CrossAxisAlignment.Stretch)
      }
      container.add(widgetFactory.text(movie, modifier))
    }
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testLayoutWithCrossAxisAlignment(
    flexDirection: FlexDirection = burstValues(FlexDirection.Row, FlexDirection.Column),
    crossAxisAlignment: CrossAxisAlignment = burstValues(
      CrossAxisAlignment.Start,
      CrossAxisAlignment.Center,
      CrossAxisAlignment.End,
      CrossAxisAlignment.Stretch,
    ),
  ) = runTest {
    val container = flexContainer(flexDirection)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(crossAxisAlignment)
    movies.forEach { movie ->
      container.add(widgetFactory.text(movie))
    }
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testColumnWithUpdatedCrossAxisAlignment() = runTest {
    val container = flexContainer(FlexDirection.Column)
    val snapshotter = snapshotterFactory(container.value)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(CrossAxisAlignment.Center)
    movies.forEach { movie ->
      container.add(widgetFactory.text(movie))
    }
    container.onEndChanges()
    snapshotter.snapshot("Center")
    container.crossAxisAlignment(CrossAxisAlignment.End)
    container.onEndChanges()
    snapshotter.snapshot("FlexEnd")
  }

  @Test fun testColumnWithMainAxisAlignment(
    mainAxisAlignment: MainAxisAlignment = burstValues(
      MainAxisAlignment.Center,
      MainAxisAlignment.SpaceBetween,
      MainAxisAlignment.SpaceAround,
    ),
  ) = runTest {
    val container = flexContainer(FlexDirection.Column)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(CrossAxisAlignment.Start)
    container.mainAxisAlignment(mainAxisAlignment)
    movies.forEach { movie ->
      container.add(widgetFactory.text(movie))
    }
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testContainerWithFixedWidthItems() = runTest {
    val container = flexContainer(FlexDirection.Column)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(CrossAxisAlignment.Start)
    repeat(10) { index ->
      container.add(widgetFactory.text("$index", WidthImpl(50.dp)))
    }
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testContainerWithFixedHeightItems() = runTest {
    val container = flexContainer(FlexDirection.Column)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(CrossAxisAlignment.Start)
    repeat(10) { index ->
      container.add(widgetFactory.text("$index", HeightImpl(50.dp)))
    }
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testContainerWithFixedSizeItems() = runTest {
    val container = flexContainer(FlexDirection.Column)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(CrossAxisAlignment.Start)
    repeat(10) { index ->
      container.add(widgetFactory.text("$index", SizeImpl(50.dp, 50.dp)))
    }
    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testRowWithFixedWidthHasChildWithFixedHeight() = runTest {
    val container = flexContainer(FlexDirection.Row).apply {
      crossAxisAlignment(CrossAxisAlignment.Start)
      modifier = WidthImpl(200.dp)
      width(Constraint.Fill)
      height(Constraint.Fill)
    }

    widgetFactory.text("A ".repeat(10)).apply {
      modifier = HeightImpl(50.dp)
      container.children.insert(0, this)
    }

    widgetFactory.text("B ".repeat(100)).apply {
      container.children.insert(1, this)
    }

    container.onEndChanges()
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testChildWithUpdatedProperty() = runTest {
    val container = flexContainer(FlexDirection.Column)
    val snapshotter = snapshotterFactory(container.value)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(CrossAxisAlignment.Start)
    val widget = widgetFactory.text("")
    container.add(widget)
    container.onEndChanges()
    snapshotter.snapshot("initial")
    widget.text(movies.first())
    container.onEndChanges()
    snapshotter.snapshot("updated")
  }

  @Test fun testColumnThenRow() = runTest {
    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(widgetFactory.text("first (grow 1.0)", GrowImpl(1.0).then(MarginImpl(5.dp))))
        add(widgetFactory.text("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(widgetFactory.text("first (grow 1.0)", GrowImpl(1.0).then(MarginImpl(5.dp))))
        add(widgetFactory.text("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(widgetFactory.text("first (grow 0.0)", GrowImpl(0.0).then(MarginImpl(5.dp))))
        add(widgetFactory.text("second (grow 1.0)", GrowImpl(1.0).then(MarginImpl(5.dp))))
      },
    )

    snapshotterFactory(column.value).snapshot()
  }

  /** This test demonstrates that margins are lost unless `shrink(1.0)` is added. */
  @Test fun testRowMargins() = runTest {
    val column = flexContainer(FlexDirection.Column).apply {
      width(Constraint.Fill)
      height(Constraint.Fill)
    }

    column.add(widgetFactory.text("All rows have a 100 px margin on the right!"))

    column.add(widgetFactory.text("1 element + no shrink:"))
    column.add(
      flexContainer(FlexDirection.Row).apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
        margin(Margin(end = 100.dp))
        add(widgetFactory.text("x ".repeat(100), GrowImpl(1.0)))
      },
    )

    column.add(widgetFactory.text("1 element + shrink:"))
    column.add(
      flexContainer(FlexDirection.Row).apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
        margin(Margin(end = 100.dp))
        add(widgetFactory.text("x ".repeat(100), GrowImpl(1.0).then(ShrinkImpl(1.0))))
      },
    )

    column.add(widgetFactory.text("2 elements + no shrink:"))
    column.add(
      flexContainer(FlexDirection.Row).apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
        margin(Margin(end = 100.dp))
        add(widgetFactory.text("x ".repeat(100), GrowImpl(1.0)))
        add(widgetFactory.text("abcdef", MarginImpl(Margin(start = 10.dp))))
      },
    )

    column.add(widgetFactory.text("2 elements + shrink:"))
    column.add(
      flexContainer(FlexDirection.Row).apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
        margin(Margin(end = 100.dp))
        add(widgetFactory.text("x ".repeat(100), GrowImpl(1.0).then(ShrinkImpl(1.0))))
        add(widgetFactory.text("abcdef", MarginImpl(Margin(start = 10.dp))))
      },
    )

    snapshotterFactory(column.value).snapshot()
  }

  @Test fun testDynamicElementUpdates() = runTest {
    val container = flexContainer(FlexDirection.Column)
    val snapshotter = snapshotterFactory(container.value)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.add(widgetFactory.text("A"))
    container.add(widgetFactory.text("B"))
    container.add(widgetFactory.text("D"))
    container.add(widgetFactory.text("E"))

    container.onEndChanges()
    snapshotter.snapshot("ABDE")

    container.addAt(index = 2, widget = widgetFactory.text("C"))
    container.onEndChanges()
    snapshotter.snapshot("ABCDE")

    container.removeAt(index = 0)
    container.onEndChanges()
    snapshotter.snapshot("BCDE")
  }

  @Test fun testDynamicContainerSize() = runTest {
    val parent = column().apply {
      width(Constraint.Fill)
      height(Constraint.Fill)
    }
    val snapshotter = snapshotterFactory(parent.value)

    parent.children.insert(
      0,
      flexContainer(FlexDirection.Column).apply {
        modifier = Modifier
          .then(GrowImpl(1.0))
          .then(HorizontalAlignmentImpl(CrossAxisAlignment.Stretch))
          .then(VerticalAlignmentImpl(CrossAxisAlignment.Stretch))
        width(Constraint.Fill)
        mainAxisAlignment(MainAxisAlignment.SpaceBetween)
        add(
          widgetFactory.text(
            "A",
            GrowImpl(1.0).then(CrossAxisAlignmentImpl(CrossAxisAlignment.Start)),
          ),
        )
        add(
          widgetFactory.text(
            "B",
            GrowImpl(1.0).then(CrossAxisAlignmentImpl(CrossAxisAlignment.End)),
          ),
        )
      },
    )

    parent.children.insert(
      1,
      flexContainer(FlexDirection.Column).apply {
        modifier = Modifier
          .then(GrowImpl(1.0))
          .then(HorizontalAlignmentImpl(CrossAxisAlignment.Stretch))
          .then(VerticalAlignmentImpl(CrossAxisAlignment.Stretch))
        width(Constraint.Fill)
        mainAxisAlignment(MainAxisAlignment.SpaceBetween)
        add(
          widgetFactory.text(
            "C",
            GrowImpl(1.0)
              .then(CrossAxisAlignmentImpl(CrossAxisAlignment.Start)),
          ),
        )
        add(
          widgetFactory.text(
            "D",
            GrowImpl(1.0).then(CrossAxisAlignmentImpl(CrossAxisAlignment.End)),
          ),
        )
      },
    )

    snapshotter.snapshot("both")

    parent.children.remove(index = 1, count = 1)
    snapshotter.snapshot("single")
  }

  @Test fun testFlexDistributesWeightEqually() = runTest {
    val container = flexContainer(FlexDirection.Row)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.add(widgetFactory.text("REALLY LONG TEXT", FlexImpl(1.0)))
    container.add(widgetFactory.text("SHORTER TEXT", FlexImpl(1.0)))
    container.add(widgetFactory.text("A", FlexImpl(1.0)))
    container.add(widgetFactory.text("LINE1\nLINE2\nLINE3", FlexImpl(1.0)))
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testFlexDistributesWeightUnequally() = runTest {
    val container = flexContainer(FlexDirection.Row)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.add(widgetFactory.text("REALLY LONG TEXT", FlexImpl(3.0)))
    container.add(widgetFactory.text("SHORTER TEXT", FlexImpl(1.0)))
    container.add(widgetFactory.text("A", FlexImpl(1.0)))
    container.add(widgetFactory.text("LINE1\nLINE2\nLINE3", FlexImpl(1.0)))
    snapshotterFactory(container.value).snapshot()
  }

  @Test fun testNestedColumnsWithFlex() = runTest {
    val outerContainer = flexContainer(FlexDirection.Column)
    outerContainer.width(Constraint.Fill)
    outerContainer.height(Constraint.Fill)
    outerContainer.crossAxisAlignment(CrossAxisAlignment.Center)

    val innerContainer1 = flexContainer(FlexDirection.Column)
    innerContainer1.width(Constraint.Fill)
    innerContainer1.crossAxisAlignment(CrossAxisAlignment.Center)
    innerContainer1.add(widgetFactory.text("INNER CONTAINER 1 TEXT 1"))
    innerContainer1.add(widgetFactory.text("INNER CONTAINER 1 TEXT 2"))

    val innerContainer2 = flexContainer(FlexDirection.Column)
    innerContainer2.width(Constraint.Fill)
    innerContainer2.crossAxisAlignment(CrossAxisAlignment.Center)
    innerContainer2.mainAxisAlignment(MainAxisAlignment.Center)
    innerContainer2.margin(Margin(bottom = 24.dp))
    innerContainer1.add(widgetFactory.text("INNER CONTAINER 2 TEXT 1"))
    innerContainer1.add(widgetFactory.text("INNER CONTAINER 2 TEXT 2"))

    outerContainer.add(innerContainer1)
    outerContainer.add(innerContainer2)
    innerContainer2.modifier = Modifier.then(FlexImpl(1.0))
    outerContainer.children.onModifierUpdated(1, innerContainer2)
    snapshotterFactory(outerContainer.value).snapshot()
  }

  @Test fun testContainerWithChildrenModifierChanges(
    flexDirection: FlexDirection = burstValues(FlexDirection.Row, FlexDirection.Column),
  ) = runTest {
    val container = flexContainer(flexDirection)
    val snapshotter = snapshotterFactory(container.value)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)

    val first = widgetFactory.text(longText(), backgroundColor = Red)
    first.modifier = MarginImpl(30.dp)

    container.add(first)
    container.add(widgetFactory.text(mediumText(), backgroundColor = Green))
    container.add(widgetFactory.text(shortText(), backgroundColor = Blue))
    container.onEndChanges()
    snapshotter.snapshot("Margin")
    first.modifier = Modifier
    container.children.onModifierUpdated(0, first)
    container.onEndChanges()
    snapshotter.snapshot("Empty")
  }

  @Test fun testContainerMarginChanges(
    flexDirection: FlexDirection = burstValues(FlexDirection.Column, FlexDirection.Row),
  ) = runTest {
    val container = flexContainer(flexDirection)
    val snapshotter = snapshotterFactory(container.value)

    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(CrossAxisAlignment.Stretch)
    container.mainAxisAlignment(MainAxisAlignment.SpaceBetween)

    container.add(widgetFactory.text(shortText(), backgroundColor = Red))
    container.add(widgetFactory.text(shortText(), backgroundColor = Green))
    container.margin(Margin.Zero)
    container.onEndChanges()
    snapshotter.snapshot("Zero")

    container.margin(Margin(10.dp, 20.dp, 30.dp, 40.dp))
    container.onEndChanges()
    snapshotter.snapshot("Nonzero")
  }

  /** The view shouldn't crash if its displayed after being detached. */
  @Test fun testLayoutAfterDetach() = runTest {
    val container = flexContainer(FlexDirection.Column).apply {
      width(Constraint.Fill)
      height(Constraint.Fill)
    }
    val snapshotter = snapshotterFactory(container.value)

    // Render before calling detach().
    container.children.insert(0, widgetFactory.text(mediumText(), MarginImpl(10.dp), Green))
    container.children.insert(1, widgetFactory.text(shortText(), MarginImpl(0.dp), Blue))
    container.onEndChanges()
    snapshotter.snapshot("Before")

    // Detach after changes are applied but before they're rendered.
    container.children.insert(0, widgetFactory.text(longText(), MarginImpl(20.dp), Red))
    container.onEndChanges()
    container.children.detach()
    snapshotter.snapshot("After")
  }

  @Test fun testOnScrollListener() = runTest {
    var scrolled = false
    val container = flexContainer(FlexDirection.Column).apply {
      width(Constraint.Fill)
      height(Constraint.Fill)
      overflow(Overflow.Scroll)
      onScroll {
        scrolled = true
      }
    }

    container.scroll(Px(1000.0))

    snapshotterFactory(container.value).snapshot()

    assertTrue(scrolled)
  }

  /**
   * Confirm that we don't perform unnecessary measurements of unchanged views.
   *
   * This creates a 3-element layout where each widgets' dimensions are independent. Then it
   * changes one of the widgets' and confirms that only that widget is measured.
   */
  @Test fun testLayoutIsIncremental() = runTest {
    val container = flexContainer(FlexDirection.Column)
    val snapshotter = snapshotterFactory(container.value)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(CrossAxisAlignment.Start)

    val a = widgetFactory.text("A")
      .apply { modifier = HeightImpl(100.dp) }
      .also { container.add(it) }
    val b = widgetFactory.text("B")
      .apply { modifier = HeightImpl(100.dp) }
      .also { container.add(it) }
    val c = widgetFactory.text("C")
      .apply { modifier = HeightImpl(100.dp) }
      .also { container.add(it) }
    container.onEndChanges()
    snapshotter.snapshot("v1")
    val aMeasureCountV1 = a.measureCount
    val bMeasureCountV1 = b.measureCount
    val cMeasureCountV1 = c.measureCount

    b.text("B v2")
    snapshotter.snapshot("v2")
    val aMeasureCountV2 = a.measureCount
    val bMeasureCountV2 = b.measureCount
    val cMeasureCountV2 = c.measureCount

    // Only 'b' is measured again. Except for UIViewLazyList which measures more.
    if (!viewMeasurementIsImpreciseAfterAnItemSizeChanges) {
      assertEquals(aMeasureCountV1, aMeasureCountV2)
      assertTrue(bMeasureCountV1 <= bMeasureCountV2)
      assertEquals(cMeasureCountV1, cMeasureCountV2)
    }

    snapshotter.snapshot("v3")
    val aMeasureCountV3 = a.measureCount
    val bMeasureCountV3 = b.measureCount
    val cMeasureCountV3 = c.measureCount

    // Nothing is measured again.
    assertEquals(aMeasureCountV2, aMeasureCountV3)
    assertEquals(bMeasureCountV2, bMeasureCountV3)
    assertEquals(cMeasureCountV2, cMeasureCountV3)
  }

  @Test fun testRecursiveLayoutIsIncremental() = runTest {
    val container = flexContainer(FlexDirection.Column)
    val snapshotter = snapshotterFactory(container.value)
    container.width(Constraint.Fill)
    container.height(Constraint.Fill)
    container.crossAxisAlignment(CrossAxisAlignment.Start)

    val rowA = row()
      .apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
      }
      .also { container.add(it) }
    val rowB = row()
      .apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
      }
      .also { container.add(it) }
    val rowC = row()
      .apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
      }
      .also { container.add(it) }
    val a = widgetFactory.text("A")
      .apply { modifier = HeightImpl(100.dp) }
      .also { rowA.children.insert(0, it) }
    val b = widgetFactory.text("B")
      .apply { modifier = HeightImpl(100.dp) }
      .also { rowB.children.insert(0, it) }
    val c = widgetFactory.text("C")
      .apply { modifier = HeightImpl(100.dp) }
      .also { rowC.children.insert(0, it) }
    container.onEndChanges()
    snapshotter.snapshot("v1")
    val aMeasureCountV1 = a.measureCount
    val bMeasureCountV1 = b.measureCount
    val cMeasureCountV1 = c.measureCount

    b.text("B v2")
    snapshotter.snapshot("v2")
    val aMeasureCountV2 = a.measureCount
    val bMeasureCountV2 = b.measureCount
    val cMeasureCountV2 = c.measureCount

    // Only 'b' is measured again.
    assertEquals(aMeasureCountV1, aMeasureCountV2)
    assertTrue(bMeasureCountV1 <= bMeasureCountV2)
    assertEquals(cMeasureCountV1, cMeasureCountV2)

    snapshotter.snapshot("v3")
    val aMeasureCountV3 = a.measureCount
    val bMeasureCountV3 = b.measureCount
    val cMeasureCountV3 = c.measureCount

    // Nothing is measured again.
    assertEquals(aMeasureCountV2, aMeasureCountV3)
    assertEquals(bMeasureCountV2, bMeasureCountV3)
    assertEquals(cMeasureCountV2, cMeasureCountV3)
  }

  /** Confirm that child element size changes propagate up the view hierarchy. */
  @Test fun testRecursiveLayoutHandlesResizes() = runTest {
    val column = flexContainer(FlexDirection.Column)
      .apply {
        width(Constraint.Fill)
        height(Constraint.Fill)
        crossAxisAlignment(CrossAxisAlignment.Stretch)
      }
    val snapshotter = snapshotterFactory(column.value)

    val rowA = row()
      .apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
      }
      .also { column.add(it) }

    val rowA1 = widgetFactory.text(
      text = "A1 ".repeat(50),
      modifier = Modifier
        .then(FlexImpl(1.0))
        .then(HorizontalAlignmentImpl(CrossAxisAlignment.Stretch))
        .then(VerticalAlignmentImpl(CrossAxisAlignment.Stretch)),
    ).also { rowA.children.insert(0, it) }
    val rowA2 = widgetFactory.text(
      text = "A-TWO ".repeat(50),
      modifier = Modifier
        .then(FlexImpl(1.0))
        .then(HorizontalAlignmentImpl(CrossAxisAlignment.Stretch))
        .then(VerticalAlignmentImpl(CrossAxisAlignment.Stretch)),
    ).also { rowA.children.insert(1, it) }

    val rowB = widgetFactory.text("B1 ".repeat(5))
      .apply {
        modifier = Modifier
          .then(HorizontalAlignmentImpl(CrossAxisAlignment.Center))
      }
      .also { column.add(it) }
    column.onEndChanges()
    snapshotter.snapshot("v1")

    rowA1.text("A1 ".repeat(5))
    rowA2.text("A-TWO ".repeat(5))
    snapshotter.snapshot("v2")
  }

  @Test fun testLayoutHandlesChildResizes() = runTest {
    val column = flexContainer(FlexDirection.Column)
      .apply {
        width(Constraint.Fill)
        height(Constraint.Fill)
        crossAxisAlignment(CrossAxisAlignment.Stretch)
      }
    val snapshotter = snapshotterFactory(column.value)

    val row0 = widgetFactory.color(Red, 100.dp, 100.dp)
    column.add(row0)

    val row1 = widgetFactory.color(Green, 80.dp, 80.dp)
    column.add(row1)

    val row2 = widgetFactory.color(Blue, 60.dp, 60.dp)
    column.add(row2)

    val row3 = widgetFactory.color(Red, 40.dp, 40.dp)
    column.add(row3)

    column.onEndChanges()
    snapshotter.snapshot("v1")

    row0.height(40.dp)
    row0.width(40.dp)
    row1.height(60.dp)
    row1.width(60.dp)
    row2.height(80.dp)
    row2.width(80.dp)
    row3.height(100.dp)
    row3.width(100.dp)

    snapshotter.snapshot("v2")
  }

  /**
   * When a child widget's intrinsic size won't fit in the available space, what happens? We can
   * either let it have its requested size anyway (and overrun the available space) or we confine it
   * to the space available.
   */
  @Test fun testChildIsConstrainedToParentWidth() = runTest {
    // Wrap in a parent column to let us configure an exact width for our subject flex container.
    // Otherwise we're relying on the platform-specific snapshot library's unspecified frame width.
    val fullWidthParent = column().apply {
      width(Constraint.Fill)
      height(Constraint.Fill)
    }

    flexContainer(FlexDirection.Column)
      .apply {
        width(Constraint.Fill)
        modifier = WidthImpl(25.dp)
        add(widgetFactory.text("ok")) // This is under 25.dp in width.
        add(widgetFactory.text("1 2 3 4")) // Each character is under 25.dp in width.
        onEndChanges()
      }
      .also { fullWidthParent.children.insert(0, it) }

    flexContainer(FlexDirection.Column)
      .apply {
        width(Constraint.Fill)
        modifier = WidthImpl(25.dp)
        add(widgetFactory.text("overflows parent")) // This is over 25.dp in width.
        add(widgetFactory.text("1 2 3 4")) // Each character is under 25.dp in width.
        onEndChanges()
      }
      .also { fullWidthParent.children.insert(1, it) }

    snapshotterFactory(fullWidthParent.value).snapshot()
  }

  /**
   * We were incorrectly collapsing the dimensions of the widget.
   * https://github.com/cashapp/redwood/issues/2018
   */
  @Test fun testWidgetWithFlexModifierNestedInRowAndColumn() = runTest {
    val root = flexContainer(FlexDirection.Column).apply {
      width(Constraint.Fill)
      height(Constraint.Fill)
      margin(Margin(top = 24.dp))
      modifier = Modifier
    }

    val rootChild0 = row().apply {
      modifier = FlexImpl(1.0)
      width(Constraint.Fill)
      horizontalAlignment(MainAxisAlignment.Center)
      root.children.insert(0, this)
    }

    val rootChild0Child0 = column().apply {
      width(Constraint.Fill)
      height(Constraint.Fill)
      horizontalAlignment(CrossAxisAlignment.Stretch)
      modifier = Modifier
        .then(MarginImpl(Margin(start = 24.dp, end = 24.dp)))
        .then(FlexImpl(1.0))
      rootChild0.children.insert(0, this)
    }

    val rootChild0Child0Child0 = spacer().apply {
      width(48.dp)
      height(48.dp)
      rootChild0Child0.children.insert(0, this)
    }

    snapshotterFactory(root.value).snapshot()
  }

  /**
   * CrossAxisAlignment.Start forces child to wrap its size on Android
   * https://github.com/cashapp/redwood/issues/2093
   */
  @Test fun testCrossAxisAlignmentStart() = runTest {
    val root = flexContainer(FlexDirection.Column).apply {
      width(Constraint.Fill)
      crossAxisAlignment(CrossAxisAlignment.Start)
    }

    val row = row().apply {
      width(Constraint.Fill)
      horizontalAlignment(MainAxisAlignment.SpaceBetween)
      root.add(this)
    }

    row.children.insert(0, widgetFactory.text("Something"))
    row.children.insert(1, widgetFactory.text("Something else"))

    snapshotterFactory(root.value).snapshot()
  }

  /**
   * Text not wrapping inside a row.
   * https://github.com/cashapp/redwood/issues/2011
   */
  @Test fun testTextWrapsInsideRow() = runTest {
    val root = flexContainer(FlexDirection.Row)

    root.add(
      widgetFactory.text(
        "This is a long piece of text that will wrap the screen. ".repeat(3),
      ),
    )

    snapshotterFactory(root.value).snapshot()
  }

  @Test fun testIntrinsicContentSizeWhenSubviewsWrap() = runTest {
    val fullWidthParent = widgetFactory.column()

    flexContainer(FlexDirection.Column)
      .apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
        margin(Margin(horizontal = 30.dp))
        add(widgetFactory.text("A ".repeat(50)))
        add(widgetFactory.text("B ".repeat(50)))
        onEndChanges()
      }
      .also { fullWidthParent.add(it.value) }

    flexContainer(FlexDirection.Column)
      .apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
        margin(Margin(horizontal = 40.dp))
        add(widgetFactory.text("C ".repeat(50)))
        add(widgetFactory.text("D ".repeat(50)))
        onEndChanges()
      }
      .also { fullWidthParent.add(it.value) }

    flexContainer(FlexDirection.Column)
      .apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
        margin(Margin(horizontal = 50.dp))
        add(widgetFactory.text("E ".repeat(50)))
        add(widgetFactory.text("F ".repeat(50)))
        onEndChanges()
      }
      .also { fullWidthParent.add(it.value) }

    val scrollWrapper = widgetFactory.scrollWrapper()
    scrollWrapper.content = fullWidthParent.value
    snapshotterFactory(scrollWrapper.value).snapshot(scrolling = true)
  }

  @Test fun testIntrinsicContentSizeWhenSubviewsRequireScrolling() = runTest {
    val column = flexContainer(FlexDirection.Column)
      .apply {
        width(Constraint.Fill)
        height(Constraint.Wrap)
        margin(Margin(horizontal = 50.dp))
        add(widgetFactory.text("AAAAA BBBB CCC DD E ".repeat(50)))
        add(widgetFactory.text("FFFFF GGGG HHH II J ".repeat(50)))
        onEndChanges()
      }

    val scrollWrapper = widgetFactory.scrollWrapper()
    scrollWrapper.content = column.value
    snapshotterFactory(scrollWrapper.value).snapshot(scrolling = true)
  }

  /**
   * We had a bug where content would shrink to its minimum required size with [Overflow.Scroll],
   * even if the enclosing container didn't require that.
   */
  @Test fun testFillAndOverflowScroll() = runTest {
    val column = flexContainer(FlexDirection.Column)
      .apply {
        width(Constraint.Fill)
        height(Constraint.Fill)
        overflow(Overflow.Scroll)
        crossAxisAlignment(CrossAxisAlignment.Center)
      }

    column.add(widgetFactory.text("top"))

    column.add(
      flexContainer(FlexDirection.Column)
        .apply {
          modifier = FlexImpl(1.0)
          width(Constraint.Fill)
          height(Constraint.Fill)
          crossAxisAlignment(CrossAxisAlignment.Center)
          mainAxisAlignment(MainAxisAlignment.Center)
          add(widgetFactory.text("middle"))
          onEndChanges()
        },
    )

    column.add(widgetFactory.text("bottom"))
    column.onEndChanges()

    snapshotterFactory(column.value).snapshot()
  }

  @Test
  fun testFlexWithWrappingChild() = runTest {
    val row = row().apply {
      width(Constraint.Fill)
    }

    row.children.insert(
      row.children.widgets.size,
      widgetFactory.text().apply {
        text("A")
        bgColor(Blue)
      },
    )

    row.children.insert(
      row.children.widgets.size,
      widgetFactory.text().apply {
        modifier = FlexImpl(1.0)
        text("B ".repeat(100))
        bgColor(Red)
      },
    )

    snapshotterFactory(row.value).snapshot()
  }

  @Test
  fun testFlexWithChildContainingWrappingChild() = runTest {
    val row = row().apply {
      width(Constraint.Fill)
    }

    row.children.insert(
      row.children.widgets.size,
      widgetFactory.text().apply {
        text("A")
        bgColor(Blue)
      },
    )

    val column = column().apply {
      modifier = FlexImpl(1.0)
    }

    row.children.insert(row.children.widgets.size, column)

    column.children.insert(
      column.children.widgets.size,
      widgetFactory.text().apply {
        text("B ".repeat(100))
        bgColor(Red)
      },
    )

    snapshotterFactory(row.value).snapshot()
  }

  /**
   * We had a bug where putting `flex(1.0)` on a child of a column with `height(Constraint.Wrap)`
   * would cause that child to get a height of 0.
   *
   * https://github.com/cashapp/redwood/issues/2753
   */
  @Test
  fun testFlexOnChildOfWrappingColumn() = runTest {
    val root = row().apply {
      width(Constraint.Fill)
      height(Constraint.Fill)
    }

    val fixedSize = row().apply {
      width(Constraint.Fill)
      height(Constraint.Fill)
      modifier = SizeImpl(width = 300.dp, height = 500.dp)
    }.also {
      root.children.insert(0, it)
    }

    val column = column().apply {
      width(Constraint.Fill)
    }.also {
      fixedSize.children.insert(0, it)
    }

    widgetFactory.text("hello").apply {
      modifier = FlexImpl(1.0)
      bgColor(Blue)
    }.also {
      column.children.insert(0, it)
    }

    snapshotterFactory(root.value).snapshot()
  }
}

interface TestFlexContainer<T : Any> :
  Widget<T>,
  ChangeListener {
  override val value: T
  val children: Widget.Children<T>
  fun width(width: Constraint)
  fun height(height: Constraint)
  fun crossAxisAlignment(crossAxisAlignment: CrossAxisAlignment)
  fun mainAxisAlignment(mainAxisAlignment: MainAxisAlignment)
  fun margin(margin: Margin)
  fun overflow(overflow: Overflow)
  fun onScroll(onScroll: ((Px) -> Unit)?)
  fun scroll(offset: Px)
}

private val movies = listOf(
  "The Godfather",
  "The Dark Knight",
  "12 Angry Men",
  "Schindler's List",
  "Pulp Fiction",
  "Forrest Gump",
  "Fight Club",
  "Inception",
  "The Matrix",
  "Goodfellas",
  "Se7en",
  "Seven Samurai",
)