From c18daaa9fe3abd9191a270af377d35f1b4240e5c Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Fri, 12 Sep 2025 14:48:05 +0200 Subject: [PATCH] [App/E2E] Add examples listing on homepage, improve example page --- .../src/Controller/AutocompleteController.php | 52 ------------ apps/e2e/src/Controller/ChartjsController.php | 48 ++++++++++- apps/e2e/src/Controller/HomeController.php | 7 +- apps/e2e/src/Controller/MapController.php | 2 +- .../ResolveExampleForUrlListener.php | 36 +++++++++ apps/e2e/src/Example.php | 23 ++++++ apps/e2e/src/Repository/ExampleRepository.php | 79 +++++++++++++++++++ apps/e2e/src/UxPackage.php | 53 +++++++++++++ apps/e2e/templates/base.html.twig | 1 + apps/e2e/templates/example.html.twig | 22 ++++++ apps/e2e/templates/home.html.twig | 22 +++++- .../templates/ux_autocomplete/index.html.twig | 4 +- apps/e2e/templates/ux_chartjs/index.html.twig | 4 +- .../templates/ux_cropperjs/index.html.twig | 4 +- .../e2e/templates/ux_dropzone/index.html.twig | 4 +- apps/e2e/templates/ux_icons/index.html.twig | 4 +- .../ux_live_component/index.html.twig | 4 +- .../e2e/templates/ux_map/render_map.html.twig | 4 +- apps/e2e/templates/ux_notify/index.html.twig | 4 +- apps/e2e/templates/ux_react/index.html.twig | 4 +- apps/e2e/templates/ux_svelte/index.html.twig | 4 +- .../templates/ux_translator/index.html.twig | 4 +- apps/e2e/templates/ux_turbo/index.html.twig | 4 +- .../ux_twig_component/index.html.twig | 4 +- apps/e2e/templates/ux_typed/index.html.twig | 4 +- apps/e2e/templates/ux_vue/index.html.twig | 4 +- .../Leaflet/assets/test/browser/map.test.ts | 18 ++--- 27 files changed, 335 insertions(+), 88 deletions(-) create mode 100644 apps/e2e/src/EventListener/ResolveExampleForUrlListener.php create mode 100644 apps/e2e/src/Example.php create mode 100644 apps/e2e/src/Repository/ExampleRepository.php create mode 100644 apps/e2e/src/UxPackage.php create mode 100644 apps/e2e/templates/example.html.twig diff --git a/apps/e2e/src/Controller/AutocompleteController.php b/apps/e2e/src/Controller/AutocompleteController.php index 7e4ad5d1fd7..42d875fe685 100644 --- a/apps/e2e/src/Controller/AutocompleteController.php +++ b/apps/e2e/src/Controller/AutocompleteController.php @@ -12,56 +12,4 @@ #[Route('/ux-autocomplete')] final class AutocompleteController extends AbstractController { - public function __construct(private readonly LoggerInterface $logger) - { - } - - #[Route('/without-options')] - public function withoutOptions(ChartBuilderInterface $chartBuilder): Response - { - $this->logger->critical('qsd'); - $chart = $chartBuilder->createChart(Chart::TYPE_LINE); - - $chart->setData([ - 'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - 'datasets' => [ - [ - 'label' => 'My First dataset', - 'backgroundColor' => 'rgb(255, 99, 132)', - 'borderColor' => 'rgb(255, 99, 132)', - 'data' => [0, 10, 5, 2, 20, 30, 45], - ], - ], - ]); - - return $this->render('ux_autocomplete/index.html.twig', [ - 'chart' => $chart, - ]); - } - - #[Route('/with-options')] - public function withOptions(ChartBuilderInterface $chartBuilder): Response - { - $chart = $chartBuilder->createChart(Chart::TYPE_LINE); - - $chart->setData([ - 'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - 'datasets' => [ - [ - 'label' => 'My First dataset', - 'backgroundColor' => 'rgb(255, 99, 132)', - 'borderColor' => 'rgb(255, 99, 132)', - 'data' => [0, 10, 5, 2, 20, 30, 45], - ], - ], - ]); - - $chart->setOptions([ - 'showLines' => false, - ]); - - return $this->render('ux_autocomplete/index.html.twig', [ - 'chart' => $chart, - ]); - } } diff --git a/apps/e2e/src/Controller/ChartjsController.php b/apps/e2e/src/Controller/ChartjsController.php index fb81cd5df8a..f303b2382c7 100644 --- a/apps/e2e/src/Controller/ChartjsController.php +++ b/apps/e2e/src/Controller/ChartjsController.php @@ -5,15 +5,57 @@ use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\Routing\Attribute\Route; +use Symfony\UX\Chartjs\Builder\ChartBuilderInterface; +use Symfony\UX\Chartjs\Model\Chart; #[Route('/ux-chartjs')] final class ChartjsController extends AbstractController { - #[Route('/')] - public function index(): Response + #[Route('/without-options')] + public function withoutOptions(ChartBuilderInterface $chartBuilder): Response { + $chart = $chartBuilder->createChart(Chart::TYPE_LINE); + + $chart->setData([ + 'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + 'datasets' => [ + [ + 'label' => 'My First dataset', + 'backgroundColor' => 'rgb(255, 99, 132)', + 'borderColor' => 'rgb(255, 99, 132)', + 'data' => [0, 10, 5, 2, 20, 30, 45], + ], + ], + ]); + + return $this->render('ux_chartjs/index.html.twig', [ + 'chart' => $chart, + ]); + } + + #[Route('/with-options')] + public function withOptions(ChartBuilderInterface $chartBuilder): Response + { + $chart = $chartBuilder->createChart(Chart::TYPE_LINE); + + $chart->setData([ + 'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + 'datasets' => [ + [ + 'label' => 'My First dataset', + 'backgroundColor' => 'rgb(255, 99, 132)', + 'borderColor' => 'rgb(255, 99, 132)', + 'data' => [0, 10, 5, 2, 20, 30, 45], + ], + ], + ]); + + $chart->setOptions([ + 'showLines' => false, + ]); + return $this->render('ux_chartjs/index.html.twig', [ - 'controller_name' => 'ChartjsController', + 'chart' => $chart, ]); } } diff --git a/apps/e2e/src/Controller/HomeController.php b/apps/e2e/src/Controller/HomeController.php index 76f7402fa88..31e48e7d8a8 100644 --- a/apps/e2e/src/Controller/HomeController.php +++ b/apps/e2e/src/Controller/HomeController.php @@ -2,6 +2,7 @@ namespace App\Controller; +use App\Repository\ExampleRepository; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\Routing\Attribute\Route; @@ -9,8 +10,10 @@ final class HomeController extends AbstractController { #[Route('/', name: 'app_home')] - public function index(): Response + public function index(ExampleRepository $exampleRepository): Response { - return $this->render('home.html.twig'); + return $this->render('home.html.twig', [ + 'examples_by_package' => $exampleRepository->findAllByPackage(), + ]); } } diff --git a/apps/e2e/src/Controller/MapController.php b/apps/e2e/src/Controller/MapController.php index 629fbbbdf79..b374a859317 100644 --- a/apps/e2e/src/Controller/MapController.php +++ b/apps/e2e/src/Controller/MapController.php @@ -143,7 +143,7 @@ public function withPolygons(#[MapQueryParameter] MapRenderer $renderer): Respon new Point(48.856613, 2.352222), // Paris ], ], - infoWindow: new InfoWindow(content: 'A weird shape on the France'), + infoWindow: new InfoWindow(content: 'A weird shape on France'), )) ->addPolygon(new Polygon( diff --git a/apps/e2e/src/EventListener/ResolveExampleForUrlListener.php b/apps/e2e/src/EventListener/ResolveExampleForUrlListener.php new file mode 100644 index 00000000000..1b056a18c0d --- /dev/null +++ b/apps/e2e/src/EventListener/ResolveExampleForUrlListener.php @@ -0,0 +1,36 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App\EventListener; + +use App\Repository\ExampleRepository; +use Symfony\Component\EventDispatcher\Attribute\AsEventListener; +use Symfony\Component\HttpKernel\Event\RequestEvent; + +#[AsEventListener] +class ResolveExampleForUrlListener +{ + public function __construct( + private ExampleRepository $exampleRepository + ) + { + } + + public function __invoke(RequestEvent $event): void + { + if (!$event->isMainRequest()) { + return; + } + + $example = $this->exampleRepository->findOneByUrl($event->getRequest()->getRequestUri()); + $event->getRequest()->attributes->set('_example', $example); + } +} diff --git a/apps/e2e/src/Example.php b/apps/e2e/src/Example.php new file mode 100644 index 00000000000..9ecade603f4 --- /dev/null +++ b/apps/e2e/src/Example.php @@ -0,0 +1,23 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App; + +final readonly class Example +{ + public function __construct( + public UxPackage $uxPackage, + public string $name, + public string $description, + public string $url + ) { + } +} diff --git a/apps/e2e/src/Repository/ExampleRepository.php b/apps/e2e/src/Repository/ExampleRepository.php new file mode 100644 index 00000000000..fcd908ec20c --- /dev/null +++ b/apps/e2e/src/Repository/ExampleRepository.php @@ -0,0 +1,79 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App\Repository; + +use App\Example; +use App\UxPackage; + +class ExampleRepository +{ + /** + * @var list + */ + private array $examples; + + public function __construct() { + $this->examples = [ + new Example(UxPackage::Map, 'Basic map (Leaflet)', 'A basic map centered on Paris with zoom level 12', '/ux-map/basic?renderer=leaflet'), + new Example(UxPackage::Map, 'Basic map (Google)', 'A basic map centered on Paris with zoom level 12', '/ux-map/basic?renderer=google'), + new Example(UxPackage::Map, 'With markers, fit bounds (Leaflet)', 'A map with 2 markers, and the bounds are automatically adjusted to fit both markers', '/ux-map/with-markers-and-fit-bounds-to-markers?renderer=leaflet'), + new Example(UxPackage::Map, 'With markers, fit bounds (Google)', 'A map with 2 markers, and the bounds are automatically adjusted to fit both markers', '/ux-map/with-markers-and-fit-bounds-to-markers?renderer=google'), + new Example(UxPackage::Map, 'With markers, zoomed on Paris (Leaflet)', 'A map with 2 markers (Paris and Lyon), zoomed on Paris', '/ux-map/with-markers-and-zoomed-on-paris?renderer=leaflet'), + new Example(UxPackage::Map, 'With markers, zoomed on Paris (Google)', 'A map with 2 markers (Paris and Lyon), zoomed on Paris', '/ux-map/with-markers-and-zoomed-on-paris?renderer=google'), + new Example(UxPackage::Map, 'With markers and info windows (Leaflet)', 'A map with 2 markers (Paris and Lyon), each with an info window', '/ux-map/with-markers-and-info-windows?renderer=leaflet'), + new Example(UxPackage::Map, 'With markers and info windows (Google)', 'A map with 2 markers (Paris and Lyon), each with an info window', '/ux-map/with-markers-and-info-windows?renderer=google'), + new Example(UxPackage::Map, 'With custom icon markers (Leaflet)', 'A map with 3 markers (Paris, Lyon, Bordeaux), each with a custom icon', '/ux-map/with-markers-and-custom-icons?renderer=leaflet'), + new Example(UxPackage::Map, 'With custom icon markers (Google)', 'A map with 3 markers (Paris, Lyon, Bordeaux), each with a custom icon', '/ux-map/with-markers-and-custom-icons?renderer=google'), + new Example(UxPackage::Map, 'With polygons (Leaflet)', 'A map with two polygons, one that covers main cities in Italy, and one weird shape on France', '/ux-map/with-polygons?renderer=leaflet'), + new Example(UxPackage::Map, 'With polygons (Google)', 'A map with two polygons, one that covers main cities in Italy, and one weird shape on France', '/ux-map/with-polygons?renderer=google'), + new Example(UxPackage::Map, 'With polylines (Leaflet)', 'A map with two polylines: one through Paris/Lyon/Marseille/Bordeaux, and the other one through Rennes/Nantes/Tours', '/ux-map/with-polylines?renderer=leaflet'), + new Example(UxPackage::Map, 'With polylines (Google)', 'A map with two polylines: one through Paris/Lyon/Marseille/Bordeaux, and the other one through Rennes/Nantes/Tours', '/ux-map/with-polylines?renderer=google'), + new Example(UxPackage::Map, 'With circles (Leaflet)', 'A map with two circles: one centered on Paris, the other on Lyon', '/ux-map/with-circles?renderer=leaflet'), + new Example(UxPackage::Map, 'With circles (Google)', 'A map with two circles: one centered on Paris, the other on Lyon', '/ux-map/with-circles?renderer=google'), + new Example(UxPackage::Map, 'With rectangles (Leaflet)', 'A map with two rectangles: one from Paris to Lille, the other from Lyon to Bordeaux', '/ux-map/with-rectangles?renderer=leaflet'), + new Example(UxPackage::Map, 'With rectangles (Google)', 'A map with two rectangles: one from Paris to Lille, the other from Lyon to Bordeaux', '/ux-map/with-rectangles?renderer=google'), + new Example(UxPackage::React, 'Basic React Component', 'A basic React component that displays a welcoming message', '/ux-react/'), + new Example(UxPackage::Svelte, 'Basic Svelte Component', 'A basic Svelte component that displays a welcoming message', '/ux-svelte/'), + new Example(UxPackage::Vue, 'Basic Vue Component', 'A basic Vue component that displays a welcoming message', '/ux-vue/'), + ]; + } + + /** + * @return list + */ + public function findAll(): array + { + return $this->examples; + } + + public function findAllByPackage(): array + { + $grouped = []; + + foreach ($this->examples as $example) { + $grouped[$example->uxPackage->value][] = $example; + } + + return $grouped; + } + + public function findOneByUrl(string $url): ?Example + { + foreach ($this->examples as $example) { + if ($example->url === $url) { + return $example; + } + } + + return null; + } +} diff --git a/apps/e2e/src/UxPackage.php b/apps/e2e/src/UxPackage.php new file mode 100644 index 00000000000..8e53867765e --- /dev/null +++ b/apps/e2e/src/UxPackage.php @@ -0,0 +1,53 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App; + +enum UxPackage: string +{ + case Autocomplete = 'UX Autocomplete'; + case ChartJs = 'UX Chart'; + case Cropperjs = 'UX Cropperjs'; + case Icons = 'UX Icons'; + //case LazyImage = 'UX LazyImage'; // deprecated/removed + case Map = 'UX Map'; + case Notify = 'UX Notify'; + case React = 'UX React'; + case StimulusBundle = 'UX StimulusBundle'; + case Svelte = 'UX Svelte'; + // case Swup; // deprecated/removed + // case TogglePassword; // deprecated/removed + // case Toolkit; // not subject to E2E + case Translator = 'UX Translator'; + case Turbo = 'UX Turbo'; + case TwigComponent = 'UX TwigComponent'; + // case Typed; // deprecated + case Vue = 'UX Vue'; + + public function getDocumentationUrl(): string + { + return match($this) { + self::Autocomplete => 'https://ux.symfony.com/autocomplete', + self::ChartJs => 'https://ux.symfony.com/chartjs', + self::Cropperjs => 'https://ux.symfony.com/cropperjs', + self::Icons => 'https://ux.symfony.com/icons', + self::Map => 'https://ux.symfony.com/map', + self::Notify => 'https://ux.symfony.com/notify', + self::React => 'https://ux.symfony.com/react', + self::StimulusBundle => 'https://ux.symfony.com/stimulus', + self::Svelte => 'https://ux.symfony.com/svelte', + self::Translator => 'https://ux.symfony.com/translator', + self::Turbo => 'https://ux.symfony.com/turbo', + self::TwigComponent => 'https://ux.symfony.com/twig-component', + self::Vue => 'https://ux.symfony.com/vue', + }; + } +} diff --git a/apps/e2e/templates/base.html.twig b/apps/e2e/templates/base.html.twig index d06ef91338f..001a22a5580 100644 --- a/apps/e2e/templates/base.html.twig +++ b/apps/e2e/templates/base.html.twig @@ -16,6 +16,7 @@ diff --git a/apps/e2e/templates/example.html.twig b/apps/e2e/templates/example.html.twig new file mode 100644 index 00000000000..96bb71dea4b --- /dev/null +++ b/apps/e2e/templates/example.html.twig @@ -0,0 +1,22 @@ +{% extends 'base.html.twig' %} + +{% set example = app.request.attributes.get('_example') %} + +{% block title %} + {{ example.uxPackage.value }}: {{ example.name }} +{% endblock %} + +{% block navbar_brand_after %} +
+ {{ example.uxPackage.value }} +
+{% endblock %} + +{% block main %} +
+

{{ example.name }}

+

{{ example.description }}

+ + {% block example %}{% endblock %} +
+{% endblock %} diff --git a/apps/e2e/templates/home.html.twig b/apps/e2e/templates/home.html.twig index 24c0404a933..a5f188ab23c 100644 --- a/apps/e2e/templates/home.html.twig +++ b/apps/e2e/templates/home.html.twig @@ -1,7 +1,5 @@ {% extends 'base.html.twig' %} -{% block title %}Hello HomeController!{% endblock %} - {% block main %}

Symfony UX's E2E App

@@ -13,4 +11,24 @@

+ +
+ {% for package, examples in examples_by_package %} + {% set package = enum('App\\UxPackage').from(package) %} +

{{ package.value }} 📖

+
+ {% for example in examples %} +
+
+
+
{{ example.name }}
+

{{ example.description }}

+ See example +
+
+
+ {% endfor %} +
+ {% endfor %} +
{% endblock %} diff --git a/apps/e2e/templates/ux_autocomplete/index.html.twig b/apps/e2e/templates/ux_autocomplete/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_autocomplete/index.html.twig +++ b/apps/e2e/templates/ux_autocomplete/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_chartjs/index.html.twig b/apps/e2e/templates/ux_chartjs/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_chartjs/index.html.twig +++ b/apps/e2e/templates/ux_chartjs/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_cropperjs/index.html.twig b/apps/e2e/templates/ux_cropperjs/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_cropperjs/index.html.twig +++ b/apps/e2e/templates/ux_cropperjs/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_dropzone/index.html.twig b/apps/e2e/templates/ux_dropzone/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_dropzone/index.html.twig +++ b/apps/e2e/templates/ux_dropzone/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_icons/index.html.twig b/apps/e2e/templates/ux_icons/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_icons/index.html.twig +++ b/apps/e2e/templates/ux_icons/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_live_component/index.html.twig b/apps/e2e/templates/ux_live_component/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_live_component/index.html.twig +++ b/apps/e2e/templates/ux_live_component/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_map/render_map.html.twig b/apps/e2e/templates/ux_map/render_map.html.twig index 8944c81b28c..ca064db1a19 100644 --- a/apps/e2e/templates/ux_map/render_map.html.twig +++ b/apps/e2e/templates/ux_map/render_map.html.twig @@ -1,5 +1,5 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} -{% block main %} +{% block example %} {{ ux_map(map, { 'data-testid': 'map', style: 'height: 500px' }) }} {% endblock %} diff --git a/apps/e2e/templates/ux_notify/index.html.twig b/apps/e2e/templates/ux_notify/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_notify/index.html.twig +++ b/apps/e2e/templates/ux_notify/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_react/index.html.twig b/apps/e2e/templates/ux_react/index.html.twig index 504dc3b2651..9829cee2026 100644 --- a/apps/e2e/templates/ux_react/index.html.twig +++ b/apps/e2e/templates/ux_react/index.html.twig @@ -1,6 +1,6 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} -{% block main %} +{% block example %}
diff --git a/apps/e2e/templates/ux_svelte/index.html.twig b/apps/e2e/templates/ux_svelte/index.html.twig index 3361b855b13..dac5c9c4ec0 100644 --- a/apps/e2e/templates/ux_svelte/index.html.twig +++ b/apps/e2e/templates/ux_svelte/index.html.twig @@ -1,6 +1,6 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} -{% block main %} +{% block example %}
diff --git a/apps/e2e/templates/ux_translator/index.html.twig b/apps/e2e/templates/ux_translator/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_translator/index.html.twig +++ b/apps/e2e/templates/ux_translator/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_turbo/index.html.twig b/apps/e2e/templates/ux_turbo/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_turbo/index.html.twig +++ b/apps/e2e/templates/ux_turbo/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_twig_component/index.html.twig b/apps/e2e/templates/ux_twig_component/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_twig_component/index.html.twig +++ b/apps/e2e/templates/ux_twig_component/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_typed/index.html.twig b/apps/e2e/templates/ux_typed/index.html.twig index 1503ec7374b..78c01e96007 100644 --- a/apps/e2e/templates/ux_typed/index.html.twig +++ b/apps/e2e/templates/ux_typed/index.html.twig @@ -1 +1,3 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} + +{% block example %}{% endblock %} diff --git a/apps/e2e/templates/ux_vue/index.html.twig b/apps/e2e/templates/ux_vue/index.html.twig index 7e9050f041d..6fd031a4c66 100644 --- a/apps/e2e/templates/ux_vue/index.html.twig +++ b/apps/e2e/templates/ux_vue/index.html.twig @@ -1,6 +1,6 @@ -{% extends 'base.html.twig' %} +{% extends 'example.html.twig' %} -{% block main %} +{% block example %}
diff --git a/src/Map/src/Bridge/Leaflet/assets/test/browser/map.test.ts b/src/Map/src/Bridge/Leaflet/assets/test/browser/map.test.ts index 735a1b75846..5017f1dfece 100644 --- a/src/Map/src/Bridge/Leaflet/assets/test/browser/map.test.ts +++ b/src/Map/src/Bridge/Leaflet/assets/test/browser/map.test.ts @@ -104,15 +104,15 @@ test('Can render polygons', async ({ page }) => { await expect(paths, '2 polygons must be present').toHaveCount(2); await expect(paths.nth(0)).toHaveAttribute( 'd', - 'M548 276L656 188L762 260L708 433L573 384zM615 352L696 354L678 236L640 250z' + 'M466 276L574 188L680 260L626 433L491 384zM533 352L614 354L596 236L558 250z' ); - await expect(paths.nth(1)).toHaveAttribute('d', 'M870 476L795 364L844 395L911 508z'); + await expect(paths.nth(1)).toHaveAttribute('d', 'M788 476L713 364L762 395L829 508z'); // Workaround for `paths.nth(0).click({ relative: { ... } })` which does not work, it tries to click the center of the polygon, // but since it's empty, the popup can't be opened. const firstPathBoundingBox = await paths.nth(0).boundingBox(); await page.mouse.click(firstPathBoundingBox.x + 40, firstPathBoundingBox.y + 100); - await expectOneInfoWindowToBeOpenedAndContainText(page, 'A weird shape on the France'); + await expectOneInfoWindowToBeOpenedAndContainText(page, 'A weird shape on France'); const secondPathBoundingBox = await paths.nth(1).boundingBox(); await page.mouse.click(secondPathBoundingBox.x + 50, secondPathBoundingBox.y + 40); @@ -125,8 +125,8 @@ test('Can render polylines', async ({ page }) => { const paths = page.getByTestId('map').locator('path.leaflet-interactive'); await expect(paths, '2 polylines must be present').toHaveCount(2); - await expect(paths.nth(0)).toHaveAttribute('d', 'M640 250L696 354L708 433L573 384'); - await expect(paths.nth(1)).toHaveAttribute('d', 'M548 276L551 306L603 302'); + await expect(paths.nth(0)).toHaveAttribute('d', 'M558 250L614 354L626 433L491 384'); + await expect(paths.nth(1)).toHaveAttribute('d', 'M466 276L469 306L521 302'); // Workaround for `paths.nth(0).click({ relative: { ... } })` which does not work, it tries to click the center of the polygon, // but since it's empty, the popup can't be opened. @@ -147,11 +147,11 @@ test('Can render circles', async ({ page }) => { await expect(paths, '2 circles must be present').toHaveCount(2); await expect(paths.nth(0)).toHaveAttribute( 'd', - 'M623.5256177777774,250.21082480695986a16,16 0 1,0 32,0 a16,16 0 1,0 -32,0 ' + 'M541.5256177777774,250.21082480695986a16,16 0 1,0 32,0 a16,16 0 1,0 -32,0 ' ); await expect(paths.nth(1)).toHaveAttribute( 'd', - 'M687.0390399999997,354.0936387274919a9,9 0 1,0 18,0 a9,9 0 1,0 -18,0 ' + 'M605.0390399999997,354.0936387274919a9,9 0 1,0 18,0 a9,9 0 1,0 -18,0 ' ); await paths.nth(0).click(); @@ -167,8 +167,8 @@ test('Can render rectangles', async ({ page }) => { const paths = page.getByTestId('map').locator('path.leaflet-interactive'); await expect(paths, '2 rectangles must be present').toHaveCount(2); - await expect(paths.nth(0)).toHaveAttribute('d', 'M640 250L640 188L656 188L656 250z'); - await expect(paths.nth(1)).toHaveAttribute('d', 'M573 384L573 354L696 354L696 384z'); + await expect(paths.nth(0)).toHaveAttribute('d', 'M558 250L558 188L574 188L574 250z'); + await expect(paths.nth(1)).toHaveAttribute('d', 'M491 384L491 354L614 354L614 384z'); await paths.nth(0).click(); await expectOneInfoWindowToBeOpenedAndContainText(page, 'A rectangle from Paris to Lille');