mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00

Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* chore: add unstable entrance * chore: rest of it * chore: use React 19 * chore: fix lint * chore: fix lint * chore: fix lint * chore: fix lint * chore: fix lint * chore: fix lint * chore: fix lint * chore: test ignore 19 preload * chore: bump rc-util * fix: warning of pure render * fix: warning of 19 * chore: adjust ts * test: fix test logic * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * chore: restore file * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: update test * test: fix test case * test: update snapshot * test: fix coverage * test: fix coverage * test: add ignore image
365 lines
8.6 KiB
TypeScript
365 lines
8.6 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
|
import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils';
|
|
import Checkbox from '../../checkbox';
|
|
import Wave from '../wave';
|
|
import { TARGET_CLS } from '../wave/interface';
|
|
|
|
(global as any).isVisible = true;
|
|
|
|
// TODO: Remove this. Mock for React 19
|
|
jest.mock('react-dom', () => {
|
|
const realReactDOM = jest.requireActual('react-dom');
|
|
|
|
if (realReactDOM.version.startsWith('19')) {
|
|
const realReactDOMClient = jest.requireActual('react-dom/client');
|
|
realReactDOM.createRoot = realReactDOMClient.createRoot;
|
|
}
|
|
|
|
return realReactDOM;
|
|
});
|
|
|
|
jest.mock('rc-util/lib/Dom/isVisible', () => {
|
|
const mockFn = () => (global as any).isVisible;
|
|
return mockFn;
|
|
});
|
|
|
|
describe('Wave component', () => {
|
|
mountTest(Wave);
|
|
|
|
let obCnt = 0;
|
|
let disCnt = 0;
|
|
|
|
beforeAll(() => {
|
|
class FakeResizeObserver {
|
|
observe = () => {
|
|
obCnt += 1;
|
|
};
|
|
|
|
disconnect = () => {
|
|
disCnt += 1;
|
|
};
|
|
}
|
|
|
|
(window as any).ResizeObserver = FakeResizeObserver;
|
|
});
|
|
|
|
afterAll(() => {
|
|
jest.useRealTimers();
|
|
expect(obCnt).not.toBe(0);
|
|
expect(disCnt).not.toBe(0);
|
|
});
|
|
|
|
beforeEach(() => {
|
|
jest.useFakeTimers();
|
|
(global as any).isVisible = true;
|
|
document.body.innerHTML = '';
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await waitFakeTimer();
|
|
|
|
jest.clearAllTimers();
|
|
const styles = document.getElementsByTagName('style');
|
|
for (let i = 0; i < styles.length; i += 1) {
|
|
styles[i].remove();
|
|
}
|
|
});
|
|
|
|
function getWaveStyle() {
|
|
const styleObj: Record<string, string> = {};
|
|
const { style } = document.querySelector<HTMLElement>('.ant-wave')!;
|
|
style.cssText.split(';').forEach((kv) => {
|
|
if (kv.trim()) {
|
|
const cells = kv.split(':');
|
|
styleObj[cells[0].trim()] = cells[1].trim();
|
|
}
|
|
});
|
|
|
|
return styleObj;
|
|
}
|
|
|
|
function waitRaf() {
|
|
act(() => {
|
|
jest.advanceTimersByTime(100);
|
|
});
|
|
act(() => {
|
|
jest.advanceTimersByTime(100);
|
|
});
|
|
}
|
|
|
|
it('work', async () => {
|
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<button type="button">button</button>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
waitRaf();
|
|
expect(document.querySelector('.ant-wave')).toBeTruthy();
|
|
|
|
// Match deadline
|
|
await waitFakeTimer();
|
|
|
|
expect(document.querySelector('.ant-wave')).toBeFalsy();
|
|
|
|
expect(errorSpy).not.toHaveBeenCalled();
|
|
errorSpy.mockRestore();
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('invisible in screen', () => {
|
|
(global as any).isVisible = false;
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<button type="button">button</button>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
waitRaf();
|
|
expect(document.querySelector('.ant-wave')).toBeFalsy();
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('wave color is nonexistent', () => {
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<button type="button" style={{ border: '#fff', background: '#fff' }}>
|
|
button
|
|
</button>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
waitRaf();
|
|
|
|
const style = getWaveStyle();
|
|
expect(style['--wave-color']).toEqual(undefined);
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('wave color is not grey', () => {
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<button type="button" style={{ borderColor: 'red' }}>
|
|
button
|
|
</button>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
waitRaf();
|
|
|
|
const style = getWaveStyle();
|
|
expect(style['--wave-color']).toEqual('red');
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('read wave color from border-top-color', () => {
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<div style={{ borderTopColor: 'blue' }}>button</div>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(getByText(container, 'button')!);
|
|
waitRaf();
|
|
|
|
const style = getWaveStyle();
|
|
expect(style['--wave-color']).toEqual('blue');
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('read wave color from background color', () => {
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<div style={{ backgroundColor: 'green' }}>button</div>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(getByText(container, 'button')!);
|
|
waitRaf();
|
|
|
|
const style = getWaveStyle();
|
|
expect(style['--wave-color']).toEqual('green');
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('read wave color from border firstly', () => {
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<div style={{ borderColor: 'yellow', backgroundColor: 'green' }}>button</div>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(getByText(container, 'button')!);
|
|
waitRaf();
|
|
|
|
const style = getWaveStyle();
|
|
expect(style['--wave-color']).toEqual('yellow');
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('hidden element with -leave className', () => {
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<button type="button" className="xx-leave">
|
|
button
|
|
</button>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
waitRaf();
|
|
expect(document.querySelector('.ant-wave')).toBeFalsy();
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('not show when disabled', () => {
|
|
const { container } = render(
|
|
<Wave>
|
|
<button type="button" disabled>
|
|
button
|
|
</button>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
expect(document.querySelector('.ant-wave')).toBeFalsy();
|
|
});
|
|
|
|
it('not show when hidden', () => {
|
|
(global as any).isVisible = false;
|
|
|
|
const { container } = render(
|
|
<Wave>
|
|
<button type="button" style={{ display: 'none' }}>
|
|
button
|
|
</button>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
waitRaf();
|
|
expect(document.querySelector('.ant-wave')).toBeFalsy();
|
|
});
|
|
|
|
it('should not throw when click it', () => {
|
|
expect(() => {
|
|
const { container } = render(
|
|
<Wave>
|
|
<div />
|
|
</Wave>,
|
|
);
|
|
fireEvent.click(container);
|
|
waitRaf();
|
|
}).not.toThrow();
|
|
});
|
|
|
|
it('should not throw when no children', () => {
|
|
expect(() => {
|
|
render(<Wave />);
|
|
waitRaf();
|
|
}).not.toThrow();
|
|
});
|
|
|
|
it('wave color should inferred if border is transparent and background is not', () => {
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<button type="button" style={{ borderColor: 'transparent', background: 'red' }}>
|
|
button
|
|
</button>
|
|
</Wave>,
|
|
);
|
|
fireEvent.click(container.querySelector('button')!);
|
|
waitRaf();
|
|
|
|
const style = getWaveStyle();
|
|
expect(style['--wave-color']).toEqual('red');
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('wave color should inferred if borderTopColor is transparent and borderColor is not', () => {
|
|
const { container, unmount } = render(
|
|
<Wave>
|
|
<button type="button" style={{ borderColor: 'red', borderTopColor: 'transparent' }}>
|
|
button
|
|
</button>
|
|
</Wave>,
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
waitRaf();
|
|
|
|
const style = getWaveStyle();
|
|
expect(style['--wave-color']).toEqual('red');
|
|
|
|
unmount();
|
|
});
|
|
|
|
it('Wave style should append to validate element', () => {
|
|
const { container } = render(
|
|
<Wave>
|
|
<div className="bamboo" style={{ borderColor: 'red' }} />
|
|
</Wave>,
|
|
);
|
|
|
|
// Mock shadow container
|
|
const fakeDoc = document.createElement('div');
|
|
fakeDoc.append('text');
|
|
fakeDoc.appendChild(document.createElement('span'));
|
|
expect(fakeDoc.childNodes).toHaveLength(2);
|
|
|
|
const elem = container.querySelector('.bamboo')!;
|
|
elem.getRootNode = () => fakeDoc;
|
|
|
|
// Click should not throw
|
|
fireEvent.click(elem);
|
|
waitRaf();
|
|
|
|
expect(container.querySelector('.ant-wave')).toBeTruthy();
|
|
});
|
|
|
|
it('Wave can match target', () => {
|
|
const { container } = render(
|
|
<Wave>
|
|
<div>
|
|
<div className={classNames('bamboo', TARGET_CLS)} style={{ borderColor: 'red' }} />
|
|
</div>
|
|
</Wave>,
|
|
);
|
|
|
|
// Click
|
|
fireEvent.click(container.querySelector('.bamboo')!);
|
|
waitRaf();
|
|
|
|
expect(container.querySelector('.ant-wave')).toBeTruthy();
|
|
});
|
|
|
|
it('Checkbox with uncheck should not trigger wave', () => {
|
|
const onChange = jest.fn();
|
|
const { container } = render(<Checkbox defaultChecked onChange={onChange} />);
|
|
|
|
// Click
|
|
fireEvent.click(container.querySelector('input')!);
|
|
waitRaf();
|
|
|
|
expect(onChange).toHaveBeenCalled();
|
|
expect(container.querySelector('.ant-wave')).toBeFalsy();
|
|
});
|
|
});
|