Adds decodeURIComponent to handle non-latin hash characters (#12133)

* Adds `decodeURIComponent` to handle non-latin hash characters * Update index.test.jsx * Update index.test.jsx * Update index.test.jsx * Add Hindi fixture
bbc · Nov 5, 2024 · 2090f49 · 2090f49
1 parent b2ee855
commit 2090f49
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 6 deletions.
diff --git a/src/app/legacy/containers/PageHandlers/withHashChangeHandler/index.jsx b/src/app/legacy/containers/PageHandlers/withHashChangeHandler/index.jsx
@@ -18,7 +18,7 @@ const useHashChangeHandler = hash => {
 const getHashProp = path(['location', 'hash']);
 
 const withHashChangeHandler = Component => props => {
-  const hash = getHashProp(props);
+  const hash = decodeURIComponent(getHashProp(props));
 
   useHashChangeHandler(hash);
 

diff --git a/src/app/legacy/containers/PageHandlers/withHashChangeHandler/index.test.jsx b/src/app/legacy/containers/PageHandlers/withHashChangeHandler/index.test.jsx
@@ -10,14 +10,72 @@ const Fixture = withHashChangeHandler(() => (
   </>
 ));
 
+const CyrillicFixture = withHashChangeHandler(() => (
+  <>
+    <a href="#Мирнија-сам-неко-брине-о-њој-док-је-у-школи">Go to section 1</a>
+    <section id="Мирнија-сам-неко-брине-о-њој-док-је-у-школи">
+      Section 1
+    </section>
+  </>
+));
+
+const HindiFixture = withHashChangeHandler(() => (
+  <>
+    <a href="#आंखों-के-सामने-छा-गया-था-अंधेरा">Go to section 1</a>
+    <section id="आंखों-के-सामने-छा-गया-था-अंधेरा">Section 1</section>
+  </>
+));
+
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 window.HTMLElement.prototype.focus = jest.fn();
 
-it('should scroll into view and focus on element when hash location changes', async () => {
-  const { rerender } = render(<Fixture location={{ hash: '' }} />);
+describe('withHashChangeHandler', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should scroll into view and focus on element when hash location changes', async () => {
+    const { rerender } = render(<Fixture location={{ hash: '' }} />);
+
+    rerender(<Fixture location={{ hash: '#section-1' }} />);
+
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(window.HTMLElement.prototype.focus).toHaveBeenCalledTimes(1);
+  });
+
+  it('should scroll into view and focus on element when hash location contains Cyrillic characters', async () => {
+    render(
+      <CyrillicFixture
+        location={{
+          hash:
+            // This is the encoded version of Мирнија-сам-неко-брине-о-њој-док-је-у-школи
+            '#%D0%9C%D0%B8%D1%80%D0%BD%D0%B8%D1%98%D0%B0-%D1%81%D0%B0%D0%BC-%D0%BD%D0%B5%D0%BA%D0%BE-%D0%B1%D1%80%D0%B8%D0%BD%D0%B5-%D0%BE-%D1%9A%D0%BE%D1%98-%D0%B4%D0%BE%D0%BA-%D1%98%D0%B5-%D1%83-%D1%88%D0%BA%D0%BE%D0%BB%D0%B8',
+        }}
+      />,
+    );
+
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(window.HTMLElement.prototype.focus).toHaveBeenCalledTimes(1);
+  });
 
-  rerender(<Fixture location={{ hash: '#section-1' }} />);
+  it('should scroll into view and focus on element when hash location contains Hindi characters', async () => {
+    render(
+      <HindiFixture
+        location={{
+          hash:
+            // This is the encoded version of आंखों-के-सामने-छा-गया-था-अंधेरा
+            '#%E0%A4%86%E0%A4%82%E0%A4%96%E0%A5%8B%E0%A4%82-%E0%A4%95%E0%A5%87-%E0%A4%B8%E0%A4%BE%E0%A4%AE%E0%A4%A8%E0%A5%87-%E0%A4%9B%E0%A4%BE-%E0%A4%97%E0%A4%AF%E0%A4%BE-%E0%A4%A5%E0%A4%BE-%E0%A4%85%E0%A4%82%E0%A4%A7%E0%A5%87%E0%A4%B0%E0%A4%BE',
+        }}
+      />,
+    );
 
-  expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalledTimes(1);
-  expect(window.HTMLElement.prototype.focus).toHaveBeenCalledTimes(1);
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(window.HTMLElement.prototype.focus).toHaveBeenCalledTimes(1);
+  });
 });