diff options
44 files changed, 125 insertions, 91 deletions
diff --git a/kvision-modules/kvision-bootstrap-css/build.gradle b/kvision-modules/kvision-bootstrap-css/build.gradle index 0d47049b..1aca3288 100644 --- a/kvision-modules/kvision-bootstrap-css/build.gradle +++ b/kvision-modules/kvision-bootstrap-css/build.gradle @@ -1,5 +1,9 @@ apply from: "../shared.gradle" -dependencies { - compile project(":kvision-modules:kvision-bootstrap") +kotlinFrontend { + + npm { + dependency("bootstrap", "4.3.1") + } + } diff --git a/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt index e0da98f8..626346b1 100644 --- a/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt +++ b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt @@ -241,7 +241,8 @@ open class DateTimeInput( override fun afterDestroy() { if (initialized) { - getElementJQueryD()?.data("DateTimePicker").destroy() + val comp = getElementJQueryD()?.data("DateTimePicker") + if (comp != null) comp.destroy() initialized = false } } diff --git a/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeInputSpec.kt b/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeInputSpec.kt index 877cf650..5cdb68c9 100644 --- a/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeInputSpec.kt +++ b/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeInputSpec.kt @@ -25,6 +25,7 @@ import pl.treksoft.kvision.form.time.DateTimeInput import pl.treksoft.kvision.panel.Root import pl.treksoft.kvision.types.toStringF import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document import kotlin.js.Date import kotlin.test.Test import kotlin.test.assertEquals @@ -41,10 +42,11 @@ class DateTimeInputSpec : DomSpec { id = "idti" } root.add(dti) - val value = dti.getElementJQuery()?.`val`() + val element = document.getElementById("test") + val datastr = data.toStringF(dti.format) assertEquals( - data.toStringF(dti.format), - value, + "<div class=\"input-group date\" id=\"idti\"><input class=\"form-control\" placeholder=\"place\" type=\"text\" value=\"$datastr\"><div class=\"input-group-append\"><span class=\"input-group-text datepickerbutton\"><span class=\"fas fa-calendar-alt\"></span></span></div></div>", + element?.innerHTML, "Should render date time input with correctly formatted value" ) } diff --git a/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeSpec.kt b/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeSpec.kt index eba3ef74..a6714f0c 100644 --- a/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeSpec.kt +++ b/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeSpec.kt @@ -46,13 +46,13 @@ class DateTimeSpec : DomSpec { val id = ti.input.id val datastr = data.toStringF(ti.format) assertEqualsHtml( - "<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><input class=\"form-control\" id=\"$id\" type=\"text\" placeholder=\"place\" name=\"name\" disabled=\"disabled\" value=\"$datastr\"></div>", + "<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group date\" id=\"$id\"><input class=\"form-control\" placeholder=\"place\" name=\"name\" disabled=\"\" type=\"text\" value=\"$datastr\"><div class=\"input-group-append\"><span class=\"input-group-text datepickerbutton\"><span class=\"fas fa-calendar-alt\"></span></span></div></div></div>", element?.innerHTML, "Should render correct date time input form control" ) ti.validatorError = "Validation Error" assertEqualsHtml( - "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><input class=\"form-control\" id=\"$id\" type=\"text\" placeholder=\"place\" name=\"name\" disabled=\"disabled\" value=\"$datastr\"><span class=\"help-block small\">Validation Error</span></div>", + "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group date is-invalid\" id=\"$id\"><input class=\"form-control is-invalid\" placeholder=\"place\" name=\"name\" disabled=\"\" type=\"text\" value=\"$datastr\"><div class=\"input-group-append\"><span class=\"input-group-text datepickerbutton\"><span class=\"fas fa-calendar-alt\"></span></span></div></div><div class=\"invalid-feedback\">Validation Error</div></div>", element?.innerHTML, "Should render correct date time input form control with validation error" ) diff --git a/kvision-modules/kvision-bootstrap-dialog/webpack.config.d/css.js b/kvision-modules/kvision-bootstrap-dialog/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-bootstrap-dialog/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/kvision-modules/kvision-bootstrap-select-remote/webpack.config.d/css.js b/kvision-modules/kvision-bootstrap-select-remote/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-bootstrap-select-remote/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt index bfd93900..0e759896 100644 --- a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt +++ b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt @@ -44,7 +44,7 @@ class SelectInputSpec : DomSpec { root.add(selectInput) val element = document.getElementById("test") assertTrue( - true == element?.innerHTML?.endsWith("<select class=\"selectpicker\" multiple=\"multiple\" data-live-search=\"true\" title=\"Choose ...\" data-style=\"btn-default\" data-width=\"fit\" tabindex=\"-98\"><option value=\"#kvnull\"></option><option value=\"test1\">Test 1</option><option value=\"test2\">Test 2</option></select></div>"), + true == element?.innerHTML?.startsWith("<div class=\"dropdown bootstrap-select show-tick fit-width\"><select class=\"selectpicker\" multiple=\"multiple\" data-live-search=\"true\" title=\"Choose ...\" data-style=\"btn-default\" data-width=\"fit\" tabindex=\"-98\"><option value=\"#kvnull\"></option><option value=\"test1\">Test 1</option><option value=\"test2\">Test 2</option></select>"), "Should render correct select input" ) } diff --git a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt index 33c36576..d711301a 100644 --- a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt +++ b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt @@ -41,9 +41,9 @@ class SelectOptionSpec : DomSpec { element?.innerHTML, "Should render correct select option" ) - selectOption.icon = "fa-flag" + selectOption.icon = "fas fa-flag" assertEqualsHtml( - "<option value=\"testValue\" data-icon=\"fa fa-flag\">testLabel</option>", + "<option value=\"testValue\" data-icon=\"fas fa-flag\">testLabel</option>", element?.innerHTML, "Should render correct select option with icon" ) diff --git a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt index 9eddff81..9ed44f82 100644 --- a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt +++ b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt @@ -45,11 +45,7 @@ class SelectSpec : DomSpec { val element = document.getElementById("test") val id = select.input.id assertTrue( - true == element?.innerHTML?.startsWith("<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label>"), - "Should render correct select form control" - ) - assertTrue( - true == element?.innerHTML?.endsWith("<select class=\"form-control selectpicker\" id=\"$id\" multiple=\"multiple\" data-live-search=\"true\" title=\"Choose ...\" data-style=\"btn-default\" data-width=\"fit\" tabindex=\"-98\"><option value=\"#kvnull\"></option><option value=\"test1\">Test 1</option><option value=\"test2\">Test 2</option></select></div></div>"), + true == element?.innerHTML?.startsWith("<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"dropdown bootstrap-select show-tick form-control fit-width\"><select class=\"form-control selectpicker\" id=\"$id\" multiple=\"multiple\" data-live-search=\"true\" title=\"Choose ...\" data-style=\"btn-default\" data-width=\"fit\" tabindex=\"-98\"><option value=\"#kvnull\"></option><option value=\"test1\">Test 1</option><option value=\"test2\">Test 2</option></select>"), "Should render correct select form control" ) } diff --git a/kvision-modules/kvision-bootstrap-select/webpack.config.d/jquery.js b/kvision-modules/kvision-bootstrap-select/webpack.config.d/jquery.js new file mode 100644 index 00000000..bf5a1a20 --- /dev/null +++ b/kvision-modules/kvision-bootstrap-select/webpack.config.d/jquery.js @@ -0,0 +1,5 @@ +config.plugins.push(new webpack.ProvidePlugin({ + $: "jquery", + jQuery: "jquery", + "window.jQuery": "jquery" +})); diff --git a/kvision-modules/kvision-bootstrap-spinner/src/test/kotlin/test/pl/treksoft/kvision/form/spinner/SpinnerSpec.kt b/kvision-modules/kvision-bootstrap-spinner/src/test/kotlin/test/pl/treksoft/kvision/form/spinner/SpinnerSpec.kt index ead19d86..bb090b61 100644 --- a/kvision-modules/kvision-bootstrap-spinner/src/test/kotlin/test/pl/treksoft/kvision/form/spinner/SpinnerSpec.kt +++ b/kvision-modules/kvision-bootstrap-spinner/src/test/kotlin/test/pl/treksoft/kvision/form/spinner/SpinnerSpec.kt @@ -43,13 +43,13 @@ class SpinnerSpec : DomSpec { val element = document.getElementById("test") val id = ti.input.id assertEqualsHtml( - "<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group kv-spinner-btn-vertical\"><span><div class=\"input-group bootstrap-touchspin bootstrap-touchspin-injected\"><input class=\"form-control\" id=\"$id\" type=\"text\" value=\"13\" placeholder=\"place\" name=\"name\" disabled=\"disabled\"><span class=\"input-group-btn-vertical\"><button class=\"btn btn-default bootstrap-touchspin-up \" type=\"button\"><i class=\"fa fa-caret-up\"></i></button><button class=\"btn btn-default bootstrap-touchspin-down \" type=\"button\"><i class=\"fa fa-caret-down\"></i></button></span></div></span></div></div>", + "<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group kv-spinner kv-spinner-btn-vertical\"><span><div class=\"input-group bootstrap-touchspin bootstrap-touchspin-injected\"><input class=\"form-control\" id=\"$id\" type=\"text\" value=\"13\" placeholder=\"place\" name=\"name\" disabled=\"disabled\"><span class=\"input-group-btn-vertical\"><button class=\"btn btn-secondary bootstrap-touchspin-up \" type=\"button\"><i class=\"fas fa-caret-up\"></i></button><button class=\"btn btn-secondary bootstrap-touchspin-down \" type=\"button\"><i class=\"fas fa-caret-down\"></i></button></span></div></span></div></div>", element?.innerHTML, "Should render correct spinner input form control" ) ti.validatorError = "Validation Error" assertEqualsHtml( - "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group kv-spinner-btn-vertical\"><span><div class=\"input-group bootstrap-touchspin bootstrap-touchspin-injected\"><input class=\"form-control\" id=\"$id\" type=\"text\" value=\"13\" placeholder=\"place\" name=\"name\" disabled=\"disabled\"><span class=\"input-group-btn-vertical\"><button class=\"btn btn-default bootstrap-touchspin-up \" type=\"button\"><i class=\"fa fa-caret-up\"></i></button><button class=\"btn btn-default bootstrap-touchspin-down \" type=\"button\"><i class=\"fa fa-caret-down\"></i></button></span></div></span></div><span class=\"help-block small\">Validation Error</span></div>", + "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group kv-spinner kv-spinner-btn-vertical is-invalid\"><span><div class=\"input-group bootstrap-touchspin bootstrap-touchspin-injected\"><input class=\"form-control is-invalid\" id=\"$id\" type=\"text\" value=\"13\" placeholder=\"place\" name=\"name\" disabled=\"disabled\"><span class=\"input-group-btn-vertical\"><button class=\"btn btn-secondary bootstrap-touchspin-up \" type=\"button\"><i class=\"fas fa-caret-up\"></i></button><button class=\"btn btn-secondary bootstrap-touchspin-down \" type=\"button\"><i class=\"fas fa-caret-down\"></i></button></span></div></span></div><div class=\"invalid-feedback\">Validation Error</div></div>", element?.innerHTML, "Should render correct spinner input form control with validation error" ) diff --git a/kvision-modules/kvision-bootstrap-upload/webpack.config.d/jquery.js b/kvision-modules/kvision-bootstrap-upload/webpack.config.d/jquery.js new file mode 100644 index 00000000..bf5a1a20 --- /dev/null +++ b/kvision-modules/kvision-bootstrap-upload/webpack.config.d/jquery.js @@ -0,0 +1,5 @@ +config.plugins.push(new webpack.ProvidePlugin({ + $: "jquery", + jQuery: "jquery", + "window.jQuery": "jquery" +})); diff --git a/kvision-modules/kvision-bootstrap/build.gradle b/kvision-modules/kvision-bootstrap/build.gradle index 34aa8bb0..fe519014 100644 --- a/kvision-modules/kvision-bootstrap/build.gradle +++ b/kvision-modules/kvision-bootstrap/build.gradle @@ -3,6 +3,7 @@ apply from: "../shared.gradle" kotlinFrontend { npm { + dependency("popper.js", "1.15.0") dependency("bootstrap", "4.3.1") dependency("awesome-bootstrap-checkbox", "1.0.1") dependency("element-resize-event", "3.0.3") diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt index 1ad97acc..fc3d5242 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt @@ -70,8 +70,8 @@ interface DomSpec : TestSpec { fun assertEqualsHtml(expected: String?, actual: String?, message: String?) { if (expected != null && actual != null) { - val exp = jQuery(expected) - val act = jQuery(actual) + val exp = jQuery(expected.replace("position: ;","position: absolute;")) + val act = jQuery(actual.replace("position: ;","position: absolute;")) val result = exp[0]?.isEqualNode(act[0]) if (result == true) { assertTrue(result == true, message) diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt index 35172267..b467f1ff 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt @@ -22,6 +22,7 @@ package test.pl.treksoft.kvision.dropdown import pl.treksoft.kvision.dropdown.ContextMenu +import pl.treksoft.kvision.dropdown.ContextMenu.Companion.setContextMenu import pl.treksoft.kvision.html.Link.Companion.link import pl.treksoft.kvision.panel.Root import pl.treksoft.kvision.utils.obj @@ -43,7 +44,7 @@ class ContextMenuSpec : DomSpec { m.show() val element = document.getElementById("test") assertEqualsHtml( - "<ul class=\"dropdown-menu\" style=\"display: block;\"><li><a href=\"b\">a</a></li><li><a href=\"d\">c</a></li></ul>", + "<div class=\"dropdown-menu\" style=\"display: block;\"><a href=\"b\">a</a><a href=\"d\">c</a></div>", element?.innerHTML, "Should render correct context menu" ) @@ -66,7 +67,7 @@ class ContextMenuSpec : DomSpec { }) val element = document.getElementById("test") assertEqualsHtml( - "<ul class=\"dropdown-menu\" style=\"display: block; top: 50px; left: 40px;\"><li><a href=\"b\">a</a></li><li><a href=\"d\">c</a></li></ul>", + "<div class=\"dropdown-menu\" style=\"display: block; top: 50px; left: 40px;\"><a href=\"b\">a</a><a href=\"d\">c</a></div>", element?.innerHTML, "Should place context menu in the correct position" ) diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt index af35fa51..f75331f3 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt @@ -22,6 +22,7 @@ package test.pl.treksoft.kvision.dropdown import pl.treksoft.kvision.dropdown.DD +import pl.treksoft.kvision.dropdown.Direction import pl.treksoft.kvision.dropdown.DropDown import pl.treksoft.kvision.panel.Root import test.pl.treksoft.kvision.DomSpec @@ -37,11 +38,11 @@ class DropDownSpec : DomSpec { val root = Root("test", fixed = true) val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag") root.add(dd) - dd.toggle() + dd.list.getElementJQueryD()?.dropdown("toggle") val element = document.getElementById("test") val id = dd.buttonId() assertEqualsHtml( - "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>", + "<div class=\"dropdown show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"bottom-start\" aria-expanded=\"true\" style=\"position: ;\"><a class=\"dropdown-item\" href=\"#!/x\">abc</a><a class=\"dropdown-item\" href=\"#!/y\">def</a></div></div>", element?.innerHTML, "Should render correct drop down" ) @@ -52,13 +53,13 @@ class DropDownSpec : DomSpec { fun renderDropUp() { run { val root = Root("test", fixed = true) - val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag").apply { dropup = true } + val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag").apply { direction = Direction.DROPUP } root.add(dd) - dd.toggle() + dd.list.getElementJQueryD()?.dropdown("toggle") val element = document.getElementById("test") val id = dd.buttonId() assertEqualsHtml( - "<div class=\"dropup open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>", + "<div class=\"dropup show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"top-start\" aria-expanded=\"true\" style=\"position: ;\"><a class=\"dropdown-item\" href=\"#!/x\">abc</a><a class=\"dropdown-item\" href=\"#!/y\">def</a></div></div>", element?.innerHTML, "Should render correct drop down" ) @@ -71,11 +72,11 @@ class DropDownSpec : DomSpec { val root = Root("test", fixed = true) val dd = DropDown("Dropdown", listOf("abc" to DD.HEADER.option), "flag") root.add(dd) - dd.toggle() + dd.list.getElementJQueryD()?.dropdown("toggle") val element = document.getElementById("test") val id = dd.buttonId() assertEqualsHtml( - "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"dropdown-header\">abc</li></ul></div>", + "<div class=\"dropdown show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"bottom-start\" aria-expanded=\"true\" style=\"position: ;\"><h6 class=\"dropdown-header\">abc</h6></div></div>", element?.innerHTML, "Should render correct drop down" ) @@ -88,11 +89,11 @@ class DropDownSpec : DomSpec { val root = Root("test", fixed = true) val dd = DropDown("Dropdown", listOf("abc" to DD.SEPARATOR.option), "flag") root.add(dd) - dd.toggle() + dd.list.getElementJQueryD()?.dropdown("toggle") val element = document.getElementById("test") val id = dd.buttonId() assertEqualsHtml( - "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"divider\" role=\"separator\"></li></ul></div>", + "<div class=\"dropdown show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"bottom-start\" aria-expanded=\"true\" style=\"position: ;\"><div class=\"dropdown-divider\"></div></div></div>", element?.innerHTML, "Should render correct drop down" ) @@ -105,11 +106,11 @@ class DropDownSpec : DomSpec { val root = Root("test", fixed = true) val dd = DropDown("Dropdown", listOf("abc" to DD.DISABLED.option), "flag") root.add(dd) - dd.toggle() + dd.list.getElementJQueryD()?.dropdown("toggle") val element = document.getElementById("test") val id = dd.buttonId() assertEqualsHtml( - "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"disabled\"><a>abc</a></li></ul></div>", + "<div class=\"dropdown show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"bottom-start\" aria-expanded=\"true\" style=\"position: ;\"><a class=\"dropdown-item disabled\" tabindex=\"-1\" aria-disabled=\"true\" href=\"javascript:void(0)\">abc</a></div></div>", element?.innerHTML, "Should render correct drop down" ) @@ -122,10 +123,10 @@ class DropDownSpec : DomSpec { val root = Root("test", fixed = true) val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag") root.add(dd) - val visible = dd.getElementJQuery()?.hasClass("open") ?: false + val visible = dd.getElementJQuery()?.hasClass("show") ?: false assertTrue("Dropdown menu is not visible before toggle") { !visible } - dd.toggle() - val visible2 = dd.getElementJQuery()?.hasClass("open") ?: false + dd.list.getElementJQueryD()?.dropdown("toggle") + val visible2 = dd.getElementJQuery()?.hasClass("show") ?: false assertTrue("Dropdown menu is visible after toggle") { visible2 } } } diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt index e75baf9e..25ca7a7d 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt @@ -37,7 +37,7 @@ class HeaderSpec : DomSpec { root.add(h) val element = document.getElementById("test") assertEqualsHtml( - "<li class=\"dropdown-header\">Test</li>", + "<h6 class=\"dropdown-header\">Test</h6>", element?.innerHTML, "Should render correct drop down header" ) diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt index 86607ec7..36c22a74 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt @@ -37,7 +37,7 @@ class SeparatorSpec : DomSpec { root.add(s) val element = document.getElementById("test") assertEqualsHtml( - "<li class=\"divider\" role=\"separator\"></li>", + "<div class=\"dropdown-divider\"></div>", element?.innerHTML, "Should render correct drop down separator" ) diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/modal/AlertSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/modal/AlertSpec.kt index c3d17de9..48a8b5a0 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/modal/AlertSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/modal/AlertSpec.kt @@ -37,22 +37,22 @@ class AlertSpec : DomSpec { fun render() { run { Root("test", fixed = true) - Alert.show("Alert caption", "Alert content") - val alert = document.getElementById("test")?.let { jQuery(it).find(".modal")[0] } + Alert.show("Alert caption", "Alert content", animation = false) + val alert = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal")[0] } assertNotNull(alert, "Should show alert window") - val title = document.getElementById("test")?.let { jQuery(it).find(".modal-title").html() } + val title = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal-title").html() } assertEquals("Alert caption", title, "Should render alert window with correct caption") - val body = document.getElementById("test")?.let { jQuery(it).find(".modal-body").html() } + val body = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal-body").html() } assertEquals("<div>Alert content</div>", body, "Should render alert window with correct content") - val footer = document.getElementById("test")?.let { jQuery(it).find(".modal-footer").html() } + val footer = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal-footer").html() } assertEqualsHtml( - "<button class=\"btn btn-primary\" type=\"button\"><span class=\"glyphicon glyphicon-ok\"></span> OK</button>", + "<button class=\"btn btn-primary\" type=\"button\"><i class=\"fas fa-check\"></i> OK</button>", footer, "Should render alert window with correct footer" ) - val button = document.getElementById("test")?.let { jQuery(it).find(".modal-footer").find("button") } + val button = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal-footer").find("button") } button?.click() - val alert2 = document.getElementById("test")?.let { jQuery(it).find(".modal")[0] } + val alert2 = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal")[0] } assertNull(alert2, "Should hide alert window after clicking OK") } } diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavFormSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavFormSpec.kt index 40720bcb..8eb7bd5b 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavFormSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavFormSpec.kt @@ -37,13 +37,13 @@ class NavFormSpec : DomSpec { root.add(navf) val element = document.getElementById("test") assertEqualsHtml( - "<form class=\"navbar-form navbar-left\"></form>", + "<form class=\"form-inline\"></form>", element?.innerHTML, "Should render correct nav form" ) navf.rightAlign = true assertEqualsHtml( - "<form class=\"navbar-form navbar-right\"></form>", + "<form class=\"form-inline ml-auto\"></form>", element?.innerHTML, "Should render correct right aligned nav form" ) diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavSpec.kt index 988a706d..2e52557f 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavSpec.kt @@ -37,13 +37,13 @@ class NavSpec : DomSpec { root.add(nav) val element = document.getElementById("test") assertEqualsHtml( - "<ul class=\"nav navbar-nav\"></ul>", + "<div class=\"navbar-nav\"></div>", element?.innerHTML, "Should render correct nav" ) nav.rightAlign = true assertEqualsHtml( - "<ul class=\"nav navbar-nav navbar-right\"></ul>", + "<div class=\"navbar-nav ml-auto\"></div>", element?.innerHTML, "Should render correct right aligned nav" ) diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavbarSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavbarSpec.kt index f38a05f9..1658e63c 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavbarSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavbarSpec.kt @@ -26,6 +26,7 @@ import pl.treksoft.kvision.html.TAG import pl.treksoft.kvision.html.Tag.Companion.tag import pl.treksoft.kvision.navbar.Nav import pl.treksoft.kvision.navbar.Navbar +import pl.treksoft.kvision.navbar.NavbarColor import pl.treksoft.kvision.navbar.NavbarType import pl.treksoft.kvision.panel.Root import test.pl.treksoft.kvision.DomSpec @@ -43,15 +44,15 @@ class NavbarSpec : DomSpec { val element = document.getElementById("test") val id = navbar.container.id assertEqualsHtml( - "<nav class=\"navbar navbar-fixed-top navbar-default\"><div class=\"container-fluid\"><div class=\"navbar-header\"><button class=\"navbar-toggle collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-expanded=\"false\"><span class=\"sr-only\">Toggle navigation</span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span></button><a class=\"navbar-brand\" href=\"#\">TEST</a></div><div class=\"collapse navbar-collapse\" id=\"$id\"></div></div></nav>", + "<nav class=\"navbar fixed-top navbar-expand-lg navbar-light bg-light\"><a class=\"navbar-brand\" href=\"#\">TEST</a><button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-controls=\"$id\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"><span class=\"navbar-toggler-icon\"></span></button><div class=\"collapse navbar-collapse\" id=\"$id\"></div></nav>", element?.innerHTML, "Should render correct navbar" ) - navbar.inverted = true + navbar.nColor = NavbarColor.DARK assertEqualsHtml( - "<nav class=\"navbar navbar-fixed-top navbar-inverse\"><div class=\"container-fluid\"><div class=\"navbar-header\"><button class=\"navbar-toggle collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-expanded=\"false\"><span class=\"sr-only\">Toggle navigation</span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span></button><a class=\"navbar-brand\" href=\"#\">TEST</a></div><div class=\"collapse navbar-collapse\" id=\"$id\"></div></div></nav>", + "<nav class=\"navbar fixed-top navbar-expand-lg bg-light navbar-dark\"><a class=\"navbar-brand\" href=\"#\">TEST</a><button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-controls=\"$id\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"><span class=\"navbar-toggler-icon\"></span></button><div class=\"collapse navbar-collapse\" id=\"$id\"></div></nav>", element?.innerHTML, - "Should render correct inverted navbar" + "Should render correct dark navbar" ) navbar.add(Nav { tag(TAG.LI) { @@ -59,7 +60,7 @@ class NavbarSpec : DomSpec { } }) assertEqualsHtml( - "<nav class=\"navbar navbar-fixed-top navbar-inverse\"><div class=\"container-fluid\"><div class=\"navbar-header\"><button class=\"navbar-toggle collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-expanded=\"false\"><span class=\"sr-only\">Toggle navigation</span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span></button><a class=\"navbar-brand\" href=\"#\">TEST</a></div><div class=\"collapse navbar-collapse\" id=\"$id\"><ul class=\"nav navbar-nav\"><li><a href=\"#!/test\">Test</a></li></ul></div></div></nav>", + "<nav class=\"navbar fixed-top navbar-expand-lg bg-light navbar-dark\"><a class=\"navbar-brand\" href=\"#\">TEST</a><button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-controls=\"$id\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"><span class=\"navbar-toggler-icon\"></span></button><div class=\"collapse navbar-collapse\" id=\"$id\"><div class=\"navbar-nav\"><li><a href=\"#!/test\">Test</a></li></div></div></nav>", element?.innerHTML, "Should render correct navbar with nav link" ) diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/ResponsiveGridPanelSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/ResponsiveGridPanelSpec.kt index fcdf9860..1ebac202 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/ResponsiveGridPanelSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/ResponsiveGridPanelSpec.kt @@ -41,7 +41,7 @@ class ResponsiveGridPanelSpec : DomSpec { rgPanel.add(Span("ghi"), 3, 3) val element = document.getElementById("test") assertEqualsHtml( - "<div class=\"container-fluid\"><div class=\"row\"></div><div class=\"row\"><div class=\"col-md-3\"></div><div class=\"col-md-3\"><span>abc</span></div><div class=\"col-md-3\"></div><div class=\"col-md-3\"></div></div><div class=\"row\"><div class=\"col-md-3\"></div><div class=\"col-md-3\"></div><div class=\"col-md-3\"><span>def</span></div><div class=\"col-md-3\"></div></div><div class=\"row\"><div class=\"col-md-3\"></div><div class=\"col-md-3\"></div><div class=\"col-md-3\"></div><div class=\"col-md-3\"><span>ghi</span></div></div></div>", + "<div class=\"container-fluid\"><div class=\"row\"><div class=\"col-md-4\"><span>abc</span></div><div class=\"col-md-4\"></div><div class=\"col-md-4\"></div></div><div class=\"row\"><div class=\"col-md-4\"></div><div class=\"col-md-4\"><span>def</span></div><div class=\"col-md-4\"></div></div><div class=\"row\"><div class=\"col-md-4\"></div><div class=\"col-md-4\"></div><div class=\"col-md-4\"><span>ghi</span></div></div></div>", element?.innerHTML, "Should render correct responsive grid panel" ) diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/TabPanelSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/TabPanelSpec.kt index 9335562f..7a76cde9 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/TabPanelSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/TabPanelSpec.kt @@ -43,7 +43,7 @@ class TabPanelSpec : DomSpec { tabs.addTab("DEF", label2) val element = document.getElementById("test") assertEqualsHtml( - "<div><ul class=\"nav nav-tabs\"><li role=\"presentation\" class=\"active\"><a href=\"#\">ABC</a></li><li role=\"presentation\"><a href=\"#\">DEF</a></li></ul><div><span>abc</span></div></div>", + "<div><ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"nav-link active\" href=\"#\">ABC</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">DEF</a></li></ul><div><span>abc</span></div></div>", element?.innerHTML, "Should render correct tabs" ) @@ -63,7 +63,7 @@ class TabPanelSpec : DomSpec { tabs.activeIndex = 1 val element = document.getElementById("test") assertEqualsHtml( - "<div><ul class=\"nav nav-tabs\"><li role=\"presentation\" class=\"\"><a href=\"#\">ABC</a></li><li role=\"presentation\" class=\"active\"><a href=\"#\">DEF</a></li></ul><div><span>def</span></div></div>", + "<div><ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">ABC</a></li><li class=\"nav-item\"><a class=\"nav-link active\" href=\"#\">DEF</a></li></ul><div><span>def</span></div></div>", element?.innerHTML, "Should change selected tab" ) @@ -84,7 +84,7 @@ class TabPanelSpec : DomSpec { tabs.removeTab(1) val element = document.getElementById("test") assertEqualsHtml( - "<div><ul class=\"nav nav-tabs\"><li role=\"presentation\" class=\"\"><a href=\"#\">ABC</a></li></ul><div><span>abc</span></div></div>", + "<div><ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"nav-link active\" href=\"#\">ABC</a></li></ul><div><span>abc</span></div></div>", element?.innerHTML, "Should remove tab" ) @@ -105,10 +105,10 @@ class TabPanelSpec : DomSpec { tabs.removeTab(0) val label3 = Span("ghi") tabs.addTab("GHI", label3) - jQuery("#test a")[0]?.click() + jQuery("#test a")[1]?.click() val element = document.getElementById("test") assertEqualsHtml( - "<div><ul class=\"nav nav-tabs\"><li role=\"presentation\"><a href=\"#\">DEF</a></li><li role=\"presentation\"><a href=\"#\">GHI</a></li></ul><div><span>def</span></div></div>", + "<div><ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">DEF</a></li><li class=\"nav-item\"><a class=\"nav-link active\" href=\"#\">GHI</a></li></ul><div><span>ghi</span></div></div>", element?.innerHTML, "Should select correct tab by clicking" ) diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt index b324b8ab..b3ddbe40 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt @@ -24,7 +24,6 @@ package test.pl.treksoft.kvision.toolbar import pl.treksoft.kvision.panel.Root import pl.treksoft.kvision.toolbar.ButtonGroup import pl.treksoft.kvision.toolbar.ButtonGroupSize -import pl.treksoft.kvision.toolbar.ButtonGroupStyle import test.pl.treksoft.kvision.DomSpec import kotlin.browser.document import kotlin.test.Test @@ -44,11 +43,11 @@ class ButtonGroupSpec : DomSpec { "Should render correct button group" ) group.size = ButtonGroupSize.LARGE - group.style = ButtonGroupStyle.JUSTIFIED + group.vertical = true assertEqualsHtml( - "<div class=\"btn-group btn-group-lg btn-group-justified\" role=\"group\"></div>", + "<div class=\"btn-group-lg btn-group-vertical\" role=\"group\"></div>", element?.innerHTML, - "Should render correct button group with large and justified buttons" + "Should render correct button group with large and vertical buttons" ) } diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt index c79b9d32..a65ff7c3 100644 --- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt +++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt @@ -35,18 +35,13 @@ class WindowSpec : DomSpec { val root = Root("test", fixed = true) val window = Window("Window title", isResizable = false) root.add(window) + window.show() val id = window.id val element = document.getElementById("test") assertEqualsHtml( - "<div class=\"modal-content kv-window\" id=\"$id\" style=\"width: auto; position: absolute; z-index: 901; overflow: hidden;\"><div class=\"modal-header\"><h4 class=\"modal-title\">Window title</h4></div><div style=\"height: auto; overflow: auto;\"></div></div>", + "<div class=\"modal-content kv-window\" id=\"$id\" style=\"width: auto; position: absolute; z-index: 901; overflow: hidden;\"><div class=\"modal-header\"><h5 class=\"modal-title\">Window title</h5><div class=\"kv-window-icons-container\"></div></div><div style=\"height: auto; overflow: auto;\"></div></div>", element?.innerHTML, - "Should render floating window without resizable handler" - ) - window.isResizable = true - assertEqualsHtml( - "<div class=\"modal-content kv-window\" id=\"$id\" style=\"width: auto; position: absolute; z-index: 901; overflow: hidden; resize: both;\"><div class=\"modal-header\"><h4 class=\"modal-title\">Window title</h4></div><div style=\"height: auto; overflow: auto; margin-bottom: 11px;\"></div><object style=\"position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; z-index: -1; opacity: 0;\" class=\"resize-sensor\" tabindex=\"-1\" type=\"text/html\" data=\"about:blank\"></object></div>", - element?.innerHTML, - "Should render floating window with resizable handler" + "Should render floating window" ) } } diff --git a/kvision-modules/kvision-chart/webpack.config.d/css.js b/kvision-modules/kvision-chart/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-chart/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/kvision-modules/kvision-cordova/webpack.config.d/css.js b/kvision-modules/kvision-cordova/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-cordova/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/kvision-modules/kvision-datacontainer/webpack.config.d/css.js b/kvision-modules/kvision-datacontainer/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-datacontainer/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/kvision-modules/kvision-i18n/webpack.config.d/css.js b/kvision-modules/kvision-i18n/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-i18n/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/kvision-modules/kvision-redux-kotlin/webpack.config.d/css.js b/kvision-modules/kvision-redux-kotlin/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-redux-kotlin/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/kvision-modules/kvision-redux/webpack.config.d/css.js b/kvision-modules/kvision-redux/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-redux/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/kvision-modules/kvision-richtext/webpack.config.d/jquery.js b/kvision-modules/kvision-richtext/webpack.config.d/jquery.js new file mode 100644 index 00000000..bf5a1a20 --- /dev/null +++ b/kvision-modules/kvision-richtext/webpack.config.d/jquery.js @@ -0,0 +1,5 @@ +config.plugins.push(new webpack.ProvidePlugin({ + $: "jquery", + jQuery: "jquery", + "window.jQuery": "jquery" +})); diff --git a/kvision-modules/kvision-tabulator-remote/webpack.config.d/css.js b/kvision-modules/kvision-tabulator-remote/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-tabulator-remote/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt index 4be84d22..785f9a2c 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt @@ -27,7 +27,7 @@ import test.pl.treksoft.kvision.DomSpec import kotlin.browser.document import kotlin.test.Test -class HelpBlockSpec : DomSpec { +class HelpTextSpec : DomSpec { @Test fun render() { @@ -37,7 +37,7 @@ class HelpBlockSpec : DomSpec { root.add(fl) val element = document.getElementById("test") assertEqualsHtml( - "<span class=\"help-block small\">Form Error</span>", + "<small class=\"form-text text-muted\">Form Error</small>", element?.innerHTML, "Should render correct help block" ) diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt index 16da0c70..2c329ffa 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt @@ -45,7 +45,7 @@ class CheckBoxSpec : DomSpec { val element = document.getElementById("test") val id = ci.input.id assertEqualsHtml( - "<div class=\"checkbox checkbox-danger checkbox-circle checkbox-inline\"><input class=\"styled\" id=\"$id\" type=\"checkbox\" checked=\"checked\" name=\"name\" disabled=\"disabled\"><label for=\"$id\">Label</label></div>", + "<div class=\"form-check abc-checkbox abc-checkbox-danger abc-checkbox-circle form-check-inline\"><input class=\"form-check-input\" id=\"$id\" type=\"checkbox\" checked=\"checked\" name=\"name\" disabled=\"disabled\"><label class=\"form-check-label\" for=\"$id\">Label</label></div>", element?.innerHTML, "Should render correct checkbox form control" ) @@ -53,7 +53,7 @@ class CheckBoxSpec : DomSpec { ci.circled = false ci.inline = false assertEqualsHtml( - "<div class=\"checkbox checkbox-info\"><input class=\"styled\" id=\"$id\" type=\"checkbox\" checked=\"checked\" name=\"name\" disabled=\"disabled\"><label for=\"$id\">Label</label></div>", + "<div class=\"form-check abc-checkbox abc-checkbox-info\"><input class=\"form-check-input\" id=\"$id\" type=\"checkbox\" checked=\"checked\" name=\"name\" disabled=\"disabled\"><label class=\"form-check-label\" for=\"$id\">Label</label></div>", element?.innerHTML, "Should render correct checkbox form control" ) diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt index 55788c84..020ad529 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt @@ -44,7 +44,7 @@ class RadioGroupInputSpec : DomSpec { val rid1 = ci.getChildren().filterIsInstance<Radio>().first().input.id val rid2 = ci.getChildren().filterIsInstance<Radio>().last().input.id assertEqualsHtml( - "<div class=\"form-group kv-radiogroup-inline\"><div class=\"radio\"><input id=\"$rid1\" type=\"radio\" name=\"$name\" disabled=\"disabled\" value=\"a\"><label for=\"$rid1\">A</label></div><div class=\"radio\"><input id=\"$rid2\" type=\"radio\" name=\"$name\" disabled=\"disabled\" value=\"b\"><label for=\"$rid2\">B</label></div></div>", + "<div class=\"form-group kv-radiogroup-inline\"><div class=\"form-check abc-radio\"><input class=\"form-check-input\" id=\"$rid1\" type=\"radio\" name=\"$name\" disabled=\"disabled\" value=\"a\"><label class=\"form-check-label\" for=\"$rid1\">A</label></div><div class=\"form-check abc-radio\"><input class=\"form-check-input\" id=\"$rid2\" type=\"radio\" name=\"$name\" disabled=\"disabled\" value=\"b\"><label class=\"form-check-label\" for=\"$rid2\">B</label></div></div>", element?.innerHTML, "Should render correct radio button group form control" ) diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt index 2ed52b67..77547977 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt @@ -41,10 +41,10 @@ class RadioGroupSpec : DomSpec { root.add(ci) val element = document.getElementById("test") val id = ci.flabel.forId - val rid1 = ci.getChildren().filterIsInstance<Radio>().first().input.id - val rid2 = ci.getChildren().filterIsInstance<Radio>().last().input.id + val rid1 = ci.container.getChildren().filterIsInstance<Radio>().first().input.id + val rid2 = ci.container.getChildren().filterIsInstance<Radio>().last().input.id assertEqualsHtml( - "<div class=\"form-group kv-radiogroup-inline\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"radio\"><input id=\"$rid1\" type=\"radio\" name=\"$id\" disabled=\"disabled\" value=\"a\"><label for=\"$rid1\">A</label></div><div class=\"radio\"><input id=\"$rid2\" type=\"radio\" name=\"$id\" disabled=\"disabled\" value=\"b\"><label for=\"$rid2\">B</label></div></div>", + "<div class=\"form-group kv-radiogroup-inline\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"kv-radiogroup-container\"><div class=\"form-check abc-radio\"><input class=\"form-check-input\" id=\"$rid1\" type=\"radio\" name=\"$id\" disabled=\"disabled\" value=\"a\"><label class=\"form-check-label\" for=\"$rid1\">A</label></div><div class=\"form-check abc-radio\"><input class=\"form-check-input\" id=\"$rid2\" type=\"radio\" name=\"$id\" disabled=\"disabled\" value=\"b\"><label class=\"form-check-label\" for=\"$rid2\">B</label></div></div></div>", element?.innerHTML, "Should render correct radio button group form control" ) diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt index bd0b3993..c709b548 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt @@ -44,7 +44,7 @@ class RadioSpec : DomSpec { val element = document.getElementById("test") val id = ci.input.id assertEqualsHtml( - "<div class=\"radio radio-danger radio-inline\"><input id=\"$id\" type=\"radio\" checked=\"checked\" name=\"name\" disabled=\"disabled\" value=\"abc\"><label for=\"$id\">Label</label></div>", + "<div class=\"form-check abc-radio abc-radio-danger form-check-inline\"><input class=\"form-check-input\" id=\"$id\" type=\"radio\" checked=\"checked\" name=\"name\" disabled=\"disabled\" value=\"abc\"><label class=\"form-check-label\" for=\"$id\">Label</label></div>", element?.innerHTML, "Should render correct radio button form control" ) @@ -52,7 +52,7 @@ class RadioSpec : DomSpec { ci.squared = true ci.inline = false assertEqualsHtml( - "<div class=\"checkbox checkbox-info\"><input id=\"$id\" type=\"radio\" checked=\"checked\" name=\"name\" disabled=\"disabled\" value=\"abc\"><label for=\"$id\">Label</label></div>", + "<div class=\"form-check abc-checkbox abc-checkbox-info\"><input class=\"form-check-input\" id=\"$id\" type=\"radio\" checked=\"checked\" name=\"name\" disabled=\"disabled\" value=\"abc\"><label class=\"form-check-label\" for=\"$id\">Label</label></div>", element?.innerHTML, "Should render correct radio button form control" ) diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/text/TextSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/text/TextSpec.kt index 2bc35a38..02ba7643 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/form/text/TextSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/form/text/TextSpec.kt @@ -49,7 +49,7 @@ class TextSpec : DomSpec { ) ti.validatorError = "Validation Error" assertEqualsHtml( - "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><input class=\"form-control\" id=\"$id\" placeholder=\"place\" name=\"name\" maxlength=\"15\" disabled=\"disabled\" type=\"text\" value=\"abc\"><span class=\"help-block small\">Validation Error</span></div>", + "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><input class=\"form-control is-invalid\" id=\"$id\" placeholder=\"place\" name=\"name\" maxlength=\"15\" disabled=\"disabled\" type=\"text\" value=\"abc\"><div class=\"invalid-feedback\">Validation Error</div></div>", element?.innerHTML, "Should render correct input form control with validation error" ) diff --git a/src/test/kotlin/test/pl/treksoft/kvision/html/ButtonSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/html/ButtonSpec.kt index 512c3bc2..e807bfd5 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/html/ButtonSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/html/ButtonSpec.kt @@ -35,13 +35,13 @@ class ButtonSpec : DomSpec { fun render() { run { val root = Root("test", fixed = true) - val button = Button("Cancel", "fa-bars", ButtonStyle.PRIMARY) + val button = Button("Cancel", "fas fa-bars", ButtonStyle.PRIMARY) button.size = ButtonSize.LARGE button.block = true root.add(button) val element = document.getElementById("test") assertEqualsHtml( - "<button class=\"btn btn-primary btn-lg btn-block\" type=\"button\"><i class=\"fa fa-bars\"></i> Cancel</button>", + "<button class=\"btn btn-primary btn-lg btn-block\" type=\"button\"><i class=\"fas fa-bars\"></i> Cancel</button>", element?.innerHTML, "Should render correct html button" ) diff --git a/src/test/kotlin/test/pl/treksoft/kvision/html/IconSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/html/IconSpec.kt index ea3425c5..9a63c68e 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/html/IconSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/html/IconSpec.kt @@ -33,10 +33,10 @@ class IconSpec : DomSpec { fun render() { run { val root = Root("test", fixed = true) - val icon = Icon("fa-check") + val icon = Icon("fas fa-check") root.add(icon) val element = document.getElementById("test") - assertEqualsHtml("<span class=\"fa fa-check\"></span>", element?.innerHTML, "Should render correct icon") + assertEqualsHtml("<span class=\"fas fa-check\"></span>", element?.innerHTML, "Should render correct icon") } } diff --git a/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt index 169575fc..ed3a5347 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt @@ -41,7 +41,7 @@ class ImageSpec : DomSpec { root.add(image) val element = document.getElementById("test") assertEqualsHtml( - "<img class=\"img-responsive center-block img-rounded\" src=\"$res\" alt=\"Image\">", + "<img class=\"img-fluid center-block rounded\" src=\"$res\" alt=\"Image\">", element?.innerHTML, "Should render correct html image" ) diff --git a/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt index c312040a..69dc05d3 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt @@ -46,7 +46,7 @@ class TableSpec : DomSpec { root.add(table) val element = document.getElementById("test") assertEqualsHtml( - "<table class=\"table\"><thead><tr><th>a</th><th>b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table>", + "<table class=\"table\"><thead><tr><th scope=\"col\">a</th><th scope=\"col\">b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table>", element?.innerHTML, "Should render correct table" ) @@ -55,7 +55,7 @@ class TableSpec : DomSpec { table.types = setOf(TableType.BORDERED) val element2 = document.getElementById("test") assertEqualsHtml( - "<div class=\"table-responsive\"><table class=\"table table-bordered\"><caption>Caption</caption><thead><tr><th>a</th><th>b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table></div>", + "<div class=\"table-responsive\"><table class=\"table table-bordered\"><caption>Caption</caption><thead><tr><th scope=\"col\">a</th><th scope=\"col\">b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table></div>", element2?.innerHTML, "Should render correct responsive table" ) |