diff --git a/CHANGELOG.md b/CHANGELOG.md index 49beed71e7..0737d27c3a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ Our versioning strategy is as follows: ### 🐛 Bug Fixes +* `[sitecore-jss-nextjs]` Internal link in RichText is broken when nested tags are added ([#1718](https://github.com/Sitecore/jss/pull/1718)) * `[templates/node-headless-ssr-proxy]` `[node-headless-ssr-proxy]` Add sc_site qs parameter to Layout Service requests by default ([#1660](https://github.com/Sitecore/jss/pull/1660)) * `[templates/nextjs-sxa]` Fixed Image component when there is using Banner variant which set property background-image when image is empty. ([#1689](https://github.com/Sitecore/jss/pull/1689)) ([#1692](https://github.com/Sitecore/jss/pull/1692)) * `[templates/nextjs-sxa]` Fix feature `show Grid column` in Experience Editor. ([#1704](https://github.com/Sitecore/jss/pull/1704)) diff --git a/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx b/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx index 611d872534..de0a4db97c 100644 --- a/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx +++ b/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx @@ -6,12 +6,12 @@ import { NextRouter } from 'next/router'; import { mount } from 'enzyme'; import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; import { RichText } from './RichText'; -import { spy } from 'sinon'; +import { SinonSpy, spy } from 'sinon'; import sinonChai from 'sinon-chai'; use(sinonChai); -const Router = (): NextRouter => ({ +const Router = (): { push: SinonSpy } & Omit => ({ pathname: '/', route: '/', query: {}, @@ -47,7 +47,13 @@ describe('RichText', () => { const props = { field: { - value: '

Hello!

12
', + value: ` +
+

Hello!

+ 1 + 2 + Title +
`, }, }; @@ -62,8 +68,9 @@ describe('RichText', () => { expect(c.html()).contains('

Hello!

'); expect(c.html()).contains('1'); expect(c.html()).contains('2'); + expect(c.html()).contains('Title'); - expect(router.prefetch).callCount(1); + expect(router.prefetch).callCount(2); const main = document.querySelector('main'); @@ -71,18 +78,32 @@ describe('RichText', () => { const link1 = links && links[0]; const link2 = links && links[1]; + const link3 = links && links[2]; + const innerMarkup = document.querySelector('#child') as HTMLSpanElement; expect(link1!.pathname).to.equal('/t10'); expect(link2!.pathname).to.equal('/t10'); - link1 && link1.click(); + link1?.click(); expect(router.push).callCount(1); - link2 && link2.click(); + link2?.click(); expect(router.push).callCount(2); + link3?.click(); + + expect(router.push).callCount(3); + + // Check that when we click on link with children "router push" is called with expected pathname + innerMarkup?.click(); + + expect(router.push).callCount(4); + expect(router.push.getCall(3).calledWith('https://example.com/contains-children')).to.equal( + true + ); + expect(c.find(ReactRichText).length).to.equal(1); document.body.removeChild(app); diff --git a/packages/sitecore-jss-nextjs/src/components/RichText.tsx b/packages/sitecore-jss-nextjs/src/components/RichText.tsx index 2566a0fe62..a89a2b081a 100644 --- a/packages/sitecore-jss-nextjs/src/components/RichText.tsx +++ b/packages/sitecore-jss-nextjs/src/components/RichText.tsx @@ -40,11 +40,11 @@ export const RichText = (props: RichTextProps): JSX.Element => { }, [hasText]); const routeHandler = (ev: MouseEvent) => { - if (!ev.target) return; + if (!ev.currentTarget) return; ev.preventDefault(); - const pathname = (ev.target as HTMLAnchorElement).href; + const pathname = (ev.currentTarget as HTMLAnchorElement).href; router.push(pathname, pathname, { locale: false }); };