2020-04-30 10:33:29 +08:00
|
|
|
import React from 'react';
|
|
|
|
import Anchor from '..';
|
2022-06-22 14:57:09 +08:00
|
|
|
import { fireEvent, render, sleep } from '../../../tests/utils';
|
2022-04-19 16:44:47 +08:00
|
|
|
import type { InternalAnchorClass } from '../Anchor';
|
2020-04-30 10:33:29 +08:00
|
|
|
|
|
|
|
const { Link } = Anchor;
|
|
|
|
|
|
|
|
function createGetContainer(id: string) {
|
|
|
|
return () => {
|
|
|
|
const container = document.getElementById(id);
|
|
|
|
if (container == null) {
|
|
|
|
throw new Error();
|
|
|
|
}
|
|
|
|
return container;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
function createDiv() {
|
|
|
|
const root = document.createElement('div');
|
|
|
|
document.body.appendChild(root);
|
|
|
|
return root;
|
|
|
|
}
|
|
|
|
|
|
|
|
let idCounter = 0;
|
|
|
|
const getHashUrl = () => `Anchor-API-${idCounter++}`;
|
|
|
|
|
|
|
|
describe('Anchor Render', () => {
|
|
|
|
const getBoundingClientRectMock = jest.spyOn(
|
|
|
|
HTMLHeadingElement.prototype,
|
|
|
|
'getBoundingClientRect',
|
|
|
|
);
|
|
|
|
const getClientRectsMock = jest.spyOn(HTMLHeadingElement.prototype, 'getClientRects');
|
|
|
|
|
|
|
|
beforeAll(() => {
|
|
|
|
getBoundingClientRectMock.mockReturnValue({
|
|
|
|
width: 100,
|
|
|
|
height: 100,
|
|
|
|
top: 1000,
|
|
|
|
} as DOMRect);
|
|
|
|
getClientRectsMock.mockReturnValue({ length: 1 } as DOMRectList);
|
|
|
|
});
|
|
|
|
|
|
|
|
afterAll(() => {
|
|
|
|
getBoundingClientRectMock.mockRestore();
|
|
|
|
getClientRectsMock.mockRestore();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Anchor render perfectly', () => {
|
|
|
|
const hash = getHashUrl();
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { container } = render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
|
|
|
anchorInstance!.handleScroll();
|
|
|
|
expect(anchorInstance!.state).not.toBe(null);
|
2020-04-30 10:33:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('Anchor render perfectly for complete href - click', () => {
|
|
|
|
const hash = getHashUrl();
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { container } = render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`http://www.example.com/#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-05-04 23:14:07 +08:00
|
|
|
fireEvent.click(container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!);
|
|
|
|
expect(anchorInstance!.state!.activeLink).toBe(`http://www.example.com/#${hash}`);
|
2020-04-30 10:33:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('Anchor render perfectly for complete href - hash router', async () => {
|
|
|
|
const root = createDiv();
|
|
|
|
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
2022-05-04 23:14:07 +08:00
|
|
|
render(<div id="/faq?locale=en#Q1">Q1</div>, { container: root });
|
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href="/#/faq?locale=en#Q1" title="Q1" />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-05-04 23:14:07 +08:00
|
|
|
anchorInstance!.handleScrollTo('/#/faq?locale=en#Q1');
|
|
|
|
expect(anchorInstance!.state.activeLink).toBe('/#/faq?locale=en#Q1');
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(scrollToSpy).not.toHaveBeenCalled();
|
|
|
|
await sleep(1000);
|
|
|
|
expect(scrollToSpy).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Anchor render perfectly for complete href - scroll', () => {
|
|
|
|
const hash = getHashUrl();
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(<div id={hash}>Hello</div>, { container: root });
|
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`http://www.example.com/#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-05-04 23:14:07 +08:00
|
|
|
anchorInstance!.handleScroll();
|
|
|
|
expect(anchorInstance!.state!.activeLink).toBe(`http://www.example.com/#${hash}`);
|
2020-04-30 10:33:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('Anchor render perfectly for complete href - scrollTo', async () => {
|
|
|
|
const hash = getHashUrl();
|
|
|
|
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(<div id={`#${hash}`}>Hello</div>, { container: root });
|
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`##${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
anchorInstance!.handleScrollTo(`##${hash}`);
|
|
|
|
expect(anchorInstance!.state.activeLink).toBe(`##${hash}`);
|
2020-04-30 10:33:29 +08:00
|
|
|
const calls = scrollToSpy.mock.calls.length;
|
|
|
|
await sleep(1000);
|
|
|
|
expect(scrollToSpy.mock.calls.length).toBeGreaterThan(calls);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should remove listener when unmount', async () => {
|
|
|
|
const hash = getHashUrl();
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { unmount } = render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
|
|
|
|
unmount();
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(removeListenerSpy).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
it('should unregister link when unmount children', () => {
|
2020-04-30 10:33:29 +08:00
|
|
|
const hash = getHashUrl();
|
2022-04-18 21:02:11 +08:00
|
|
|
const { container, rerender } = render(
|
2020-04-30 10:33:29 +08:00
|
|
|
<Anchor>
|
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-18 21:02:11 +08:00
|
|
|
|
|
|
|
expect(container.querySelectorAll('.ant-anchor-link-title')).toHaveLength(1);
|
|
|
|
expect(container.querySelector('.ant-anchor-link-title')).toHaveAttribute('href', `#${hash}`);
|
|
|
|
|
|
|
|
rerender(<Anchor />);
|
|
|
|
expect(container.querySelector('.ant-anchor-link-title')).toBeFalsy();
|
2020-04-30 10:33:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should update links when link href update', async () => {
|
|
|
|
const hash = getHashUrl();
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
2020-04-30 10:33:29 +08:00
|
|
|
function AnchorUpdate({ href }: { href: string }) {
|
|
|
|
return (
|
2022-05-04 23:14:07 +08:00
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={href} title={hash} />
|
|
|
|
</Anchor>
|
|
|
|
);
|
|
|
|
}
|
2022-05-04 23:14:07 +08:00
|
|
|
const { rerender } = render(<AnchorUpdate href={`#${hash}`} />);
|
2020-04-30 10:33:29 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
if (anchorInstance! == null) {
|
2020-04-30 10:33:29 +08:00
|
|
|
throw new Error('anchorInstance should not be null');
|
|
|
|
}
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
expect((anchorInstance as any)!.links).toEqual([`#${hash}`]);
|
|
|
|
rerender(<AnchorUpdate href={`#${hash}_1`} />);
|
|
|
|
expect((anchorInstance as any)!.links).toEqual([`#${hash}_1`]);
|
2020-04-30 10:33:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('Anchor onClick event', () => {
|
|
|
|
const hash = getHashUrl();
|
|
|
|
let event;
|
|
|
|
let link;
|
|
|
|
const handleClick = (
|
|
|
|
e: React.MouseEvent<HTMLElement>,
|
|
|
|
_link: { title: React.ReactNode; href: string },
|
|
|
|
) => {
|
|
|
|
event = e;
|
|
|
|
link = _link;
|
|
|
|
};
|
|
|
|
|
|
|
|
const href = `#${hash}`;
|
|
|
|
const title = hash;
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { container } = render(
|
|
|
|
<Anchor
|
|
|
|
onClick={handleClick}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={href} title={title} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
fireEvent.click(container.querySelector(`a[href="${href}"]`)!);
|
|
|
|
anchorInstance!.handleScroll();
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(event).not.toBe(undefined);
|
|
|
|
expect(link).toEqual({ href, title });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Different function returns the same DOM', async () => {
|
|
|
|
const hash = getHashUrl();
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(<div id={hash}>Hello</div>, { container: root });
|
2020-04-30 10:33:29 +08:00
|
|
|
const getContainerA = createGetContainer(hash);
|
|
|
|
const getContainerB = createGetContainer(hash);
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { rerender } = render(
|
|
|
|
<Anchor
|
|
|
|
getContainer={getContainerA}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
|
2020-04-30 10:33:29 +08:00
|
|
|
await sleep(1000);
|
2022-05-04 23:14:07 +08:00
|
|
|
rerender(
|
|
|
|
<Anchor getContainer={getContainerB}>
|
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(removeListenerSpy).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Different function returns different DOM', async () => {
|
|
|
|
const hash1 = getHashUrl();
|
|
|
|
const hash2 = getHashUrl();
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(
|
2020-04-30 10:33:29 +08:00
|
|
|
<div>
|
|
|
|
<div id={hash1}>Hello</div>
|
|
|
|
<div id={hash2}>World</div>
|
|
|
|
</div>,
|
2022-05-04 23:14:07 +08:00
|
|
|
{ container: root },
|
2020-04-30 10:33:29 +08:00
|
|
|
);
|
|
|
|
const getContainerA = createGetContainer(hash1);
|
|
|
|
const getContainerB = createGetContainer(hash2);
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { rerender } = render(
|
|
|
|
<Anchor
|
|
|
|
getContainer={getContainerA}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`#${hash1}`} title={hash1} />
|
|
|
|
<Link href={`#${hash2}`} title={hash2} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(removeListenerSpy).not.toHaveBeenCalled();
|
|
|
|
await sleep(1000);
|
2022-05-04 23:14:07 +08:00
|
|
|
rerender(
|
|
|
|
<Anchor getContainer={getContainerB}>
|
|
|
|
<Link href={`#${hash1}`} title={hash1} />
|
|
|
|
<Link href={`#${hash2}`} title={hash2} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(removeListenerSpy).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Same function returns the same DOM', () => {
|
|
|
|
const hash = getHashUrl();
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(<div id={hash}>Hello</div>, { container: root });
|
2020-04-30 10:33:29 +08:00
|
|
|
const getContainer = createGetContainer(hash);
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { container } = render(
|
|
|
|
<Anchor
|
|
|
|
getContainer={getContainer}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
|
|
|
|
|
|
|
anchorInstance!.handleScroll();
|
|
|
|
expect(anchorInstance!.state).not.toBe(null);
|
2020-04-30 10:33:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('Same function returns different DOM', async () => {
|
|
|
|
const hash1 = getHashUrl();
|
|
|
|
const hash2 = getHashUrl();
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(
|
2020-04-30 10:33:29 +08:00
|
|
|
<div>
|
|
|
|
<div id={hash1}>Hello</div>
|
|
|
|
<div id={hash2}>World</div>
|
|
|
|
</div>,
|
2022-05-04 23:14:07 +08:00
|
|
|
{ container: root },
|
2020-04-30 10:33:29 +08:00
|
|
|
);
|
|
|
|
const holdContainer = {
|
|
|
|
container: document.getElementById(hash1),
|
|
|
|
};
|
|
|
|
const getContainer = () => {
|
|
|
|
if (holdContainer.container == null) {
|
|
|
|
throw new Error('container should not be null');
|
|
|
|
}
|
|
|
|
return holdContainer.container;
|
|
|
|
};
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { rerender } = render(
|
|
|
|
<Anchor
|
|
|
|
getContainer={getContainer}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`#${hash1}`} title={hash1} />
|
|
|
|
<Link href={`#${hash2}`} title={hash2} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-05-04 23:14:07 +08:00
|
|
|
const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(removeListenerSpy).not.toHaveBeenCalled();
|
|
|
|
await sleep(1000);
|
|
|
|
holdContainer.container = document.getElementById(hash2);
|
2022-05-04 23:14:07 +08:00
|
|
|
rerender(
|
|
|
|
<Anchor getContainer={getContainer}>
|
|
|
|
<Link href={`#${hash1}`} title={hash1} />
|
|
|
|
<Link href={`#${hash2}`} title={hash2} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(removeListenerSpy).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Anchor targetOffset prop', async () => {
|
|
|
|
const hash = getHashUrl();
|
|
|
|
let dateNowMock;
|
|
|
|
|
|
|
|
function dataNowMockFn() {
|
|
|
|
let start = 0;
|
|
|
|
|
|
|
|
const handler = () => {
|
2020-06-08 18:01:50 +08:00
|
|
|
start += 1000;
|
|
|
|
return start;
|
2020-04-30 10:33:29 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
return jest.spyOn(Date, 'now').mockImplementation(handler);
|
|
|
|
}
|
|
|
|
|
|
|
|
dateNowMock = dataNowMockFn();
|
2021-08-30 12:10:02 +08:00
|
|
|
|
|
|
|
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(<h1 id={hash}>Hello</h1>, { container: root });
|
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { rerender } = render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2021-08-30 12:10:02 +08:00
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
const setProps = (props: Record<string, any>) =>
|
|
|
|
rerender(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
|
|
|
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2021-08-30 12:10:02 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
|
|
|
dateNowMock = dataNowMockFn();
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
setProps({ offsetTop: 100 });
|
|
|
|
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2021-08-30 12:10:02 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
|
|
|
dateNowMock = dataNowMockFn();
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
setProps({ targetOffset: 200 });
|
|
|
|
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2021-08-30 12:10:02 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
|
|
|
|
|
|
|
dateNowMock.mockRestore();
|
|
|
|
});
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/31941
|
|
|
|
it('Anchor targetOffset prop when contain spaces', async () => {
|
|
|
|
const hash = `${getHashUrl()} s p a c e s`;
|
|
|
|
let dateNowMock;
|
|
|
|
|
|
|
|
function dataNowMockFn() {
|
|
|
|
let start = 0;
|
|
|
|
|
|
|
|
const handler = () => {
|
|
|
|
start += 1000;
|
|
|
|
return start;
|
|
|
|
};
|
|
|
|
|
|
|
|
return jest.spyOn(Date, 'now').mockImplementation(handler);
|
|
|
|
}
|
|
|
|
|
|
|
|
dateNowMock = dataNowMockFn();
|
2020-04-30 10:33:29 +08:00
|
|
|
|
|
|
|
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(<h1 id={hash}>Hello</h1>, { container: root });
|
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { rerender } = render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
const setProps = (props: Record<string, any>) =>
|
|
|
|
rerender(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
|
|
|
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2020-04-30 10:33:29 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
|
|
|
dateNowMock = dataNowMockFn();
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
setProps({ offsetTop: 100 });
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2020-04-30 10:33:29 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
|
|
|
dateNowMock = dataNowMockFn();
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
setProps({ targetOffset: 200 });
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2020-04-30 10:33:29 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
|
|
|
|
|
|
|
dateNowMock.mockRestore();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Anchor onChange prop', async () => {
|
|
|
|
const hash1 = getHashUrl();
|
|
|
|
const hash2 = getHashUrl();
|
|
|
|
const onChange = jest.fn();
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
render(
|
|
|
|
<Anchor
|
|
|
|
onChange={onChange}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-04-30 10:33:29 +08:00
|
|
|
<Link href={`#${hash1}`} title={hash1} />
|
|
|
|
<Link href={`#${hash2}`} title={hash2} />
|
|
|
|
</Anchor>,
|
2022-05-04 23:14:07 +08:00
|
|
|
// https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0
|
|
|
|
// @ts-ignore
|
|
|
|
{ legacyRoot: true },
|
2020-04-30 10:33:29 +08:00
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(onChange).toHaveBeenCalledTimes(1);
|
2022-05-04 23:14:07 +08:00
|
|
|
anchorInstance!.handleScrollTo(hash2);
|
2020-04-30 10:33:29 +08:00
|
|
|
expect(onChange).toHaveBeenCalledTimes(2);
|
|
|
|
expect(onChange).toHaveBeenCalledWith(hash2);
|
2021-05-20 21:36:53 +08:00
|
|
|
});
|
|
|
|
|
2020-05-05 19:33:33 +08:00
|
|
|
it('invalid hash', async () => {
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { container } = render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-05-05 19:33:33 +08:00
|
|
|
<Link href="notexsited" title="title" />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
fireEvent.click(container.querySelector(`a[href="notexsited"]`)!);
|
2020-05-05 19:33:33 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
anchorInstance!.handleScrollTo('notexsited');
|
|
|
|
expect(anchorInstance!.state).not.toBe(null);
|
2020-05-05 19:33:33 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('test edge case when getBoundingClientRect return zero size', async () => {
|
|
|
|
getBoundingClientRectMock.mockReturnValue({
|
|
|
|
width: 0,
|
|
|
|
height: 0,
|
|
|
|
top: 1000,
|
|
|
|
} as DOMRect);
|
|
|
|
const hash = getHashUrl();
|
|
|
|
let dateNowMock;
|
|
|
|
|
|
|
|
function dataNowMockFn() {
|
|
|
|
let start = 0;
|
|
|
|
|
|
|
|
const handler = () => {
|
2020-06-08 18:01:50 +08:00
|
|
|
start += 1000;
|
|
|
|
return start;
|
2020-05-05 19:33:33 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
return jest.spyOn(Date, 'now').mockImplementation(handler);
|
|
|
|
}
|
|
|
|
|
|
|
|
dateNowMock = dataNowMockFn();
|
|
|
|
|
|
|
|
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(<h1 id={hash}>Hello</h1>, { container: root });
|
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { rerender } = render(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-05-05 19:33:33 +08:00
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
const setProps = (props: Record<string, any>) =>
|
|
|
|
rerender(
|
|
|
|
<Anchor
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2020-05-05 19:33:33 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
|
|
|
dateNowMock = dataNowMockFn();
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
setProps({ offsetTop: 100 });
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2020-05-05 19:33:33 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
|
|
|
dateNowMock = dataNowMockFn();
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
setProps({ targetOffset: 200 });
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2020-05-05 19:33:33 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
|
|
|
|
|
|
|
dateNowMock.mockRestore();
|
|
|
|
getBoundingClientRectMock.mockReturnValue({
|
|
|
|
width: 100,
|
|
|
|
height: 100,
|
|
|
|
top: 1000,
|
|
|
|
} as DOMRect);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('test edge case when container is not windows', async () => {
|
|
|
|
const hash = getHashUrl();
|
|
|
|
let dateNowMock;
|
|
|
|
|
|
|
|
function dataNowMockFn() {
|
|
|
|
let start = 0;
|
|
|
|
|
|
|
|
const handler = () => {
|
2020-06-08 18:01:50 +08:00
|
|
|
start += 1000;
|
|
|
|
return start;
|
2020-05-05 19:33:33 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
return jest.spyOn(Date, 'now').mockImplementation(handler);
|
|
|
|
}
|
|
|
|
|
|
|
|
dateNowMock = dataNowMockFn();
|
|
|
|
|
|
|
|
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
|
|
|
const root = createDiv();
|
2022-05-04 23:14:07 +08:00
|
|
|
render(<h1 id={hash}>Hello</h1>, { container: root });
|
|
|
|
|
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
const { rerender } = render(
|
|
|
|
<Anchor
|
|
|
|
getContainer={() => document.body}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2020-05-05 19:33:33 +08:00
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
const setProps = (props: Record<string, any>) =>
|
|
|
|
rerender(
|
|
|
|
<Anchor
|
|
|
|
getContainer={() => document.body}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
<Link href={`#${hash}`} title={hash} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2020-05-05 19:33:33 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
|
|
|
dateNowMock = dataNowMockFn();
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
setProps({ offsetTop: 100 });
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2020-05-05 19:33:33 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
|
|
|
dateNowMock = dataNowMockFn();
|
2022-05-04 23:14:07 +08:00
|
|
|
setProps({ targetOffset: 200 });
|
|
|
|
anchorInstance!.handleScrollTo(`#${hash}`);
|
2020-05-05 19:33:33 +08:00
|
|
|
await sleep(30);
|
|
|
|
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
|
|
|
|
|
|
|
dateNowMock.mockRestore();
|
|
|
|
});
|
2022-03-31 11:17:17 +08:00
|
|
|
|
|
|
|
describe('getCurrentAnchor', () => {
|
|
|
|
it('Anchor getCurrentAnchor prop', () => {
|
|
|
|
const hash1 = getHashUrl();
|
|
|
|
const hash2 = getHashUrl();
|
|
|
|
const getCurrentAnchor = () => `#${hash2}`;
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
render(
|
|
|
|
<Anchor
|
|
|
|
getCurrentAnchor={getCurrentAnchor}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2022-03-31 11:17:17 +08:00
|
|
|
<Link href={`#${hash1}`} title={hash1} />
|
|
|
|
<Link href={`#${hash2}`} title={hash2} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
expect(anchorInstance!.state.activeLink).toBe(`#${hash2}`);
|
2022-03-31 11:17:17 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/30584
|
|
|
|
it('should trigger onChange when have getCurrentAnchor', async () => {
|
|
|
|
const hash1 = getHashUrl();
|
|
|
|
const hash2 = getHashUrl();
|
|
|
|
const onChange = jest.fn();
|
2022-05-04 23:14:07 +08:00
|
|
|
let anchorInstance: InternalAnchorClass;
|
|
|
|
render(
|
|
|
|
<Anchor
|
|
|
|
onChange={onChange}
|
|
|
|
getCurrentAnchor={() => hash1}
|
|
|
|
ref={node => {
|
|
|
|
anchorInstance = node as InternalAnchorClass;
|
|
|
|
}}
|
|
|
|
>
|
2022-03-31 11:17:17 +08:00
|
|
|
<Link href={`#${hash1}`} title={hash1} />
|
|
|
|
<Link href={`#${hash2}`} title={hash2} />
|
|
|
|
</Anchor>,
|
2022-05-04 23:14:07 +08:00
|
|
|
// https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0
|
|
|
|
// @ts-ignore
|
|
|
|
{ legacyRoot: true },
|
2022-03-31 11:17:17 +08:00
|
|
|
);
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-03-31 11:17:17 +08:00
|
|
|
expect(onChange).toHaveBeenCalledTimes(1);
|
2022-05-04 23:14:07 +08:00
|
|
|
anchorInstance!.handleScrollTo(hash2);
|
2022-03-31 11:17:17 +08:00
|
|
|
expect(onChange).toHaveBeenCalledTimes(2);
|
|
|
|
expect(onChange).toHaveBeenCalledWith(hash2);
|
|
|
|
});
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/34784
|
|
|
|
it('getCurrentAnchor have default link as argument', async () => {
|
|
|
|
const hash1 = getHashUrl();
|
|
|
|
const hash2 = getHashUrl();
|
|
|
|
const getCurrentAnchor = jest.fn();
|
2022-05-04 23:14:07 +08:00
|
|
|
const { container } = render(
|
2022-03-31 11:17:17 +08:00
|
|
|
<Anchor getCurrentAnchor={getCurrentAnchor}>
|
|
|
|
<Link href={`#${hash1}`} title={hash1} />
|
|
|
|
<Link href={`#${hash2}`} title={hash2} />
|
|
|
|
</Anchor>,
|
|
|
|
);
|
|
|
|
|
2022-05-04 23:14:07 +08:00
|
|
|
fireEvent.click(container.querySelector(`a[href="#${hash1}"]`)!);
|
2022-03-31 11:17:17 +08:00
|
|
|
expect(getCurrentAnchor).toHaveBeenCalledWith(`#${hash1}`);
|
2022-05-04 23:14:07 +08:00
|
|
|
fireEvent.click(container.querySelector(`a[href="#${hash2}"]`)!);
|
2022-03-31 11:17:17 +08:00
|
|
|
expect(getCurrentAnchor).toHaveBeenCalledWith(`#${hash2}`);
|
|
|
|
});
|
|
|
|
});
|
2020-04-30 10:33:29 +08:00
|
|
|
});
|