test(e2e): add raphael alpha test

Author: douglasduteil

e2e/cypress/support/step_definitions/uvv.ts

@@ -35,11 +35,12 @@ Before(() => {
 });
 
 // Context management
+
 Given("je vais à l'intérieur du dialogue nommé {string}", (text: string) => {
   get_within_context = () => cy.findAllByLabelText(text);
 });
 
-Given("je vais à l'intérieur du tableau nommé {string}", (title: string) => {
+Given("je vais à l'intérieur de l'élément nommé {string}", (title: string) => {
   cy.contains(title)
     .invoke("attr", "id")
     .then((id) => {
@@ -109,7 +110,7 @@ When("je retire le focus", () => {
 // Assertions
 Then("je vois {string}", (text: string) => {
   get_within_context().within(() => {
-    cy.contains(text, { timeout: 8000 }).should("be.visible");
+    cy.contains(text, { timeout: 8_000 }).should("be.visible");
   });
 });
 

e2e/features/moderations/manage_external_domain.feature

@@ -14,10 +14,10 @@ Fonctionnalité: Gérer un domaine externe lors de la modération
     Et je clique sur "🌐 1 domaine connu dans l’organisation"
 
   Scénario: Domaine externe
-    Quand je vais à l'intérieur du tableau nommé "🌐 1 domaine connu dans l’organisation"
+    Quand je vais à l'intérieur de l'élément nommé "🌐 1 domaine connu dans l’organisation"
     Alors je vois "yopmail.com"
     Et je réinitialise le contexte
     Quand je clique sur "Menu"
     Et je clique sur le bouton "❎ Domaine externe"
-    Quand je vais à l'intérieur du tableau nommé "🌐 1 domaine connu dans l’organisation"
+    Quand je vais à l'intérieur de l'élément nommé "🌐 1 domaine connu dans l’organisation"
     Alors je vois "❎"

e2e/features/users/jean_bon.feature

@@ -6,17 +6,17 @@ Fonctionnalité: Page utilisateur with moderations
     Quand je navigue sur la page
     Et je vois "Bonjour Hyyypertool !"
     Et je clique sur le bouton "ProConnect"
-    # Et je me connecte en tant que user@yopmail.com sur dev-agentconnect.fr
-
-  Scénario:
-  # Scénario: Fiche de Raphael
     Quand je clique sur "Utilisateurs"
-    Alors je suis redirigé sur "/users"
+
     Et je dois voir le titre de page "Liste des utilisateurs"
     Et je vois "Liste des utilisateurs"
     Quand je vais à l'intérieur de la rangée nommée "Utilisateur Jean Bon (jeanbon@yopmail.com)"
     Et je clique sur "➡️"
     Et je réinitialise le contexte
+
+    Et je dois voir le titre de page "Utilisateur Jean Bon (jeanbon@yopmail.com)"
+
+  Scénario:
     Alors je vois "👨‍💻 A propos de l'utilisateur"
     Et je vois "« Jean Bon »"
     Et je vois "email jeanbon@yopmail.com"
@@ -27,7 +27,9 @@ Fonctionnalité: Page utilisateur with moderations
     Et je vois "Dernière modification22/06/2023 14:34:34"
     Et je vois "Email vérifié envoyé le22/06/2023 14:34:34"
 
-  # Scénario: Organisations de Raphael
-    Alors je vois "Jean est enregistré(e) dans les modérations suivantes :"
-    Quand je vais à l'intérieur de la rangée nommée "Modération a traiter (ID 1)"
-    Et je réinitialise le contexte
+    Alors je dois voir un tableau nommé "Liste des modérations de Jean" et contenant
+      | Type	      |
+      | 🕵️A traiter |
+
+    Et je vois "L'utilisateur n'a pas de MFA configurée."
+

e2e/features/users/raphael_alpha.feature

@@ -0,0 +1,59 @@
+#language: fr
+Fonctionnalité: Page utilisateur avec MFA
+
+  Contexte:
+    Soit une base de données nourrie au grain
+    Quand je navigue sur la page
+    Et je vois "Bonjour Hyyypertool !"
+    Et je clique sur le bouton "ProConnect"
+    Quand je clique sur "Utilisateurs"
+
+    Et je dois voir le titre de page "Liste des utilisateurs"
+    Et je vois "Liste des utilisateurs"
+    Quand je vais à l'intérieur de la rangée nommée "Utilisateur Raphael Dubigny (rdubigny@alpha.gouv.fr)"
+    Et je clique sur "➡️"
+    Et je réinitialise le contexte
+
+    Et je dois voir le titre de page "Utilisateur Raphael Dubigny (rdubigny@alpha.gouv.fr)"
+
+  Scénario: La fiche de Raphael Alpha
+    Alors je vois "👨‍💻 A propos de l'utilisateur"
+    Et je vois "« Raphael Dubigny »"
+    Et je vois "email rdubigny@alpha.gouv.fr"
+    Et je vois "prénomRaphael"
+    Et je vois "nomDubigny"
+    Et je vois "téléphone0123456789"
+    Et je vois "Création13/07/2018 15:35:15"
+    Et je vois "Dernière modification22/06/2023 14:34:34"
+    Et je vois "Email vérifié envoyé le22/06/2023 14:34:34"
+
+    Alors je dois voir un tableau nommé "Liste des modérations de Raphael" et contenant
+      | Type	 |
+      | 🔓Non vérifié    |
+    Et je réinitialise le contexte
+
+    Sachant que je vais à l'intérieur de l'élément nommé "🔓 MFA"
+    Alors je vois "TOTP"
+    Alors je vois "Passkey - 1Password"
+    Alors je vois "Passkey - NordPass"
+
+    Sachant que je vais à l'intérieur de l'élément nommé "TOTP"
+    Alors je vois "TOTP enrôlé le : 2023-06-22 12:34:34+00"
+    Alors je vois "Force la 2FA sur tous les sites : ✅"
+    Et je réinitialise le contexte
+
+    Sachant que je vais à l'intérieur de l'élément nommé "Passkey - 1Password"
+    Alors je vois "Création : 2024-06-10 10:00:00+00"
+    Alors je vois "Dernière utilisation : 2024-06-15 12:00:00+00"
+    Alors je vois "Nombre d'utilisation : 5"
+    Et je réinitialise le contexte
+
+    Sachant que je vais à l'intérieur de l'élément nommé "Passkey - NordPass"
+    Alors je vois "Création : 2024-06-10 10:00:00+00"
+    Alors je vois "Dernière utilisation : 2024-06-15 12:00:00+00"
+    Alors je vois "Nombre d'utilisation : 87"
+    Et je réinitialise le contexte
+
+
+
+

e2e/features/users/raphael.feature renamed to e2e/features/users/raphael_beta.feature

@@ -6,17 +6,17 @@ Fonctionnalité: Page utilisateur
     Quand je navigue sur la page
     Et je vois "Bonjour Hyyypertool !"
     Et je clique sur le bouton "ProConnect"
-    # Et je me connecte en tant que user@yopmail.com sur dev-agentconnect.fr
-
-  Scénario:
-  # Scénario: Fiche de Raphael
     Quand je clique sur "Utilisateurs"
-    Alors je suis redirigé sur "/users"
+
     Et je dois voir le titre de page "Liste des utilisateurs"
     Et je vois "Liste des utilisateurs"
     Quand je vais à l'intérieur de la rangée nommée "Utilisateur Raphael Dubigny (rdubigny@beta.gouv.fr)"
     Et je clique sur "➡️"
     Et je réinitialise le contexte
+
+    Et je dois voir le titre de page "Utilisateur Raphael Dubigny (rdubigny@beta.gouv.fr)"
+
+  Scénario: La fiche de Raphael Beta
     Alors je vois "👨‍💻 A propos de l'utilisateur"
     Et je vois "« Raphael Dubigny »"
     Et je vois "email rdubigny@beta.gouv.fr"
@@ -27,7 +27,6 @@ Fonctionnalité: Page utilisateur
     Et je vois "Dernière modification22/06/2023 14:34:34"
     Et je vois "Email vérifié envoyé le22/06/2023 14:34:34"
 
-  # Scénario: Organisations de Raphael
-    Alors je vois "Raphael est enregistré(e) dans les organisations suivantes "
-    Et je vois "DINUM"
-    Et je vois "13002526500013"
+    Alors je dois voir un tableau nommé "Liste des organisations de Raphael" et contenant
+      | Libellé	 | Siret          |
+      | DINUM    | 13002526500013 |

sources/users/api/src/:id/moderations/Table.tsx

@@ -12,11 +12,12 @@ import { usePageRequestContext, type ModerationList } from "./context";
 
 export function Table() {
   const {
-    var: { moderations },
+    var: { describedby, moderations },
   } = usePageRequestContext();
+
   return (
     <div class="fr-table *:table!">
-      <table>
+      <table aria-describedby={describedby}>
         <thead>
           <tr>
             <th>ID</th>

sources/users/api/src/:id/moderations/context.tsx

@@ -1,49 +1,36 @@
 //
 
-import type { Entity_Schema, Pagination_Schema } from "@~/app.core/schema";
-import type { App_Context } from "@~/app.middleware/context";
+import type { DescribedBy } from "@~/app.core/schema";
 import type { IdentiteProconnect_PgDatabase } from "@~/identite-proconnect.database";
 import {
   GetModerationsByUserId,
   type GetModerationsByUserIdHandler,
 } from "@~/moderations.repository/GetModerationsByUserId";
 import type { Env } from "hono";
 import { useRequestContext } from "hono/jsx-renderer";
-import type { z } from "zod";
 
 //
 
 export async function loadModerationsPageVariables(
   pg: IdentiteProconnect_PgDatabase,
-  { user_id }: { user_id: number },
+  { describedby, user_id }: { user_id: number } & DescribedBy,
 ) {
   const get_moderations_by_user_id = GetModerationsByUserId({ pg });
   const moderations = await get_moderations_by_user_id(user_id);
 
   return {
+    describedby,
     moderations,
   };
 }
 
 //
 
 export type ModerationList = Awaited<ReturnType<GetModerationsByUserIdHandler>>;
-export interface ContextVariablesType extends Env {
+interface ContextVariablesType extends Env {
   Variables: Awaited<ReturnType<typeof loadModerationsPageVariables>>;
 }
-export type ContextType = App_Context & ContextVariablesType;
 
 //
 
-type PageInputType = {
-  out: {
-    param: z.input<typeof Entity_Schema>;
-    query: z.input<typeof Pagination_Schema>;
-  };
-};
-
-export const usePageRequestContext = useRequestContext<
-  ContextType,
-  any,
-  PageInputType
->;
+export const usePageRequestContext = useRequestContext<ContextVariablesType>;

sources/users/api/src/:id/moderations/index.tsx

@@ -1,27 +1,33 @@
 //
 
 import { zValidator } from "@hono/zod-validator";
-import { Entity_Schema } from "@~/app.core/schema";
+import { DescribedBy_Schema, Entity_Schema } from "@~/app.core/schema";
+import type { App_Context } from "@~/app.middleware/context";
 import { set_variables } from "@~/app.middleware/context/set_variables";
 import { Hono } from "hono";
 import { jsxRenderer } from "hono/jsx-renderer";
-import { loadModerationsPageVariables, type ContextType } from "./context";
+import { loadModerationsPageVariables } from "./context";
 import { Table } from "./Table";
 
 //
 
-export default new Hono<ContextType>().use("/", jsxRenderer()).get(
+export default new Hono<App_Context>().use("/", jsxRenderer()).get(
   "/",
   zValidator("param", Entity_Schema),
+  zValidator("query", DescribedBy_Schema),
   async function set_variables_middleware(
     { req, set, var: { identite_pg } },
     next,
   ) {
     const { id: user_id } = req.valid("param");
-    const variables = await loadModerationsPageVariables(identite_pg, {
-      user_id,
-    });
-    set_variables(set, variables);
+    const { describedby } = req.valid("query");
+    set_variables(
+      set,
+      await loadModerationsPageVariables(identite_pg, {
+        describedby,
+        user_id,
+      }),
+    );
     return next();
   },
   async function GET({ render }) {

sources/users/api/src/:id/page.tsx

@@ -17,16 +17,20 @@ export async function UserPage() {
   const {
     var: { user },
   } = usePageRequestContext();
+  const $organizations_describedby = hyper_ref("user_organizations");
+  const $moderations_describedby = hyper_ref("user_moderations");
+
   const hx_get_user_organizations_props = await hx_urls.users[
     ":id"
   ].organizations.$get({
     param: { id: user.id.toString() },
-    query: { describedby: hyper_ref(), page_ref: hyper_ref() },
+    query: { describedby: $organizations_describedby, page_ref: hyper_ref() },
   });
   const hx_get_user_moderations_props = await hx_urls.users[
     ":id"
   ].moderations.$get({
     param: { id: user.id.toString() },
+    query: { describedby: $moderations_describedby },
   });
 
   return (
@@ -49,27 +53,28 @@ export async function UserPage() {
       </div>
       <hr />
       <div class="fr-container">
-        <b>{user.given_name}</b> est enregistré(e) dans les organisations
-        suivantes :
+        <h1 id={$organizations_describedby}>
+          Liste des organisations de {user.given_name}
+        </h1>
         <div class="fr-table max-w-full overflow-x-auto">
           <div
             {...hx_get_user_organizations_props}
             hx-target="this"
             hx-trigger="load"
             class="fr-table"
-            id="table-user-organisations"
           ></div>
         </div>
         <hr />
-        <b>{user.given_name}</b> est enregistré(e) dans les modérations
-        suivantes :
+        <h1 id={$moderations_describedby}>
+          Liste des modérations de {user.given_name}
+        </h1>
+
         <div class="fr-table max-w-full overflow-x-auto">
           <div
             {...hx_get_user_moderations_props}
             hx-target="this"
             hx-trigger="load"
             class="fr-table"
-            id="table-user-organisations"
           ></div>
         </div>
       </div>
@@ -79,8 +84,8 @@ export async function UserPage() {
         </div>
       </div>
       <hr />
-      <div class="fr-container py-6">
-        <h1>🔓 MFA</h1>
+      <div aria-describedby="mfa" class="fr-container py-6">
+        <h1 id="mfa">🔓 MFA</h1>
         <MFA />
       </div>
       <hr />
@@ -100,10 +105,13 @@ async function MFA() {
   if (!hasMFA) {
     return <p>L'utilisateur n'a pas de MFA configurée.</p>;
   }
+
   return (
     <div className="grid grid-cols-2 gap-4">
-      <div class="fr-card p-6!">
-        <h2 class="text-(--text-action-high-blue-france)">TOTP</h2>
+      <div aria-describedby="totp" class="fr-card p-6!">
+        <h2 class="text-(--text-action-high-blue-france)" id="totp">
+          TOTP
+        </h2>
         <p class="mb-1">
           <b>TOTP enrôlé le :</b> {user.totp_key_verified_at}
         </p>
@@ -113,8 +121,14 @@ async function MFA() {
         </p>
       </div>
       {authenticators.map((authenticator) => (
-        <div class="fr-card p-6!">
-          <h2 class="text-(--text-action-high-blue-france)">
+        <div
+          aria-describedby={`passkey-${authenticator.credential_id}`}
+          class="fr-card p-6!"
+        >
+          <h2
+            class="text-(--text-action-high-blue-france)"
+            id={`passkey-${authenticator.credential_id}`}
+          >
             Passkey - {authenticator.display_name}
           </h2>
           <p class="mb-1">

sources/users/repository/src/GetAuthenticatorByUserId.ts

@@ -13,6 +13,7 @@ export function GetAuthenticatorByUserId(pg: IdentiteProconnect_PgDatabase) {
     return pg.query.authenticators.findMany({
       columns: {
         created_at: true,
+        credential_id: true,
         display_name: true,
         last_used_at: true,
         usage_count: true,