Integrate the Responsive add-on #12394

Also fixes https://github.com/vaadin/responsive/issues/10

Change-Id: Id22d071529c91d6462f1dceaf169c9d4be69d86f

2 files changed, 165 insertions, 0 deletions

diff --git a/uitest/src/com/vaadin/tests/extensions/ResponsiveUI.java b/uitest/src/com/vaadin/tests/extensions/ResponsiveUI.java
new file mode 100644
index 0000000000..417821f1ea
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/extensions/ResponsiveUI.java
@@ -0,0 +1,87 @@
+/*
+ * Copyright 2000-2013 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.tests.extensions;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.Responsive;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.shared.ui.label.ContentMode;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalSplitPanel;
+import com.vaadin.ui.Label;
+
+@Theme("tests-responsive")
+public class ResponsiveUI extends AbstractTestUI {
+    @Override
+    protected void setup(VaadinRequest request) {
+        HorizontalSplitPanel split = new HorizontalSplitPanel();
+        setContent(split);
+        split.setSplitPosition(50, Unit.PERCENTAGE);
+        split.setMinSplitPosition(100, Unit.PIXELS);
+        split.setMaxSplitPosition(1200, Unit.PIXELS);
+        setStyleName("responsive-test");
+
+        CssLayout firstGrid = makeGrid("first");
+        CssLayout secondGrid = makeGrid("second");
+        CssLayout grids = new CssLayout();
+        grids.setSizeFull();
+        grids.addComponent(firstGrid);
+        grids.addComponent(secondGrid);
+        split.addComponent(grids);
+
+        Label description = new Label(
+                "<h3>This application demonstrates the Responsive extension in Vaadin.</h3>"
+                        + "<p>Drag the splitter to see how the boxes on the left side adapt to "
+                        + "different widths. They maintain a width of 100-200px, and always "
+                        + "span the entire width of the container.</p><p>This label will "
+                        + "adapt its font size and line height for different widths.</p>"
+                        + "<p><a href=\"http://vaadin.com/download\">Download "
+                        + "Vaadin</a></p>", ContentMode.HTML);
+        description.addStyleName("description");
+        split.addComponent(description);
+
+        // Add the responsive capabilities to the components
+        Responsive.makeResponsive(firstGrid);
+        Responsive.makeResponsive(secondGrid);
+        Responsive.makeResponsive(description);
+    }
+
+    private CssLayout makeGrid(String styleName) {
+        CssLayout grid = new CssLayout();
+        grid.setWidth("100%");
+        grid.addStyleName("grid");
+        grid.addStyleName(styleName);
+
+        for (int i = 1; i < 10; i++) {
+            Label l = new Label("" + i);
+            l.setSizeUndefined();
+            grid.addComponent(l);
+        }
+        return grid;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "The CssLayouts (grids) and Label should be responsive";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 12394;
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/extensions/ResponsiveUITest.java b/uitest/src/com/vaadin/tests/extensions/ResponsiveUITest.java
new file mode 100644
index 0000000000..76babed333
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/extensions/ResponsiveUITest.java
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2000-2013 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.tests.extensions;
+
+import static org.junit.Assert.assertEquals;
+
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.interactions.Actions;
+
+import com.vaadin.testbench.By;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class ResponsiveUITest extends MultiBrowserTest {
+
+    @Before
+    public void setUp() throws Exception {
+        // We need this in order to ensure that the initial width-range is
+        // 401px-600px
+        testBench().resizeViewPortTo(1024, 768);
+    }
+
+    // JQuery style selector
+    private WebElement $(String cssSelector) {
+        return getDriver().findElement(By.cssSelector(cssSelector));
+    }
+
+    @Test
+    public void testResizingSplitPanelReflowsLayout() throws Exception {
+        openTestURL();
+
+        assertEquals("401px-600px",
+                $(".v-csslayout-grid.first").getAttribute("width-range"));
+        assertEquals("501px-",
+                $(".v-csslayout-grid.second").getAttribute("width-range"));
+
+        moveSplitter(200);
+
+        assertEquals("601-800",
+                $(".v-csslayout-grid.first").getAttribute("width-range"));
+        assertEquals("501px-",
+                $(".v-csslayout-grid.second").getAttribute("width-range"));
+
+        moveSplitter(-350);
+
+        assertEquals("201px-400px",
+                $(".v-csslayout-grid.first").getAttribute("width-range"));
+        assertEquals("301px-400px",
+                $(".v-csslayout-grid.second").getAttribute("width-range"));
+
+        compareScreen("responsive");
+
+        moveSplitter(-200);
+        assertEquals("-200px",
+                $(".v-csslayout-grid.first").getAttribute("width-range"));
+
+    }
+
+    private void moveSplitter(int xOffset) {
+        new Actions(getDriver()).clickAndHold($(".v-splitpanel-hsplitter"))
+                .moveByOffset(xOffset, 0).release().build().perform();
+    }
+}