fix(contributions): afficher une hierarchie des headings valides même…

… si un sous-titre est utilisé alors que pas de titre avant (#6370) * fix(contributions): afficher une hierarchie des headings valides même si un sous-titre est utilisé alors que pas de titre avant * fix test * run html validation * run html validation * run run run * run run run run ! * run run run run run ! * only the contrib with error * only failed contribs * update test * revert
SocialGouv · Dec 18, 2024 · f72703d · f72703d
1 parent 0a01d90
commit f72703d
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 154 deletions.
diff --git a/packages/code-du-travail-frontend/src/contributions/DisplayContentContribution.tsx b/packages/code-du-travail-frontend/src/contributions/DisplayContentContribution.tsx
@@ -131,17 +131,19 @@ const getHeadingElement = (titleLevel: number, domNode) => {
 
 const options = (titleLevel: number): HTMLReactParserOptions => {
   let accordionTitle = titleLevel;
+  let headingTitleLevel = titleLevel;
 
   return {
     replace(domNode) {
       if (domNode instanceof Element) {
         if (domNode.name === "span" && domNode.attribs.class === "title") {
           accordionTitle = titleLevel + 1;
+          headingTitleLevel = titleLevel + 1;
           return getHeadingElement(titleLevel, domNode);
         }
         if (domNode.name === "span" && domNode.attribs.class === "sub-title") {
           accordionTitle = titleLevel + 1;
-          return getHeadingElement(titleLevel + 1, domNode);
+          return getHeadingElement(headingTitleLevel, domNode);
         }
         if (domNode.name === "details") {
           const items: any[] = [];
@@ -175,18 +177,15 @@ const options = (titleLevel: number): HTMLReactParserOptions => {
           );
         }
         if (domNode.name === "strong") {
-          // Disable trim on strong
           return <strong>{renderChildrenWithNoTrim(domNode)}</strong>;
         }
         if (domNode.name === "em") {
-          // Disable trim on em
           return <em>{renderChildrenWithNoTrim(domNode)}</em>;
         }
         if (domNode.name === "p") {
           if (!domNode.children.length) {
             return <br />;
           }
-          // Disable trim on p
           return <p>{renderChildrenWithNoTrim(domNode)}</p>;
         }
       }

diff --git a/.../code-du-travail-frontend/src/contributions/__tests__/DisplayContentContribution.test.tsx b/.../code-du-travail-frontend/src/contributions/__tests__/DisplayContentContribution.test.tsx
@@ -15,38 +15,60 @@ describe("DisplayContentContribution", () => {
       expect(baseElement.firstChild).toMatchSnapshot();
     });
     it(`should replace span with with heading according to given title level`, () => {
-      const { baseElement } = render(
+      const { getByText } = render(
         <DisplayContentContribution
-          content={`<span class="title">Mon title</span><span class="sub-title">Mon title</span>`}
+          content={`<span class="title">Ceci est un titre</span><span class="sub-title">Ceci est un sous titre</span>`}
           titleLevel={4}
         ></DisplayContentContribution>
       );
 
-      expect(baseElement.firstChild).toMatchSnapshot();
+      expect(getByText("Ceci est un titre").tagName).toEqual("H4");
+      expect(getByText("Ceci est un sous titre").tagName).toEqual("H5");
     });
     it(`should not add headings higher than h6 for titles`, () => {
-      const { baseElement } = render(
+      const { getByText } = render(
         <DisplayContentContribution
-          content={`<span class="title">Mon title</span><span class="sub-title">Mon title</span>`}
+          content={`<span class="title">Ceci est un titre</span><span class="sub-title">Ceci est un sous titre</span>`}
           titleLevel={6}
         ></DisplayContentContribution>
       );
 
-      expect(baseElement.firstChild).toMatchSnapshot();
+      expect(getByText("Ceci est un titre").tagName).toEqual("H6");
+      expect(getByText("Ceci est un sous titre").tagName).toEqual("STRONG");
     });
     it(`should not add headings higher than h6 for accordion`, () => {
-      const { asFragment } = render(
+      const { getByText } = render(
         <DisplayContentContribution
           content={`
         <details className=" details"><summary>Ceci est un titre</summary>
           <div data-type=" detailsContent">
-            <span class="sub-title">Mon title</span>
+            <span class="title">Ceci est un sous titre</span>
+            <span class="sub-title">Ceci est un sous sous titre</span>
           </div>
         </details>`}
           titleLevel={6}
         ></DisplayContentContribution>
       );
-      expect(asFragment().firstChild).toMatchSnapshot();
+      expect(getByText("Ceci est un titre").tagName).toEqual("H6");
+      expect(getByText("Ceci est un sous titre").tagName).toEqual("STRONG");
+      expect(getByText("Ceci est un sous sous titre").tagName).toEqual(
+        "STRONG"
+      );
+    });
+    it(`should handle sub-title in accordion even if no title`, () => {
+      const { getByText } = render(
+        <DisplayContentContribution
+          content={`
+        <details className=" details"><summary>Ceci est un titre</summary>
+          <div data-type=" detailsContent">
+            <span class="sub-title">Ceci est un sous titre</span>
+          </div>
+        </details>`}
+          titleLevel={4}
+        ></DisplayContentContribution>
+      );
+      expect(getByText("Ceci est un titre").tagName).toEqual("H4");
+      expect(getByText("Ceci est un sous titre").tagName).toEqual("H5");
     });
   });