Also set styles for splitter position when children are defined in te…

…mplate (#73)


Fixes #72

.gitignore

@@ -11,7 +11,6 @@ target/
 *.iml
 
 # The following files are generated/updated by flow-maven-plugin
-package.json
-package-lock.json
-webpack.config.js
+package*.json
+webpack.*.js
 node_modules/

vaadin-split-layout-flow-integration-tests/pom-bower-mode.xml

@@ -60,6 +60,12 @@
             <version>${project.version}</version>
             <scope>test</scope>
         </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-html-components-testbench</artifactId>
+            <version>${flow.version}</version>
+            <scope>test</scope>
+        </dependency>
         <dependency>
             <groupId>org.hamcrest</groupId>
             <artifactId>hamcrest-all</artifactId>

vaadin-split-layout-flow-integration-tests/pom.xml

@@ -30,6 +30,12 @@
             <version>${project.version}</version>
             <scope>test</scope>
         </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-html-components-testbench</artifactId>
+            <version>${flow.version}</version>
+            <scope>test</scope>
+        </dependency>
 
         <!--System under test -->
         <dependency>

vaadin-split-layout-flow-integration-tests/src/main/java/com/vaadin/flow/component/splitlayout/test/SplitterPositionView.java

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2000-2019 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.component.splitlayout.test;
+
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.NativeButton;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.splitlayout.SplitLayout;
+import com.vaadin.flow.router.Route;
+
+@Route("splitter-position")
+public class SplitterPositionView extends Div {
+
+    public static final double INITIAL_POSITION = 70;
+    public static final double FINAL_POSITION = 30;
+
+    public SplitterPositionView() {
+        NativeButton buttonJava = new NativeButton(
+                "Create layout with java API", e -> createLayoutJavaApi());
+        buttonJava.setId("createLayoutJavaApi");
+        NativeButton buttonElement = new NativeButton(
+                "Create layout with element API",
+                e -> createLayoutElementApi());
+        buttonElement.setId("createLayoutElementApi");
+        add(buttonJava, buttonElement);
+    }
+
+    private void createLayoutJavaApi() {
+        Span primary = new Span("Primary");
+        primary.setId("primaryJavaApi");
+        Span secondary = new Span("Secondary");
+        secondary.setId("secondaryJavaApi");
+        SplitLayout layout = new SplitLayout(primary, secondary);
+        layout.setSplitterPosition(INITIAL_POSITION);
+        layout.setId("splitLayoutJavaApi");
+        NativeButton setSplitterPosition = new NativeButton(
+                "set splitter position",
+                event -> layout.setSplitterPosition(FINAL_POSITION));
+        setSplitterPosition.setId("setSplitPositionJavaApi");
+        add(setSplitterPosition, layout);
+    }
+
+    private void createLayoutElementApi() {
+        Span primary = new Span("Primary");
+        primary.setId("primaryElementApi");
+        Span secondary = new Span("Secondary");
+        secondary.setId("secondaryElementApi");
+        SplitLayout layout = new SplitLayout();
+        layout.setSplitterPosition(INITIAL_POSITION);
+        layout.setId("splitLayoutElementApi");
+        layout.getElement().appendChild(primary.getElement(),
+                secondary.getElement());
+
+        NativeButton setSplitterPosition = new NativeButton(
+                "set splitter position",
+                event -> layout.setSplitterPosition(FINAL_POSITION));
+        setSplitterPosition.setId("setSplitPositionElementApi");
+        add(setSplitterPosition, layout);
+    }
+}

vaadin-split-layout-flow-integration-tests/src/test/java/com/vaadin/flow/component/splitlayout/tests/SplitterPositionIT.java

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2000-2019 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.component.splitlayout.tests;
+
+import org.junit.Assert;
+import org.junit.Before;
+import org.junit.Test;
+
+import com.vaadin.flow.component.html.testbench.NativeButtonElement;
+import com.vaadin.flow.component.html.testbench.SpanElement;
+import com.vaadin.flow.component.splitlayout.demo.SplitLayoutView;
+import com.vaadin.flow.component.splitlayout.test.SplitterPositionView;
+import com.vaadin.flow.component.splitlayout.testbench.SplitLayoutElement;
+import com.vaadin.flow.testutil.AbstractComponentIT;
+import com.vaadin.flow.testutil.TestPath;
+import com.vaadin.testbench.TestBenchElement;
+
+/**
+ * Integration tests for {@link SplitLayoutView}.
+ */
+@TestPath("splitter-position")
+public class SplitterPositionIT extends AbstractComponentIT {
+
+    @Before
+    public void setUp() {
+        open();
+    }
+
+    @Test
+    public void testSplitterPositionJava() {
+        testSplitterPosition("JavaApi");
+    }
+
+    @Test
+    public void testSplitterPositionElement() {
+        testSplitterPosition("ElementApi");
+    }
+
+    private void testSplitterPosition(String testId) {
+        $(NativeButtonElement.class).id("createLayout" + testId).click();
+        SplitLayoutElement layout = $(SplitLayoutElement.class)
+                .id("splitLayout" + testId);
+        TestBenchElement primaryElement = layout.$(SpanElement.class)
+                .id("primary" + testId);
+        TestBenchElement secondaryElement = layout.$(SpanElement.class)
+                .id("secondary" + testId);
+        assertElementWidth(primaryElement,
+                (int) SplitterPositionView.INITIAL_POSITION + "%");
+        assertElementWidth(secondaryElement,
+                (int) SplitterPositionView.FINAL_POSITION + "%");
+
+        $(NativeButtonElement.class).id("setSplitPosition" + testId).click();
+        assertElementWidth(primaryElement,
+                (int) SplitterPositionView.FINAL_POSITION + "%");
+        assertElementWidth(secondaryElement,
+                (int) SplitterPositionView.INITIAL_POSITION + "%");
+    }
+
+    private void assertElementWidth(TestBenchElement element, String expected) {
+        executeScript("console.log(arguments[0])", element);
+        executeScript("console.log(arguments[0].style)", element);
+        executeScript("console.log(arguments[0].style.width)", element);
+        Assert.assertEquals(expected,
+                element.getPropertyString("style", "width"));
+    }
+
+}

vaadin-split-layout-flow/src/main/java/com/vaadin/flow/component/splitlayout/SplitLayout.java

@@ -16,7 +16,6 @@
 package com.vaadin.flow.component.splitlayout;
 
 import java.util.Objects;
-import java.util.Optional;
 
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.ComponentEventListener;
@@ -296,7 +295,7 @@ public void setSplitterPosition(double position) {
      * @param value     the value to set
      */
     public void setPrimaryStyle(String styleName, String value) {
-        setInnerComponentStyle(primaryComponent, styleName, value);
+        setInnerComponentStyle(styleName, value, true);
     }
 
     /**
@@ -306,7 +305,7 @@ public void setPrimaryStyle(String styleName, String value) {
      * @param value     the value to set
      */
     public void setSecondaryStyle(String styleName, String value) {
-        setInnerComponentStyle(secondaryComponent, styleName, value);
+        setInnerComponentStyle(styleName, value, false);
     }
 
     private void setComponents() {
@@ -349,9 +348,16 @@ public Registration addSplitterDragendListener(
         return super.addSplitterDragendListener(listener);
     }
 
-    private void setInnerComponentStyle(Component innerComponent,
-                                               String styleName, String value) {
-        Optional.ofNullable(innerComponent).ifPresent(component -> component
-                .getElement().getStyle().set(styleName, value));
+    private void setInnerComponentStyle(String styleName, String value,
+            boolean primary) {
+        Component innerComponent = primary ? primaryComponent
+                : secondaryComponent;
+        if (innerComponent != null) {
+            innerComponent.getElement().getStyle().set(styleName, value);
+        } else {
+            getElement().executeJs(
+                    "var element = this.children[$0]; if (element) { element.style[$1]=$2; }",
+                    primary ? 0 : 1, styleName, value);
+        }
     }
 }