Manipuler un champ Select2 avec Behat

Cet article a été publié depuis plus de 6 mois, cela signifie que le contenu peut ne plus être d'actualité.

Si vous développez en PHP, vous devez très certainement connaître Behat, le framework permettant de faire du développement piloté par le comportement (BDD, Behaviour Driven Development en anglais). Personnellement, je suis toujours embêté lorsque je me retrouve à écrire des scénarios devant manipuler une interface qui utilise le composant Select2 car il n’est pas possible de manipuler ce champ au travers de l’extension Mink.

Pour cela, il est nécessaire de créer des contextes personnalisés qui ajouteront des actions permettant de manipuler la liste déroulante. Etant donnée que je n’ai rien trouvé sur le Web, je vous partage le code qui permet d’interagir avec un champ Select2 dans un scénarii Behat.

/**
 * @When /^(?:|I )fill in select2 input "(?P<field>(?:[^"]|\\")*)" with "(?P<value>(?:[^"]|\\")*)" and select "(?P<entry>(?:[^"]|\\")*)"$/
 */
public function fillInSelectInputWithAndSelect($field, $value, $entry)
{
    $page = $this->getSession()->getPage();

    $inputField = $page->find('css', $field);
    if (!$inputField) {
        throw new \Exception('No field found');
    }

    $choice = $inputField->getParent()->find('css', '.select2-selection');
    if (!$choice) {
        throw new \Exception('No select2 choice found');
    }
    $choice->press();

    $select2Input = $page->find('css', '.select2-search__field');
    if (!$select2Input) {
        throw new \Exception('No input found');
    }
    $select2Input->setValue($value);

    $this->getSession()->wait(1000);

    $chosenResults = $page->findAll('css', '.select2-results li');
    foreach ($chosenResults as $result) {
        if ($result->getText() == $entry) {
            $result->click();
            break;
        }
    }
}

Avec ma société, nous avons également décidé de publier une extension Behat installable via Composer contenant un contexte permettant la manipulation complète d’un champ Select2. Cette dernière est disponible sur Github.