From bbec5eaa43c4a87df162eae8fe56d6333cef497f Mon Sep 17 00:00:00 2001
From: Oleksandr Karpovich <a.n.karpovich@gmail.com>
Date: Mon, 25 Oct 2021 10:46:15 +0200
Subject: [PATCH] web: add tests for Css selectors `desc` (#1305)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
---
 .../src/jsTest/kotlin/CssSelectorsTests.kt    | 155 ++++++++++++++++++
 1 file changed, 155 insertions(+)
 create mode 100644 web/core/src/jsTest/kotlin/CssSelectorsTests.kt

diff --git a/web/core/src/jsTest/kotlin/CssSelectorsTests.kt b/web/core/src/jsTest/kotlin/CssSelectorsTests.kt
new file mode 100644
index 0000000000..13167bc1f6
--- /dev/null
+++ b/web/core/src/jsTest/kotlin/CssSelectorsTests.kt
@@ -0,0 +1,155 @@
+package org.jetbrains.compose.web.core.tests
+
+import kotlinx.browser.window
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.dom.P
+import org.jetbrains.compose.web.dom.Span
+import org.jetbrains.compose.web.testutils.runTest
+import org.w3c.dom.HTMLParagraphElement
+import org.w3c.dom.HTMLSpanElement
+import org.w3c.dom.get
+import kotlin.test.Test
+import kotlin.test.assertEquals
+
+class CssSelectorsTests {
+
+    private object TestSimpleDescendantsSelectorStyleSheet: StyleSheet() {
+        val cls1 by style {
+            "p" {
+                color(Color.red)
+            }
+        }
+    }
+
+    @Test
+    fun simpleDescendantsSelectorComputedStyleIsCorrect() = runTest {
+        composition {
+            Style(TestSimpleDescendantsSelectorStyleSheet)
+
+            Div(attrs = {
+                classes(TestSimpleDescendantsSelectorStyleSheet.cls1)
+            }) {
+                P { } // Should be // should be <rgb(255, 0, 0)>
+            }
+
+            P {} // should be <rgb(0, 0, 0)>
+        }
+
+        root.children[1]!!.let { el ->
+            val pEl = el.firstChild as HTMLParagraphElement
+            assertEquals("rgb(255, 0, 0)", window.getComputedStyle(pEl).color)
+        }
+
+        root.children[2]!!.let { el ->
+            val pEl = el
+            assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color)
+        }
+    }
+
+    private object TestSeveralDescendantsSelectorStyleSheet: StyleSheet() {
+        val cls1 by style {
+            "p" {
+                color(Color.red)
+
+                "span" {
+                    color(Color.blue)
+                }
+            }
+            "span" {
+                color(rgb(100, 100, 200))
+            }
+        }
+    }
+
+    @Test
+    fun descendantsSelectorComputedStyleIsCorrect() = runTest {
+        composition {
+            Style(TestSeveralDescendantsSelectorStyleSheet)
+
+            Div(attrs = {
+                classes(TestSeveralDescendantsSelectorStyleSheet.cls1)
+            }) {
+                P {  // should be <rgb(255, 0, 0)>
+                    Span {  }  // should be <rgb(0, 0, 255)>
+                }
+            }
+
+            P { // should be <rgb(0, 0, 0)>
+                Span {  } // should be <rgb(0, 0, 0)>
+            }
+        }
+
+        root.children[1]!!.let { el ->
+            val pEl = el.firstChild as HTMLParagraphElement
+            val spanInPel = pEl.firstChild as HTMLSpanElement
+
+            assertEquals("rgb(255, 0, 0)", window.getComputedStyle(pEl).color)
+            assertEquals("rgb(0, 0, 255)", window.getComputedStyle(spanInPel).color)
+        }
+
+        root.children[2]!!.let { el ->
+            val pEl = el
+            val spanEl = pEl.firstChild as HTMLSpanElement
+
+            assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color)
+            assertEquals("rgb(0, 0, 0)", window.getComputedStyle(spanEl).color)
+        }
+    }
+
+    private object TestDescendantsSelectorOfClassAndOfRoot: StyleSheet() {
+        val cls1 by style {
+            "p" {
+                color(Color.red)
+
+                "span" {
+                    color(Color.blue)
+                }
+            }
+            "span" {
+                color(rgb(100, 100, 200))
+            }
+        }
+    }
+
+    @Test
+    fun descendantsSelectorOfClassAndOfRootComputedStyleAreCorrect() = runTest {
+        composition {
+            Style(TestDescendantsSelectorOfClassAndOfRoot)
+
+            Div(attrs = {
+                classes(TestDescendantsSelectorOfClassAndOfRoot.cls1)
+            }) {
+                P {  // should be <rgb(255, 0, 0)>
+                    Span {  } // should be <rgb(0, 0, 255)>
+                }
+                Span { } // should be <rgb(100, 100, 200)>
+            }
+
+            // Not a desc of "cls1"
+            P { // should be <rgb(0, 0, 0)>
+                Span {  } // should be <rgb(0, 0, 0)>
+            }
+        }
+
+        root.children[1]!!.let { el ->
+            val pEl = el.firstChild as HTMLParagraphElement
+            val spanInPel = pEl.firstChild as HTMLSpanElement
+
+            assertEquals("rgb(255, 0, 0)", window.getComputedStyle(pEl).color)
+            assertEquals("rgb(0, 0, 255)", window.getComputedStyle(spanInPel).color)
+
+
+            val spanInClsEl = el.children[1] as HTMLSpanElement
+            assertEquals("rgb(100, 100, 200)", window.getComputedStyle(spanInClsEl).color)
+        }
+
+        root.children[2]!!.let { el ->
+            val pEl = el
+            val spanEl = pEl.firstChild as HTMLSpanElement
+
+            assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color)
+            assertEquals("rgb(0, 0, 0)", window.getComputedStyle(spanEl).color)
+        }
+    }
+}