Add E2E tests for Autocomplete

.github/workflows/browser-tests.yml

@@ -73,8 +73,6 @@ jobs:
 
             - name: Configure E2E app
               run: |
-                  echo 'APP_ENV=prod' >> .env.local
-                  echo 'APP_DEBUG=0' >> .env.local
                   echo 'APP_SECRET=df4c071596e64cc75a349456f2887ae2419ae650' >> .env.local
               working-directory: apps/e2e
 
@@ -83,11 +81,12 @@ jobs:
               with:
                   working-directory: apps/e2e
                   dependency-versions: highest
-                  composer-options: --no-dev
                   custom-cache-suffix: symfony-${{ matrix.symfony }}
 
             - name: Prepare E2E app
               run: |
+                  echo 'APP_ENV=prod' >> .env.local
+                  echo 'APP_DEBUG=0' >> .env.local
                   symfony composer dump-autoload --classmap-authoritative --no-dev
                   symfony composer dump-env
                   symfony console asset-map:compile

apps/e2e/.env

@@ -23,7 +23,7 @@ APP_SECRET=
 # Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
 # IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
 #
-DATABASE_URL="sqlite:///%kernel.project_dir%/var/data_%kernel.environment%.db"
+DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
 # DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=8.0.32&charset=utf8mb4"
 # DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=10.11.2-MariaDB&charset=utf8mb4"
 # DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=16&charset=utf8"

apps/e2e/composer.json

@@ -7,7 +7,8 @@
         "auto-scripts": {
             "cache:clear": "symfony-cmd",
             "assets:install %PUBLIC_DIR%": "symfony-cmd",
-            "importmap:install": "symfony-cmd"
+            "importmap:install": "symfony-cmd",
+            "foundry:load-fixtures": "symfony-cmd"
         },
         "post-install-cmd": [
             "@auto-scripts"
@@ -69,7 +70,8 @@
         "symfony/debug-bundle": "6.4.*|7.3.*",
         "symfony/maker-bundle": "^1.64",
         "symfony/stopwatch": "6.4.*|7.3.*",
-        "symfony/web-profiler-bundle": "6.4.*|7.3.*"
+        "symfony/web-profiler-bundle": "6.4.*|7.3.*",
+        "zenstruck/foundry": "^2.8"
     },
     "config": {
         "platform": {

apps/e2e/config/bundles.php

@@ -30,4 +30,5 @@
     Symfony\UX\Translator\UxTranslatorBundle::class => ['all' => true],
     Symfony\UX\Typed\TypedBundle::class => ['all' => true],
     Symfony\UX\Vue\VueBundle::class => ['all' => true],
+    Zenstruck\Foundry\ZenstruckFoundryBundle::class => ['dev' => true, 'test' => true],
 ];

apps/e2e/config/packages/zenstruck_foundry.yaml

@@ -0,0 +1,16 @@
+when@dev: &dev
+    # See full configuration: https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#full-default-bundle-configuration
+    zenstruck_foundry:
+        persistence:
+            # Flush only once per call of `PersistentObjectFactory::create()`
+            flush_once: true
+
+    # If you use the `make:factory --test` command, you may need to uncomment the following.
+    # See https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#generate
+    #services:
+    #    App\Tests\Factory\:
+    #        resource: '%kernel.project_dir%/tests/Factory/'
+    #        autowire: true
+    #        autoconfigure: true
+
+when@test: *dev

apps/e2e/src/Controller/AutocompleteController.php

@@ -2,26 +2,66 @@
 
 namespace App\Controller;
 
-use App\Form\Type\AutocompleteSelectType;
+use App\Form\FruitAutocompleteField;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
 #[Route('/ux-autocomplete')]
 final class AutocompleteController extends AbstractController
 {
     #[Route('/without-ajax')]
-    public function index()
+    public function withoutAjax(): Response
     {
-        $form = $this->createForm(AutocompleteSelectType::class);
+        $formBuilder = $this->createFormBuilder();
+        $formBuilder->add('favorite_fruit', ChoiceType::class, [
+            'autocomplete' => true,
+            'label' => 'Your favorite fruit:',
+            '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',
+            ],
+        ]);
 
-        return $this->render(
-            'ux_autocomplete/index.html.twig',
-            ['form' => $form->createView()]
-        );
+        $form = $formBuilder->getForm();
+
+        return $this->render('ux_autocomplete/without_ajax.html.twig', [
+            'form' => $form->createView()
+        ]);
+    }
+
+    #[Route('/with-ajax')]
+    public function withAjax(): Response
+    {
+        $formBuilder = $this->createFormBuilder();
+        $formBuilder->add('favorite_fruit', FruitAutocompleteField::class);
+
+        $form = $formBuilder->getForm();
+
+        return $this->render('ux_autocomplete/with_ajax.html.twig', [
+            'form' => $form->createView()
+        ]);
     }
 
     #[Route('/custom-controller')]
-    public function customController()
+    public function customController(): Response
     {
         return $this->render('ux_autocomplete/custom_controller.html.twig');
     }

apps/e2e/src/Entity/Fruit.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Entity;
+
+use App\Repository\FruitRepository;
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity(repositoryClass: FruitRepository::class)]
+class Fruit
+{
+    #[ORM\Id]
+    #[ORM\Column(length: 64, nullable: false)]
+    private string $id;
+
+    #[ORM\Column(length: 64, nullable: false)]
+    private string $name;
+
+    public static function create(string $id, string $name): self
+    {
+        $fruit = new self();
+        $fruit->id = $id;
+        $fruit->name = $name;
+
+        return $fruit;
+    }
+
+    public function getId(): string
+    {
+        return $this->id;
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+}

apps/e2e/src/Factory/FruitFactory.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Factory;
+
+use App\Entity\Fruit;
+use Zenstruck\Foundry\Object\Instantiator;
+use Zenstruck\Foundry\Persistence\PersistentProxyObjectFactory;
+
+/**
+ * @extends PersistentProxyObjectFactory<Fruit>
+ */
+final class FruitFactory extends PersistentProxyObjectFactory
+{
+    public static function class(): string
+    {
+        return Fruit::class;
+    }
+
+    /**
+     * @see https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#model-factories
+     */
+    protected function defaults(): array|callable
+    {
+        return [];
+    }
+
+    /**
+     * @see https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#initialization
+     */
+    protected function initialize(): static
+    {
+        return $this
+            ->instantiateWith(Instantiator::namedConstructor('create'))
+        ;
+    }
+}

apps/e2e/src/Form/FruitAutocompleteField.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Form;
+
+use App\Entity\Fruit;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\Autocomplete\Form\AsEntityAutocompleteField;
+use Symfony\UX\Autocomplete\Form\BaseEntityAutocompleteType;
+
+#[AsEntityAutocompleteField]
+class FruitAutocompleteField extends AbstractType
+{
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'class' => Fruit::class,
+            'placeholder' => 'Choose a Fruit',
+            'choice_value' => static fn (?Fruit $fruit) => $fruit?->getId(),
+            'choice_label' => static fn (Fruit $fruit) => $fruit->getName(),
+        ]);
+    }
+
+    public function getParent(): string
+    {
+        return BaseEntityAutocompleteType::class;
+    }
+}

apps/e2e/src/Repository/ExampleRepository.php

@@ -24,8 +24,9 @@ class ExampleRepository
     public function __construct()
     {
         $this->examples = [
-            new Example(UxPackage::Autocomplete, 'Autocomplete (without AJAX)', 'An autocomplete component to enhance a simple choice field.', '/ux-autocomplete/without-ajax'),
-            new Example(UxPackage::Autocomplete, 'Autocomplete (custom controller)', 'An autocomplete component with a custom Stimulus controller for AJAX results.', '/ux-autocomplete/custom-controller'),
+            new Example(UxPackage::Autocomplete, 'Autocomplete (with AJAX)', 'An autocomplete form field, by fetching results with AJAX.', '/ux-autocomplete/with-ajax'),
+            new Example(UxPackage::Autocomplete, 'Autocomplete (without AJAX)', 'An autocomplete form field, by using the choses from the choice type field.', '/ux-autocomplete/without-ajax'),
+            new Example(UxPackage::Autocomplete, 'Autocomplete (custom controller)', 'An autocomplete form field, with a custom Stimulus controller for AJAX results.', '/ux-autocomplete/custom-controller'),
             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'),

apps/e2e/src/Repository/FruitRepository.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Repository;
+
+use App\Entity\Fruit;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+/**
+ * @extends ServiceEntityRepository<Fruit>
+ */
+class FruitRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, Fruit::class);
+    }
+}

apps/e2e/src/Story/AppStory.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Story;
+
+use App\Factory\FruitFactory;
+use Zenstruck\Foundry\Attribute\AsFixture;
+use Zenstruck\Foundry\Story;
+
+#[AsFixture(name: 'main')]
+final class AppStory extends Story
+{
+    public function build(): void
+    {
+        FruitFactory::createSequence([
+            ['id' => 'apple', 'name' => 'Apple'],
+            ['id' => 'banana', 'name' => 'Banana'],
+            ['id' => 'cherry', 'name' => 'Cherry'],
+            ['id' => 'coconut', 'name' => 'Coconut'],
+            ['id' => 'grape', 'name' => 'Grape'],
+            ['id' => 'kiwi', 'name' => 'Kiwi'],
+            ['id' => 'lemon', 'name' => 'Lemon'],
+            ['id' => 'mango', 'name' => 'Mango'],
+            ['id' => 'orange', 'name' => 'Orange'],
+            ['id' => 'papaya', 'name' => 'Papaya'],
+            ['id' => 'peach', 'name' => 'Peach'],
+            ['id' => 'pineapple', 'name' => 'Pineapple'],
+            ['id' => 'pear', 'name' => 'Pear'],
+            ['id' => 'pomegranate', 'name' => 'Pomegranate'],
+            ['id' => 'pomelo', 'name' => 'Pomelo'],
+            ['id' => 'raspberry', 'name' => 'Raspberry'],
+            ['id' => 'strawberry', 'name' => 'Strawberry'],
+            ['id' => 'watermelon', 'name' => 'Watermelon'],
+        ]);
+    }
+}

apps/e2e/symfony.lock

@@ -452,5 +452,18 @@
     },
     "twig/extra-bundle": {
         "version": "v3.21.0"
+    },
+    "zenstruck/foundry": {
+        "version": "2.8",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.7",
+            "ref": "7fc98f546dfeaa83cc2110634f8ff078d070b965"
+        },
+        "files": [
+            "config/packages/zenstruck_foundry.yaml",
+            "src/Story/AppStory.php"
+        ]
     }
 }

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

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