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

fix: include tests in type check (#23452)

Browse Source 
* fix: include tests in type check

* Do lint *.md

* Improve types in tests
This commit is contained in:
Eric Wang 2020-04-22 15:37:23 +10:00 committed by GitHub
parent 55265ac4ef
commit 64cb9584ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.eslintrc.js
View File

@ -1,7 +1,3 @@
const commonGlobals = {
gtag: true,
};
module.exports = { module.exports = {
extends: [ extends: [
'airbnb', 'airbnb',
@ -38,7 +34,6 @@ module.exports = {
{ {
files: ['*.md'], files: ['*.md'],
globals: { globals: {
...commonGlobals,
React: true, React: true,
ReactDOM: true, ReactDOM: true,
mountNode: true, mountNode: true,
@ -124,5 +119,7 @@ module.exports = {
'unicorn/expiring-todo-comments': 2, 'unicorn/expiring-todo-comments': 2,
'unicorn/no-abusive-eslint-disable': 2, 'unicorn/no-abusive-eslint-disable': 2,
}, },
globals: commonGlobals, globals: {
gtag: true,
},
}; };

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

@ -1,12 +1,13 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount, ReactWrapper, HTMLAttributes } from 'enzyme';
import Affix from '..'; import ResizeObserverImpl from 'rc-resize-observer';
import Affix, { AffixProps, AffixState } from '..';
import { getObserverEntities } from '../utils'; import { getObserverEntities } from '../utils';
import Button from '../../button'; import Button from '../../button';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
import { sleep } from '../../../tests/utils'; import { sleep } from '../../../tests/utils';
const events: any = {}; const events: Partial<Record<keyof HTMLElementEventMap, (ev: Partial<Event>) => void>> = {};
class AffixMounter extends React.Component<{ class AffixMounter extends React.Component<{
offsetBottom?: number; offsetBottom?: number;
@ -15,12 +16,14 @@ class AffixMounter extends React.Component<{
}> { }> {
private container: HTMLDivElement; private container: HTMLDivElement;
private affix: Affix; public affix: Affix;
componentDidMount() { componentDidMount() {
this.container.addEventListener = jest.fn().mockImplementation((event, cb) => { this.container.addEventListener = jest
events[event] = cb; .fn()
}); .mockImplementation((event: keyof HTMLElementEventMap, cb: (ev: Partial<Event>) => void) => {
events[event] = cb;
});
} }
getTarget = () => this.container; getTarget = () => this.container;
@ -29,7 +32,7 @@ class AffixMounter extends React.Component<{
return ( return (
<div <div
ref={node => { ref={node => {
this.container = node; this.container = node!;
}} }}
className="container" className="container"
> >
@ -37,7 +40,7 @@ class AffixMounter extends React.Component<{
className="fixed" className="fixed"
target={this.getTarget} target={this.getTarget}
ref={ele => { ref={ele => {
this.affix = ele; this.affix = ele!;
}} }}
{...this.props} {...this.props}
> >
@ -51,14 +54,15 @@ class AffixMounter extends React.Component<{
describe('Affix Render', () => { describe('Affix Render', () => {
rtlTest(Affix); rtlTest(Affix);
let wrapper;
const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect'); const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
let affixMounterWrapper: ReactWrapper<unknown, unknown, AffixMounter>;
let affixWrapper: ReactWrapper<AffixProps, AffixState, Affix>;
const classRect: any = { const classRect: Record<string, DOMRect> = {
container: { container: {
top: 0, top: 0,
bottom: 100, bottom: 100,
}, } as DOMRect,
}; };
beforeAll(() => { beforeAll(() => {
@ -76,11 +80,14 @@ describe('Affix Render', () => {
domMock.mockRestore(); domMock.mockRestore();
}); });
const movePlaceholder = async top => { const movePlaceholder = async (top: number) => {
classRect.fixed = { classRect.fixed = {
top, top,
bottom: top, bottom: top,
}; } as DOMRect;
if (events.scroll == null) {
throw new Error('scroll should be set');
}
events.scroll({ events.scroll({
type: 'scroll', type: 'scroll',
}); });
@ -90,53 +97,53 @@ describe('Affix Render', () => {
it('Anchor render perfectly', async () => { it('Anchor render perfectly', async () => {
document.body.innerHTML = '<div id="mounter" />'; document.body.innerHTML = '<div id="mounter" />';
wrapper = mount(<AffixMounter />, { attachTo: document.getElementById('mounter') }); affixMounterWrapper = mount(<AffixMounter />, { attachTo: document.getElementById('mounter') });
await sleep(20); await sleep(20);
await movePlaceholder(0); await movePlaceholder(0);
expect(wrapper.instance().affix.state.affixStyle).toBeFalsy(); expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeFalsy();
await movePlaceholder(-100); await movePlaceholder(-100);
expect(wrapper.instance().affix.state.affixStyle).toBeTruthy(); expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
await movePlaceholder(0); await movePlaceholder(0);
expect(wrapper.instance().affix.state.affixStyle).toBeFalsy(); expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeFalsy();
}); });
it('support offsetBottom', async () => { it('support offsetBottom', async () => {
document.body.innerHTML = '<div id="mounter" />'; document.body.innerHTML = '<div id="mounter" />';
wrapper = mount(<AffixMounter offsetBottom={0} />, { affixMounterWrapper = mount(<AffixMounter offsetBottom={0} />, {
attachTo: document.getElementById('mounter'), attachTo: document.getElementById('mounter'),
}); });
await sleep(20); await sleep(20);
await movePlaceholder(300); await movePlaceholder(300);
expect(wrapper.instance().affix.state.affixStyle).toBeTruthy(); expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
await movePlaceholder(0); await movePlaceholder(0);
expect(wrapper.instance().affix.state.affixStyle).toBeFalsy(); expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeFalsy();
await movePlaceholder(300); await movePlaceholder(300);
expect(wrapper.instance().affix.state.affixStyle).toBeTruthy(); expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
}); });
it('updatePosition when offsetTop changed', async () => { it('updatePosition when offsetTop changed', async () => {
document.body.innerHTML = '<div id="mounter" />'; document.body.innerHTML = '<div id="mounter" />';
wrapper = mount(<AffixMounter offsetTop={0} />, { affixMounterWrapper = mount(<AffixMounter offsetTop={0} />, {
attachTo: document.getElementById('mounter'), attachTo: document.getElementById('mounter'),
}); });
await sleep(20); await sleep(20);
await movePlaceholder(-100); await movePlaceholder(-100);
expect(wrapper.instance().affix.state.affixStyle.top).toBe(0); expect(affixMounterWrapper.instance().affix.state.affixStyle?.top).toBe(0);
wrapper.setProps({ affixMounterWrapper.setProps({
offsetTop: 10, offsetTop: 10,
}); });
await sleep(20); await sleep(20);
expect(wrapper.instance().affix.state.affixStyle.top).toBe(10); expect(affixMounterWrapper.instance().affix.state.affixStyle?.top).toBe(10);
}); });
describe('updatePosition when target changed', () => { describe('updatePosition when target changed', () => {
@ -144,11 +151,11 @@ describe('Affix Render', () => {
document.body.innerHTML = '<div id="mounter" />'; document.body.innerHTML = '<div id="mounter" />';
const container = document.querySelector('#id') as HTMLDivElement; const container = document.querySelector('#id') as HTMLDivElement;
const getTarget = () => container; const getTarget = () => container;
wrapper = mount(<Affix target={getTarget}>{null}</Affix>); affixWrapper = mount(<Affix target={getTarget}>{null}</Affix>);
wrapper.setProps({ target: null }); affixWrapper.setProps({ target: () => null });
expect(wrapper.instance().state.status).toBe(0); expect(affixWrapper.instance().state.status).toBe(0);
expect(wrapper.instance().state.affixStyle).toBe(undefined); expect(affixWrapper.instance().state.affixStyle).toBe(undefined);
expect(wrapper.instance().state.placeholderStyle).toBe(undefined); expect(affixWrapper.instance().state.placeholderStyle).toBe(undefined);
}); });
it('instance change', async () => { it('instance change', async () => {
@ -156,53 +163,68 @@ describe('Affix Render', () => {
const container = document.createElement('div'); const container = document.createElement('div');
document.body.appendChild(container); document.body.appendChild(container);
let target = container; let target: HTMLDivElement | null = container;
const originLength = getObserverLength(); const originLength = getObserverLength();
const getTarget = () => target; const getTarget = () => target;
wrapper = mount(<Affix target={getTarget}>{null}</Affix>); affixWrapper = mount(<Affix target={getTarget}>{null}</Affix>);
await sleep(50); await sleep(50);
expect(getObserverLength()).toBe(originLength + 1); expect(getObserverLength()).toBe(originLength + 1);
target = null; target = null;
wrapper.setProps({}); affixWrapper.setProps({});
wrapper.update(); affixWrapper.update();
await sleep(50); await sleep(50);
expect(getObserverLength()).toBe(originLength); expect(getObserverLength()).toBe(originLength);
}); });
}); });
describe('updatePosition when size changed', () => { describe('updatePosition when size changed', () => {
function test(name, index) { it.each([
it(name, async () => { { name: 'inner', index: 0 },
document.body.innerHTML = '<div id="mounter" />'; { name: 'outer', index: 1 },
])(name, async ({ index }) => {
document.body.innerHTML = '<div id="mounter" />';
const updateCalled = jest.fn(); const updateCalled = jest.fn();
wrapper = mount(<AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />, { affixMounterWrapper = mount(
<AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />,
{
attachTo: document.getElementById('mounter'), attachTo: document.getElementById('mounter'),
}); },
);
await sleep(20); await sleep(20);
await movePlaceholder(300); await movePlaceholder(300);
expect(wrapper.instance().affix.state.affixStyle).toBeTruthy(); expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
await sleep(20); await sleep(20);
wrapper.update(); affixMounterWrapper.update();
// Mock trigger resize // Mock trigger resize
updateCalled.mockReset(); updateCalled.mockReset();
wrapper const resizeObserverInstance: ReactWrapper<
.find('ResizeObserver') HTMLAttributes,
.at(index) unknown,
.instance() ResizeObserverImpl
.onResize([{ target: { getBoundingClientRect: () => ({ width: 99, height: 99 }) } }]); > = affixMounterWrapper.find('ResizeObserver') as any;
await sleep(20); resizeObserverInstance
.at(index)
.instance()
.onResize(
[
{
target: {
getBoundingClientRect: () => ({ width: 99, height: 99 }),
} as Element,
contentRect: {} as DOMRect,
},
],
({} as unknown) as ResizeObserver,
);
await sleep(20);
expect(updateCalled).toHaveBeenCalled(); expect(updateCalled).toHaveBeenCalled();
}); });
}
test('inner', 0);
test('outer', 1);
}); });
}); });

2
tsconfig.json
View File

@ -17,5 +17,5 @@
"lib": ["dom", "es2017"], "lib": ["dom", "es2017"],
"skipLibCheck": true "skipLibCheck": true
}, },
"exclude": ["node_modules", "lib", "es", "**/__tests__/**"] "exclude": ["node_modules", "lib", "es"]
} }