feat:Added visual tests for KIcon

[AadarshM07]

Description

Added visual testing script for KIcon . This covers visual tests for the following snapshots :

• KIcon - profile icon (default color)
• KIcon - profile icon (green color)
• KIcon - allActivities icon (color prop ignored)
• KIcon - broken image for non-existent icon

Issue addressed

Closes #1008

screenshots

The following are snapshots from percy

Changelog

• Description: Adds visual tests for KIcon.
• Products impact: None
• Addresses: #1009
• Components: No
• Breaking: No
• Impacts a11y: No
• Guidance: None

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Comments

• I am open to make any necessary changes needed.

[AlexVelezLl]

Thanks @AadarshM07! This is looking great! :D

Just a little change - could you assign a width and height values to the snapshot so it doesnt look so wide, and the icon doesnt look so small? Just like in the attached examples of KButton.

Also, in your first screenshot it seems that this is capturing an undefined error. Could you please dive a little bit into why is this error appearing? Thanks!

[AadarshM07]

Hey @AlexVelezLl ,
I’ll make the changes. About the error , I’m not sure how it appeared since it’s not happening now. But i noticed in the requirements you mentioned KIcon with the icon prop set to Non icon should show a broken image. The visual test times out for this particular snapshot because the component doesn’t actually render any fallback or broken image for a Non icon prop. I think the test failure is related to this missing fallback.

[github-actions]

Percy Visual Test Results

Percy Dashboard: View Detailed Report

Environment:

• Node.js Version: 18.x
• OS: Ubuntu-latest

Instructions for Reviewers:

• Click on the Percy Dashboard link to view detailed visual diffs.
• Review the visual changes highlighted in the report.
• Approve or request changes based on the visual differences.

[AlexVelezLl]

Thanks @AadarshM07! It seems we found a bug in our KIcon fallback logic 😄. Could you include this little fix here too? We need to update this line to:

      if (this.selectedIcon.fixedColor && this.color) {

That means, updating the KolibriIcons[this.icon] with the computed property this.selectedIcon. This will fix this issue.

[AadarshM07]

Hey @AlexVelezLl , Apologies, I think I forgot to pull the latest commits before pushing my changes. That might have caused the workflow to fail ?

[AadarshM07]

I have resolved the failing lint workflow.

[AlexVelezLl]

Thanks @AadarshM07! LGTM!