From 4d46a5b5831797eb3b063a4d43a0f3936335523c Mon Sep 17 00:00:00 2001
From: Martial Maillot <martial.maillot@gmail.com>
Date: Thu, 19 Dec 2024 09:16:12 +0100
Subject: [PATCH] fix(contributions): td dans le thead d'un tableau

# Conflicts:
#	packages/code-du-travail-frontend/src/contributions/__tests__/__snapshots__/DisplayContentContribution.test.tsx.snap
---
 .../DisplayContentContribution.tsx            | 19 +++-
 .../DisplayContentContribution.test.tsx       | 25 +++++
 .../DisplayContentContribution.test.tsx.snap  | 97 +++++++++++++------
 3 files changed, 109 insertions(+), 32 deletions(-)

diff --git a/packages/code-du-travail-frontend/src/contributions/DisplayContentContribution.tsx b/packages/code-du-travail-frontend/src/contributions/DisplayContentContribution.tsx
index cb408dcc14..0f8d0c2e8c 100644
--- a/packages/code-du-travail-frontend/src/contributions/DisplayContentContribution.tsx
+++ b/packages/code-du-travail-frontend/src/contributions/DisplayContentContribution.tsx
@@ -96,12 +96,24 @@ const mapTbody = (tbody: Element) => {
     }
   }
 
+  const forceTh = (child: Element) => {
+    child.children = child.children.map((child) => {
+      if (child.type === "tag" && child.name === "td") {
+        child.name = "th";
+      }
+      return child;
+    });
+    return child;
+  };
+
   return (
     <UITable>
       {theadChildren.length > 0 && (
         <thead>
           {theadChildren.map((child, index) => (
-            <tr key={`tr-${index}`}>{renderChildrenWithNoTrim(child)}</tr>
+            <tr key={`tr-${index}`}>
+              {renderChildrenWithNoTrim(forceTh(child))}
+            </tr>
           ))}
         </thead>
       )}
@@ -118,7 +130,10 @@ function getItem(domNode: Element, titleLevel: number) {
 }
 
 function renderChildrenWithNoTrim(domNode) {
-  return domToReact(domNode.children as DOMNode[]);
+  if (domNode.children) {
+    return domToReact(domNode.children as DOMNode[]);
+  }
+  return domToReact(domNode);
 }
 
 const getHeadingElement = (titleLevel: number, domNode) => {
diff --git a/packages/code-du-travail-frontend/src/contributions/__tests__/DisplayContentContribution.test.tsx b/packages/code-du-travail-frontend/src/contributions/__tests__/DisplayContentContribution.test.tsx
index 3175be62aa..41fad2d3a6 100644
--- a/packages/code-du-travail-frontend/src/contributions/__tests__/DisplayContentContribution.test.tsx
+++ b/packages/code-du-travail-frontend/src/contributions/__tests__/DisplayContentContribution.test.tsx
@@ -323,6 +323,31 @@ describe("DisplayContentContribution", () => {
       expect(asFragment().firstChild).toMatchSnapshot();
     });
 
+    it(`should replace td by th in thead`, () => {
+      const { asFragment } = render(
+        <DisplayContentContribution
+          content={`
+        <table>
+        <thead>
+            <tr>
+              <td colspan="1" rowspan="1">Titre 1</td>
+              <td colspan="1" rowspan="1">Titre 2</td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td colspan="1" rowspan="1"><p>Pour les <strong>cadres</strong>, la prolongation ...</p></td>
+                <td colspan="1" rowspan="1"><ul><li><p>L’employeur et le salarié donnent par écrit ou par mail.</p></li></ul></td>
+            </tr>
+        </tbody>
+        </table>`}
+          titleLevel={3}
+        ></DisplayContentContribution>
+      );
+
+      expect(asFragment().firstChild).toMatchSnapshot();
+    });
+
     it(`should keep whitespace in specific tag`, () => {
       const { asFragment } = render(
         <DisplayContentContribution
diff --git a/packages/code-du-travail-frontend/src/contributions/__tests__/__snapshots__/DisplayContentContribution.test.tsx.snap b/packages/code-du-travail-frontend/src/contributions/__tests__/__snapshots__/DisplayContentContribution.test.tsx.snap
index f35b083b96..9cd3a073a8 100644
--- a/packages/code-du-travail-frontend/src/contributions/__tests__/__snapshots__/DisplayContentContribution.test.tsx.snap
+++ b/packages/code-du-travail-frontend/src/contributions/__tests__/__snapshots__/DisplayContentContribution.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`DisplayContentContribution Accordions should not fail if no summary tag 1`] = `
 <div>
   <div
-    class="sc-1678e795-0 fDgxNU"
+    class="sc-10167302-0 dCJsPi"
   >
     <div
-      class="sc-1678e795-1 bYYZgz"
+      class="sc-10167302-1 hzFSzJ"
       data-accordion-component="Accordion"
       data-testid="contrib-accordion"
     >
@@ -80,7 +80,7 @@ exports[`DisplayContentContribution Accordions should not fail if no summary tag
       
                 </p>
                 <div
-                  class="sc-1678e795-1 bYYZgz"
+                  class="sc-10167302-1 hzFSzJ"
                   data-accordion-component="Accordion"
                   data-testid="contrib-accordion"
                 >
@@ -147,7 +147,7 @@ exports[`DisplayContentContribution Accordions should not fail if no summary tag
                         >
                           <div>
                             <div
-                              class="sc-1678e795-1 bYYZgz"
+                              class="sc-10167302-1 hzFSzJ"
                               data-accordion-component="Accordion"
                               data-testid="contrib-accordion"
                             >
@@ -397,10 +397,10 @@ exports[`DisplayContentContribution Accordions should not fail if no summary tag
 
 exports[`DisplayContentContribution Accordions should replace details element by one accordion 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <div
-    class="sc-1678e795-1 bYYZgz"
+    class="sc-10167302-1 hzFSzJ"
     data-accordion-component="Accordion"
     data-testid="contrib-accordion"
   >
@@ -481,10 +481,10 @@ exports[`DisplayContentContribution Accordions should replace details element by
 
 exports[`DisplayContentContribution Accordions should replace details element within details element 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <div
-    class="sc-1678e795-1 bYYZgz"
+    class="sc-10167302-1 hzFSzJ"
     data-accordion-component="Accordion"
     data-testid="contrib-accordion"
   >
@@ -551,7 +551,7 @@ exports[`DisplayContentContribution Accordions should replace details element wi
           >
             <div>
               <div
-                class="sc-1678e795-1 bYYZgz"
+                class="sc-10167302-1 hzFSzJ"
                 data-accordion-component="Accordion"
                 data-testid="contrib-accordion"
               >
@@ -640,10 +640,10 @@ exports[`DisplayContentContribution Accordions should replace multiple details e
 <body>
   <div>
     <div
-      class="sc-1678e795-0 fDgxNU"
+      class="sc-10167302-0 dCJsPi"
     >
       <div
-        class="sc-1678e795-1 bYYZgz"
+        class="sc-10167302-1 hzFSzJ"
         data-accordion-component="Accordion"
         data-testid="contrib-accordion"
       >
@@ -797,7 +797,7 @@ exports[`DisplayContentContribution Accordions should replace multiple details e
 
 exports[`DisplayContentContribution Alerts should have space in table item for a strong and an other content 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <table
     class="sc-4e3ba411-0 kGLBMt"
@@ -877,7 +877,7 @@ exports[`DisplayContentContribution Alerts should have space in table item for a
 
 exports[`DisplayContentContribution Alerts should replace div with alert class in li component to Alert component 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <div>
     <p>
@@ -943,7 +943,7 @@ exports[`DisplayContentContribution Alerts should replace div with alert class i
 
 exports[`DisplayContentContribution Alerts should replace div with alert class to Alert component 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <div
     class="sc-6c78813f-0 fnbVWG"
@@ -961,7 +961,7 @@ exports[`DisplayContentContribution Alerts should replace div with alert class t
 exports[`DisplayContentContribution Headings should replace span with class "title" and "sub-titles" with heading 1`] = `
 <div>
   <div
-    class="sc-1678e795-0 fDgxNU"
+    class="sc-10167302-0 dCJsPi"
   >
     <h2
       class="sc-b879fc2d-0 hyiHle"
@@ -979,7 +979,7 @@ exports[`DisplayContentContribution Headings should replace span with class "tit
 
 exports[`DisplayContentContribution Tables should add thead to table if not present and move table into a Table element 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <table
     class="sc-4e3ba411-0 kKVapO"
@@ -1034,7 +1034,7 @@ exports[`DisplayContentContribution Tables should add thead to table if not pres
 
 exports[`DisplayContentContribution Tables should keep whitespace in specific tag 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <p>
     Ceci est un
@@ -1064,7 +1064,7 @@ exports[`DisplayContentContribution Tables should keep whitespace in specific ta
 
 exports[`DisplayContentContribution Tables should not change if thead is already present 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <table>
     <tbody>
@@ -1102,14 +1102,14 @@ exports[`DisplayContentContribution Tables should not change if thead is already
 exports[`DisplayContentContribution Tables should render correctly a table with multiple head lines 1`] = `
 <div>
   <div
-    class="sc-1678e795-0 fDgxNU"
+    class="sc-10167302-0 dCJsPi"
   >
     <table
       class="sc-4e3ba411-0 kKVapO"
     >
       <thead>
         <tr>
-          <td
+          <th
             colspan="1"
             rowspan="2"
           >
@@ -1126,8 +1126,8 @@ exports[`DisplayContentContribution Tables should render correctly a table with
             </p>
             
       
-          </td>
-          <td
+          </th>
+          <th
             colspan="2"
             rowspan="1"
           >
@@ -1144,10 +1144,10 @@ exports[`DisplayContentContribution Tables should render correctly a table with
             </p>
             
       
-          </td>
+          </th>
         </tr>
         <tr>
-          <td
+          <th
             colspan="1"
             rowspan="1"
           >
@@ -1164,8 +1164,8 @@ exports[`DisplayContentContribution Tables should render correctly a table with
             </p>
             
       
-          </td>
-          <td
+          </th>
+          <th
             colspan="1"
             rowspan="1"
           >
@@ -1182,7 +1182,7 @@ exports[`DisplayContentContribution Tables should render correctly a table with
             </p>
             
       
-          </td>
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -1230,9 +1230,46 @@ exports[`DisplayContentContribution Tables should render correctly a table with
 </div>
 `;
 
+exports[`DisplayContentContribution Tables should replace td by th in thead 1`] = `
+<div
+  class="sc-10167302-0 dCJsPi"
+>
+  <table>
+    <tbody>
+      <tr>
+        <td
+          colspan="1"
+          rowspan="1"
+        >
+          <p>
+            Pour les 
+            <strong>
+              cadres
+            </strong>
+            , la prolongation ...
+          </p>
+        </td>
+        <td
+          colspan="1"
+          rowspan="1"
+        >
+          <ul>
+            <li>
+              <p>
+                L’employeur et le salarié donnent par écrit ou par mail.
+              </p>
+            </li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
 exports[`DisplayContentContribution should keep whitespace in specific tag 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <p>
     Ceci est un
@@ -1262,7 +1299,7 @@ exports[`DisplayContentContribution should keep whitespace in specific tag 1`] =
 
 exports[`DisplayContentContribution should not remove space between strong and em tag in p tag 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <p>
     <strong>
@@ -1278,7 +1315,7 @@ exports[`DisplayContentContribution should not remove space between strong and e
 
 exports[`DisplayContentContribution should return html 1`] = `
 <div
-  class="sc-1678e795-0 fDgxNU"
+  class="sc-10167302-0 dCJsPi"
 >
   <p>
     hello