feat: Add test for mixed flowLayout and deep tree (#7056)

Add tests for testing use of
flowLayout as both true and false
in same layout path.
Add test for hilla view with a deep
path that should get a Flow layout.

Co-authored-by: Manuel Carrasco Moñino <[email protected]>

vaadin-platform-react-hybrid-test/src/main/frontend/views/flow/hello-hilla.tsx

@@ -20,6 +20,5 @@ export default function HelloHilla() {
                 position: 'middle',
             })}> Say hello </Button>
         </VerticalLayout>
-    )
-        ;
-}
+    );
+}

vaadin-platform-react-hybrid-test/src/main/frontend/views/flow/no-layout.tsx

@@ -0,0 +1,25 @@
+import { Button, TextField, VerticalLayout } from "@vaadin/react-components";
+import type { ViewConfig } from "@vaadin/hilla-file-router/types.js";
+import { useState } from "react";
+import { Notification } from '@vaadin/react-components/Notification.js';
+
+export const config: ViewConfig = {
+    menu: {
+        title: "Hello React NO Flow Layout",
+    },
+    title: "Hilla outside Flow",
+    flowLayout: false,
+};
+
+export default function HelloHilla() {
+    const [name, setName] = useState("");
+
+    return (
+        <VerticalLayout theme="padding" id={"no-flow-hilla"}>
+            <TextField label="Your name for Hilla" onValueChanged={(e) => setName(e.detail.value)} />
+            <Button onClick = {() => Notification.show(`Hello ${name}` , {
+                position: 'middle',
+            })}> Say hello </Button>
+        </VerticalLayout>
+    );
+}

vaadin-platform-react-hybrid-test/src/main/frontend/views/home/deep/hello.tsx

@@ -0,0 +1,24 @@
+import { Button, TextField, VerticalLayout } from "@vaadin/react-components";
+import type { ViewConfig } from "@vaadin/hilla-file-router/types.js";
+import { useState } from "react";
+import { Notification } from '@vaadin/react-components/Notification.js';
+
+export const config: ViewConfig = {
+    menu: {
+        title: "Non root React in Flow",
+    },
+    title: "React in Flow Layout Deep Tree"
+};
+
+export default function HelloHilla() {
+    const [name, setName] = useState("");
+
+    return (
+        <VerticalLayout theme="padding" id={"flow-hilla-deep-tree"}>
+            <TextField label="Your name for Hilla" onValueChanged={(e) => setName(e.detail.value)} />
+            <Button onClick = {() => Notification.show(`Hello ${name}` , {
+                position: 'middle',
+            })}> Say hello </Button>
+        </VerticalLayout>
+    );
+}

vaadin-platform-react-hybrid-test/src/main/java/com/vaadin/platform/react/test/views/DeepLayout.java

@@ -0,0 +1,20 @@
+package com.vaadin.platform.react.test.views;
+
+import com.vaadin.flow.component.applayout.AppLayout;
+import com.vaadin.flow.component.applayout.DrawerToggle;
+import com.vaadin.flow.component.html.Footer;
+import com.vaadin.flow.component.html.H1;
+import com.vaadin.flow.component.html.Header;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.orderedlayout.Scroller;
+import com.vaadin.flow.component.sidenav.SideNav;
+import com.vaadin.flow.component.sidenav.SideNavItem;
+import com.vaadin.flow.router.Layout;
+import com.vaadin.flow.router.RoutePrefix;
+import com.vaadin.flow.server.menu.MenuConfiguration;
+import com.vaadin.flow.theme.lumo.LumoUtility;
+
+@Layout("/home/deep")
+public class DeepLayout extends FlowLayout {
+
+}

vaadin-platform-react-hybrid-test/src/main/java/com/vaadin/platform/react/test/views/FlowLayout.java

@@ -54,6 +54,10 @@ private SideNav createNavigation() {
                 nav.addItem(
                         new SideNavItem(menuEntry.title(), menuEntry.path()));
             }
+            if(menuEntry.path().startsWith("home") || menuEntry.path().startsWith("/home")) {
+                nav.addItem(
+                        new SideNavItem(menuEntry.title(), menuEntry.path()));
+            }
         });
 
         return nav;

vaadin-platform-react-hybrid-test/src/test/java/com/vaadin/platform/react/test/FlowMainLayoutIT.java

@@ -8,6 +8,7 @@
 
 import com.vaadin.flow.component.button.testbench.ButtonElement;
 import com.vaadin.flow.component.html.testbench.AnchorElement;
+import com.vaadin.flow.component.sidenav.testbench.SideNavItemElement;
 
 public class FlowMainLayoutIT extends AbstractPlatformTest {
 
@@ -16,13 +17,49 @@ public void hillaViewInFlowLayout() {
         waitUntil(ExpectedConditions.presenceOfElementLocated(
                 By.id("flow-main")));
 
-        // Navigate to Flow view
+        // Navigate to Hilla view
         getMenuElement("Hello React in Flow Layout").get().click();
 
         waitUntil(ExpectedConditions.presenceOfElementLocated(
                 By.id("flow-hilla")));
 
-        // navigate away from Flow view
+        // navigate away from Hilla view
+        getMenuElement("Flow Hello").get().click();
+
+        waitForElement("Should have navigated to HelloWorld Flow",
+                By.id("flow-hello"));
+    }
+
+    @Test
+    public void hillaViewWithFlowOptOut() {
+        waitUntil(ExpectedConditions.presenceOfElementLocated(
+                By.id("flow-main")));
+
+        // Navigate to Hilla view without Flow layout
+        SideNavItemElement helloReactNoFlowLayout = getMenuElement(
+                "Hello React NO Flow Layout").get();
+        helloReactNoFlowLayout.click();
+
+        waitUntil(ExpectedConditions.presenceOfElementLocated(
+                By.id("no-flow-hilla")));
+
+        Assert.assertTrue("No menu should be available for view",
+                ExpectedConditions.stalenessOf(helloReactNoFlowLayout)
+                        .apply(getDriver()));
+    }
+
+    @Test
+    public void hillaView_deepTree_FlowLayoutExists() {
+        waitUntil(ExpectedConditions.presenceOfElementLocated(
+                By.id("flow-main")));
+
+        // Navigate to Hilla view
+        getMenuElement("Non root React in Flow").get().click();
+
+        waitUntil(ExpectedConditions.presenceOfElementLocated(
+                By.id("flow-hilla-deep-tree")));
+
+        // navigate away from Hilla view
         getMenuElement("Flow Hello").get().click();
 
         waitForElement("Should have navigated to HelloWorld Flow",