From a4f7d8a0623f1e89f50a7bf1bd8ec06208aae23e Mon Sep 17 00:00:00 2001 From: Wanpan Date: Fri, 13 Jun 2025 17:26:40 +0800 Subject: [PATCH 1/3] feat: add wrapper root --- assets/index.less | 21 +++++++++++------- package.json | 7 +++--- src/index.tsx | 54 +++++++++++++++++++++++---------------------- tests/index.spec.js | 8 +++---- 4 files changed, 49 insertions(+), 41 deletions(-) diff --git a/assets/index.less b/assets/index.less index 6c8ecd7..ff8e7ef 100644 --- a/assets/index.less +++ b/assets/index.less @@ -1,6 +1,11 @@ @switchPrefixCls: rc-switch; -@duration: .3s; +@duration: 0.3s; + +.@{switchPrefixCls}-wrapper { + display: flex; + align-items: center; +} .@{switchPrefixCls} { position: relative; @@ -20,7 +25,7 @@ &-inner-checked, &-inner-unchecked { - color:#fff; + color: #fff; font-size: 12px; position: absolute; top: 0; @@ -35,7 +40,7 @@ left: 24px; } - &:after{ + &:after { position: absolute; width: 18px; height: 18px; @@ -43,7 +48,7 @@ top: 1px; border-radius: 50% 50%; background-color: #fff; - content: " "; + content: ' '; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); transform: scale(1); @@ -75,23 +80,23 @@ left: 44px; } - &:after{ + &:after { left: 22px; } } - &-disabled{ + &-disabled { cursor: no-drop; background: #ccc; border-color: #ccc; - &:after{ + &:after { background: #9e9e9e; animation-name: none; cursor: no-drop; } - &:hover:after{ + &:hover:after { transform: scale(1); animation-name: none; } diff --git a/package.json b/package.json index 6349924..58ec3bd 100644 --- a/package.json +++ b/package.json @@ -43,13 +43,15 @@ ] }, "dependencies": { - "classnames": "^2.2.1", - "@rc-component/util": "^1.2.0" + "@rc-component/util": "^1.2.0", + "classnames": "^2.2.1" }, "devDependencies": { "@rc-component/father-plugin": "^2.0.0", + "@rc-component/np": "^1.0.3", "@types/classnames": "^2.2.10", "@types/jest": "^29.4.0", + "@types/react": "^19.1.8", "@umijs/fabric": "^3.0.0", "cheerio": "1.0.0-rc.12", "dumi": "^2.0.0", @@ -64,7 +66,6 @@ "husky": "^8.0.1", "less": "^4.1.3", "lint-staged": "^15.1.0", - "@rc-component/np": "^1.0.3", "prettier": "^3.1.0", "react": "^16.0.0", "react-dom": "^16.0.0", diff --git a/src/index.tsx b/src/index.tsx index b4ce9b6..f772692 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -90,33 +90,35 @@ const Switch = React.forwardRef( }); return ( - + + ); }, ); diff --git a/tests/index.spec.js b/tests/index.spec.js index 4863932..8e25a72 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -34,7 +34,7 @@ describe('rc-switch', () => { const onChange = jest.fn(); const wrapper = createSwitch({ defaultChecked: true, onChange }); expect(wrapper.exists('.checked')).toBeTruthy(); - wrapper.simulate('click'); + wrapper.find('.rc-switch').simulate('click'); expect(wrapper.exists('.unchecked')).toBeTruthy(); expect(onChange.mock.calls.length).toBe(1); }); @@ -42,10 +42,10 @@ describe('rc-switch', () => { it('should support onClick', () => { const onClick = jest.fn(); const wrapper = createSwitch({ onClick }); - wrapper.simulate('click'); + wrapper.find('.rc-switch').simulate('click'); expect(onClick).toHaveBeenCalledWith(true, expect.objectContaining({ type: 'click' })); expect(onClick.mock.calls.length).toBe(1); - wrapper.simulate('click'); + wrapper.find('.rc-switch').simulate('click'); expect(onClick).toHaveBeenCalledWith(false, expect.objectContaining({ type: 'click' })); expect(onClick.mock.calls.length).toBe(2); }); @@ -117,7 +117,7 @@ describe('rc-switch', () => { it('onMouseUp', () => { const onMouseUp = jest.fn(); const wrapper = createSwitch({ onMouseUp }); - wrapper.simulate('mouseup'); + wrapper.find('.rc-switch').simulate('mouseup'); expect(onMouseUp).toHaveBeenCalled(); }); From ef2e74ea1b05bea4edb04b3b6a913586df5a55c7 Mon Sep 17 00:00:00 2001 From: Wanpan Date: Sat, 14 Jun 2025 12:41:20 +0800 Subject: [PATCH 2/3] fix: update --- src/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index f772692..21b24b4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -90,7 +90,7 @@ const Switch = React.forwardRef( }); return ( - + ); }, ); From d1d5b6bdb122701d6716bad9852599c366dab48c Mon Sep 17 00:00:00 2001 From: Wanpan Date: Mon, 16 Jun 2025 18:40:53 +0800 Subject: [PATCH 3/3] test: update --- tests/index.spec.js | 44 +++++++++++++++++++++++--------------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/tests/index.spec.js b/tests/index.spec.js index 8e25a72..a47a81f 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -14,38 +14,40 @@ describe('rc-switch', () => { ); } + const findSwitch = (wrapper) => wrapper.find('.rc-switch'); + it('works', () => { const wrapper = createSwitch(); - expect(wrapper.exists('.unchecked')).toBeTruthy(); - wrapper.simulate('click'); - expect(wrapper.exists('.checked')).toBeTruthy(); + expect(findSwitch(wrapper).exists('.unchecked')).toBeTruthy(); + findSwitch(wrapper).simulate('click'); + expect(findSwitch(wrapper).exists('.checked')).toBeTruthy(); }); it('should be checked upon right key and unchecked on left key', () => { const wrapper = createSwitch(); - expect(wrapper.exists('.unchecked')).toBeTruthy(); - wrapper.simulate('keydown', { which: KeyCode.RIGHT }); - expect(wrapper.exists('.checked')).toBeTruthy(); - wrapper.simulate('keydown', { which: KeyCode.LEFT }); - expect(wrapper.exists('.unchecked')).toBeTruthy(); + expect(findSwitch(wrapper).exists('.unchecked')).toBeTruthy(); + findSwitch(wrapper).simulate('keydown', { which: KeyCode.RIGHT }); + expect(findSwitch(wrapper).exists('.checked')).toBeTruthy(); + findSwitch(wrapper).simulate('keydown', { which: KeyCode.LEFT }); + expect(findSwitch(wrapper).exists('.unchecked')).toBeTruthy(); }); it('should change from an initial checked state of true to false on click', () => { const onChange = jest.fn(); const wrapper = createSwitch({ defaultChecked: true, onChange }); - expect(wrapper.exists('.checked')).toBeTruthy(); - wrapper.find('.rc-switch').simulate('click'); - expect(wrapper.exists('.unchecked')).toBeTruthy(); + expect(findSwitch(wrapper).exists('.checked')).toBeTruthy(); + findSwitch(wrapper).simulate('click'); + expect(findSwitch(wrapper).exists('.unchecked')).toBeTruthy(); expect(onChange.mock.calls.length).toBe(1); }); it('should support onClick', () => { const onClick = jest.fn(); const wrapper = createSwitch({ onClick }); - wrapper.find('.rc-switch').simulate('click'); + findSwitch(wrapper).simulate('click'); expect(onClick).toHaveBeenCalledWith(true, expect.objectContaining({ type: 'click' })); expect(onClick.mock.calls.length).toBe(1); - wrapper.find('.rc-switch').simulate('click'); + findSwitch(wrapper).simulate('click'); expect(onClick).toHaveBeenCalledWith(false, expect.objectContaining({ type: 'click' })); expect(onClick.mock.calls.length).toBe(2); }); @@ -53,9 +55,9 @@ describe('rc-switch', () => { it('should not toggle when clicked in a disabled state', () => { const onChange = jest.fn(); const wrapper = createSwitch({ disabled: true, checked: true, onChange }); - expect(wrapper.exists('.checked')).toBeTruthy(); - wrapper.simulate('click'); - expect(wrapper.exists('.checked')).toBeTruthy(); + expect(findSwitch(wrapper).exists('.checked')).toBeTruthy(); + findSwitch(wrapper).simulate('click'); + expect(findSwitch(wrapper).exists('.checked')).toBeTruthy(); expect(onChange.mock.calls.length).toBe(0); }); @@ -109,15 +111,15 @@ describe('rc-switch', () => { it('disabled', () => { const wrapper = createSwitch({ disabled: true }); - expect(wrapper.exists('.unchecked')).toBeTruthy(); - wrapper.simulate('keydown', { keyCode: 39 }); - expect(wrapper.exists('.unchecked')).toBeTruthy(); + expect(findSwitch(wrapper).exists('.unchecked')).toBeTruthy(); + findSwitch(wrapper).simulate('keydown', { keyCode: 39 }); + expect(findSwitch(wrapper).exists('.unchecked')).toBeTruthy(); }); it('onMouseUp', () => { const onMouseUp = jest.fn(); const wrapper = createSwitch({ onMouseUp }); - wrapper.find('.rc-switch').simulate('mouseup'); + findSwitch(wrapper).simulate('mouseup'); expect(onMouseUp).toHaveBeenCalled(); }); @@ -126,7 +128,7 @@ describe('rc-switch', () => { const onClick = jest.fn(); const wrapper = createSwitch({ disabled: true, onChange, onClick, checked: true }); - wrapper.simulate('click'); + findSwitch(wrapper).simulate('click'); expect(onChange).not.toHaveBeenCalled(); }); it('support classnames and styles', () => {