Structure HTML, CSS et tests d'acceptation

1. À l'aide de PhpStorm, créez la classe « AppWebPage »
2. Redéfinissez le constructeur de « AppWebPage » :
   1. appelez le constructeur de la classe parente
   2. ajoutez la feuille de style « /css/style.css »
3. Redéfinissez la méthode « toHtml() » qui produira une structure HTML complète, conforme à la maquette de l'application
   Remarque importante

   Pour faciliter la création du contenu et homogénéiser les diverses productions, le titre « h1 » prendra la valeur du titre « title » de la page Web.

4. Modifiez le programme « index.php » pour qu'il utilise la nouvelle classe « AppWebPage »

1. Créez la feuille de style « css/style.css »
2. Modifiez « index.php » pour le rendre conforme à la maquette
3. Définissez le style, en utilisant le modèle « flexbox », pour obtenir un rendu agréable et fonctionnel en accord avec la maquette

1. Utilisez « AppWebPage » dans « artist.php »
2. Modifiez « artist.php » pour le rendre conforme à la maquette
3. Définissez le style, en utilisant le modèle « flexbox », pour obtenir un rendu agréable et fonctionnel en accord avec la maquette

1. Lancez la commande de création d'une nouvelle suite de tests « Browse » :

   php vendor/bin/codecept generate:suite Browse

2. Observez l'apparition du fichier « Browse.suite.yml » dans le répertoire « tests »
3. Observez l'apparition du fichier « Browse.php » dans le répertoire « tests/_support/Helper »

1. Placez le script shell « run-test-server.sh » (télécharger) dans le répertoire « bin » du projet
   Information

   Ce serveur Web local sera différent de celui que vous utilisez pour consulter le résultat de vos programmes dans le navigateur Web. Il écoute sur le port « 8080 », différent du port « 8000 » utilisé par le serveur Web local pour ne pas entrer en conflit avec lui.

   Si vous observez le script, vous constaterez qu'il reprend la solution de contournement au problème de fermeture du serveur après les tests.

   La variable d'environnement MYPDO_ENV=test va amener « MyPdo » à chercher la configuration dans le fichier « .mypdo.test.ini ».

2. Rendez le script exécutable :

   setfacl -m u::rwx bin/run-test-server.sh

   Information

   « setfacl » est une commande Linux, n'essayez pas si vous êtes sur Windows.

3. Placez le fichier de configuration de la base de données en environnement de test « .mypdo.test.ini » (télécharger) à la racine du projet
   Remarque importante

   Le fichier à télécharger doit s'appeler « .mypdo.test.ini », même si votre navigateur a décidé de supprimer le « . » initial. Renommez le fichier si nécessaire.

4. Vérifiez qu'il se lance correctement :

   bin/run-test-server.sh

   Information

   Si vous êtes sur Windows, utilisez « run-test-server.bat » fourni un peu plus loin.

5. Interrogez le serveur Web de test « http://localhost:8080/ » et vérifiez sa réponse
6. Placez le script batch « run-test-server.bat » (télécharger) dans le répertoire « bin » du projet
7. Quand vous serez sur votre ordinateur personnel, vous pourrez lancer le serveur Web local de test grâce au script batch « bin\run-test-server.bat »

1. Éditez le fichier « Browse.suite.yml » pour activer les modules « Asserts » et « PhpBrowser » :

   modules:
       enabled:
           - \Tests\Helper\Browse
           - Asserts
           - PhpBrowser:
                 url: http://localhost:8080

   Information

   Le module « PhpBrowser » utilise PHP comme navigateur Web pour interroger et contrôler le fonctionnement de l'application. le paramètre de configuration « url » précise l'URL du serveur qui sera interrogé. Le port choisi est ici « 8080 », différent du port « 8000 » utilisé par le serveur Web local pour ne pas entrer en conflit avec lui.

2. Toujours dans « Browse.suite.yml », activez l'extension « RunProcess » qui permet de démarrer (et normalement d'arrêter…) des processus :

   extensions:
       enabled:
           - Codeception\Extension\RunProcess:
               # Run server on Windows platform (won't start on Linux)
               0: bin\\run-test-server.bat
               # Run server on Linux platform (won't start on Windows)
               1: bin/run-test-server.sh
               sleep: 1 # wait for php local web server to start

   Information

   L'extension « RunProcess » va permettre de lancer un serveur Web local avant les tests.

   Les scripts Linux et Windows cohabitent facilement puisque le script Windows échoue sur Linux et inversement. Ainsi, seul le script Linux est lancé sur Linux et il en va de même pour Windows.

1. Placez le fichier de tests d'acceptation du programme « index.php » (télécharger) dans le répertoire des « Cests » de la suite « Browse »
2. Lancez les tests de la suite « Browse » :

   php vendor/bin/codecept run Browse

3. Corrigez vos classes / programmes si nécessaire

1. Ouvrez le fichier « tests/Browse/IndexCest.php »
2. Afin de la faire échouer, modifiez l'assertion

   $I->seeResponseCodeIs(200);

   en

   $I->seeResponseCodeIs(201);

3. Observez le contenu du répertoire « tests/_output »
4. Consultez le contenu du fichier « Tests.Browse.IndexCest.listAllArtists.fail.html » et constatez qu'il correspond à la page d'accueil de votre application Web
5. Rétablissez le code HTTP original du « Cest »
6. Relancez les tests et constatez que le fichier « tests/_output/Tests.Browse.IndexCest.listAllArtists.fail.html » est toujours présent
7. Afin de nettoyer ces fichiers avant de lancer de nouveaux tests, ajoutez la commande

   php vendor/bin/codecept clean

   au début du script Composer « test:codecept »

1. Ajoutez un nouveau script Composer « test:browse » qui nettoie les fichiers de « tests/_output » avant de tester la suite « Browse »
2. Lancez l'ensemble de vos tests avec la commande :

   composer test

3. Vérifiez qu'ils passent tous
4. Corrigez vos classes / programmes si nécessaire
5. Mettez à jour la documentation du projet dans « README.md »

1. Placez le fichier de tests d'acceptation du programme « artist.php » (télécharger) dans le répertoire des « Cests » de la suite « Browse »
2. Lancez les tests de la suite « Browse » :

   composer test:browse

3. Corrigez vos classes / programmes si nécessaire

Créez la classe « Cover » en suivant la même démarche que pour la classe « Artist »

1. Créez le répertoire « tests/_data/cover »
2. Placez le fichier JPEG « cover411.jpeg » de la pochette « 411 » dans le répertoire « tests/_data/cover »
3. Placez le fichier de tests « Crud » de la classe « Cover » (télécharger) dans « tests/Crud »
4. Lancez les tests « Crud »
5. Vérifiez que les tests passent et corrigez votre code si besoin
6. Lancez tous les tests
7. Vérifiez que les tests passent et corrigez votre code si besoin

1. Créez, à l'aide de PhpStorm, la classe « ParameterException » :
2. Créez le programme « cover.php » dont la structure de base sera :
3. Testez la présence et la forme numérique du paramètre GET « coverId » et levez une « ParameterException » en cas de non conformité
   Information

   Le principe général du programme principal dont le code est encadré par « try » associé à des instructions « throw » en cas de détection d'erreur devrait être systématique pour que les types d'erreurs soient gérés, ici par des codes de réponse HTTP spécifiques.

   Vous pouvez, si vous êtes en avance dans le sujet de TP, refactoriser « artist.php » selon ce modèle.

4. Utilisez le paramètre GET « coverId » pour créer une instance de « Cover » à partir des données de la base de données
5. Modifiez le type mime de la réponse HTTP en « image/jpeg »
6. Remplissez la charge utile de la réponse HTTP avec le contenu JPEG de la pochette
7. Vérifiez que votre programme fonctionne et que la pochette « 411 » est bien la suivante :

1. Placez le fichier de tests d'acceptation du programme « cover.php » (télécharger) dans le répertoire des « Cests » de la suite « Browse »
2. Ajoutez la méthode « seeResponseContentIs » à la classe d'assistant « Tests\Helper\Browse »

   public function seeResponseContentIs(string $expected, string $message='Response content does not match')
   {
       $this->assertEquals($expected, $this->getModule('PhpBrowser')->_getResponseContent(), $message);
   }

   Information

   Ajouter la méthode « seeResponseContentIs » à l'assistant « Tests\Helper\Browse » permet d'y accéder dans la classe « Tests\BrowseTester » qui effectue les assertions des « Cests » de la suite « Browse ».

   Cette méthode facilite le contrôle du contenu de la charge utile de la réponse HTTP et rend les tests plus lisibles.

3. Lancez les tests de la suite « Browse » :

   composer test:browse

4. Corrigez votre classe / programme si nécessaire

1. Modifiez « artist.php » pour insérer l'image de la pochette
2. Modifiez le style CSS pour obtenir un rendu proche de la maquette (vous pouvez ajouter des structures HTML si nécessaire)