fix(ip-address): [ip-address] fix IPv6 display error when ipValidator not true #3063
Conversation
WalkthroughThis pull request revises the IP address handling logic and enhances the test coverage for the Changes
Sequence Diagram(s)sequenceDiagram
participant Caller
participant setValue
participant Validator as ipValidator
participant State as state
Caller->>setValue: call setValue(value)
setValue->>Validator: Validate value
alt Value is falsy or invalid
setValue->>State: Initialize empty segments (IPv6: 8, IPv4: 4)
setValue-->>Caller: Return early
else Value is valid
alt IPv6 address
setValue->>State: Process IPv6 (split by colon, fill missing segments)
else IPv4 address
setValue->>State: Process IPv4 (split by dots)
end
setValue-->>Caller: Return processed address
end
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
packages/vue/src/ip-address/__tests__/ip-address.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/renderless/src/ip-address/index.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
WalkthroughThis pull request addresses a bug related to the display of IPv6 addresses when the Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/renderless/src/ip-address/index.ts (2)
101-114: Enhanced IPv6 address handling with proper segment managementThe IPv6 address handling has been improved to correctly process addresses with missing segments. However, there's a potential issue with the array initialization.
The current implementation uses
Array.fill({ value: '0000' })which makes all array elements reference the same object. If any of those objects are modified later, all of them will change. Consider creating unique objects for each element:-const newItems = Array(missingCount).fill({ value: '0000' }) +const newItems = Array.from({ length: missingCount }, () => ({ value: '0000' }))
307-307: Consider translating Chinese comments to EnglishThe comment "NEXT 屏蔽选中时，替换值大于255" is in Chinese while most of the codebase is in English. Consider translating it to maintain consistency.
packages/vue/src/ip-address/__tests__/ip-address.test.tsx (1)
60-74: Invalid input handling testsThese tests are crucial for validating the fix for the IPv6 display issue, confirming that:
- An IPv4 address in IPv6 mode results in empty fields
- An IPv6 address in IPv4 mode results in empty fields
Consider adding more edge cases like partially valid addresses or malformed inputs.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/renderless/src/ip-address/index.ts(1 hunks)packages/vue/src/ip-address/__tests__/ip-address.test.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (7)
packages/renderless/src/ip-address/index.ts (2)
92-99: Improved input validation with early return patternThe code now properly handles invalid IP addresses by checking for falsy values or validation failures upfront. This is a cleaner approach that follows the early return pattern and fixes the IPv6 display issues.
115-117: Simplified IPv4 address parsingThe IPv4 handling logic has been simplified while maintaining the same functionality.
packages/vue/src/ip-address/__tests__/ip-address.test.tsx (5)
5-5: Added icon import for delimiter testingThe import of
iconBoatis appropriately added to support the new tests for icon delimiters.
18-38: Comprehensive delimiter configuration testsGood addition of tests that verify different delimiter configurations (default dot, custom text, and icon-based delimiters), ensuring the component renders the expected number of delimiters.
40-47: Component size variation testsEfficient use of parameterized testing to verify that all supported sizes (medium, small, mini) apply the correct CSS classes.
49-52: Disabled state verificationSimple and effective test to verify the disabled attribute is properly applied to the input elements.
54-58: Default value display testThis test confirms that a valid IPv4 address is correctly split and displayed across input fields.
3 participants
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #3055
What is the new behavior?
IPv6 input displays normally
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit