Browse Source

web: test for media query (#766)

* web: Add a test for media query in style sheet

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
pull/771/head
Oleksandr Karpovich 3 years ago committed by GitHub
parent
commit
3b96c55daa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt
  2. 30
      web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt
  3. 22
      web/integration-core/src/jvmTest/kotlin/org/jetbrains/compose/web/tests/integration/IntegrationTests.kt

2
web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt

@ -12,7 +12,7 @@ private data class CSSUnitValueTyped<out T : CSSUnit>(
override val unit: T
) : CSSSizeValue<T> {
override fun newUnit(value: Float): CSSSizeValue<T> = copy(value = value)
override fun toString() = asString()
override fun toString(): String = asString()
}
operator fun <T : CSSUnit> CSSSizeValue<T>.times(num: Number): CSSSizeValue<T> = newUnit(value * num.toFloat())

30
web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt

@ -4,13 +4,8 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import org.jetbrains.compose.web.css.backgroundColor
import org.jetbrains.compose.web.css.height
import org.jetbrains.compose.web.css.px
import org.jetbrains.compose.web.css.width
import org.jetbrains.compose.web.dom.Button
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.Text
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*
class TestCases1 {
val helloWorldText by testCase {
@ -59,4 +54,25 @@ class TestCases1 {
}
) {}
}
val smallWidthChangesTheTextColor by testCase {
Style(AppStyleSheet)
Span(attrs = {
id("span1")
classes(AppStyleSheet.textClass)
}) {
Text("This a colored text")
}
}
}
private object AppStyleSheet : StyleSheet() {
val textClass by style {
color("black")
media(maxWidth(400.px)) {
self style {
color("red")
}
}
}
}

22
web/integration-core/src/jvmTest/kotlin/org/jetbrains/compose/web/tests/integration/IntegrationTests.kt

@ -6,6 +6,7 @@ import org.jetbrains.compose.web.tests.integration.common.waitTextToBe
import org.junit.jupiter.api.Assertions.assertEquals
import org.junit.jupiter.api.Test
import org.openqa.selenium.By
import org.openqa.selenium.Dimension
import org.openqa.selenium.interactions.Actions
class IntegrationTests : BaseIntegrationTests() {
@ -47,4 +48,25 @@ class IntegrationTests : BaseIntegrationTests() {
actions.moveByOffset(300, 0).perform()
waitTextToBe(textId = "txt", value = "not hovered")
}
@Test
fun `making screen width less than 400px changes the text color`() {
openTestPage("smallWidthChangesTheTextColor")
val initialWindowSize = driver.manage().window().size
try {
val span = driver.findElement(By.id("span1"))
waitTextToBe(textId = "span1", "This a colored text")
driver.manage().window().size = Dimension(1000, 1000)
assertEquals("rgba(0, 0, 0, 1)", span.getCssValue("color"))
driver.manage().window().size = Dimension(300, 300)
waitTextToBe(textId = "span1", "This a colored text")
assertEquals("rgba(255, 0, 0, 1)", span.getCssValue("color"))
} finally {
driver.manage().window().size = initialWindowSize
}
}
}

Loading…
Cancel
Save