fix: image link should search img-tag deeper from the children

HCRC-112.

Add a recursively map utility, that can be used to recursively map the React children.

Add a findAllElementsOfType utility, that takes advantage of the `recursiveMap` and `getChildrenByType` utilities.

Add tests to each utility.

Finally, the Link should use the new findAllElementsOfType utility to search for images inside an anchor.

src/core/link/Link.stories.tsx

@@ -44,11 +44,13 @@ const Template: StoryFn<typeof Link> = (args) => (
         href="https://hel.fi"
       >
         External link with an image
-        <img
-          src="https://upload.wikimedia.org/wikipedia/commons/b/b2/City_Branding_of_Helsinki.svg"
-          alt="City of Helsinki logo"
-          width="200px"
-        />
+        <span>
+          <img
+            src="https://upload.wikimedia.org/wikipedia/commons/b/b2/City_Branding_of_Helsinki.svg"
+            alt="City of Helsinki logo"
+            width="200px"
+          />
+        </span>
       </Link>
       <SecondaryLink
         {...args}

src/core/link/Link.tsx

@@ -7,7 +7,7 @@ import { IconEnvelope, IconPhone } from 'hds-react';
 import LinkBase from './LinkBase';
 import { useConfig } from '../configProvider/useConfig';
 import styles from './Link.module.scss';
-import { getChildrenByType } from '../utils/getChildrenByType';
+import { findAllElementsOfType } from '../utils/findAllElementsOfType';
 
 export type LinkProps = Omit<
   React.ComponentPropsWithoutRef<'a'>,
@@ -47,7 +47,7 @@ export function Link({
   const isPhone = href?.startsWith('tel:') || undefined;
   const isExternal = getIsHrefExternal(href) && !isEmail && !isPhone;
   const iconSize = size === 'S' ? 'xs' : 's';
-  const hasImageInLink = getChildrenByType(children, ['img']).length > 0;
+  const hasImageInLink = findAllElementsOfType(children, ['img']).length > 0;
   // The external links should always open in a new tab.
   const openInNewTab = forceOpenInNewTab ?? isExternal;
   // If the link contains an image, the external icon should be hidden by default,

src/core/link/__tests__/Link.test.tsx

@@ -98,3 +98,15 @@ test('renders internal link with specified screen reader text', () => {
     screen.getByRole('link', { name: 'This is for screen reader' }),
   ).toBeInTheDocument();
 });
+
+test('the link with image should not show an external icon by default', () => {
+  const { container } = render(
+    <Link href="https://www.google.com/">
+      Text for an external link with image
+      <img src="#" alt="this is an img inside an external link" />
+    </Link>,
+  );
+  expect(container.childElementCount).toBe(1);
+  expect(container.lastChild.nodeName).not.toEqual('svg');
+  expect(container).toMatchSnapshot();
+});

src/core/link/__tests__/__snapshots__/Link.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the link with image should not show an external icon by default 1`] = `
+<div>
+  <a
+    aria-label="Text for an external link with image. Opens in a new tab. Opens a different website."
+    class="link linkM disableVisitedStyles link imgLink"
+    href="https://www.google.com/"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <span
+      class="content"
+    >
+      Text for an external link with image
+      <img
+        alt="this is an img inside an external link"
+        src="#"
+      />
+    </span>
+  </a>
+</div>
+`;

src/core/utils/__tests__/__snapshots__/findAllElementsOfType.test.tsx.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`findAllElementsOfType finds the elements of searched types # 1`] = `
+[
+  <li>
+    Should be included 1/2
+  </li>,
+  <li>
+    Should be included 2/2
+  </li>,
+]
+`;
+
+exports[`findAllElementsOfType finds the elements of searched types # 2`] = `
+[
+  <li>
+    Should be included 1/3
+  </li>,
+  <li>
+    Should be included 2/3
+  </li>,
+  <li>
+    Should be included 3/3
+  </li>,
+]
+`;
+
+exports[`findAllElementsOfType finds the elements of searched types # 3`] = `
+[
+  <li>
+    Should be included 1/3
+  </li>,
+  <ul>
+    <li>
+      Should be included 1/3
+    </li>
+  </ul>,
+  <li>
+    Should be included 2/3
+  </li>,
+  <li>
+    Should be included 3/3
+  </li>,
+  <ol>
+    <li>
+      Should be included 2/3
+    </li>
+    <li>
+      Should be included 3/3
+    </li>
+  </ol>,
+]
+`;
+
+exports[`findAllElementsOfType finds the elements of searched types # 4`] = `
+[
+  <li>
+    Should be included 1/3
+  </li>,
+  <li>
+    Should be included 2/3
+  </li>,
+  <li>
+    Should be included 3/3
+  </li>,
+]
+`;
+
+exports[`findAllElementsOfType finds the elements of searched types # 5`] = `
+[
+  <img
+    alt="should be included 1/2"
+    src="#"
+  />,
+  <img
+    alt="should be included 2/2"
+    src="#"
+  />,
+]
+`;

src/core/utils/__tests__/__snapshots__/getChildrenByType.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getChildrenByType filters childrens by defined list of types 1`] = `
+[
+  <p>
+    should contain 1/3
+  </p>,
+  <img
+    alt="should contain 2/3"
+    src="#"
+  />,
+  <p>
+    should contain 3/3
+  </p>,
+]
+`;
+
+exports[`getChildrenByType filters childrens by defined list of types 2`] = `
+[
+  <ul>
+    <li>
+      Should contain 1/2
+    </li>
+  </ul>,
+  <ul>
+    <li>
+      Should contain 2/2
+    </li>
+  </ul>,
+]
+`;

src/core/utils/__tests__/__snapshots__/recursiveMap.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`recursiveMap can be used with return values to collect content # 1`] = `
+[
+  <li>
+    Should be included 1/3
+  </li>,
+  <li>
+    Should be included 2/3
+  </li>,
+  <li>
+    Should be included 3/3
+  </li>,
+]
+`;
+
+exports[`recursiveMap can be used with return values to collect content # 2`] = `
+[
+  <p>
+    1/3
+  </p>,
+  <p>
+    2/3
+  </p>,
+  <p>
+    3/3
+  </p>,
+]
+`;

src/core/utils/__tests__/findAllElementsOfType.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { findAllElementsOfType } from '../findAllElementsOfType';
+
+describe('findAllElementsOfType', () => {
+  const flattenedListItems = (
+    <ul>
+      <li>Should be included 1/2</li>
+      <li>Should be included 2/2</li>
+    </ul>
+  );
+
+  const nestedListItems = (
+    <div>
+      <ul>
+        <li>Should be included 1/3</li>
+      </ul>
+      <ol>
+        <li>Should be included 2/3</li>
+        <li>Should be included 3/3</li>
+      </ol>
+    </div>
+  );
+
+  it.each([
+    [flattenedListItems, ['li'], 2], // 2 x <li>
+    [nestedListItems, ['li'], 3], // 3 x <li>
+    [nestedListItems, ['ul', 'ol', 'li'], 5], // <ul>, <ol>, 3 x <li>
+    [
+      <div>
+        <div>{nestedListItems}</div>
+      </div>,
+      ['li'],
+      3, // 3 x <li>
+    ],
+    [
+      <div>
+        <div>{nestedListItems}</div>
+        <div>
+          <span>
+            <img alt="should be included 1/2" src="#" />
+          </span>
+        </div>
+        <img alt="should be included 2/2" src="#" />
+        <div>
+          <p>Not included</p>
+        </div>
+      </div>,
+      ['img'],
+      2, // 2 x <img>
+    ],
+  ])(
+    'finds the elements of searched types #',
+    (component, types, foundCount) => {
+      const { children } = component.props;
+      const result = findAllElementsOfType(children, types);
+      expect(result).toHaveLength(foundCount);
+      expect(result).toMatchSnapshot();
+    },
+  );
+});

src/core/utils/__tests__/getChildrenByType.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { getChildrenByType } from '../getChildrenByType';
+
+describe('getChildrenByType', () => {
+  it.each([
+    [
+      ['img', 'p'],
+      <>
+        <p>should contain 1/3</p>
+        <img alt="should contain 2/3" src="#" />
+        <span>should not contain</span>
+        <p>should contain 3/3</p>
+      </>,
+      3,
+    ],
+    [
+      ['ul'],
+      <>
+        <ol>
+          <li>Should not contain</li>
+        </ol>
+        <ul>
+          <li>Should contain 1/2</li>
+        </ul>
+        <p>Should not contain</p>
+        <hr />
+        <ul>
+          <li>Should contain 2/2</li>
+        </ul>
+      </>,
+      2,
+    ],
+  ])(
+    'filters childrens by defined list of types',
+    (types, component, filteredCount) => {
+      const { children } = component.props;
+      const result = getChildrenByType(children, types);
+      expect(result).toHaveLength(filteredCount);
+      expect(result).toMatchSnapshot();
+    },
+  );
+});