diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 7693f5db62..f16b4c7ea9 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,13 @@ timeline: true --- +## 4.22.7 + +`2022-08-21` + +- 🐞 Fix Typography visible change some time Tooltip not work with ellipsis. [#37147](https://github.com/ant-design/ant-design/pull/37147) +- 🐞 Fix InputNumber that style cannot be customized with controls less variables. [#37070](https://github.com/ant-design/ant-design/pull/37070) [@coldice945](https://github.com/coldice945) + ## 4.22.6 `2022-08-17` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 92e8603d73..dd6cb4a2e6 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,13 @@ timeline: true --- +## 4.22.7 + +`2022-08-21` + +- 🐞 修复 Typography 可见度切换时有时候省略不会显示 Tooltip 的问题。[#37147](https://github.com/ant-design/ant-design/pull/37147) +- 🐞 修复 InputNumber 样式不跟随控件 less 变量改变的问题。[#37070](https://github.com/ant-design/ant-design/pull/37070) [@coldice945](https://github.com/coldice945) + ## 4.22.6 `2022-08-17` diff --git a/components/_util/__tests__/easings.test.js b/components/_util/__tests__/easings.test.ts similarity index 91% rename from components/_util/__tests__/easings.test.js rename to components/_util/__tests__/easings.test.ts index d32e0dd7f0..5fcf58bd95 100644 --- a/components/_util/__tests__/easings.test.js +++ b/components/_util/__tests__/easings.test.ts @@ -2,7 +2,7 @@ import { easeInOutCubic } from '../easings'; describe('Test easings', () => { it('easeInOutCubic return value', () => { - const nums = []; + const nums: number[] = []; // eslint-disable-next-line no-plusplus for (let index = 0; index < 5; index++) { nums.push(easeInOutCubic(index, 1, 5, 4)); diff --git a/components/_util/__tests__/getScroll.test.js b/components/_util/__tests__/getScroll.test.ts similarity index 98% rename from components/_util/__tests__/getScroll.test.js rename to components/_util/__tests__/getScroll.test.ts index 7b7dd3ca48..8cb737ff1a 100644 --- a/components/_util/__tests__/getScroll.test.js +++ b/components/_util/__tests__/getScroll.test.ts @@ -41,7 +41,7 @@ describe('getScroll', () => { }); it('getScroll documentElement', async () => { - const div = {}; + const div: any = {}; const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => { div.scrollLeft = null; div.scrollTop = null; diff --git a/components/_util/__tests__/responsiveObserve.test.js b/components/_util/__tests__/responsiveObserve.test.ts similarity index 100% rename from components/_util/__tests__/responsiveObserve.test.js rename to components/_util/__tests__/responsiveObserve.test.ts diff --git a/components/_util/__tests__/scrollTo.test.js b/components/_util/__tests__/scrollTo.test.ts similarity index 96% rename from components/_util/__tests__/scrollTo.test.js rename to components/_util/__tests__/scrollTo.test.ts index 41314ec6fb..e91f843305 100644 --- a/components/_util/__tests__/scrollTo.test.js +++ b/components/_util/__tests__/scrollTo.test.ts @@ -2,7 +2,7 @@ import { sleep } from '../../../tests/utils'; import scrollTo from '../scrollTo'; describe('Test ScrollTo function', () => { - let dateNowMock; + let dateNowMock: jest.SpyInstance; beforeEach(() => { dateNowMock = jest @@ -16,7 +16,7 @@ describe('Test ScrollTo function', () => { }); it('test scrollTo', async () => { - const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => { + const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => { window.scrollY = y; window.pageYOffset = y; }); diff --git a/components/_util/__tests__/transButton.test.js b/components/_util/__tests__/transButton.test.js deleted file mode 100644 index fd350214e7..0000000000 --- a/components/_util/__tests__/transButton.test.js +++ /dev/null @@ -1,12 +0,0 @@ -import { mount } from 'enzyme'; -import React from 'react'; -import TransButton from '../transButton'; - -describe('transButton component', () => { - it('disabled should update style', () => { - const wrapper = mount(); - expect(wrapper.find('div').first().props().style).toEqual( - expect.objectContaining({ pointerEvents: 'none' }), - ); - }); -}); diff --git a/components/_util/__tests__/transButton.test.tsx b/components/_util/__tests__/transButton.test.tsx new file mode 100644 index 0000000000..6f1fef1fe5 --- /dev/null +++ b/components/_util/__tests__/transButton.test.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import TransButton from '../transButton'; +import { render } from '../../../tests/utils'; + +describe('transButton component', () => { + it('disabled should update style', () => { + const { container } = render(); + expect(container.querySelector('div')?.style.pointerEvents).toBe('none'); + }); +}); diff --git a/components/_util/__tests__/useSyncState.test.js b/components/_util/__tests__/useSyncState.test.js deleted file mode 100644 index 5c00d52221..0000000000 --- a/components/_util/__tests__/useSyncState.test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { mount } from 'enzyme'; -import React from 'react'; -import useSyncState from '../hooks/useSyncState'; - -describe('Table', () => { - it('useSyncState', () => { - const Test = () => { - const [getVal, setVal] = useSyncState('light'); - - return ( - { - setVal('bamboo'); - }} - > - {getVal()} - - ); - }; - - const wrapper = mount(); - expect(wrapper.text()).toEqual('light'); - wrapper.find('span').simulate('click'); - expect(wrapper.text()).toEqual('bamboo'); - }); -}); diff --git a/components/_util/__tests__/useSyncState.test.tsx b/components/_util/__tests__/useSyncState.test.tsx new file mode 100644 index 0000000000..c00c833f8d --- /dev/null +++ b/components/_util/__tests__/useSyncState.test.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import useSyncState from '../hooks/useSyncState'; +import { render, fireEvent } from '../../../tests/utils'; + +describe('Table', () => { + it('useSyncState', () => { + const Test: React.FC = () => { + const [getVal, setVal] = useSyncState('light'); + return setVal('bamboo')}>{getVal()}; + }; + + const { container } = render(); + expect(container.querySelector('span')?.innerHTML).toBe('light'); + fireEvent.click(container.querySelector('span')!); + expect(container.querySelector('span')?.innerHTML).toBe('bamboo'); + }); +}); diff --git a/components/_util/__tests__/util.test.js b/components/_util/__tests__/util.test.tsx similarity index 84% rename from components/_util/__tests__/util.test.js rename to components/_util/__tests__/util.test.tsx index cb2eeb3835..d7ff31261a 100644 --- a/components/_util/__tests__/util.test.js +++ b/components/_util/__tests__/util.test.tsx @@ -1,9 +1,8 @@ /* eslint-disable class-methods-use-this */ -import { mount } from 'enzyme'; import KeyCode from 'rc-util/lib/KeyCode'; import raf from 'rc-util/lib/raf'; import React from 'react'; -import { sleep } from '../../../tests/utils'; +import { sleep, render, fireEvent } from '../../../tests/utils'; import getDataOrAriaProps from '../getDataOrAriaProps'; import delayRaf from '../raf'; import { isStyleSupport } from '../styleChecker'; @@ -141,20 +140,24 @@ describe('Test utils function', () => { describe('TransButton', () => { it('can be focus/blur', () => { - const ref = React.createRef(); - mount(TransButton); - expect(typeof ref.current.focus).toBe('function'); - expect(typeof ref.current.blur).toBe('function'); + const ref = React.createRef(); + render(TransButton); + expect(typeof ref.current?.focus).toBe('function'); + expect(typeof ref.current?.blur).toBe('function'); }); it('should trigger onClick when press enter', () => { const onClick = jest.fn(); - const preventDefault = jest.fn(); - const wrapper = mount(TransButton); - wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER }); - expect(onClick).toHaveBeenCalled(); - wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault }); - expect(preventDefault).toHaveBeenCalled(); + + const { container } = render(TransButton); + + // callback should trigger + fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER }); + expect(onClick).toHaveBeenCalledTimes(1); + + // callback should not trigger + fireEvent.keyDown(container.querySelector('div')!, { keyCode: KeyCode.ENTER }); + expect(onClick).toHaveBeenCalledTimes(1); }); }); @@ -167,7 +170,7 @@ describe('Test utils function', () => { it('isStyleSupport return false in service side', () => { const spy = jest .spyOn(window.document, 'documentElement', 'get') - .mockImplementation(() => undefined); + .mockImplementation(() => undefined as unknown as HTMLElement); expect(isStyleSupport('color')).toBe(false); expect(isStyleSupport('not-existed')).toBe(false); spy.mockRestore(); diff --git a/components/_util/__tests__/warning.test.js b/components/_util/__tests__/warning.test.ts similarity index 96% rename from components/_util/__tests__/warning.test.js rename to components/_util/__tests__/warning.test.ts index 2eeeb0f1bf..e02e8effd2 100644 --- a/components/_util/__tests__/warning.test.js +++ b/components/_util/__tests__/warning.test.ts @@ -23,9 +23,7 @@ describe('Test warning', () => { expect(value).toBe(undefined); expect(spy).not.toHaveBeenCalled(); - expect(() => { - noop(); - }).not.toThrow(); + expect(noop).not.toThrow(); }); describe('process.env.NODE_ENV !== "production"', () => { diff --git a/components/_util/__tests__/wave.test.js b/components/_util/__tests__/wave.test.tsx similarity index 66% rename from components/_util/__tests__/wave.test.js rename to components/_util/__tests__/wave.test.tsx index 27fc2c216c..8ff0a47a6f 100644 --- a/components/_util/__tests__/wave.test.js +++ b/components/_util/__tests__/wave.test.tsx @@ -1,7 +1,6 @@ -import { mount } from 'enzyme'; import React from 'react'; import mountTest from '../../../tests/shared/mountTest'; -import { render, sleep } from '../../../tests/utils'; +import { render, sleep, fireEvent } from '../../../tests/utils'; import ConfigProvider from '../../config-provider'; import Wave from '../wave'; @@ -18,36 +17,38 @@ describe('Wave component', () => { it('isHidden works', () => { const TEST_NODE_ENV = process.env.NODE_ENV; process.env.NODE_ENV = 'development'; - const wrapper = mount( + const { container, unmount } = render( , ); - expect(wrapper.find('button').getDOMNode().className).toBe(''); - wrapper.find('button').getDOMNode().click(); + expect(container.querySelector('button')?.className).toBe(''); + + container.querySelector('button')?.click(); + expect( - wrapper.find('button').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'), - ).toBe(false); - wrapper.unmount(); + container.querySelector('button')?.hasAttribute('ant-click-animating-without-extra-node'), + ).toBeFalsy(); + unmount(); process.env.NODE_ENV = TEST_NODE_ENV; }); it('isHidden is mocked', () => { - const wrapper = mount( + const { container, unmount } = render( , ); - expect(wrapper.find('button').getDOMNode().className).toBe(''); - wrapper.find('button').getDOMNode().click(); + expect(container.querySelector('button')?.className).toBe(''); + container.querySelector('button')?.click(); expect( - wrapper.find('button').getDOMNode().getAttribute('ant-click-animating-without-extra-node'), + container.querySelector('button')?.getAttribute('ant-click-animating-without-extra-node'), ).toBe('false'); - wrapper.unmount(); + unmount(); }); it('wave color is grey', async () => { - const wrapper = mount( + const { container, unmount } = render( , ); - wrapper.find('button').getDOMNode().click(); + container.querySelector('button')?.click(); await sleep(0); - const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style'); + const styles = ( + container.querySelector('button')?.getRootNode() as HTMLButtonElement + ).getElementsByTagName('style'); expect(styles.length).toBe(0); - wrapper.unmount(); + unmount(); }); it('wave color is not grey', async () => { - const wrapper = mount( + const { container, unmount } = render( , ); - wrapper.find('button').getDOMNode().click(); + container.querySelector('button')?.click(); await sleep(200); - const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style'); + const styles = ( + container.querySelector('button')?.getRootNode() as HTMLButtonElement + ).getElementsByTagName('style'); expect(styles.length).toBe(1); expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: red;'); - wrapper.unmount(); + unmount(); }); it('read wave color from border-top-color', async () => { - const wrapper = mount( + const { container, unmount } = render(
button
, ); - wrapper.find('div').getDOMNode().click(); + container.querySelector('div')?.click(); await sleep(0); - const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style'); + const styles = ( + container.querySelector('div')?.getRootNode() as HTMLDivElement + ).getElementsByTagName('style'); expect(styles.length).toBe(1); expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: blue;'); - wrapper.unmount(); + unmount(); }); it('read wave color from background color', async () => { - const wrapper = mount( + const { container, unmount } = render(
button
, ); - wrapper.find('div').getDOMNode().click(); + container.querySelector('div')?.click(); await sleep(0); - const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style'); + const styles = ( + container.querySelector('div')?.getRootNode() as HTMLDivElement + ).getElementsByTagName('style'); expect(styles.length).toBe(1); expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: green;'); - wrapper.unmount(); + unmount(); }); it('read wave color from border firstly', async () => { - const wrapper = mount( + const { container, unmount } = render(
button
, ); - wrapper.find('div').getDOMNode().click(); + container.querySelector('div')?.click(); await sleep(0); - const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style'); + const styles = ( + container.querySelector('div')?.getRootNode() as HTMLDivElement + ).getElementsByTagName('style'); expect(styles.length).toBe(1); expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: yellow;'); - wrapper.unmount(); + unmount(); }); it('hidden element with -leave className', async () => { - const wrapper = mount( + const { container, unmount } = render( , ); - wrapper.find('button').getDOMNode().click(); + container.querySelector('button')?.click(); await sleep(0); - const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style'); + const styles = ( + container.querySelector('button')?.getRootNode() as HTMLButtonElement + ).getElementsByTagName('style'); expect(styles.length).toBe(0); - wrapper.unmount(); + unmount(); }); it('ConfigProvider csp', async () => { - const wrapper = mount( + const { container, unmount } = render( , ); - wrapper.find('button').getDOMNode().click(); + container.querySelector('button')?.click(); await sleep(0); - const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style'); + const styles = ( + container.querySelector('button')?.getRootNode() as HTMLButtonElement + ).getElementsByTagName('style'); expect(styles[0].getAttribute('nonce')).toBe('YourNonceCode'); - wrapper.unmount(); + unmount(); }); it('bindAnimationEvent should return when node is null', () => { - const ref = React.createRef(); + const ref = React.createRef(); render(