test(e2e): added example for non-ajax autocomplete field

Author: Marcus Stöhr

apps/e2e/README.md

@@ -16,7 +16,7 @@ to ensure they work as expected for multiple Symfony versions and various browse
 
 ```shell
 docker compose up -d
-symfony php ../.github/build-packages.php
+symfony php ../../.github/build-packages.php
 
 SYMFONY_REQUIRE=6.4.* symfony composer update
 # or...

apps/e2e/src/Controller/AutocompleteController.php

@@ -2,14 +2,21 @@
 
 namespace App\Controller;
 
-use Psr\Log\LoggerInterface;
+use App\Form\Type\AutocompleteSelectType;
 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-autocomplete')]
 final class AutocompleteController extends AbstractController
 {
+    #[Route('/non-ajax')]
+    public function index()
+    {
+        $form = $this->createForm(AutocompleteSelectType::class);
+
+        return $this->render(
+            'ux_autocomplete/index.html.twig',
+            ['form' => $form->createView()]
+        );
+    }
 }

apps/e2e/src/Form/Type/AutocompleteSelectType.php

@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+class AutocompleteSelectType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder->add(
+            'favorite_fruit',
+            ChoiceType::class,
+            [
+                'choices' => [
+                    'Apple' => 'apple',
+                    'Banana' => 'banana',
+                    'Cherry' => 'cherry',
+                    'Coconut' => 'coconut',
+                    'Grape' => 'grape',
+                    'Kiwi' => 'kiwi',
+                    'Lemon' => 'lemon',
+                    'Mango' => 'mango',
+                    'Orange' => 'orange',
+                    'Papaya' => 'papaya',
+                    'Peach' => 'peach',
+                    'Pineapple' => 'pineapple',
+                    'Pear' => 'pear',
+                    'Pomegranate' => 'pomegranate',
+                    'Pomelo' => 'pomelo',
+                    'Raspberry' => 'raspberry',
+                    'Strawberry' => 'strawberry',
+                    'Watermelon' => 'watermelon',
+                ],
+                'autocomplete' => true,
+                'label' => 'Your favorite fruit:'
+            ]
+        );
+    }
+}

apps/e2e/src/Repository/ExampleRepository.php

@@ -21,8 +21,10 @@ class ExampleRepository
      */
     private array $examples;
 
-    public function __construct() {
+    public function __construct()
+    {
         $this->examples = [
+            new Example(UxPackage::Autocomplete, 'Autocomplete (non-ajax)', 'An autocomplete component to enhance a simple choice field.', '/ux-autocomplete/non-ajax'),
             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'),
@@ -43,14 +45,14 @@ public function __construct() {
             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::Translator, 'Basic translation', 'A simple translation example using the Translator component', '/ux-translator/basic'),
-           new Example(UxPackage::Translator, 'Translation with parameter', 'Translation example with dynamic parameters', '/ux-translator/with-parameter'),
-           new Example(UxPackage::Translator, 'ICU Translation with `select` argument', 'ICU message format example using the `select` argument', '/ux-translator/icu-select'),
-           new Example(UxPackage::Translator, 'ICU Translation with `plural` argument', 'ICU message format example using the `plural` argument', '/ux-translator/icu-plural'),
-           new Example(UxPackage::Translator, 'ICU Translation with `selectordinal` argument', 'ICU message format example using the `selectordinal` argument', '/ux-translator/icu-selectordinal'),
-           new Example(UxPackage::Translator, 'ICU Translation with `date` and `time` arguments', 'ICU message format example using `date` and `time` arguments', '/ux-translator/icu-date-time'),
-           new Example(UxPackage::Translator, 'ICU Translation with `number` and `percent` arguments', 'ICU message format example using `number` and `percent` arguments', '/ux-translator/icu-number-percent'),
-           new Example(UxPackage::Translator, 'ICU Translation with `number` and `currency` arguments', 'ICU message format example using `number` and `currency` arguments', '/ux-translator/icu-number-currency'),
+            new Example(UxPackage::Translator, 'Basic translation', 'A simple translation example using the Translator component', '/ux-translator/basic'),
+            new Example(UxPackage::Translator, 'Translation with parameter', 'Translation example with dynamic parameters', '/ux-translator/with-parameter'),
+            new Example(UxPackage::Translator, 'ICU Translation with `select` argument', 'ICU message format example using the `select` argument', '/ux-translator/icu-select'),
+            new Example(UxPackage::Translator, 'ICU Translation with `plural` argument', 'ICU message format example using the `plural` argument', '/ux-translator/icu-plural'),
+            new Example(UxPackage::Translator, 'ICU Translation with `selectordinal` argument', 'ICU message format example using the `selectordinal` argument', '/ux-translator/icu-selectordinal'),
+            new Example(UxPackage::Translator, 'ICU Translation with `date` and `time` arguments', 'ICU message format example using `date` and `time` arguments', '/ux-translator/icu-date-time'),
+            new Example(UxPackage::Translator, 'ICU Translation with `number` and `percent` arguments', 'ICU message format example using `number` and `percent` arguments', '/ux-translator/icu-number-percent'),
+            new Example(UxPackage::Translator, 'ICU Translation with `number` and `currency` arguments', 'ICU message format example using `number` and `currency` arguments', '/ux-translator/icu-number-currency'),
             new Example(UxPackage::Vue, 'Basic Vue Component', 'A basic Vue component that displays a welcoming message', '/ux-vue/'),
         ];
     }

apps/e2e/templates/ux_autocomplete/index.html.twig

@@ -1,3 +1,8 @@
 {% extends 'example.html.twig' %}
 
-{% block example %}{% endblock %}
+{% block example %}
+Autocomplete:
+    {{ form_start(form)  }}
+    {{ form_widget(form.favorite_fruit) }}
+    {{ form_end(form) }}
+{% endblock %}