LinKeeper une alternative à LinkTree avec Laravel et Filament - Tests et ressources
Par HappyToDev · 9 mins · Tutorial
This article also exists in English version 🇬🇧

Dans cet épisode, nous allons aller un peu plus loin avec FilamentPHP.

Mais avant cela, on va mettre en place notre environnemment pour les tests.

Nous allons utiliser pour cela PestPHP. Ce dernier est déjà présent car il a été installé en même temps que Laravel.

Afin de prendre en main Pest, on va créer deux tests très simples. Une fois que l'on aura les bases en têtes, on pourra développer le reste de notre application en se basant sur les tests.

Ce que nous allons voir aujourd'hui :

Configuration préalable de Pest

Utilisation de SQLite pour les tests

Afin de dissocier la base de données de votre application de celle qui servira pour les tests, nous allons modifier le fichier phpunit.xml situé à la racine de votre projet.

Il suffit de décommenter les deux lignes suivantes :

        <!-- <env name="DB_CONNECTION" value="sqlite"/> -->
        <!-- <env name="DB_DATABASE" value=":memory:"/> -->
        <env name="DB_CONNECTION" value="sqlite"/>
        <env name="DB_DATABASE" value=":memory:"/>

Cela permettra à Pest, qui est une surcouche à PHPUnit, d'utiliser SQLite comme moteur de base de données et de l'utiliser directement en mémoire.

Rafraichir la base de données à chaque test

Charger un compte par défaut avant chaque test

On va travailler beaucoup avec l'administration de FilamentPHP. Aussi pour éviter de répéter à chaque test que l'on souhaite se connecter avec un utilisateur enregistré, on va tout simplement indiquer à Pest que pour chaque test, il va agir comme si il était connecté avec l'utilisateur possédant l'id #1.

Pour cela, on va éditer le fichier tests\TestCase.php en ajoutant la fonction setUp suivante :


    protected function setUp(): void
    {
        parent::setUp();

        $this->actingAs(User::find(1));
    }

Ainsi avant l'exécution de chaque test, la fonction actingAs va définir l'utilisateur ayant l'id #1 comme étant l'utilisateur connecté. Ici il s'agit de mon compte HappyToDev.

Supprimer les tests fournis par défaut par PestPHP

À l'installation de Pest, ce dernier vous fournit deux tests par défaut :

Vous pouvez les supprimer ou les conserver pour vous en inspirer.

Vérification sur la page d'accueil de l'administration

Dans ce test on va aller sur la page /admin pour vérifier que

On va tout d'abord se créer un fichier de test en s'appuyant sur Artisan.

php artisan pest:test GeneralAdminPageTest

Par défaut, les tests créés seront directement stockés dans le répertoire tests\Feature.

Voici le contenu du fichier :

<?php

use Illuminate\Support\Facades\Config;

it('can view admin page', function () {
    $response = $this->get('/admin');

    $response
        ->assertStatus(200)
        ->assertSee('Dashboard')
        ->assertSee(Config('APP_NAME'));
});

Explications :

On demande à accéder en get à la page /admin et on récupère la réponse.

Dans cette réponse, on vérifie que l'on a bien un code HTTP 200, que dans le code HTML retourné on a bien le mot Dashboard et que l'on voit bien le nom de l'application défini dans notre fichier .env, ici 'LinKeeper'. On se sert pour cela du helper config().

Exécuter le test

Pour lancer l'exécution du test, à la racine de votre projet, lancez la commande suivante :

./vendor/bin/pest

Normalement vous devriez rencontrer l'erreur 403 et donc votre test ne passera pas.

Error 403

Corriger l'erreur 403

Afin de corriger cela, il faut lire la documentation de FilamentPHP qui indique que lorsque l'on passe en production, il est nécessaire de modifier le model User pour éviter justement de se prendre un mur avec l'erreur 403.

Je vous laisse implémenter les modifications nécessaires afin que votre test puisse passer.

Si vous rencontrez la moindre difficulté, écrivez moi dans les commentaires.

Exécuter à nouveau le test

Si vous avez procédé correctement aux modifications demandées par la documentation, vous devriez avoir ce résultat en lançant vos tests.

Test OK

Tester le profil utilisateur

Nous avons vu dans la leçon 2, que nous avions normalement accès au profil de l'utilisateur. Mettons en place un test qui nous permet de vérifier cela.

php artisan pest:test UserProfileTest

et ajoutons le code suivant :

it('has user profile page', function () {
    actingAs(User::find(1))->get('/admin/profile')
    ->assertStatus(200)
    ->assertSee('Profile')
    ->assertSee('Save changes');
});

Cela va nous permettre en étant connecté avec l'utilisateur ayant l'id #1 (mon utilisateur) que j'ai bien un code HTTP 200 lorsque je me rends sur la page /admin/profile et que je peux y voir les mots : 'Profile' et 'Save changes'.

Ce test est très simple mais il permet de valider que l'utilisateur a bien accès à cette page.

Lancer les tests

Comme précédemment, on lance la commande adéquate dans votre terminal :

./vendor/bin/pest

et vous devriez avoir le résultat suivant :

Tests OK

Bien à présent que nous avons fait nos premiers pas avec les tests, nous allons pouvoir aborder une approche de développement piloté par les tests en utilisant PestPHP tout au long de ce projet.

un utilisateur peut voir la liste des liens qui lui sont associés

Voici la prochaine étape du développement de notre application.

Vu que nous utilisons FilamentPHP pour le backend, un certain nombre de fonctionnalités sont développées par les équipes de FilamentPHP et le but ici ne sera pas de tester le bon fonctionnement de Filament car je ne doute pas que cela a été testé en long, en large et en travers.

Pour voir la liste de ses liens l'utilisateur va disposer d'un lien Links dans le menu du dashboard et ce lien par convention de FilamentPHP conduira à une adresse admin/links.

Initions un nouveau test, via artisan :

php artisan pest:test PageLinksTest

Tout d'abord, nous souhaitons nous assurer que la page est bien accessible.

Pour cela dans notre fichier PageLinksTest, nous allons rajouter le code suivant :

it("can access the user's links page and see 'Links' on the page", function () {
    $response = $this->get('/admin/links');

    $response
        ->assertOk()
        ->assertSeeText('Links');
});

Ce code va demander à PestPHP de charger la page /admin/links et de vérifier dans un premier temps que la page renvoie bien le code HTTP 200 et ensuite de s'assurer que le mot 'Links' est bien présent dans la page.

Vous pouvez lancez les tests avec l'option --filter pour n'exécuter que le test qui réponds à la regex passée en paramètre (voir la doc). Par exemple avec :

./vendor/bin/pest --filter "links page"

PestPHP ne lancera que notre dernier test car 'links page' est présent dans sa description.

Cela permet d'éviter de lancer tous les tests à chaque fois, surtout quand vous devez itérer plusieurs fois lors de la mise au point de votre test.

Tests KO

Le test échoue et c'est normal car la page Links n'existe pas pour le moment.

Mais à présent que le test est là et qu'il a échoué, il nous dit exactement quoi faire :

Expected response status code [200] but received 404.

On s'attendait à un code HTTP 200 et on a à la place un 404, ce qui signifie que la page demandée n'existe pas.

Il nous faut tout simplement la créer.

La page 'Links' sera une page administration de FilamentPHP. Ce sera donc une resource.

Si je reprends la définition du tutoriel fournit avec PestPHP :

In Filament, resources are static classes used to build CRUD interfaces for your Eloquent models. They describe how administrators can interact with data from your panel using tables and forms.

Dans ma grande bonté, je vous livre la version française :

Dans Filament, les ressources sont des classes statiques utilisées pour construire des interfaces CRUD pour vos modèles Eloquent. Elles décrivent comment les administrateurs peuvent interagir avec les données de votre panel en utilisant des tables et des formulaires.

On comprends donc que chaque model Eloquent sera associé à une ressource dans FilamentPHP.

Il est donc temps de créer notre ressource associée à notre modèle Link lui même couplé à notre table 'links' dans notre base de données.

php artisan make:filament-resource Link

On peut voir apparaître dans l'arborescence de notre application sous app/Filament/Resources un répertoire LinkResource et un fichier LinkResource.php.

Arborescence Filament Resources

Le répertoire LinkResource a lui-même un sous-répertoire Pages qui contient les fichiers CreateLink.php, EditLink.php et ListLinks.php. Nous aurons l'occasion d'en parler plus loin dans ce tutoriel, pour l'instant ne vous préoccupez pas de ces fichiers supplémentaires.

FilamentPHP, via cette commande Artisan, va vous générer le squelette suivant :

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\LinkResource\Pages;
use App\Filament\Resources\LinkResource\RelationManagers;
use App\Models\Link;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

class LinkResource extends Resource
{
    protected static ?string $model = Link::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                //
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                //
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListLinks::route('/'),
            'create' => Pages\CreateLink::route('/create'),
            'edit' => Pages\EditLink::route('/{record}/edit'),
        ];
    }
}

Ne nous en préoccupons pas pour le moment. Par contre relançons notre test :

./vendor/bin/pest --filter "links page"

On peut se rendre compte que cette fois-ci notre test passe au vert.

Tests OK

Si on se rends sur la page admin/links, on peut constater que la page existe bien (code HTTP 200) et que l'on peut effectivement y lire 'Links'. C'est pourquoi notre test passe au vert.

Page admin/links

Toutefois, on se rends vite compte qu'il y a quelque chose qui ne va pas. Il semble y avoir des enregistrements mais rien n'est visible dans la table qui nous présente les liens.

C'est normal nous allons devoir configurer notre fichier de resource.

Conclusion

Nous allons nous arrêter là pour cet épisode 3.

Dans ce chapitre, nous avons commencé à faire du TDD pour le développement de notre application et nous avons effleuré ce qu'était les ressources dans FilamentPHP.

Dans le prochain épisode, nous continuerons notre stratégie de tests avec PestPHP et nous ferons plus ample connaissance avec les ressources de FilamentPHP.

Comme d'habitude, j'attends vos commentaires ci-dessous.

A bientôt.

This article also exists in English version 🇬🇧

#laravel #filamentphp #php

Ce contenu t'a plu ou appris quelque chose ? 👀

Si la réponse est oui, alors tu peux peut-être me supporter 💪 ?

Il y a plusieurs façon de me supporter et certaines sont gratuites, je t'invite à les découvrir dans ma page dédiée 👇