fix(accordion): ne pas crasher s'il y a un selector invalid dans l'url (

#5935)
SocialGouv · Jun 4, 2024 · c09d821 · c09d821
1 parent 4f3b434
commit c09d821
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 3 deletions.
diff --git a/packages/react-ui/src/Accordion/__snapshots__/test.js.snap b/packages/react-ui/src/Accordion/__snapshots__/test.js.snap
@@ -1,5 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Accordion /> do not throw error if preExpended attribut is an invalid query selector 1`] = `
+<div>
+  <div
+    class="accordion"
+    data-accordion-component="Accordion"
+  >
+    <div>
+      <div
+        class="sc-fqkvVR eJjnVN"
+        data-accordion-component="AccordionItem"
+      >
+        <div
+          class="accordion__heading"
+          data-accordion-component="AccordionItemHeading"
+        >
+          <div
+            aria-controls="accordion__panel-raa-5"
+            aria-disabled="false"
+            aria-expanded="false"
+            class="sc-iGgWBj ctXAVT"
+            data-accordion-component="AccordionItemButton"
+            id="accordion__heading-raa-5"
+            role="button"
+            tabindex="0"
+          >
+            <svg
+              aria-hidden="true"
+              class="sc-eqUAAy eQjYoU"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <polyline
+                points="9 18 15 12 9 6"
+              />
+            </svg>
+            <div
+              class="sc-gsFSXq UOsQV"
+            >
+              <h3
+                class="sc-gEvEer gGoEse"
+                style="margin: 0px;"
+              >
+                This is the title
+              </h3>
+            </div>
+          </div>
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dcJsrY dwmfbs"
+          data-accordion-component="AccordionItemPanel"
+          hidden=""
+          id="accordion__panel-raa-5"
+        >
+          <div
+            class="sc-dAbbOL dhcuWT"
+          >
+            this is the body
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Accordion /> renders 1`] = `
 <div>
   <div

diff --git a/packages/react-ui/src/Accordion/index.js b/packages/react-ui/src/Accordion/index.js
@@ -23,9 +23,13 @@ export const Accordion = ({
 
   React.useEffect(() => {
     if (props?.preExpanded?.length && props.preExpanded[0]?.length) {
-      const anchor = document?.querySelector(`#${props.preExpanded[0]}`);
-      if (anchor) {
-        anchor.scrollIntoView();
+      try {
+        const anchor = document?.querySelector(`#${props.preExpanded[0]}`);
+        if (anchor) {
+          anchor.scrollIntoView();
+        }
+      } catch (_) {
+        props.preExpanded = [];
       }
     }
   }, [props.preExpanded]);

diff --git a/packages/react-ui/src/Accordion/test.js b/packages/react-ui/src/Accordion/test.js
@@ -46,4 +46,15 @@ describe("<Accordion />", () => {
     const { getByText } = render(<Accordion titleLevel={7} items={items} />);
     expect(getByText("Ceci est un titre").tagName).toEqual("P");
   });
+  it("do not throw error if preExpended attribut is an invalid query selector", () => {
+    const items = [{ body: "this is the body", title: "This is the title" }];
+    const { container } = render(
+      <Accordion
+        titleLevel={3}
+        preExpanded={["#:~:text=Le droit du travail est"]}
+        items={items}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });