mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-21 10:31:10 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

test(affix): migrate test to testing-library (#37299)

Browse Source
This commit is contained in:
Rex Zeng 2022-09-03 17:50:25 +08:00 committed by GitHub
parent 319f7731e8
commit 77b9607ba7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/affix/__tests__/Affix.test.tsx
View File

@ -1,11 +1,9 @@
import type { ReactWrapper } from 'enzyme';
import { mount } from 'enzyme';
import React from 'react'; import React from 'react';
import type { AffixProps, AffixState, InternalAffixClass } from '..'; import type { InternalAffixClass } from '..';
import Affix from '..'; import Affix from '..';
import accessibilityTest from '../../../tests/shared/accessibilityTest'; import accessibilityTest from '../../../tests/shared/accessibilityTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
import { render, sleep } from '../../../tests/utils'; import { render, sleep, triggerResize } from '../../../tests/utils';
import Button from '../../button'; import Button from '../../button';
import { getObserverEntities } from '../utils'; import { getObserverEntities } from '../utils';
@ -16,11 +14,10 @@ class AffixMounter extends React.Component<{
offsetTop?: number; offsetTop?: number;
onTestUpdatePosition?(): void; onTestUpdatePosition?(): void;
onChange?: () => void; onChange?: () => void;
getInstance?: (inst: InternalAffixClass) => void;
}> { }> {
private container: HTMLDivElement; private container: HTMLDivElement;
public affix: React.Component<AffixProps, AffixState>;
componentDidMount() { componentDidMount() {
this.container.addEventListener = jest this.container.addEventListener = jest
.fn() .fn()
@ -32,6 +29,7 @@ class AffixMounter extends React.Component<{
getTarget = () => this.container; getTarget = () => this.container;
render() { render() {
const { getInstance, ...restProps } = this.props;
return ( return (
<div <div
ref={node => { ref={node => {
@ -43,9 +41,9 @@ class AffixMounter extends React.Component<{
className="fixed" className="fixed"
target={this.getTarget} target={this.getTarget}
ref={ele => { ref={ele => {
this.affix = ele!; getInstance?.(ele!);
}} }}
{...this.props} {...restProps}
> >
<Button type="primary">Fixed at the top of container</Button> <Button type="primary">Fixed at the top of container</Button>
</Affix> </Affix>
@ -59,7 +57,6 @@ describe('Affix Render', () => {
accessibilityTest(Affix); accessibilityTest(Affix);
const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect'); const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
let affixMounterWrapper: ReactWrapper<unknown, unknown, AffixMounter>;
const classRect: Record<string, DOMRect> = { const classRect: Record<string, DOMRect> = {
container: { container: {
@ -197,31 +194,38 @@ describe('Affix Render', () => {
it.each([ it.each([
{ name: 'inner', index: 0 }, { name: 'inner', index: 0 },
{ name: 'outer', index: 1 }, { name: 'outer', index: 1 },
])('inner or outer', async ({ index }) => { ])('inner or outer', async () => {
document.body.innerHTML = '<div id="mounter" />'; document.body.innerHTML = '<div id="mounter" />';
let affixInstance: InternalAffixClass | null = null;
const updateCalled = jest.fn(); const updateCalled = jest.fn();
affixMounterWrapper = mount( const { container } = render(
<AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />, <AffixMounter
getInstance={inst => {
affixInstance = inst;
}}
offsetBottom={0}
onTestUpdatePosition={updateCalled}
/>,
{ {
attachTo: document.getElementById('mounter'), container: document.getElementById('mounter')!,
}, },
); );
await sleep(20); await sleep(20);
await movePlaceholder(300); await movePlaceholder(300);
expect( expect(affixInstance!.state.affixStyle).toBeTruthy();
(affixMounterWrapper.find(AffixMounter).instance() as any).affix.state.affixStyle,
).toBeTruthy();
await sleep(20);
affixMounterWrapper.update();
// Mock trigger resize // Mock trigger resize
updateCalled.mockReset(); updateCalled.mockReset();
(affixMounterWrapper as any).triggerResize(index); triggerResize(container.querySelector('.fixed')!);
await sleep(20); await sleep(20);
expect(updateCalled).toHaveBeenCalled();
updateCalled.mockReset();
triggerResize(container.querySelector('.ant-btn')!);
await sleep(20);
expect(updateCalled).toHaveBeenCalled(); expect(updateCalled).toHaveBeenCalled();
}); });
}); });