fix(Trouver sa CC): mettre le focus sur les résultats quand on fait u…

…ne recherche par entreprises (#6425)
SocialGouv · Jan 21, 2025 · 58b67a2 · 58b67a2
1 parent 94b6180
commit 58b67a2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/...ntend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearchInput.tsx b/...ntend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearchInput.tsx
@@ -44,7 +44,7 @@ export const EnterpriseAgreementSearchInput = ({
   );
   const [enterprises, setEnterprises] = useState<Enterprise[]>();
   const [error, setError] = useState("");
-  const resultRef = useRef<HTMLDivElement>(null);
+  const resultRef = useRef<HTMLHeadingElement>(null);
 
   const getStateMessage = () => {
     switch (searchState) {
@@ -106,7 +106,6 @@ export const EnterpriseAgreementSearchInput = ({
         search.length > 0 && !result.length ? "notFoundSearch" : "noSearch"
       );
       setEnterprises(result);
-      resultRef.current?.focus();
     } catch (e) {
       setSearchState("errorSearch");
       setEnterprises(undefined);
@@ -120,6 +119,10 @@ export const EnterpriseAgreementSearchInput = ({
       onSubmit();
     }
   }, [defaultSearch]);
+
+  useEffect(() => {
+    resultRef.current?.focus();
+  }, [enterprises]);
   return (
     <>
       <h2 className={fr.cx("fr-h4", "fr-my-2w")}>Précisez votre entreprise</h2>
@@ -195,8 +198,13 @@ export const EnterpriseAgreementSearchInput = ({
 
       <div>
         <div className={fr.cx("fr-mt-2w")}>
-          {!!enterprises?.length && !loading && (
-            <h2 className={fr.cx("fr-h5")} tabIndex={-1} ref={resultRef}>
+          {enterprises && enterprises.length > 0 && !loading && (
+            <h2
+              className={fr.cx("fr-h5")}
+              tabIndex={-1}
+              ref={resultRef}
+              data-testid={"result-title"}
+            >
               {enterprises.length}
               {enterprises.length > 1
                 ? " entreprises trouvées"

diff --git a/...modules/enterprise/EnterpriseAgreementSearch/__tests__/EnterpriseAgreementSearch.test.tsx b/...modules/enterprise/EnterpriseAgreementSearch/__tests__/EnterpriseAgreementSearch.test.tsx
@@ -1,4 +1,4 @@
-import { render, RenderResult } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import { UserAction } from "../../../../common";
 import React from "react";
 import { EnterpriseAgreementSearch } from "../EnterpriseAgreementSearch";
@@ -26,7 +26,6 @@ jest.mock("next/navigation", () => ({
 
 describe("Trouver sa CC - recherche par nom d'entreprise CC", () => {
   describe("Test de l'autocomplete", () => {
-    let rendering: RenderResult;
     let userAction: UserAction;
     const enterprise = {
       activitePrincipale:
@@ -60,7 +59,7 @@ describe("Trouver sa CC - recherche par nom d'entreprise CC", () => {
       jest.resetAllMocks();
     });
     it("Vérifier l'affichage de la recherche", async () => {
-      rendering = render(<EnterpriseAgreementSearch />);
+      render(<EnterpriseAgreementSearch />);
       (searchEnterprises as jest.Mock).mockImplementation(() =>
         Promise.resolve([enterprise])
       );
@@ -77,6 +76,9 @@ describe("Trouver sa CC - recherche par nom d'entreprise CC", () => {
         category: "enterprise_search",
         name: '{"query":"carrefour"}',
       });
+      expect(
+        ui.enterpriseAgreementSearch.resultTitle.get().textContent
+      ).toEqual("1 entreprise trouvée");
       expect(
         ui.enterpriseAgreementSearch.resultLines.carrefour.title.query()
       ).toBeInTheDocument();
@@ -124,7 +126,7 @@ describe("Trouver sa CC - recherche par nom d'entreprise CC", () => {
     });
 
     it("Vérifier l'affichage de l'erreur si aucun résultat", async () => {
-      rendering = render(<EnterpriseAgreementSearch />);
+      render(<EnterpriseAgreementSearch />);
       (searchEnterprises as jest.Mock).mockImplementation(() =>
         Promise.resolve([])
       );
@@ -144,7 +146,7 @@ describe("Trouver sa CC - recherche par nom d'entreprise CC", () => {
     });
 
     it("Vérifier l'affichage de la recherche en mode widget", async () => {
-      rendering = render(<EnterpriseAgreementSearch widgetMode />);
+      render(<EnterpriseAgreementSearch widgetMode />);
       (searchEnterprises as jest.Mock).mockImplementation(() =>
         Promise.resolve([
           {

diff --git a/...code-du-travail-frontend/src/modules/enterprise/EnterpriseAgreementSearch/__tests__/ui.ts b/...code-du-travail-frontend/src/modules/enterprise/EnterpriseAgreementSearch/__tests__/ui.ts
@@ -1,4 +1,9 @@
-import { byText, byLabelText, byRole } from "testing-library-selector";
+import {
+  byLabelText,
+  byRole,
+  byTestId,
+  byText,
+} from "testing-library-selector";
 
 export const ui = {
   enterpriseAgreementSearch: {
@@ -12,6 +17,7 @@ export const ui = {
         name: "Particuliers employeurs et emploi à domicile",
       }),
     },
+    resultTitle: byTestId("result-title"),
     resultLines: {
       carrefour: {
         title: byText("CARREFOUR PROXIMITE FRANCE (SHOPI-8 A HUIT)"),