Skip to content

Commit

Permalink
Introduce helper function to the test scope to iterate through root c…
Browse files Browse the repository at this point in the history 
…hildren
  • Loading branch information
@Schahen
Schahen committed Jul 20, 2021
1 parent 90cecde commit ef56aba
Show file tree
Hide file tree
Showing 14 changed files with 375 additions and 378 deletions.
9 changes: 6 additions & 3 deletions web/core/src/jsTest/kotlin/TestUtils.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.MainScope
import kotlinx.coroutines.promise
import kotlinx.dom.clear
import org.w3c.dom.HTMLElement
import org.w3c.dom.MutationObserver
import org.w3c.dom.MutationObserverInit
import org.w3c.dom.*
import kotlin.coroutines.resume
import kotlin.coroutines.suspendCoroutine

Expand All @@ -30,6 +28,11 @@ class TestScope : CoroutineScope by testScope {
}
}


private val childrenIterator = root.children.asList().listIterator()
fun nextChild() = childrenIterator.next() as HTMLElement
fun currentChild() = root.children[childrenIterator.previousIndex()] as HTMLElement

suspend fun waitChanges() {
waitForChanges(root)
}
Expand Down
54 changes: 27 additions & 27 deletions web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ class CSSBackgroundTests {
}})
}

assertEquals("rgb(0, 128, 0)", window.getComputedStyle(root.children[0] as HTMLElement).backgroundColor)
assertEquals("rgba(0, 129, 0, 0.2)", window.getComputedStyle(root.children[1] as HTMLElement).backgroundColor)
assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
assertEquals("rgba(0, 129, 0, 0.2)", window.getComputedStyle(nextChild()).backgroundColor)
}

@Test
Expand All @@ -44,9 +44,9 @@ class CSSBackgroundTests {
}})
}

assertEquals("scroll", window.getComputedStyle(root.children[0] as HTMLElement).backgroundAttachment)
assertEquals("fixed", window.getComputedStyle(root.children[1] as HTMLElement).backgroundAttachment)
assertEquals("local", window.getComputedStyle(root.children[2] as HTMLElement).backgroundAttachment)
assertEquals("scroll", window.getComputedStyle(nextChild()).backgroundAttachment)
assertEquals("fixed", window.getComputedStyle(nextChild()).backgroundAttachment)
assertEquals("local", window.getComputedStyle(nextChild()).backgroundAttachment)
}

@Test
Expand All @@ -63,9 +63,9 @@ class CSSBackgroundTests {
}})
}

assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", window.getComputedStyle(root.children[0] as HTMLElement).backgroundImage)
assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")", window.getComputedStyle(root.children[1] as HTMLElement).backgroundImage)
assertEquals("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))", window.getComputedStyle(root.children[2] as HTMLElement).backgroundImage)
assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", window.getComputedStyle(nextChild()).backgroundImage)
assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")", window.getComputedStyle(nextChild()).backgroundImage)
assertEquals("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))", window.getComputedStyle(nextChild()).backgroundImage)
}

@Test
Expand All @@ -85,10 +85,10 @@ class CSSBackgroundTests {
}})
}

assertEquals("50% 0%", window.getComputedStyle(root.children[0] as HTMLElement).backgroundPosition)
assertEquals("0% 50%", window.getComputedStyle(root.children[1] as HTMLElement).backgroundPosition)
assertEquals("50% 50%", window.getComputedStyle(root.children[2] as HTMLElement).backgroundPosition)
assertEquals("25% 75%", window.getComputedStyle(root.children[3] as HTMLElement).backgroundPosition)
assertEquals("50% 0%", window.getComputedStyle(nextChild()).backgroundPosition)
assertEquals("0% 50%", window.getComputedStyle(nextChild()).backgroundPosition)
assertEquals("50% 50%", window.getComputedStyle(nextChild()).backgroundPosition)
assertEquals("25% 75%", window.getComputedStyle(nextChild()).backgroundPosition)
}

@Test
Expand All @@ -99,7 +99,7 @@ class CSSBackgroundTests {
}})
}

assertEquals("space repeat", window.getComputedStyle(root.children[0] as HTMLElement).backgroundRepeat)
assertEquals("space repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
}


Expand All @@ -118,9 +118,9 @@ class CSSBackgroundTests {
}


assertEquals("border-box", window.getComputedStyle(root.children[0] as HTMLElement).backgroundClip)
assertEquals("padding-box", window.getComputedStyle(root.children[1] as HTMLElement).backgroundClip)
assertEquals("content-box", window.getComputedStyle(root.children[2] as HTMLElement).backgroundClip)
assertEquals("border-box", window.getComputedStyle(nextChild()).backgroundClip)
assertEquals("padding-box", window.getComputedStyle(nextChild()).backgroundClip)
assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundClip)
}

@Test
Expand All @@ -138,9 +138,9 @@ class CSSBackgroundTests {
}


assertEquals("border-box", window.getComputedStyle(root.children[0] as HTMLElement).backgroundOrigin)
assertEquals("padding-box", window.getComputedStyle(root.children[1] as HTMLElement).backgroundOrigin)
assertEquals("content-box", window.getComputedStyle(root.children[2] as HTMLElement).backgroundOrigin)
assertEquals("border-box", window.getComputedStyle(nextChild()).backgroundOrigin)
assertEquals("padding-box", window.getComputedStyle(nextChild()).backgroundOrigin)
assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundOrigin)
}


Expand All @@ -161,10 +161,10 @@ class CSSBackgroundTests {
}})
}

assertEquals("contain", window.getComputedStyle(root.children[0] as HTMLElement).backgroundSize)
assertEquals("cover", window.getComputedStyle(root.children[1] as HTMLElement).backgroundSize)
assertEquals("50%", window.getComputedStyle(root.children[2] as HTMLElement).backgroundSize)
assertEquals("auto 50px", window.getComputedStyle(root.children[3] as HTMLElement).backgroundSize)
assertEquals("contain", window.getComputedStyle(nextChild()).backgroundSize)
assertEquals("cover", window.getComputedStyle(nextChild()).backgroundSize)
assertEquals("50%", window.getComputedStyle(nextChild()).backgroundSize)
assertEquals("auto 50px", window.getComputedStyle(nextChild()).backgroundSize)
}

@Test
Expand All @@ -181,10 +181,10 @@ class CSSBackgroundTests {
}})
}

assertEquals("rgb(0, 128, 0)", window.getComputedStyle(root.children[0] as HTMLElement).backgroundColor)
assertEquals("content-box", window.getComputedStyle(root.children[1] as HTMLElement).backgroundOrigin)
assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", window.getComputedStyle(root.children[1] as HTMLElement).backgroundImage)
assertEquals("no-repeat", window.getComputedStyle(root.children[2] as HTMLElement).backgroundRepeat)
assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundOrigin)
assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", window.getComputedStyle(currentChild()).backgroundImage)
assertEquals("no-repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
}

}
25 changes: 11 additions & 14 deletions web/core/src/jsTest/kotlin/css/CSSBorderTests.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,9 @@

package org.jetbrains.compose.web.core.tests.css

import kotlinx.browser.window
import org.jetbrains.compose.web.core.tests.runTest
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div
import org.w3c.dom.HTMLElement
import org.w3c.dom.get
import kotlin.test.Test
import kotlin.test.assertEquals

Expand All @@ -23,8 +20,8 @@ class CSSBorderTests {
Div({ style { border(3.px, color = Color("green")) } })
}

assertEquals("1px solid red", (root.children[0] as HTMLElement).style.border)
(root.children[1] as HTMLElement).let { el ->
assertEquals("1px solid red", (nextChild()).style.border)
(nextChild()).let { el ->
assertEquals("green", el.style.getPropertyValue("border-color"))
assertEquals("3px", el.style.getPropertyValue("border-width"))
}
Expand All @@ -36,7 +33,7 @@ class CSSBorderTests {
Div({ style { border(3.px, LineStyle.Dotted, Color("green")) } })
}

assertEquals("3px dotted green", (root.children[0] as HTMLElement).style.border)
assertEquals("3px dotted green", (nextChild()).style.border)
}

@Test
Expand All @@ -48,10 +45,10 @@ class CSSBorderTests {
Div({ style { borderRadius(3.px, 5.px, 4.px, 1.px) } })
}

assertEquals("3px", (root.children[0] as HTMLElement).style.borderRadius)
assertEquals("3px 5px", (root.children[1] as HTMLElement).style.borderRadius)
assertEquals("3px 5px 4px", (root.children[2] as HTMLElement).style.borderRadius)
assertEquals("3px 5px 4px 1px", (root.children[3] as HTMLElement).style.borderRadius)
assertEquals("3px", (nextChild()).style.borderRadius)
assertEquals("3px 5px", (nextChild()).style.borderRadius)
assertEquals("3px 5px 4px", (nextChild()).style.borderRadius)
assertEquals("3px 5px 4px 1px", (nextChild()).style.borderRadius)
}


Expand All @@ -64,9 +61,9 @@ class CSSBorderTests {
Div({ style { borderWidth(3.px, 5.px, 4.px, 2.px) } })
}

assertEquals("2px", (root.children[0] as HTMLElement).style.borderWidth)
assertEquals("3px 7px", (root.children[1] as HTMLElement).style.borderWidth)
assertEquals("3px 5px 4px", (root.children[2] as HTMLElement).style.borderWidth)
assertEquals("3px 5px 4px 2px", (root.children[3] as HTMLElement).style.borderWidth)
assertEquals("2px", (nextChild()).style.borderWidth)
assertEquals("3px 7px", (nextChild()).style.borderWidth)
assertEquals("3px 5px 4px", (nextChild()).style.borderWidth)
assertEquals("3px 5px 4px 2px", (nextChild()).style.borderWidth)
}
}
76 changes: 38 additions & 38 deletions web/core/src/jsTest/kotlin/css/CSSBoxTests.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class CSSBoxTests {
)
}

assertEquals("100px", (root.children[0] as HTMLElement).style.width)
assertEquals("100px", (nextChild()).style.width)
}

@Test
Expand All @@ -44,7 +44,7 @@ class CSSBoxTests {
)
}

assertEquals("90px", (root.children[0] as HTMLElement).style.height)
assertEquals("90px", (nextChild()).style.height)
}

@Test
Expand All @@ -66,8 +66,8 @@ class CSSBoxTests {
)
}

assertEquals("border-box", (root.children[0] as HTMLElement).style.boxSizing)
assertEquals("content-box", (root.children[1] as HTMLElement).style.boxSizing)
assertEquals("border-box", (nextChild()).style.boxSizing)
assertEquals("content-box", (nextChild()).style.boxSizing)
}

@Test
Expand Down Expand Up @@ -110,10 +110,10 @@ class CSSBoxTests {
)
}

assertEquals("thin", (root.children[0] as HTMLElement).style.outlineWidth)
assertEquals("medium", (root.children[1] as HTMLElement).style.outlineWidth)
assertEquals("thick", (root.children[2] as HTMLElement).style.outlineWidth)
assertEquals("8px", (root.children[3] as HTMLElement).style.outlineWidth)
assertEquals("thin", (nextChild()).style.outlineWidth)
assertEquals("medium", (nextChild()).style.outlineWidth)
assertEquals("thick", (nextChild()).style.outlineWidth)
assertEquals("8px", (nextChild()).style.outlineWidth)
assertEquals("0.1em", (root.children[4] as HTMLElement).style.outlineWidth)
}

Expand All @@ -132,8 +132,8 @@ class CSSBoxTests {
})
}

assertEquals("red", (root.children[0] as HTMLElement).style.outlineColor)
assertEquals("rgb(50, 161, 206)", (root.children[1] as HTMLElement).style.outlineColor)
assertEquals("red", (nextChild()).style.outlineColor)
assertEquals("rgb(50, 161, 206)", (nextChild()).style.outlineColor)
}

@Test
Expand All @@ -149,10 +149,10 @@ class CSSBoxTests {
Div({ style { outlineStyle("inset") } })
}

assertEquals("dotted", (root.children[0] as HTMLElement).style.outlineStyle)
assertEquals("dashed", (root.children[1] as HTMLElement).style.outlineStyle)
assertEquals("solid", (root.children[2] as HTMLElement).style.outlineStyle)
assertEquals("double", (root.children[3] as HTMLElement).style.outlineStyle)
assertEquals("dotted", (nextChild()).style.outlineStyle)
assertEquals("dashed", (nextChild()).style.outlineStyle)
assertEquals("solid", (nextChild()).style.outlineStyle)
assertEquals("double", (nextChild()).style.outlineStyle)
assertEquals("groove", (root.children[4] as HTMLElement).style.outlineStyle)
assertEquals("ridge", (root.children[5] as HTMLElement).style.outlineStyle)
assertEquals("outset", (root.children[6] as HTMLElement).style.outlineStyle)
Expand All @@ -165,7 +165,7 @@ class CSSBoxTests {
Div({ style { outline("dotted") } })
}

assertEquals("dotted", (root.children[0] as HTMLElement).style.outlineStyle)
assertEquals("dotted", (nextChild()).style.outlineStyle)
}

@Test
Expand All @@ -176,17 +176,17 @@ class CSSBoxTests {
Div({ style { outline("ridge", 3.px) } })
}

(root.children[0] as HTMLElement).let {
(nextChild()).let {
assertEquals("rgb(255, 102, 102)", it.style.outlineColor)
assertEquals("dashed", it.style.outlineStyle)
}

(root.children[1] as HTMLElement).let {
(nextChild()).let {
assertEquals("inset", it.style.outlineStyle)
assertEquals("thick", it.style.outlineWidth)
}

(root.children[2] as HTMLElement).let {
(nextChild()).let {
assertEquals("ridge", it.style.outlineStyle)
assertEquals("3px", it.style.outlineWidth)
}
Expand All @@ -201,10 +201,10 @@ class CSSBoxTests {
Div({ style { outline("yellow", "inset", 8.px) } })
}

assertEquals("rgb(0, 20, 100) dashed thick", (root.children[0] as HTMLElement).style.outline)
assertEquals("rgb(0, 100, 20) double 4px", (root.children[1] as HTMLElement).style.outline)
assertEquals("red outset thin", (root.children[2] as HTMLElement).style.outline)
assertEquals("yellow inset 8px", (root.children[3] as HTMLElement).style.outline)
assertEquals("rgb(0, 20, 100) dashed thick", (nextChild()).style.outline)
assertEquals("rgb(0, 100, 20) double 4px", (nextChild()).style.outline)
assertEquals("red outset thin", (nextChild()).style.outline)
assertEquals("yellow inset 8px", (nextChild()).style.outline)
}

@Test
Expand All @@ -216,10 +216,10 @@ class CSSBoxTests {
Div({ style { minWidth("min-content") } })
}

assertEquals("3.5em", (root.children[0] as HTMLElement).style.minWidth)
assertEquals("75%", (root.children[1] as HTMLElement).style.minWidth)
assertEquals("max-content", (root.children[2] as HTMLElement).style.minWidth)
assertEquals("min-content", (root.children[3] as HTMLElement).style.minWidth)
assertEquals("3.5em", (nextChild()).style.minWidth)
assertEquals("75%", (nextChild()).style.minWidth)
assertEquals("max-content", (nextChild()).style.minWidth)
assertEquals("min-content", (nextChild()).style.minWidth)
}

@Test
Expand All @@ -231,10 +231,10 @@ class CSSBoxTests {
Div({ style { maxWidth("min-content") } })
}

assertEquals("0.5em", (root.children[0] as HTMLElement).style.maxWidth)
assertEquals("10%", (root.children[1] as HTMLElement).style.maxWidth)
assertEquals("max-content", (root.children[2] as HTMLElement).style.maxWidth)
assertEquals("min-content", (root.children[3] as HTMLElement).style.maxWidth)
assertEquals("0.5em", (nextChild()).style.maxWidth)
assertEquals("10%", (nextChild()).style.maxWidth)
assertEquals("max-content", (nextChild()).style.maxWidth)
assertEquals("min-content", (nextChild()).style.maxWidth)
}

@Test
Expand All @@ -246,10 +246,10 @@ class CSSBoxTests {
Div({ style { minHeight("min-content") } })
}

assertEquals("5px", (root.children[0] as HTMLElement).style.minHeight)
assertEquals("25%", (root.children[1] as HTMLElement).style.minHeight)
assertEquals("max-content", (root.children[2] as HTMLElement).style.minHeight)
assertEquals("min-content", (root.children[3] as HTMLElement).style.minHeight)
assertEquals("5px", (nextChild()).style.minHeight)
assertEquals("25%", (nextChild()).style.minHeight)
assertEquals("max-content", (nextChild()).style.minHeight)
assertEquals("min-content", (nextChild()).style.minHeight)
}

@Test
Expand All @@ -261,9 +261,9 @@ class CSSBoxTests {
Div({ style { maxHeight("min-content") } })
}

assertEquals("15px", (root.children[0] as HTMLElement).style.maxHeight)
assertEquals("35%", (root.children[1] as HTMLElement).style.maxHeight)
assertEquals("max-content", (root.children[2] as HTMLElement).style.maxHeight)
assertEquals("min-content", (root.children[3] as HTMLElement).style.maxHeight)
assertEquals("15px", (nextChild()).style.maxHeight)
assertEquals("35%", (nextChild()).style.maxHeight)
assertEquals("max-content", (nextChild()).style.maxHeight)
assertEquals("min-content", (nextChild()).style.maxHeight)
}
}
2 changes: 1 addition & 1 deletion web/core/src/jsTest/kotlin/css/CSSDisplayTests.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ class CSSDisplayTests {
enumValues.forEachIndexed { index, displayStyle ->
assertEquals(
displayStyle.value,
(root.children[index] as HTMLElement).style.display
(nextChild()).style.display
)
}
}
Expand Down
Loading

0 comments on commit ef56aba

Please sign in to comment.