Que se passe-t-il au niveau de la présentation dans le contexte du développement logiciel?

La couche de présentation (Presentation Layer) dans une architecture en couches est responsable de l'interaction avec l'utilisateur. C'est l'interface utilisateur (UI), qui affiche l'information à l'utilisateur et recueille ses entrées.

Fonctions principales :

• Affichage des données : Visualisation des informations reçues de la couche de logique métier.
• Saisie de données : Réception de l'entrée utilisateur (clics, remplissage de formulaires, saisie de texte).
• Validation de l'entrée utilisateur : Vérification initiale des données avant leur envoi à la couche de logique métier. Dans le contexte QA, c'est l'endroit où nous testons l'utilisabilité, l'apparence et l'interactivité des éléments UI.
• Formatage des données : Transformation des données dans une forme pratique et compréhensible pour l'utilisateur.
• Gestion des sessions : Dans les applications web, peut participer partiellement à la gestion de l'état de la session côté client.

Exemples :

• Pages web (HTML, CSS, JavaScript).
• Applications mobiles (composants UI).
• Applications de bureau (GUI).

Dans le contexte QA, les tests au niveau de la présentation incluent :

• Tests fonctionnels UI : Vérification du bon fonctionnement des boutons, liens, formulaires.
• Tests d'utilisabilité : Évaluation de la facilité d'utilisation, de la clarté de l'interface.
• Tests multiplateforme / multiplateforme : Vérification de l'affichage correct et du fonctionnement de l'UI sur différents navigateurs/dispositifs.
• Tests de localisation et d'internationalisation : Vérification de l'affichage du texte, des devises, des dates selon les paramètres régionaux.
• Tests de performance UI : Évaluation de la vitesse de chargement et de la réactivité des éléments de l'interface.

Exemple de code illustrant un composant de niveau présentation (React) :

// Exemple d'un composant de présentation simple en React

import React from 'react';

function Greeting({ userName }) {
  return (
    <div>
      <h1>Bonjour, {userName} !</h1>
      <p>Bienvenue dans notre application.</p>
    </div>
  );
}

export default Greeting;