test: move test cases to testing lib for Badge (#36033)

2 years ago · 6195376bd0
5 changed files with 68 additions and 55 deletions
--- a/components/badge/tests/snapshots/demo.test.ts.snap
+++ b/components/badge/tests/snapshots/demo.test.ts.snap
--- a/components/badge/tests/snapshots/index.test.tsx.snap
+++ b/components/badge/tests/snapshots/index.test.tsx.snap
--- a/components/badge/tests/demo.test.ts
+++ b/components/badge/tests/demo.test.ts
--- a/components/badge/tests/index.test.tsx
+++ b/components/badge/tests/index.test.tsx
@ -1,5 +1,4 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { fireEvent, render } from '@testing-library/react';
 import Badge from '../index';
@ -27,34 +26,37 @@ describe('Badge', () => {
  });

  it('badge dot not scaling count > 9', () => {
-    const badge = mount(<Badge count={10} dot />);
-    expect(badge.find('.ant-card-multiple-words').length).toBe(0);
+    const { container } = render(<Badge count={10} dot />);
+    expect(container.querySelectorAll('.ant-card-multiple-words').length).toBe(0);
  });

  it('badge should support float number', () => {
-    let wrapper = mount(<Badge count={3.5} />);
-    expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5');
+    const { container } = render(<Badge count={3.5} />);
+    expect(container.querySelectorAll('.ant-badge-multiple-words')[0].textContent).toEqual('3.5');

-    wrapper = mount(<Badge count="3.5" />);
-    expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5');
-    expect(() => wrapper.unmount()).not.toThrow();
+    const { container: anotherContainer, unmount } = render(<Badge count="3.5" />);
+    expect(anotherContainer.querySelectorAll('.ant-badge-multiple-words')[0].textContent).toEqual(
+      '3.5',
+    );
+
+    expect(() => unmount()).not.toThrow();
  });

  it('badge dot not showing count == 0', () => {
-    const badge = mount(<Badge count={0} dot />);
-    expect(badge.find('.ant-badge-dot').length).toBe(0);
+    const { container } = render(<Badge count={0} dot />);
+    expect(container.querySelectorAll('.ant-badge-dot').length).toBe(0);
  });

  it('should have an overriden title attribute', () => {
-    const badge = mount(<Badge count={10} title="Custom title" />);
-    expect(
-      badge.find('.ant-scroll-number').getDOMNode().attributes.getNamedItem('title').value,
-    ).toEqual('Custom title');
+    const { container } = render(<Badge count={10} title="Custom title" />);
+    expect((container.querySelector('.ant-scroll-number')! as HTMLElement).title).toEqual(
+      'Custom title',
+    );
  });

  // https://github.com/ant-design/ant-design/issues/10626
  it('should be composable with Tooltip', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<typeof Tooltip>();
    const { container } = render(
      <Tooltip title="Fix the error" ref={ref}>
        <Badge status="error" />
@ -62,22 +64,21 @@ describe('Badge', () => {
    );

    act(() => {
-      fireEvent.mouseEnter(container.querySelector('.ant-badge'));
+      fireEvent.mouseEnter(container.querySelector('.ant-badge')!);
      jest.runAllTimers();
    });
-    expect(ref.current.props.visible).toBeTruthy();
+    expect((container.firstChild! as HTMLElement).classList).toContain('ant-tooltip-open');
  });

  it('should render when count is changed', () => {
-    const wrapper = mount(<Badge count={9} />);
+    const { asFragment, rerender } = render(<Badge count={9} />);

-    function updateMatch(count) {
-      wrapper.setProps({ count });
+    function updateMatch(count: number) {
+      rerender(<Badge count={count} />);

      act(() => {
        jest.runAllTimers();
-        wrapper.update();
-        expect(wrapper.render()).toMatchSnapshot();
+        expect(asFragment().firstChild).toMatchSnapshot();
      });
    }

@ -90,48 +91,52 @@ describe('Badge', () => {
  });

  it('should be compatible with borderColor style', () => {
-    const wrapper = mount(
+    const { asFragment } = render(
      <Badge
        count={4}
        style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }}
      />,
    );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
  });

  // https://github.com/ant-design/ant-design/issues/13694
  it('should support offset when count is a ReactNode', () => {
-    const wrapper = mount(
+    const { asFragment } = render(
      <Badge count={<span className="custom" style={{ color: '#f5222d' }} />} offset={[10, 20]}>
        <a href="#" className="head-example">
          head
        </a>
      </Badge>,
    );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
  });

  // https://github.com/ant-design/ant-design/issues/15349
  it('should color style  works on Badge', () => {
-    const wrapper = mount(<Badge style={{ color: 'red' }} status="success" text="Success" />);
-    expect(wrapper.find('.ant-badge-status-text').props().style.color).toBe('red');
+    const { container } = render(
+      <Badge style={{ color: 'red' }} status="success" text="Success" />,
+    );
+    expect((container.querySelector('.ant-badge-status-text')! as HTMLElement).style.color).toEqual(
+      'red',
+    );
  });

  // https://github.com/ant-design/ant-design/issues/15799
  it('render correct with negative number', () => {
-    const wrapper = mount(
+    const { asFragment } = render(
      <div>
        <Badge count="-10" />
        <Badge count={-10} />
      </div>,
    );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
  });

  // https://github.com/ant-design/ant-design/issues/21331
  // https://github.com/ant-design/ant-design/issues/31590
  it('render Badge status/color when contains children', () => {
-    const wrapper = mount(
+    const { container, asFragment } = render(
      <div>
        <Badge count={5} status="success">
          <a />
@ -144,20 +149,20 @@ describe('Badge', () => {
        </Badge>
      </div>,
    );
-    expect(wrapper.render()).toMatchSnapshot();
-    expect(wrapper.find(Badge).at(0).find('.ant-scroll-number-only-unit').text()).toBe('5');
-    expect(wrapper.find(Badge).at(1).find('.ant-scroll-number-only-unit').text()).toBe('5');
-    expect(wrapper.find(Badge).at(2).find('.ant-scroll-number-only-unit').text()).toBe('5');
+    expect(asFragment().firstChild).toMatchSnapshot();
+    expect(container.querySelectorAll('.ant-scroll-number-only-unit')[0].textContent).toBe('5');
+    expect(container.querySelectorAll('.ant-scroll-number-only-unit')[1].textContent).toBe('5');
+    expect(container.querySelectorAll('.ant-scroll-number-only-unit')[2].textContent).toBe('5');
  });

  it('Badge should work when status/color is empty string', () => {
-    const wrapper = mount(
+    const { container } = render(
      <>
        <Badge color="" text="text" />
-        <Badge status="" text="text" />
+        <Badge status={'' as any} text="text" />
      </>,
    );

-    expect(wrapper.find('.ant-badge')).toHaveLength(2);
+    expect(container.querySelectorAll('.ant-badge')).toHaveLength(2);
  });
 });
--- a/components/badge/tests/ribbon.test.tsx
+++ b/components/badge/tests/ribbon.test.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Badge from '../index';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@ -10,65 +10,73 @@ describe('Ribbon', () => {

  describe('placement', () => {
    it('works with `start` & `end` placement', () => {
-      const wrapperStart = mount(
+      const { container: wrapperStart } = render(
        <Badge.Ribbon placement="start">
          <div />
        </Badge.Ribbon>,
      );
-      expect(wrapperStart.find('.ant-ribbon-placement-start').length).toEqual(1);
+      expect(wrapperStart.querySelectorAll('.ant-ribbon-placement-start').length).toEqual(1);

-      const wrapperEnd = mount(
+      const { container: wrapperEnd } = render(
        <Badge.Ribbon placement="end">
          <div />
        </Badge.Ribbon>,
      );
-      expect(wrapperEnd.find('.ant-ribbon-placement-end').length).toEqual(1);
+      expect(wrapperEnd.querySelectorAll('.ant-ribbon-placement-end').length).toEqual(1);
    });
  });

  describe('color', () => {
    it('works with preset color', () => {
-      const wrapper = mount(
+      const { container } = render(
        <Badge.Ribbon color="green">
          <div />
        </Badge.Ribbon>,
      );
-      expect(wrapper.find('.ant-ribbon-color-green').length).toEqual(1);
+      expect(container.querySelectorAll('.ant-ribbon-color-green').length).toEqual(1);
    });
    it('works with custom color', () => {
-      const wrapperLeft = mount(
+      const { container: wrapperLeft } = render(
        <Badge.Ribbon color="#888" placement="start">
          <div />
        </Badge.Ribbon>,
      );
-      expect(wrapperLeft.find('.ant-ribbon').prop('style')?.background).toEqual('#888');
-      expect(wrapperLeft.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888');
-      const wrapperRight = mount(
+      expect((wrapperLeft.querySelector('.ant-ribbon')! as HTMLElement).style.background).toEqual(
+        'rgb(136, 136, 136)',
+      );
+      expect((wrapperLeft.querySelector('.ant-ribbon-corner')! as HTMLElement).style.color).toEqual(
+        'rgb(136, 136, 136)',
+      );
+      const { container: wrapperRight } = render(
        <Badge.Ribbon color="#888" placement="end">
          <div />
        </Badge.Ribbon>,
      );
-      expect(wrapperRight.find('.ant-ribbon').prop('style')?.background).toEqual('#888');
-      expect(wrapperRight.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888');
+      expect((wrapperRight.querySelector('.ant-ribbon')! as HTMLElement).style.background).toEqual(
+        'rgb(136, 136, 136)',
+      );
+      expect(
+        (wrapperRight.querySelector('.ant-ribbon-corner')! as HTMLElement).style.color,
+      ).toEqual('rgb(136, 136, 136)');
    });
  });

  describe('text', () => {
    it('works with string', () => {
-      const wrapper = mount(
+      const { container } = render(
        <Badge.Ribbon text="cool">
          <div />
        </Badge.Ribbon>,
      );
-      expect(wrapper.find('.ant-ribbon').text()).toEqual('cool');
+      expect(container.querySelector('.ant-ribbon')?.textContent).toEqual('cool');
    });
    it('works with element', () => {
-      const wrapper = mount(
+      const { container } = render(
        <Badge.Ribbon text={<span className="cool" />}>
          <div />
        </Badge.Ribbon>,
      );
-      expect(wrapper.find('.cool').length).toEqual(1);
+      expect(container.querySelectorAll('.cool').length).toEqual(1);
    });
  });
 });