Add E2E tests for LiveComponent

apps/e2e/.symfony.local.yaml

@@ -1,2 +1,3 @@
 http:
     port: 9876
+    no_tls: true

apps/e2e/composer.json

@@ -38,7 +38,10 @@
         "symfony/http-client": "6.4.*|7.3.*",
         "symfony/intl": "6.4.*|7.3.*",
         "symfony/monolog-bundle": "^3.10",
+        "symfony/property-access": "6.4.*|7.3.*",
+        "symfony/property-info": "6.4.*|7.3.*",
         "symfony/runtime": "6.4.*|7.3.*",
+        "symfony/serializer": "6.4.*|7.3.*",
         "symfony/stimulus-bundle": "^2.29.1",
         "symfony/twig-bundle": "6.4.*|7.3.*",
         "symfony/ux-autocomplete": "^2.29.1",

apps/e2e/src/Controller/AutocompleteController.php

@@ -8,10 +8,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-autocomplete')]
+#[Route('/ux-autocomplete', name: 'app_ux_autocomplete_')]
 final class AutocompleteController extends AbstractController
 {
-    #[Route('/without-ajax')]
+    #[Route('/without-ajax', name: 'without_ajax')]
     public function withoutAjax(): Response
     {
         $formBuilder = $this->createFormBuilder();
@@ -47,7 +47,7 @@ public function withoutAjax(): Response
         ]);
     }
 
-    #[Route('/with-ajax')]
+    #[Route('/with-ajax', name: 'with_ajax')]
     public function withAjax(): Response
     {
         $formBuilder = $this->createFormBuilder();
@@ -60,7 +60,7 @@ public function withAjax(): Response
         ]);
     }
 
-    #[Route('/custom-controller')]
+    #[Route('/custom-controller', name: 'custom_controller')]
     public function customController(): Response
     {
         return $this->render('ux_autocomplete/custom_controller.html.twig');

apps/e2e/src/Controller/ChartjsController.php

@@ -8,10 +8,10 @@
 use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
 use Symfony\UX\Chartjs\Model\Chart;
 
-#[Route('/ux-chartjs')]
+#[Route('/ux-chartjs', name: 'app_ux_chartjs_')]
 final class ChartjsController extends AbstractController
 {
-    #[Route('/without-options')]
+    #[Route('/without-options', name: 'without_options')]
     public function withoutOptions(ChartBuilderInterface $chartBuilder): Response
     {
         $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
@@ -33,7 +33,7 @@ public function withoutOptions(ChartBuilderInterface $chartBuilder): Response
         ]);
     }
 
-    #[Route('/with-options')]
+    #[Route('/with-options', name: 'with_options')]
     public function withOptions(ChartBuilderInterface $chartBuilder): Response
     {
         $chart = $chartBuilder->createChart(Chart::TYPE_LINE);

apps/e2e/src/Controller/CropperjsController.php

@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-cropperjs')]
+#[Route('/ux-cropperjs', name: 'app_ux_cropperjs_')]
 final class CropperjsController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_cropperjs/index.html.twig', [

apps/e2e/src/Controller/DropzoneController.php

@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-dropzone')]
+#[Route('/ux-dropzone', name: 'app_ux_dropzone_')]
 final class DropzoneController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_dropzone/index.html.twig', [

apps/e2e/src/Controller/HomeController.php

@@ -2,18 +2,15 @@
 
 namespace App\Controller;
 
-use App\Repository\ExampleRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
 final class HomeController extends AbstractController
 {
     #[Route('/', name: 'app_home')]
-    public function index(ExampleRepository $exampleRepository): Response
+    public function index(): Response
     {
-        return $this->render('home.html.twig', [
-            'examples_by_package' => $exampleRepository->findAllByPackage(),
-        ]);
+        return $this->render('home.html.twig');
     }
 }

apps/e2e/src/Controller/IconsController.php

@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-icons')]
+#[Route('/ux-icons', name: 'app_ux_icons_')]
 final class IconsController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_icons/index.html.twig', [

apps/e2e/src/Controller/LiveComponentController.php

@@ -6,14 +6,68 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-live-component')]
+#[Route('/ux-live-component', name: 'app_ux_live_component_')]
 final class LiveComponentController extends AbstractController
 {
-    #[Route('/')]
-    public function index(): Response
+    #[Route('/counter', name: 'counter')]
+    public function counter(): Response
     {
-        return $this->render('ux_live_component/index.html.twig', [
-            'controller_name' => 'LiveComponentController',
+        return $this->render('ux_live_component/counter.html.twig');
+    }
+
+    #[Route('/registration-form', name: 'registration_form')]
+    public function registrationForm(): Response
+    {
+        return $this->render('ux_live_component/registration_form.html.twig');
+    }
+
+    #[Route('/fruits/{page?1}', name: 'fruits')]
+    public function fruits(int $page): Response
+    {
+        return $this->render('ux_live_component/fruits.html.twig', [
+            'page' => $page,
         ]);
     }
+
+    #[Route('/with-dto', name: 'with_dto')]
+    public function withDto(): Response
+    {
+        return $this->render('ux_live_component/with_dto.html.twig');
+    }
+
+    #[Route('/with-dto-collection', name: 'with_dto_collection')]
+    public function withDtoCollection(): Response
+    {
+        return $this->render('ux_live_component/with_dto_collection.html.twig');
+    }
+
+    #[Route('/with-dto-and-serializer', name: 'with_dto_and_serializer')]
+    public function withDtoAndSerializer(): Response
+    {
+        return $this->render('ux_live_component/with_dto_and_serializer.html.twig');
+    }
+
+    #[Route('/with-dto-and-custom-hydration-methods', name: 'with_dto_and_custom_hydration_methods')]
+    public function withDtoAndCustomHydrationMethods(): Response
+    {
+        return $this->render('ux_live_component/with_dto_and_custom_hydration_methods.html.twig');
+    }
+
+    #[Route('/with-dto-and-hydration-extension', name: 'with_dto_and_hydration_extension')]
+    public function withDtoAndHydrationExtension(): Response
+    {
+        return $this->render('ux_live_component/with_dto_and_hydration_extension.html.twig');
+    }
+
+    #[Route('/item-list', name: 'item_list')]
+    public function itemList(): Response
+    {
+        return $this->render('ux_live_component/item_list.html.twig');
+    }
+
+    #[Route('/with-aliased-live-props', name: 'with_aliased_live_props')]
+    public function withAliasedLiveProps(): Response
+    {
+        return $this->render('ux_live_component/with_aliased_live_props.html.twig');
+    }
 }

apps/e2e/src/Controller/MapController.php

@@ -19,10 +19,10 @@
 use Symfony\UX\Map\Polyline;
 use Symfony\UX\Map\Rectangle;
 
-#[Route('/ux-map')]
+#[Route('/ux-map', name: 'app_ux_map_')]
 final class MapController extends AbstractController
 {
-    #[Route('/basic')]
+    #[Route('/basic', name: 'basic')]
     public function basic(
         #[MapQueryParameter] MapRenderer $renderer
     ): Response {
@@ -34,7 +34,7 @@ public function basic(
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-markers-and-fit-bounds-to-markers')]
+    #[Route('/with-markers-and-fit-bounds-to-markers', name: 'with_markers_and_fit_bounds_to_markers')]
     public function withMarkersAndFitBoundsToMarkers(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -52,7 +52,7 @@ public function withMarkersAndFitBoundsToMarkers(#[MapQueryParameter] MapRendere
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-markers-and-zoomed-on-paris')]
+    #[Route('/with-markers-and-zoomed-on-paris', name: 'with_markers_and_zoomed_on_paris')]
     public function withMarkersZoomedOnParis(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -71,7 +71,7 @@ public function withMarkersZoomedOnParis(#[MapQueryParameter] MapRenderer $rende
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-markers-and-info-windows')]
+    #[Route('/with-markers-and-info-windows', name: 'with_markers_and_info_windows')]
     public function withMarkersAndInfoWindows(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -91,7 +91,7 @@ public function withMarkersAndInfoWindows(#[MapQueryParameter] MapRenderer $rend
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-markers-and-custom-icons')]
+    #[Route('/with-markers-and-custom-icons', name: 'with_markers_and_custom_icons')]
     public function withMarkersAndCustomIcons(
         #[MapQueryParameter] MapRenderer $renderer,
         #[Autowire(service: 'asset_mapper.asset_package')] PackageInterface $package,
@@ -119,7 +119,7 @@ public function withMarkersAndCustomIcons(
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-polygons')]
+    #[Route('/with-polygons', name: 'with_polygons')]
     public function withPolygons(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -160,7 +160,7 @@ public function withPolygons(#[MapQueryParameter] MapRenderer $renderer): Respon
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-polylines')]
+    #[Route('/with-polylines', name: 'with_polylines')]
     public function withPolylines(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -192,7 +192,7 @@ public function withPolylines(#[MapQueryParameter] MapRenderer $renderer): Respo
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-circles')]
+    #[Route('/with-circles', name: 'with_circles')]
     public function withCircles(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -217,7 +217,7 @@ public function withCircles(#[MapQueryParameter] MapRenderer $renderer): Respons
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-rectangles')]
+    #[Route('/with-rectangles', name: 'with_rectangles')]
     public function withRectangles(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))

apps/e2e/src/Controller/NotifyController.php

@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-notify')]
+#[Route('/ux-notify', name: 'app_ux_notify_')]
 final class NotifyController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_notify/index.html.twig', [

apps/e2e/src/Controller/ReactController.php

@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-react')]
+#[Route('/ux-react', name: 'app_ux_react_')]
 final class ReactController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_react/index.html.twig');

apps/e2e/src/Controller/SvelteController.php

@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-svelte')]
+#[Route('/ux-svelte', name: 'app_ux_svelte_')]
 final class SvelteController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_svelte/index.html.twig');

apps/e2e/src/Controller/TestAutocompleteController.php

@@ -8,17 +8,17 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/test')]
+#[Route('/test-autocomplete', name: 'app_test_autocomplete_')]
 final class TestAutocompleteController extends AbstractController
 {
-    #[Route('/autocomplete-dynamic-form', name: 'test_autocomplete_dynamic_form')]
+    #[Route('/dynamic-form', name: 'dynamic_form')]
     public function dynamicForm(): Response
     {
         return $this->render('test/autocomplete_dynamic_form.html.twig');
     }
 
-    #[Route('/autocomplete/movie', name: 'test_autocomplete_movie')]
-    public function movieAutocomplete(Request $request): JsonResponse
+    #[Route('/movie', name: 'movie')]
+    public function movie(Request $request): JsonResponse
     {
         $query = $request->query->get('query', '');
 
@@ -39,8 +39,8 @@ public function movieAutocomplete(Request $request): JsonResponse
         ]);
     }
 
-    #[Route('/autocomplete/videogame', name: 'test_autocomplete_videogame')]
-    public function videogameAutocomplete(Request $request): JsonResponse
+    #[Route('/videogame', name: 'videogame')]
+    public function videogame(Request $request): JsonResponse
     {
         $query = $request->query->get('query', '');