test: move test cases to testing-library for Grid (ant-design#37057)

* test: move test cases to testing-library for Grid

* fix: test when typeof gutter is object array in large screen

components/grid/__tests__/__snapshots__/index.test.js.snap → components/grid/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,17 +3,17 @@
 exports[`Grid renders wrapped Col correctly 1`] = `
 <div
   class="ant-row"
-  style="margin-left:-10px;margin-right:-10px"
+  style="margin-left: -10px; margin-right: -10px;"
 >
   <div>
     <div
       class="ant-col ant-col-12"
-      style="padding-left:10px;padding-right:10px"
+      style="padding-left: 10px; padding-right: 10px;"
     />
   </div>
   <div
     class="ant-col ant-col-12"
-    style="padding-left:10px;padding-right:10px"
+    style="padding-left: 10px; padding-right: 10px;"
   />
 </div>
 `;
@@ -45,6 +45,6 @@ exports[`Grid should render Row 1`] = `
 exports[`Grid when typeof gutter is object array in large screen 1`] = `
 <div
   class="ant-row"
-  style="margin-left:-20px;margin-right:-20px;margin-top:-200px;margin-bottom:-200px"
+  style="margin: -200px -20px -200px -20px;"
 />
 `;

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(<CacheOuter />);
-  const childCount = wrapper.find('#child_count').text();
+  const { container } = render(<CacheOuter />);
+  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);
 });

components/grid/__tests__/gap.test.js → 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(
       <Row gutter={[16, 8]}>
         <Col />
       </Row>,
     );
 
-    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', () => {

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(<Col span={2} />);
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+
+  it('should render Row', () => {
+    const { asFragment } = render(<Row />);
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+
+  it('when typeof gutter is object', () => {
+    const { container } = render(<Row gutter={{ xs: 8, sm: 16, md: 24 }} />);
+    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(
+      <Row
+        gutter={[
+          { xs: 8, sm: 16, md: 24, lg: 32, xl: 40 },
+          { xs: 8, sm: 16, md: 24, lg: 32, xl: 40 },
+        ]}
+      />,
+    );
+    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(
+      <Row
+        gutter={[
+          { xs: 8, sm: 16, md: 24, lg: 32, xl: 40 },
+          { xs: 8, sm: 16, md: 24, lg: 100, xl: 400 },
+        ]}
+      />,
+    );
+    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 = () => <Col span={12} />;
+    const { asFragment } = render(
+      <Row gutter={20}>
+        <div>
+          <Col span={12} />
+        </div>
+        <MyCol />
+      </Row>,
+    );
+
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+
+  it('ResponsiveObserve.unsubscribe should be called when unmounted', () => {
+    const Unmount = jest.spyOn(ResponsiveObserve, 'unsubscribe');
+    const { unmount } = render(<Row gutter={{ xs: 20 }} />);
+    act(() => {
+      unmount();
+    });
+    expect(Unmount).toHaveBeenCalled();
+  });
+
+  it('should work correct when gutter is object', () => {
+    const { container } = render(<Row gutter={{ xs: 20 }} />);
+    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(<Row gutter={[16, 20]} />);
+    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 <div />;
+    }
+    render(<Demo />);
+
+    expect(screensVar).toEqual({
+      xs: true,
+      sm: false,
+      md: false,
+      lg: false,
+      xl: false,
+      xxl: false,
+    });
+  });
+});