Que reste-t-il à tester quand une extension qui fonctionnait parfaitement avec les widgets classiques d’Elementor doit désormais cohabiter avec les éléments atomiques introduits par Elementor V4 ? La bonne nouvelle, découverte sur ce projet d’agence, c’est que la majorité de la couverture existante reste valable : ACF continue d’enregistrer et de restituer ses champs de la même façon, quel que soit le système d’éléments qui les affiche ensuite.
La partie qui change se situe à la frontière entre les deux systèmes : la façon dont un champ ACF est lié à un élément atomique via les nouvelles balises dynamiques, et le rendu obtenu une fois cette liaison enregistrée. C’est cette frontière, précisément, qui mérite une nouvelle suite de tests ciblée plutôt qu’une reprise complète de l’existant.
Étape 1 — Vérifier que rien ne change côté ACF
Avant d’ajouter le moindre test, un premier passage consiste à rejouer la suite PHPUnit existante sur la couche ACF sans aucune modification, pour confirmer qu’elle reste au vert avec Elementor V4 installé :
public function test_champ_acf_enregistre_et_lu(): void
{
$post_id = $this->factory()->post->create(['post_type' => 'praticien']);
update_field('specialite', 'Cardiologie', $post_id);
$this->assertSame('Cardiologie', get_field('specialite', $post_id));
}
Ce test passe sans changement, car update_field() et get_field() n’ont aucune dépendance envers le système d’affichage choisi par Elementor. C’est un point de repère rassurant : la migration ne remet pas en cause la couche de données.
Étape 2 — Identifier les éléments atomiques concernés
Sur ce projet, six types d’éléments atomiques utilisent une liaison directe à un champ ACF via une balise dynamique : le titre, le paragraphe de texte enrichi, l’image, le bouton, l’icône et le conteneur avec fond conditionnel. Chacun mérite un test dédié, car le mécanisme de liaison diffère légèrement selon le type de donnée attendu.
- Titre et paragraphe : liaison à un champ texte ou WYSIWYG
- Image : liaison à un champ image, avec gestion de la taille et du texte alternatif
- Bouton : liaison au libellé et à l’URL de destination
- Icône : liaison à un champ de sélection restreint à un jeu d’icônes autorisées
- Conteneur : liaison conditionnelle à un champ booléen pour l’affichage d’un fond
Étape 3 — Tester la balise dynamique elle-même
La balise dynamique qui expose un champ ACF aux éléments atomiques s’enregistre via le système de Dynamic Tags d’Elementor. Un test d’intégration ciblé vérifie que la valeur retournée par la balise correspond bien à celle stockée par ACF, y compris dans les cas limites comme un champ vide :
public function test_balise_dynamique_acf_retourne_valeur_attendue(): void
{
$post_id = $this->factory()->post->create();
update_field('titre_accroche', 'Consultation sans rendez-vous', $post_id);
$tag = Plugin::instance()->dynamic_tags->create_tag('acf-champ-texte', [
'settings' => ['acf_field' => 'titre_accroche'],
]);
$this->assertSame('Consultation sans rendez-vous', $tag->get_value());
}
Ce test isole précisément le point de jonction entre les deux systèmes, sans dépendre du rendu final de la page. C’est la couverture la plus rentable, car elle détecte une rupture de contrat avant même d’atteindre la couche visuelle.
Cas particulier du champ vide
Un champ ACF non renseigné doit renvoyer une valeur de repli cohérente plutôt qu’une erreur silencieuse dans l’élément atomique. Ce comportement, absent des widgets classiques qui masquaient simplement l’élément, doit être vérifié explicitement avec les éléments atomiques qui peuvent afficher une valeur par défaut visible.
Étape 4 — Vérifier le rendu final avec un test bout en bout
Un test Playwright complète la couverture en validant que la page publiée affiche bien la valeur attendue, dans le bon élément atomique, avec le bon style hérité des classes globales :
test('le titre atomique affiche le champ ACF lié', async ({ page }) => {
await page.goto('/praticiens/cardiologie-test/');
await expect(page.locator('[data-element-type="atomic-heading"]')).toHaveText(
'Consultation sans rendez-vous'
);
});
Ce test bout en bout ne remplace pas le test d’intégration ciblé sur la balise dynamique : il vérifie une couche différente, celle du rendu final tel qu’un visiteur le voit, avec les styles et la structure DOM réels des éléments atomiques.
Étape 5 — Ne pas dupliquer la couverture de migration
Un point important pour ne pas alourdir inutilement la suite : la migration du code de l’extension elle-même vers le nouveau système d’éléments, gérée par ailleurs, ne doit pas être re-testée ici. Cette suite se concentre uniquement sur la frontière entre ACF et les éléments atomiques, pas sur la conversion technique des anciens widgets.
Une migration d’éditeur ne justifie pas de tout retester : elle justifie d’identifier précisément la nouvelle frontière entre les systèmes, et de concentrer l’effort dessus.
En résumé
Sur ce projet, l’essentiel de la couverture ACF existante est resté valable sans modification face à Elementor V4. Six types d’éléments atomiques ont nécessité un test ciblé sur leur balise dynamique, complété par un test bout en bout par type pour valider le rendu final. Cette approche a permis de valider la compatibilité en une journée, contre plusieurs jours estimés initialement pour une reprise complète de la suite.
