diff --git a/cypress/integration/faq.spec.js b/cypress/integration/faq.spec.js index df36e600..746942c0 100644 --- a/cypress/integration/faq.spec.js +++ b/cypress/integration/faq.spec.js @@ -1,11 +1,20 @@ describe("FAQ", () => { - it("shoudl display FAQ", () => { + it("should display FAQ with default tab", () => { cy.visit("/faq"); cy.get("h1").should("have.text", "Information sur le dispositif MonPsy"); - cy.get("h2").should( + cy.get("h2").should("have.text", "PrésentationPatientPsychologueMédecin"); + cy.get('[role="tab"][aria-selected="true"]').should( "have.text", - "Présentation du dispositif MonPsyPatientPsychologueMédecin" + "Présentation" + ); + }); + it("should open tab according to query param", () => { + cy.visit("/faq?tab=psychologue"); + + cy.get('[role="tab"][aria-selected="true"]').should( + "have.text", + "Psychologue" ); }); }); diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx index 754b3f2b..b44685b5 100644 --- a/src/pages/faq.tsx +++ b/src/pages/faq.tsx @@ -3,15 +3,27 @@ import { AccordionItem, Col, Row, - SideMenu, - SideMenuLink, + Tab, + Tabs, } from "@dataesr/react-dsfr"; import Head from "next/head"; -import React from "react"; +import { useRouter } from "next/router"; +import React, { useEffect, useState } from "react"; import items from "../services/faq/faq"; const Page = () => { + const router = useRouter(); + + const [tabIndex, setTabIndex] = useState(-1); + + useEffect(() => { + if (!router.isReady) return; + const tab = router.query.tab; + const index = items.findIndex((item) => item.key === tab); + setTabIndex(index >= 0 ? index : 0); + }, [router.isReady, router.query.tab]); + return ( <> @@ -20,46 +32,38 @@ const Page = () => {

Information sur le dispositif MonPsy

- - {items.map( - (item) => - item.title && ( - - {item.title} - - ) - )} - - - {items.map((item) => ( -
- {item.title &&

{item.title}

} - {item.sections.map((section) => ( -
- {section.title &&

{section.title}

} - - {section.faq.map(({ question, answer }) => ( - -
- - ))} - -
+ + {tabIndex >= 0 && ( + + {items.map((item) => ( + + {item.title &&

{item.title}

} + {item.sections.map((section, i) => ( +
+ {section.title &&

{section.title}

} + + {section.faq.map(({ question, answer }) => ( + +
+ + ))} + +
+ ))} + ))} -
- ))} +
+ )}
); }; + export default Page; diff --git a/src/pages/medecins.tsx b/src/pages/medecins.tsx index 12d408b8..23958f8c 100644 --- a/src/pages/medecins.tsx +++ b/src/pages/medecins.tsx @@ -302,7 +302,7 @@ const Page = () => {

J’ai des questions ?{" "} Je consulte la FAQ diff --git a/src/pages/patients.tsx b/src/pages/patients.tsx index 8dd31139..0f297f8d 100644 --- a/src/pages/patients.tsx +++ b/src/pages/patients.tsx @@ -266,7 +266,7 @@ const Page = () => {

J’ai des questions ?{" "} Je consulte la FAQ @@ -408,7 +408,7 @@ const Page = () => {

J’ai des questions ?{" "} Je consulte la FAQ diff --git a/src/pages/psychologues.tsx b/src/pages/psychologues.tsx index 6ac5c2c0..7f853a94 100644 --- a/src/pages/psychologues.tsx +++ b/src/pages/psychologues.tsx @@ -476,7 +476,7 @@ const Page = () => {

J’ai des questions ?{" "} Je consulte la FAQ diff --git a/src/services/faq/faq.ts b/src/services/faq/faq.ts index a5290b4c..cbec9729 100644 --- a/src/services/faq/faq.ts +++ b/src/services/faq/faq.ts @@ -21,7 +21,7 @@ const items = [ { key: "general", sections: [{ faq: general }], - title: "Présentation du dispositif MonPsy", + title: "Présentation", }, { key: "patient",