Browse Source
* web: Add more tests for the event handlers * web: Inputs refactoring (wip) * web: Add `Options` for `addEventListener` * web: Add basic methods and properties to the SyntheticInputEvent to align it with `org.w3c.dom.events.Event` * web: Add a test for `capture = true` Event Listener Option * web: Update PR to make contain only relevant changes + add specific functions for Inputs * web: Update PR to align with master after rebase Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>pull/822/head
Oleksandr Karpovich
3 years ago
committed by
GitHub
24 changed files with 1367 additions and 150 deletions
@ -0,0 +1,93 @@ |
|||||||
|
/* |
||||||
|
* Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers. |
||||||
|
* Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. |
||||||
|
*/ |
||||||
|
|
||||||
|
package androidx.compose.web.attributes |
||||||
|
|
||||||
|
import org.jetbrains.compose.web.attributes.* |
||||||
|
import org.jetbrains.compose.web.events.GenericWrappedEvent |
||||||
|
import org.jetbrains.compose.web.events.WrappedCheckBoxInputEvent |
||||||
|
import org.jetbrains.compose.web.events.WrappedRadioInputEvent |
||||||
|
import org.jetbrains.compose.web.events.WrappedTextInputEvent |
||||||
|
import org.w3c.dom.HTMLElement |
||||||
|
import org.w3c.dom.HTMLInputElement |
||||||
|
import org.w3c.dom.events.Event |
||||||
|
import org.w3c.dom.events.EventTarget |
||||||
|
|
||||||
|
class SyntheticInputEvent<ValueType, Element : HTMLElement>( |
||||||
|
val value: ValueType, |
||||||
|
val target: Element, |
||||||
|
val nativeEvent: Event |
||||||
|
) { |
||||||
|
|
||||||
|
val bubbles: Boolean = nativeEvent.bubbles |
||||||
|
val cancelable: Boolean = nativeEvent.cancelable |
||||||
|
val composed: Boolean = nativeEvent.composed |
||||||
|
val currentTarget: HTMLElement? = nativeEvent.currentTarget.unsafeCast<HTMLInputElement?>() |
||||||
|
val eventPhase: Short = nativeEvent.eventPhase |
||||||
|
val defaultPrevented: Boolean = nativeEvent.defaultPrevented |
||||||
|
val timestamp: Number = nativeEvent.timeStamp |
||||||
|
val type: String = nativeEvent.type |
||||||
|
val isTrusted: Boolean = nativeEvent.isTrusted |
||||||
|
|
||||||
|
fun preventDefault(): Unit = nativeEvent.preventDefault() |
||||||
|
fun stopPropagation(): Unit = nativeEvent.stopPropagation() |
||||||
|
fun stopImmediatePropagation(): Unit = nativeEvent.stopImmediatePropagation() |
||||||
|
fun composedPath(): Array<EventTarget> = nativeEvent.composedPath() |
||||||
|
} |
||||||
|
|
||||||
|
class InputAttrsBuilder<T>(val inputType: InputType<T>) : AttrsBuilder<HTMLInputElement>() { |
||||||
|
|
||||||
|
fun onInput(options: Options = Options.DEFAULT, listener: (SyntheticInputEvent<T, HTMLInputElement>) -> Unit) { |
||||||
|
addEventListener(INPUT, options) { |
||||||
|
val value = inputType.inputValue(it.nativeEvent) |
||||||
|
listener(SyntheticInputEvent(value, it.nativeEvent.target as HTMLInputElement, it.nativeEvent)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@Deprecated( |
||||||
|
message = "It's not reliable as it can be applied to any input type.", |
||||||
|
replaceWith = ReplaceWith("onInput(options, listener)"), |
||||||
|
level = DeprecationLevel.WARNING |
||||||
|
) |
||||||
|
fun onTextInput(options: Options = Options.DEFAULT, listener: (WrappedTextInputEvent) -> Unit) { |
||||||
|
listeners.add(TextInputEventListener(options, listener)) |
||||||
|
} |
||||||
|
|
||||||
|
@Deprecated( |
||||||
|
message = "It's not reliable as it can be applied to any input type.", |
||||||
|
replaceWith = ReplaceWith("onInput(options, listener)"), |
||||||
|
level = DeprecationLevel.WARNING |
||||||
|
) |
||||||
|
fun onCheckboxInput( |
||||||
|
options: Options = Options.DEFAULT, |
||||||
|
listener: (WrappedCheckBoxInputEvent) -> Unit |
||||||
|
) { |
||||||
|
listeners.add(CheckBoxInputEventListener(options, listener)) |
||||||
|
} |
||||||
|
|
||||||
|
@Deprecated( |
||||||
|
message = "It's not reliable as it can be applied to any input type.", |
||||||
|
replaceWith = ReplaceWith("onInput(options, listener)"), |
||||||
|
level = DeprecationLevel.WARNING |
||||||
|
) |
||||||
|
fun onRadioInput( |
||||||
|
options: Options = Options.DEFAULT, |
||||||
|
listener: (WrappedRadioInputEvent) -> Unit |
||||||
|
) { |
||||||
|
listeners.add(RadioInputEventListener(options, listener)) |
||||||
|
} |
||||||
|
|
||||||
|
@Deprecated( |
||||||
|
message = "It's not reliable as it can be applied to any input type.", |
||||||
|
replaceWith = ReplaceWith("onInput(options, listener)"), |
||||||
|
level = DeprecationLevel.WARNING |
||||||
|
) |
||||||
|
fun onRangeInput( |
||||||
|
options: Options = Options.DEFAULT, |
||||||
|
listener: (GenericWrappedEvent<*>) -> Unit |
||||||
|
) { |
||||||
|
listeners.add(WrappedEventListener(INPUT, options, listener)) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
/* |
||||||
|
* Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers. |
||||||
|
* Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. |
||||||
|
*/ |
||||||
|
|
||||||
|
package androidx.compose.web.attributes |
||||||
|
|
||||||
|
import org.jetbrains.compose.web.attributes.* |
||||||
|
import org.jetbrains.compose.web.events.WrappedTextInputEvent |
||||||
|
import org.w3c.dom.HTMLTextAreaElement |
||||||
|
|
||||||
|
class TextAreaAttrsBuilder : AttrsBuilder<HTMLTextAreaElement>() { |
||||||
|
|
||||||
|
fun onInput( |
||||||
|
options: Options = Options.DEFAULT, |
||||||
|
listener: (SyntheticInputEvent<String, HTMLTextAreaElement>) -> Unit |
||||||
|
) { |
||||||
|
addEventListener(INPUT, options) { |
||||||
|
val text = it.nativeEvent.target.asDynamic().value.unsafeCast<String>() |
||||||
|
listener(SyntheticInputEvent(text, it.nativeEvent.target as HTMLTextAreaElement, it.nativeEvent)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@Deprecated( |
||||||
|
message = "It's not reliable as it can be applied to any input type.", |
||||||
|
replaceWith = ReplaceWith("onInput(options, listener)"), |
||||||
|
level = DeprecationLevel.WARNING |
||||||
|
) |
||||||
|
fun onTextInput(options: Options = Options.DEFAULT, listener: (WrappedTextInputEvent) -> Unit) { |
||||||
|
listeners.add(TextInputEventListener(options, listener)) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,192 @@ |
|||||||
|
package org.jetbrains.compose.web.dom |
||||||
|
|
||||||
|
import androidx.compose.runtime.Composable |
||||||
|
import androidx.compose.runtime.NonRestartableComposable |
||||||
|
import androidx.compose.web.attributes.InputAttrsBuilder |
||||||
|
import org.jetbrains.compose.web.attributes.* |
||||||
|
|
||||||
|
private fun InputAttrsBuilder<String>.applyAttrsWithStringValue( |
||||||
|
value: String, |
||||||
|
attrsBuilder: InputAttrsBuilder<String>.() -> Unit |
||||||
|
) { |
||||||
|
if (value.isNotEmpty()) value(value) |
||||||
|
attrsBuilder() |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun CheckboxInput(checked: Boolean = false, attrsBuilder: InputAttrsBuilder<Boolean>.() -> Unit = {}) { |
||||||
|
Input( |
||||||
|
type = InputType.Checkbox, |
||||||
|
attrs = { |
||||||
|
if (checked) checked() |
||||||
|
this.attrsBuilder() |
||||||
|
} |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun DateInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Date, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun DateTimeLocalInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.DateTimeLocal, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun EmailInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Email, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun FileInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.File, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun HiddenInput(attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Hidden, attrs = attrsBuilder) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun MonthInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Month, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun NumberInput( |
||||||
|
value: Number? = null, |
||||||
|
min: Number? = null, |
||||||
|
max: Number? = null, |
||||||
|
attrsBuilder: InputAttrsBuilder<Number?>.() -> Unit = {} |
||||||
|
) { |
||||||
|
Input( |
||||||
|
type = InputType.Number, |
||||||
|
attrs = { |
||||||
|
if (value != null) value(value.toString()) |
||||||
|
if (min != null) min(min.toString()) |
||||||
|
if (max != null) max(max.toString()) |
||||||
|
attrsBuilder() |
||||||
|
} |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun PasswordInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Password, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun RadioInput(checked: Boolean = false, attrsBuilder: InputAttrsBuilder<Boolean>.() -> Unit = {}) { |
||||||
|
Input( |
||||||
|
type = InputType.Radio, |
||||||
|
attrs = { |
||||||
|
if (checked) checked() |
||||||
|
attrsBuilder() |
||||||
|
} |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun RangeInput( |
||||||
|
value: Number? = null, |
||||||
|
min: Number? = null, |
||||||
|
max: Number? = null, |
||||||
|
step: Number = 1, |
||||||
|
attrsBuilder: InputAttrsBuilder<Number?>.() -> Unit = {} |
||||||
|
) { |
||||||
|
Input( |
||||||
|
type = InputType.Range, |
||||||
|
attrs = { |
||||||
|
if (value != null) value(value.toString()) |
||||||
|
if (min != null) min(min.toString()) |
||||||
|
if (max != null) max(max.toString()) |
||||||
|
step(step) |
||||||
|
attrsBuilder() |
||||||
|
} |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun SearchInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Search, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun SubmitInput(attrsBuilder: InputAttrsBuilder<Unit>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Submit, attrs = attrsBuilder) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun TelInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Tel, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun TextInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Text, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun TimeInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Time, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun UrlInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Url, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
@NonRestartableComposable |
||||||
|
fun WeekInput(value: String = "", attrsBuilder: InputAttrsBuilder<String>.() -> Unit = {}) { |
||||||
|
Input(type = InputType.Week, attrs = { applyAttrsWithStringValue(value, attrsBuilder) }) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
fun <K> Input( |
||||||
|
type: InputType<K>, |
||||||
|
attrs: InputAttrsBuilder<K>.() -> Unit |
||||||
|
) { |
||||||
|
TagElement( |
||||||
|
elementBuilder = ElementBuilder.Input, |
||||||
|
applyAttrs = { |
||||||
|
val inputAttrsBuilder = InputAttrsBuilder(type) |
||||||
|
inputAttrsBuilder.type(type) |
||||||
|
inputAttrsBuilder.attrs() |
||||||
|
this.copyFrom(inputAttrsBuilder) |
||||||
|
}, |
||||||
|
content = null |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
fun <K> Input(type: InputType<K>) { |
||||||
|
TagElement( |
||||||
|
elementBuilder = ElementBuilder.Input, |
||||||
|
applyAttrs = { |
||||||
|
val inputAttrsBuilder = InputAttrsBuilder(type) |
||||||
|
inputAttrsBuilder.type(type) |
||||||
|
this.copyFrom(inputAttrsBuilder) |
||||||
|
}, |
||||||
|
content = null |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,388 @@ |
|||||||
|
package org.jetbrains.compose.web.core.tests.elements |
||||||
|
|
||||||
|
import org.jetbrains.compose.web.core.tests.runTest |
||||||
|
import org.jetbrains.compose.web.dom.* |
||||||
|
import org.w3c.dom.HTMLInputElement |
||||||
|
import kotlin.test.Test |
||||||
|
import kotlin.test.assertEquals |
||||||
|
|
||||||
|
class InputsGenerateCorrectHtmlTests { |
||||||
|
|
||||||
|
@Test |
||||||
|
fun checkBoxInput() = runTest { |
||||||
|
composition { |
||||||
|
CheckboxInput(checked = true) { |
||||||
|
id("checkboxId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val checkboxInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("checkbox", checkboxInput.getAttribute("type")) |
||||||
|
assertEquals("checkboxId", checkboxInput.getAttribute("id")) |
||||||
|
assertEquals(true, checkboxInput.checked) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun checkBoxInputWithDefaults() = runTest { |
||||||
|
composition { CheckboxInput() } |
||||||
|
|
||||||
|
val checkboxInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("checkbox", checkboxInput.getAttribute("type")) |
||||||
|
assertEquals(null, checkboxInput.getAttribute("id")) |
||||||
|
assertEquals(false, checkboxInput.checked) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun dateInput() = runTest { |
||||||
|
composition { |
||||||
|
DateInput(value = "2021-10-10") { |
||||||
|
id("dateInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val dateInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("date", dateInput.getAttribute("type")) |
||||||
|
assertEquals("dateInputId", dateInput.getAttribute("id")) |
||||||
|
assertEquals("2021-10-10", dateInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun dateInputWithDefaults() = runTest { |
||||||
|
composition { DateInput() } |
||||||
|
|
||||||
|
val dateInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("date", dateInput.getAttribute("type")) |
||||||
|
assertEquals(null, dateInput.getAttribute("id")) |
||||||
|
assertEquals("", dateInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun emailInput() = runTest { |
||||||
|
composition { |
||||||
|
EmailInput(value = "user@mail.com") { |
||||||
|
id("emailInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val emailInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("email", emailInput.getAttribute("type")) |
||||||
|
assertEquals("emailInputId", emailInput.getAttribute("id")) |
||||||
|
assertEquals("user@mail.com", emailInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun emailInputWithDefaults() = runTest { |
||||||
|
composition { EmailInput() } |
||||||
|
|
||||||
|
val emailInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("email", emailInput.getAttribute("type")) |
||||||
|
assertEquals(null, emailInput.getAttribute("id")) |
||||||
|
assertEquals("", emailInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun monthInput() = runTest { |
||||||
|
composition { |
||||||
|
MonthInput(value = "2017-06") { |
||||||
|
id("monthInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val monthInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("month", monthInput.getAttribute("type")) |
||||||
|
assertEquals("monthInputId", monthInput.getAttribute("id")) |
||||||
|
assertEquals("2017-06", monthInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun monthInputWithDefaults() = runTest { |
||||||
|
composition { MonthInput() } |
||||||
|
|
||||||
|
val monthInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("month", monthInput.getAttribute("type")) |
||||||
|
assertEquals(null, monthInput.getAttribute("id")) |
||||||
|
assertEquals("", monthInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun numberInput() = runTest { |
||||||
|
composition { |
||||||
|
NumberInput(value = 100, min = 10, max = 200) { |
||||||
|
id("numberInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val numberInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("number", numberInput.getAttribute("type")) |
||||||
|
assertEquals("numberInputId", numberInput.getAttribute("id")) |
||||||
|
assertEquals("200", numberInput.getAttribute("max")) |
||||||
|
assertEquals("10", numberInput.getAttribute("min")) |
||||||
|
assertEquals(100, numberInput.valueAsNumber.toInt()) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun numberInputWithDefaults() = runTest { |
||||||
|
composition { |
||||||
|
NumberInput { |
||||||
|
id("numberInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val numberInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("number", numberInput.getAttribute("type")) |
||||||
|
assertEquals("numberInputId", numberInput.getAttribute("id")) |
||||||
|
assertEquals(null, numberInput.getAttribute("max")) |
||||||
|
assertEquals(null, numberInput.getAttribute("min")) |
||||||
|
assertEquals("", numberInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@Test |
||||||
|
fun passwordInput() = runTest { |
||||||
|
composition { |
||||||
|
PasswordInput(value = "somepassword") { |
||||||
|
id("passwordInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val passwordInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("password", passwordInput.getAttribute("type")) |
||||||
|
assertEquals("passwordInputId", passwordInput.getAttribute("id")) |
||||||
|
assertEquals("somepassword", passwordInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun passwordInputWithDefaults() = runTest { |
||||||
|
composition { PasswordInput() } |
||||||
|
|
||||||
|
val passwordInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("password", passwordInput.getAttribute("type")) |
||||||
|
assertEquals(null, passwordInput.getAttribute("id")) |
||||||
|
assertEquals("", passwordInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun radioInput() = runTest { |
||||||
|
composition { |
||||||
|
RadioInput(checked = true) { |
||||||
|
id("radioInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val radioInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("radio", radioInput.getAttribute("type")) |
||||||
|
assertEquals("radioInputId", radioInput.getAttribute("id")) |
||||||
|
assertEquals(true, radioInput.checked) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun radioInputWithDefaults() = runTest { |
||||||
|
composition { RadioInput() } |
||||||
|
|
||||||
|
val radioInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("radio", radioInput.getAttribute("type")) |
||||||
|
assertEquals(null, radioInput.getAttribute("id")) |
||||||
|
assertEquals(false, radioInput.checked) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun rangeInput() = runTest { |
||||||
|
composition { |
||||||
|
RangeInput(value = 20, min = 10, max = 30, step = 2) { |
||||||
|
id("rangeInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val rangeInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("range", rangeInput.getAttribute("type")) |
||||||
|
assertEquals("rangeInputId", rangeInput.getAttribute("id")) |
||||||
|
assertEquals("10", rangeInput.getAttribute("min")) |
||||||
|
assertEquals("30", rangeInput.getAttribute("max")) |
||||||
|
assertEquals("2", rangeInput.getAttribute("step")) |
||||||
|
assertEquals(20, rangeInput.valueAsNumber.toInt()) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun rangeInputWithDefaults() = runTest { |
||||||
|
composition { RangeInput() } |
||||||
|
|
||||||
|
val rangeInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("range", rangeInput.getAttribute("type")) |
||||||
|
assertEquals(null, rangeInput.getAttribute("id")) |
||||||
|
assertEquals(null, rangeInput.getAttribute("min")) |
||||||
|
assertEquals(null, rangeInput.getAttribute("max")) |
||||||
|
assertEquals("1", rangeInput.getAttribute("step")) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun searchInput() = runTest { |
||||||
|
composition { |
||||||
|
SearchInput(value = "Search Term") { |
||||||
|
id("searchInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val searchInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("search", searchInput.getAttribute("type")) |
||||||
|
assertEquals("searchInputId", searchInput.getAttribute("id")) |
||||||
|
assertEquals("Search Term", searchInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun searchInputWithDefaults() = runTest { |
||||||
|
composition { SearchInput() } |
||||||
|
|
||||||
|
val searchInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("search", searchInput.getAttribute("type")) |
||||||
|
assertEquals(null, searchInput.getAttribute("id")) |
||||||
|
assertEquals("", searchInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun telInput() = runTest { |
||||||
|
composition { |
||||||
|
TelInput(value = "0123456789") { |
||||||
|
id("telInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("tel", textInput.getAttribute("type")) |
||||||
|
assertEquals("telInputId", textInput.getAttribute("id")) |
||||||
|
assertEquals("0123456789", textInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun telInputWithDefaults() = runTest { |
||||||
|
composition { TelInput() } |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("tel", textInput.getAttribute("type")) |
||||||
|
assertEquals(null, textInput.getAttribute("id")) |
||||||
|
assertEquals("", textInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun textInput() = runTest { |
||||||
|
composition { |
||||||
|
TextInput(value = "Some value") { |
||||||
|
id("textInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("text", textInput.getAttribute("type")) |
||||||
|
assertEquals("textInputId", textInput.getAttribute("id")) |
||||||
|
assertEquals("Some value", textInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun textInputWithDefaults() = runTest { |
||||||
|
composition { TextInput() } |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("text", textInput.getAttribute("type")) |
||||||
|
assertEquals(null, textInput.getAttribute("id")) |
||||||
|
assertEquals("", textInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun timeInput() = runTest { |
||||||
|
composition { |
||||||
|
TimeInput(value = "12:20") { |
||||||
|
id("timeInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("time", textInput.getAttribute("type")) |
||||||
|
assertEquals("timeInputId", textInput.getAttribute("id")) |
||||||
|
assertEquals("12:20", textInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun timeInputWithDefaults() = runTest { |
||||||
|
composition { TimeInput() } |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("time", textInput.getAttribute("type")) |
||||||
|
assertEquals(null, textInput.getAttribute("id")) |
||||||
|
assertEquals("", textInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun urlInput() = runTest { |
||||||
|
composition { |
||||||
|
UrlInput(value = "http://127.0.0.1") { |
||||||
|
id("urlInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("url", textInput.getAttribute("type")) |
||||||
|
assertEquals("urlInputId", textInput.getAttribute("id")) |
||||||
|
assertEquals("http://127.0.0.1", textInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun urlInputWithDefaults() = runTest { |
||||||
|
composition { UrlInput() } |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("url", textInput.getAttribute("type")) |
||||||
|
assertEquals(null, textInput.getAttribute("id")) |
||||||
|
assertEquals("", textInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun weekInput() = runTest { |
||||||
|
composition { |
||||||
|
WeekInput(value = "2017-W01") { |
||||||
|
id("weekInputId") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("week", textInput.getAttribute("type")) |
||||||
|
assertEquals("weekInputId", textInput.getAttribute("id")) |
||||||
|
assertEquals("2017-W01", textInput.value) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun weekInputWithDefaults() = runTest { |
||||||
|
composition { WeekInput() } |
||||||
|
|
||||||
|
val textInput = root.firstChild as HTMLInputElement |
||||||
|
|
||||||
|
assertEquals("week", textInput.getAttribute("type")) |
||||||
|
assertEquals(null, textInput.getAttribute("id")) |
||||||
|
assertEquals("", textInput.value) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
package org.jetbrains.compose.web.sample.tests |
||||||
|
|
||||||
|
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.attributes.* |
||||||
|
import org.jetbrains.compose.web.css.* |
||||||
|
import org.jetbrains.compose.web.css.selectors.attr |
||||||
|
import org.jetbrains.compose.web.dom.* |
||||||
|
import org.jetbrains.compose.web.dom.ElementBuilder.Companion.Div |
||||||
|
|
||||||
|
class EventsTests { |
||||||
|
|
||||||
|
val doubleClickUpdatesText by testCase { |
||||||
|
var state by remember { mutableStateOf("") } |
||||||
|
|
||||||
|
TestText(state) |
||||||
|
|
||||||
|
Div( |
||||||
|
attrs = { |
||||||
|
id("box") |
||||||
|
style { |
||||||
|
width(100.px) |
||||||
|
height(100.px) |
||||||
|
backgroundColor("red") |
||||||
|
} |
||||||
|
onDoubleClick { state = "Double Click Works!" } |
||||||
|
} |
||||||
|
) { |
||||||
|
Text("Clickable Box") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val focusInAndFocusOutUpdateTheText by testCase { |
||||||
|
var state by remember { mutableStateOf("") } |
||||||
|
|
||||||
|
TestText(state) |
||||||
|
|
||||||
|
Input(type = InputType.Text, attrs = { |
||||||
|
id("focusableInput") |
||||||
|
onFocusIn { |
||||||
|
state = "focused" |
||||||
|
} |
||||||
|
onFocusOut { |
||||||
|
state = "not focused" |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
val focusAndBlurUpdateTheText by testCase { |
||||||
|
var state by remember { mutableStateOf("") } |
||||||
|
|
||||||
|
TestText(state) |
||||||
|
|
||||||
|
Input(type = InputType.Text, attrs = { |
||||||
|
id("focusableInput") |
||||||
|
onFocus { |
||||||
|
state = "focused" |
||||||
|
} |
||||||
|
onBlur { |
||||||
|
state = "blured" |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
val scrollUpdatesText by testCase { |
||||||
|
var state by remember { mutableStateOf("") } |
||||||
|
|
||||||
|
TestText(state) |
||||||
|
|
||||||
|
Div( |
||||||
|
attrs = { |
||||||
|
id("box") |
||||||
|
style { |
||||||
|
property("overflow-y", "scroll") |
||||||
|
height(200.px) |
||||||
|
backgroundColor(Color.RGB(220, 220, 220)) |
||||||
|
} |
||||||
|
onScroll { |
||||||
|
state = "Scrolled" |
||||||
|
} |
||||||
|
} |
||||||
|
) { |
||||||
|
repeat(500) { |
||||||
|
P { |
||||||
|
Text("Scrollable content in Div - $it") |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
val selectEventUpdatesText by testCase { |
||||||
|
var state by remember { mutableStateOf("None") } |
||||||
|
|
||||||
|
P(attrs = { style { height(50.px) } }) { TestText(state) } |
||||||
|
|
||||||
|
Input(type = InputType.Text, attrs = { |
||||||
|
value("This is a text to be selected") |
||||||
|
id("selectableText") |
||||||
|
onSelect { |
||||||
|
state = "Text Selected" |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,174 @@ |
|||||||
|
/* |
||||||
|
* Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers. |
||||||
|
* Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. |
||||||
|
*/ |
||||||
|
|
||||||
|
package org.jetbrains.compose.web.tests.integration |
||||||
|
|
||||||
|
import org.jetbrains.compose.web.tests.integration.common.BaseIntegrationTests |
||||||
|
import org.jetbrains.compose.web.tests.integration.common.ResolveDrivers |
||||||
|
import org.jetbrains.compose.web.tests.integration.common.openTestPage |
||||||
|
import org.jetbrains.compose.web.tests.integration.common.waitTextToBe |
||||||
|
import org.openqa.selenium.By |
||||||
|
import org.openqa.selenium.Keys |
||||||
|
import org.openqa.selenium.interactions.Actions |
||||||
|
import org.openqa.selenium.WebDriver |
||||||
|
|
||||||
|
class EventTests : BaseIntegrationTests() { |
||||||
|
|
||||||
|
@ResolveDrivers |
||||||
|
fun `double click updates text`(driver: WebDriver) { |
||||||
|
driver.openTestPage("doubleClickUpdatesText") |
||||||
|
|
||||||
|
val box = driver.findElement(By.id("box")) |
||||||
|
|
||||||
|
val actions = Actions(driver) |
||||||
|
|
||||||
|
actions |
||||||
|
.doubleClick(box) |
||||||
|
.perform() |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "Double Click Works!", textId = "txt") |
||||||
|
} |
||||||
|
|
||||||
|
@ResolveDrivers |
||||||
|
fun `focusin and focusout update the text`(driver: WebDriver) { |
||||||
|
driver.openTestPage("focusInAndFocusOutUpdateTheText") |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "", textId = "txt") |
||||||
|
|
||||||
|
val input = driver.findElement(By.id("focusableInput")) |
||||||
|
|
||||||
|
val actions = Actions(driver) |
||||||
|
|
||||||
|
actions.moveToElement(input) |
||||||
|
.click() |
||||||
|
.perform() |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "focused", textId = "txt") |
||||||
|
|
||||||
|
val actions2 = Actions(driver) |
||||||
|
|
||||||
|
actions2.moveToElement(driver.findElement(By.id("txt"))) |
||||||
|
.click() |
||||||
|
.perform() |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "not focused", textId = "txt") |
||||||
|
} |
||||||
|
|
||||||
|
@ResolveDrivers |
||||||
|
fun `focus and blur update the text`(driver: WebDriver) { |
||||||
|
driver.openTestPage("focusAndBlurUpdateTheText") |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "", textId = "txt") |
||||||
|
|
||||||
|
val input = driver.findElement(By.id("focusableInput")) |
||||||
|
|
||||||
|
val actions = Actions(driver) |
||||||
|
|
||||||
|
actions.moveToElement(input) |
||||||
|
.click() |
||||||
|
.perform() |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "focused", textId = "txt") |
||||||
|
|
||||||
|
val actions2 = Actions(driver) |
||||||
|
|
||||||
|
actions2.moveToElement(driver.findElement(By.id("txt"))) |
||||||
|
.click() |
||||||
|
.perform() |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "blured", textId = "txt") |
||||||
|
} |
||||||
|
|
||||||
|
@ResolveDrivers |
||||||
|
fun `scroll updates the text`(driver: WebDriver) { |
||||||
|
driver.openTestPage("scrollUpdatesText") |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "", textId = "txt") |
||||||
|
|
||||||
|
val box = driver.findElement(By.id("box")) |
||||||
|
|
||||||
|
val actions = Actions(driver) |
||||||
|
actions.moveToElement(box) |
||||||
|
.click() |
||||||
|
.sendKeys(Keys.ARROW_DOWN) |
||||||
|
.perform() |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "Scrolled", textId = "txt") |
||||||
|
} |
||||||
|
|
||||||
|
@ResolveDrivers |
||||||
|
fun `select event update the txt`(driver: WebDriver) { |
||||||
|
driver.openTestPage("selectEventUpdatesText") |
||||||
|
driver.waitTextToBe(value = "None") |
||||||
|
|
||||||
|
val selectableText = driver.findElement(By.id("selectableText")) |
||||||
|
|
||||||
|
val action = Actions(driver) |
||||||
|
|
||||||
|
action.moveToElement(selectableText,3,3) |
||||||
|
.click().keyDown(Keys.SHIFT) |
||||||
|
.moveToElement(selectableText,200, 0) |
||||||
|
.click().keyUp(Keys.SHIFT) |
||||||
|
.build() |
||||||
|
.perform() |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "Text Selected") |
||||||
|
} |
||||||
|
|
||||||
|
@ResolveDrivers |
||||||
|
fun `stopImmediatePropagation prevents consequent listeners from being called`(driver: WebDriver) { |
||||||
|
driver.openTestPage("stopOnInputImmediatePropagationWorks") |
||||||
|
driver.waitTextToBe(value = "None") |
||||||
|
|
||||||
|
val checkBox = driver.findElement(By.id("checkbox")) |
||||||
|
val radioButtonToStopImmediatePropagation = driver.findElement(By.id("radioBtn")) |
||||||
|
|
||||||
|
checkBox.click() |
||||||
|
driver.waitTextToBe(value = "onInput2") |
||||||
|
|
||||||
|
radioButtonToStopImmediatePropagation.click() |
||||||
|
driver.waitTextToBe(value = "None") |
||||||
|
|
||||||
|
checkBox.click() |
||||||
|
driver.waitTextToBe(value = "onInput1") |
||||||
|
} |
||||||
|
|
||||||
|
@ResolveDrivers |
||||||
|
fun `preventDefault works as expected`(driver: WebDriver) { |
||||||
|
driver.openTestPage("preventDefaultWorks") |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "None") |
||||||
|
driver.waitTextToBe(textId = "txt2", value = "None") |
||||||
|
|
||||||
|
val checkBox = driver.findElement(By.id("checkbox")) |
||||||
|
checkBox.click() |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "Clicked but check should be prevented") |
||||||
|
driver.waitTextToBe(textId = "txt2", value = "None") |
||||||
|
} |
||||||
|
|
||||||
|
@ResolveDrivers |
||||||
|
fun `stopPropagation works as expected`(driver: WebDriver) { |
||||||
|
driver.openTestPage("stopPropagationWorks") |
||||||
|
|
||||||
|
driver.waitTextToBe(value = "None") |
||||||
|
driver.waitTextToBe(textId = "txt2", value = "None") |
||||||
|
|
||||||
|
val checkBox = driver.findElement(By.id("checkbox")) |
||||||
|
val radioButtonToStopImmediatePropagation = driver.findElement(By.id("radioBtn")) |
||||||
|
|
||||||
|
checkBox.click() |
||||||
|
driver.waitTextToBe(value = "childInput") |
||||||
|
driver.waitTextToBe(textId = "txt2", value = "div caught an input") |
||||||
|
|
||||||
|
radioButtonToStopImmediatePropagation.click() |
||||||
|
driver.waitTextToBe(value = "None") |
||||||
|
driver.waitTextToBe(textId = "txt2", value = "None") |
||||||
|
|
||||||
|
checkBox.click() |
||||||
|
driver.waitTextToBe(value = "childInput") |
||||||
|
driver.waitTextToBe(textId = "txt2", value = "None") |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue