From b2853dd36fbf8c9079161f930ec7c0524ce24478 Mon Sep 17 00:00:00 2001 From: Yuki Zhang Date: Tue, 16 Aug 2022 10:14:41 +0800 Subject: [PATCH] test: move test cases to testing-library for Grid (#37057) * test: move test cases to testing-library for Grid * fix: test when typeof gutter is object array in large screen --- .../{demo.test.js.snap => demo.test.ts.snap} | 0 ...index.test.js.snap => index.test.tsx.snap} | 8 +- .../__tests__/cached-row-context.test.tsx | 18 +-- .../__tests__/{demo.test.js => demo.test.ts} | 0 .../__tests__/{gap.test.js => gap.test.tsx} | 13 +- components/grid/__tests__/index.test.js | 127 --------------- components/grid/__tests__/index.test.tsx | 146 ++++++++++++++++++ components/grid/__tests__/server.test.js | 34 ---- components/grid/__tests__/server.test.tsx | 30 ++++ 9 files changed, 193 insertions(+), 183 deletions(-) rename components/grid/__tests__/__snapshots__/{demo.test.js.snap => demo.test.ts.snap} (100%) rename components/grid/__tests__/__snapshots__/{index.test.js.snap => index.test.tsx.snap} (76%) rename components/grid/__tests__/{demo.test.js => demo.test.ts} (100%) rename components/grid/__tests__/{gap.test.js => gap.test.tsx} (77%) delete mode 100644 components/grid/__tests__/index.test.js create mode 100644 components/grid/__tests__/index.test.tsx delete mode 100644 components/grid/__tests__/server.test.js create mode 100644 components/grid/__tests__/server.test.tsx diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/grid/__tests__/__snapshots__/demo.test.js.snap rename to components/grid/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/grid/__tests__/__snapshots__/index.test.js.snap b/components/grid/__tests__/__snapshots__/index.test.tsx.snap similarity index 76% rename from components/grid/__tests__/__snapshots__/index.test.js.snap rename to components/grid/__tests__/__snapshots__/index.test.tsx.snap index e140bd9caa77..02d838380be0 100644 --- a/components/grid/__tests__/__snapshots__/index.test.js.snap +++ b/components/grid/__tests__/__snapshots__/index.test.tsx.snap @@ -3,17 +3,17 @@ exports[`Grid renders wrapped Col correctly 1`] = `
`; @@ -45,6 +45,6 @@ exports[`Grid should render Row 1`] = ` exports[`Grid when typeof gutter is object array in large screen 1`] = `
`; diff --git a/components/grid/__tests__/cached-row-context.test.tsx b/components/grid/__tests__/cached-row-context.test.tsx index 5edf9ef96d7b..9a61f3747d58 100644 --- a/components/grid/__tests__/cached-row-context.test.tsx +++ b/components/grid/__tests__/cached-row-context.test.tsx @@ -1,7 +1,7 @@ -import { mount } from 'enzyme'; import React, { memo, useContext, useRef, useState } from 'react'; import Row from '../row'; import RowContext from '../RowContext'; +import { render, fireEvent } from '../../../tests/utils'; const CacheInner = memo(() => { const countRef = useRef(0); @@ -33,16 +33,16 @@ const CacheOuter = () => { }; it('Cached RowContext is working', () => { - const wrapper = mount(); - const childCount = wrapper.find('#child_count').text(); + const { container } = render(); + const childCount = container.querySelector('#child_count')?.textContent; - wrapper.find('#parent_btn').at(0).simulate('click'); - expect(wrapper.find('#parent_count').text()).toBe('2'); + fireEvent.click(container.querySelector('#parent_btn')!); + expect(container.querySelector('#parent_count')?.textContent).toBe('2'); // child component won't rerender - expect(wrapper.find('#child_count').text()).toBe(childCount); + expect(container.querySelector('#child_count')?.textContent).toBe(childCount); - wrapper.find('#parent_btn').at(0).simulate('click'); - expect(wrapper.find('#parent_count').text()).toBe('3'); + fireEvent.click(container.querySelector('#parent_btn')!); + expect(container.querySelector('#parent_count')?.textContent).toBe('3'); // child component won't rerender - expect(wrapper.find('#child_count').text()).toBe(childCount); + expect(container.querySelector('#child_count')?.textContent).toBe(childCount); }); diff --git a/components/grid/__tests__/demo.test.js b/components/grid/__tests__/demo.test.ts similarity index 100% rename from components/grid/__tests__/demo.test.js rename to components/grid/__tests__/demo.test.ts diff --git a/components/grid/__tests__/gap.test.js b/components/grid/__tests__/gap.test.tsx similarity index 77% rename from components/grid/__tests__/gap.test.js rename to components/grid/__tests__/gap.test.tsx index faab99d8994a..e3194e26f702 100644 --- a/components/grid/__tests__/gap.test.js +++ b/components/grid/__tests__/gap.test.tsx @@ -1,4 +1,3 @@ -import { mount } from 'enzyme'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import { Col, Row } from '..'; @@ -22,19 +21,15 @@ describe('Grid.Gap', () => { }); it('should use gap', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('.ant-row').props().style).toEqual( - expect.objectContaining({ - marginLeft: -8, - rowGap: 8, - marginRight: -8, - }), - ); + expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginLeft).toEqual('-8px'); + expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginRight).toEqual('-8px'); + expect((container.querySelector('.ant-row') as HTMLElement)!.style.rowGap).toEqual('8px'); }); it('not break ssr', () => { diff --git a/components/grid/__tests__/index.test.js b/components/grid/__tests__/index.test.js deleted file mode 100644 index 9ce11fef87c3..000000000000 --- a/components/grid/__tests__/index.test.js +++ /dev/null @@ -1,127 +0,0 @@ -import { mount, render } from 'enzyme'; -import React from 'react'; -import { act } from 'react-dom/test-utils'; -import { Col, Row } from '..'; -import mountTest from '../../../tests/shared/mountTest'; -import rtlTest from '../../../tests/shared/rtlTest'; -import ResponsiveObserve from '../../_util/responsiveObserve'; -import useBreakpoint from '../hooks/useBreakpoint'; - -describe('Grid', () => { - mountTest(Row); - mountTest(Col); - - rtlTest(Row); - rtlTest(Col); - - it('should render Col', () => { - const wrapper = render(); - expect(wrapper).toMatchSnapshot(); - }); - - it('should render Row', () => { - const wrapper = render(); - expect(wrapper).toMatchSnapshot(); - }); - - it('when typeof gutter is object', () => { - const wrapper = mount(); - expect(wrapper.find('div').first().props().style).toEqual( - expect.objectContaining({ - marginLeft: -4, - marginRight: -4, - }), - ); - }); - - it('when typeof gutter is object array', () => { - const wrapper = mount( - , - ); - expect(wrapper.find('div').first().props().style).toEqual( - expect.objectContaining({ - marginLeft: -4, - marginRight: -4, - }), - ); - }); - - it('when typeof gutter is object array in large screen', () => { - const wrapper = render( - , - ); - expect(wrapper).toMatchSnapshot(); - }); - - it('renders wrapped Col correctly', () => { - const MyCol = () => ; - const wrapper = render( - -
- -
- - , - ); - expect(wrapper).toMatchSnapshot(); - }); - - it('ResponsiveObserve.unsubscribe should be called when unmounted', () => { - const Unmount = jest.spyOn(ResponsiveObserve, 'unsubscribe'); - const wrapper = mount(); - act(() => { - wrapper.unmount(); - }); - expect(Unmount).toHaveBeenCalled(); - }); - - it('should work correct when gutter is object', () => { - const wrapper = mount(); - expect(wrapper.find('div').prop('style')).toEqual({ - marginLeft: -10, - marginRight: -10, - }); - }); - - it('should work current when gutter is array', () => { - const wrapper = mount(); - expect(wrapper.find('div').prop('style')).toEqual({ - marginLeft: -8, - marginRight: -8, - marginTop: -10, - marginBottom: -10, - }); - }); - - // By jsdom mock, actual jsdom not implemented matchMedia - // https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom - it('should work with useBreakpoint', () => { - function Demo() { - const screens = useBreakpoint(); - - return JSON.stringify(screens); - } - const wrapper = mount(); - - expect(wrapper.text()).toEqual( - JSON.stringify({ - xs: true, - sm: false, - md: false, - lg: false, - xl: false, - xxl: false, - }), - ); - }); -}); diff --git a/components/grid/__tests__/index.test.tsx b/components/grid/__tests__/index.test.tsx new file mode 100644 index 000000000000..466f33e9d492 --- /dev/null +++ b/components/grid/__tests__/index.test.tsx @@ -0,0 +1,146 @@ +import React from 'react'; +import { Col, Row } from '..'; +import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; +import ResponsiveObserve from '../../_util/responsiveObserve'; +import useBreakpoint from '../hooks/useBreakpoint'; +import { render, act } from '../../../tests/utils'; + +describe('Grid', () => { + mountTest(Row); + mountTest(Col); + + rtlTest(Row); + rtlTest(Col); + + afterEach(() => { + ResponsiveObserve.unregister(); + }); + + it('should render Col', () => { + const { asFragment } = render(); + expect(asFragment().firstChild).toMatchSnapshot(); + }); + + it('should render Row', () => { + const { asFragment } = render(); + expect(asFragment().firstChild).toMatchSnapshot(); + }); + + it('when typeof gutter is object', () => { + const { container } = render(); + expect(container.querySelector('div')!.style.marginLeft).toEqual('-4px'); + expect(container.querySelector('div')!.style.marginRight).toEqual('-4px'); + }); + + it('when typeof gutter is object array', () => { + const { container } = render( + , + ); + expect(container.querySelector('div')!.style.marginLeft).toEqual('-4px'); + expect(container.querySelector('div')!.style.marginRight).toEqual('-4px'); + }); + + it('when typeof gutter is object array in large screen', () => { + jest.spyOn(window, 'matchMedia').mockImplementation( + query => + ({ + addListener: (cb: (e: { matches: boolean }) => void) => { + cb({ matches: query === '(min-width: 1200px)' }); + }, + removeListener: jest.fn(), + matches: query === '(min-width: 1200px)', + } as any), + ); + + const { container, asFragment } = render( + , + ); + expect(asFragment().firstChild).toMatchSnapshot(); + + expect(container.querySelector('div')!.style.marginLeft).toEqual('-20px'); + expect(container.querySelector('div')!.style.marginRight).toEqual('-20px'); + expect(container.querySelector('div')!.style.marginTop).toEqual('-200px'); + expect(container.querySelector('div')!.style.marginBottom).toEqual('-200px'); + }); + + it('renders wrapped Col correctly', () => { + const MyCol = () => ; + const { asFragment } = render( + +
+ +
+ + , + ); + + expect(asFragment().firstChild).toMatchSnapshot(); + }); + + it('ResponsiveObserve.unsubscribe should be called when unmounted', () => { + const Unmount = jest.spyOn(ResponsiveObserve, 'unsubscribe'); + const { unmount } = render(); + act(() => { + unmount(); + }); + expect(Unmount).toHaveBeenCalled(); + }); + + it('should work correct when gutter is object', () => { + const { container } = render(); + expect(container.querySelector('div')!.style.marginLeft).toEqual('-10px'); + expect(container.querySelector('div')!.style.marginRight).toEqual('-10px'); + }); + + it('should work current when gutter is array', () => { + const { container } = render(); + expect(container.querySelector('div')!.style.marginLeft).toEqual('-8px'); + expect(container.querySelector('div')!.style.marginRight).toEqual('-8px'); + expect(container.querySelector('div')!.style.marginTop).toEqual('-10px'); + expect(container.querySelector('div')!.style.marginBottom).toEqual('-10px'); + }); + + // By jsdom mock, actual jsdom not implemented matchMedia + // https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom + it('should work with useBreakpoint', () => { + const matchMediaSpy = jest.spyOn(window, 'matchMedia'); + matchMediaSpy.mockImplementation( + query => + ({ + addListener: (cb: (e: { matches: boolean }) => void) => { + cb({ matches: query === '(max-width: 575px)' }); + }, + removeListener: jest.fn(), + matches: query === '(max-width: 575px)', + } as any), + ); + + let screensVar; + function Demo() { + const screens = useBreakpoint(); + screensVar = screens; + return
; + } + render(); + + expect(screensVar).toEqual({ + xs: true, + sm: false, + md: false, + lg: false, + xl: false, + xxl: false, + }); + }); +}); diff --git a/components/grid/__tests__/server.test.js b/components/grid/__tests__/server.test.js deleted file mode 100644 index 4d2ec120514e..000000000000 --- a/components/grid/__tests__/server.test.js +++ /dev/null @@ -1,34 +0,0 @@ -import { mount } from 'enzyme'; -import React from 'react'; -// eslint-disable-next-line no-unused-vars -import { Col, Row } from '..'; - -jest.mock('rc-util/lib/Dom/canUseDom', () => () => false); - -describe('Grid.Server', () => { - it('use compatible gap logic', () => { - const wrapper = mount( - - - , - ); - - expect(wrapper.find('.ant-row').props().style).toEqual( - expect.objectContaining({ - marginLeft: -4, - marginRight: -4, - marginTop: -8, - marginBottom: -8, - }), - ); - - expect(wrapper.find('.ant-col').props().style).toEqual( - expect.objectContaining({ - paddingLeft: 4, - paddingRight: 4, - paddingTop: 8, - paddingBottom: 8, - }), - ); - }); -}); diff --git a/components/grid/__tests__/server.test.tsx b/components/grid/__tests__/server.test.tsx new file mode 100644 index 000000000000..2a339e953370 --- /dev/null +++ b/components/grid/__tests__/server.test.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +// eslint-disable-next-line no-unused-vars +import { Col, Row } from '..'; +import { render } from '../../../tests/utils'; + +jest.mock('rc-util/lib/Dom/canUseDom', () => () => false); + +describe('Grid.Server', () => { + it('use compatible gap logic', () => { + const { container } = render( + + + , + ); + + expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginLeft).toEqual('-4px'); + expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginRight).toEqual('-4px'); + expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginTop).toEqual('-8px'); + expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginBottom).toEqual( + '-8px', + ); + + expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingLeft).toEqual('4px'); + expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingRight).toEqual('4px'); + expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingTop).toEqual('8px'); + expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingBottom).toEqual( + '8px', + ); + }); +});