diff --git a/jest.config.js b/jest.config.js index 0a09639..90d4139 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,4 +1,3 @@ module.exports = { setupFiles: ["./tests/setup.js"], - snapshotSerializers: [require.resolve("enzyme-to-json/serializer")], }; diff --git a/package.json b/package.json index a28e94d..d315d8c 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "compile": "father build", "prepare": "dumi setup", "gh-pages": "npm run now-build && father doc deploy", - "prepublishOnly": "npm run compile && np --yolo --no-publish", + "prepublishOnly": "npm run compile && rc-np", "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js", "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"", "test": "rc-test", @@ -44,35 +44,30 @@ "react-dom": ">=16.9.0" }, "dependencies": { - "@babel/runtime": "^7.10.1", - "classnames": "^2.2.6", - "rc-util": "^5.16.1" + "@rc-component/util": "^1.2.1", + "classnames": "^2.2.6" }, "devDependencies": { - "@rc-component/father-plugin": "^1.0.0", - "@testing-library/react": "^12.1.5", + "@rc-component/father-plugin": "^2.0.4", + "@rc-component/np": "^1.0.4", + "@testing-library/react": "^13.0.0", "@types/classnames": "^2.2.9", "@types/jest": "^29.4.0", "@types/keyv": "3.1.4", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.3", "@umijs/fabric": "^3.0.0", - "cheerio": "1.0.0-rc.12", "cross-env": "^7.0.0", "dumi": "^2.0.0", - "enzyme": "^3.1.1", - "enzyme-adapter-react-16": "^1.15.6", - "enzyme-to-json": "^3.1.2", "eslint": "^8.57.0", "eslint-plugin-jest": "^27.6.0", "eslint-plugin-unicorn": "^50.0.1", "father": "^4.0.0", "glob": "^8.0.1", - "np": "^10.0.1", "prettier": "^3.1.1", "rc-test": "^7.0.15", - "react": "^16.0.0", - "react-dom": "^16.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0", "typescript": "^5.0.0" } } diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts index 860247c..5551935 100644 --- a/src/hooks/useId.ts +++ b/src/hooks/useId.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import canUseDom from 'rc-util/lib/Dom/canUseDom'; +import canUseDom from '@rc-component/util/lib/Dom/canUseDom'; let uuid = 0; diff --git a/src/index.ts b/src/index.ts index 9c7630a..b2bf612 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,3 @@ import Circle from './Circle'; export type { ProgressProps } from './interface'; export { Line, Circle }; -export default { - Line, - Circle, -}; diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap index fd65bcd..dd4975f 100644 --- a/tests/__snapshots__/index.spec.js.snap +++ b/tests/__snapshots__/index.spec.js.snap @@ -1,85 +1,61 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` 1`] = ` -
- - - - -
- - - - -
- - - - -
+exports[`Progress Circle change with animation 1`] = ` + + + + +`; + +exports[`Progress Circle change with animation 2`] = ` + + + + `; exports[`Progress Circle should gradient works and circles have different gradient IDs 1`] = ` @@ -114,7 +90,7 @@ exports[`Progress Circle should gradient works and circles have different gradie style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 29.53097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;" /> - - + - - + `; @@ -339,3 +315,241 @@ exports[`Progress Circle should show right gapPosition 1`] = ` `; + +exports[`Progress Diff Line should match snapshot 1`] = ` +
+ + + + +
+ + + + +
+ + + + +
+`; + +exports[`Progress Line change with animation 1`] = ` + + + + +`; + +exports[`Progress Line change with animation 2`] = ` + + + + +`; + +exports[`Progress should support percentage array changes 1`] = ` + + + + + +`; + +exports[`Progress should support percentage array changes 2`] = ` + + + + + + + +`; diff --git a/tests/index.spec.js b/tests/index.spec.js index bb701be..d2cc719 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -1,66 +1,66 @@ -/* eslint-disable react/no-render-return-value */ -// eslint-disable-next-line max-classes-per-file import React from 'react'; -import { mount } from 'enzyme'; +import { render, act, fireEvent } from '@testing-library/react'; import { Circle, Line } from '../src'; describe('Progress', () => { describe('Line', () => { it('change with animation', () => { - class Demo extends React.Component { - state = { - percent: '0', - }; - - render() { - const { percent } = this.state; - return ; - } + function Demo() { + const [percent, setPercent] = React.useState('0'); + return ( + <> + + + + ); } - - const line = mount(); - expect(line.state().percent).toBe('0'); - line.setState({ percent: '30' }); - expect(line.state().percent).toBe('30'); - line.unmount(); + const { container, getByText, unmount } = render(); + expect(container.firstChild).toMatchSnapshot(); + act(() => { + getByText('change').click(); + }); + expect(container.firstChild).toMatchSnapshot(); + unmount(); }); }); describe('Diff Line', () => { - const wrapper = mount( -
- -
- -
- -
, - ); - expect(wrapper.render()).toMatchSnapshot(); + it('should match snapshot', () => { + const { container } = render( +
+ +
+ +
+ +
, + ); + expect(container.firstChild).toMatchSnapshot(); + }); }); describe('Circle', () => { it('change with animation', () => { - class Demo extends React.Component { - state = { - percent: '0', - }; - - render() { - const { percent } = this.state; - return ; - } + function Demo() { + const [percent, setPercent] = React.useState('0'); + return ( + <> + + + + ); } - - const circle = mount(); - expect(circle.state().percent).toBe('0'); - circle.setState({ percent: '30' }); - expect(circle.state().percent).toBe('30'); - circle.unmount(); + const { container, getByText, unmount } = render(); + expect(container.firstChild).toMatchSnapshot(); + act(() => { + getByText('change').click(); + }); + expect(container.firstChild).toMatchSnapshot(); + unmount(); }); it('should gradient works and circles have different gradient IDs', () => { - const wrapper = mount( + const { container } = render(
{ />
, ); - - expect(wrapper.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('should show right gapPosition', () => { - const wrapper = mount( + const { container } = render(
{
, ); - - expect(wrapper.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/30552 @@ -137,39 +135,46 @@ describe('Progress', () => { '0%': '#108ee9', '100%': '#87d068', }; - const wrapper = mount(); - expect(wrapper.find('.rc-progress-circle-path').getDOMNode().style.cssText).not.toContain( + const { container, rerender } = render(); + expect(container.querySelector('.rc-progress-circle-path').style.cssText).not.toContain( 'stroke:', ); - wrapper.setProps({ strokeColor: '#eeeeee' }); - expect(wrapper.find('.rc-progress-circle-path').getDOMNode().style.cssText).toContain( + act(() => { + rerender(); + }); + expect(container.querySelector('.rc-progress-circle-path').style.cssText).toContain( 'stroke: #eeeeee', ); - wrapper.setProps({ strokeColor: gradientColor }); - expect(wrapper.find('.rc-progress-circle-path').getDOMNode().style.cssText).not.toContain( + act(() => { + rerender(); + }); + expect(container.querySelector('.rc-progress-circle-path').style.cssText).not.toContain( 'stroke:', ); }); it('should support ts onClick', () => { const onClick = jest.fn(); - const wrapper = mount( + const { container } = render(
, ); - - wrapper.find('.circle-target').at(0).simulate('click'); + act(() => { + fireEvent.click(container.querySelector('.circle-target')); + }); expect(onClick).toHaveBeenCalledTimes(1); - wrapper.find('.line-target').at(0).simulate('click'); + act(() => { + fireEvent.click(container.querySelector('.line-target')); + }); expect(onClick).toHaveBeenCalledTimes(2); }); it('should steps works with no error', () => { const steps = 4; const percent = 35; - const wrapper = mount( + const { container, rerender } = render( { strokeWidth={20} />, ); - - expect(wrapper.find('.rc-progress-circle-path')).toHaveLength(steps); - expect(wrapper.find('.rc-progress-circle-path').at(0).getDOMNode().style.cssText).toContain( + expect(container.querySelectorAll('.rc-progress-circle-path')).toHaveLength(steps); + expect(container.querySelectorAll('.rc-progress-circle-path')[0].style.cssText).toContain( 'stroke: red;', ); - expect(wrapper.find('.rc-progress-circle-path').at(1).getDOMNode().style.cssText).toContain( + expect(container.querySelectorAll('.rc-progress-circle-path')[1].style.cssText).toContain( 'stroke: grey;', ); - - wrapper.setProps({ - strokeColor: { - '0%': '#108ee9', - '100%': '#87d068', - }, + act(() => { + rerender( + , + ); }); - expect(wrapper.find('.rc-progress-circle-path').at(0).props().stroke).toContain('url('); + expect( + container.querySelectorAll('.rc-progress-circle-path')[0].getAttribute('stroke'), + ).toContain('url('); }); it('should steps works with gap', () => { - const wrapper = mount( + const { container } = render( { strokeWidth={20} />, ); - expect(wrapper.find('.rc-progress-circle-path')).toHaveLength(5); - expect(wrapper.find('.rc-progress-circle-path').at(0).getDOMNode().style.cssText).toContain( + expect(container.querySelectorAll('.rc-progress-circle-path')).toHaveLength(5); + expect(container.querySelectorAll('.rc-progress-circle-path')[0].style.cssText).toContain( 'transform: rotate(120deg);', ); }); }); it('should support percentage array changes', () => { - class Demo extends React.Component { - state = { - subPathsCount: 2, - }; - - render() { - const { subPathsCount } = this.state; - const percent = 80; - const multiPercentage = new Array(subPathsCount).fill( - percent / subPathsCount, - 0, - subPathsCount, - ); - - return ( - <> - - - - ); - } + function Demo() { + const [subPathsCount, setSubPathsCount] = React.useState(2); + const percent = 80; + const multiPercentage = new Array(subPathsCount).fill( + percent / subPathsCount, + 0, + subPathsCount, + ); + return ( + <> + + + + + ); } - - const circle = mount(); - expect(circle.find(Circle).props().percent).toEqual([40, 40]); - circle.setState({ subPathsCount: 4 }); - expect(circle.find(Circle).props().percent).toEqual([20, 20, 20, 20]); - circle.unmount(); + const { getByText, container, unmount } = render(); + expect(container.firstChild).toMatchSnapshot(); + act(() => { + getByText('change').click(); + }); + expect(container.firstChild).toMatchSnapshot(); + unmount(); }); }); diff --git a/tests/setup.js b/tests/setup.js index ee11b94..3b56fc3 100644 --- a/tests/setup.js +++ b/tests/setup.js @@ -1,6 +1 @@ global.requestAnimationFrame = (cb) => setTimeout(cb, 0); - -const Enzyme = require('enzyme'); -const Adapter = require('enzyme-adapter-react-16'); - -Enzyme.configure({ adapter: new Adapter() });