added visual test for KBreadcrumbs

[GautamBytes]

Description

This PR adds visual tests for the KBreadcrumbs component, covering the following scenarios:

• Breadcrumbs with just one item (with/without showSingleItem).
• Breadcrumbs with multiple items that do not overflow the available width.
• Breadcrumbs with multiple items that overflow the available width.
• Breadcrumbs with multiple items that have long text.
• Breadcrumbs with links.
• Dropdown open for overflowed breadcrumbs with links.
• Dropdown open for overflowed breadcrumbs without links.

Additionally, the KBreadCrumbs component file has been renamed from KBreadcrumbs.vue to KBreadcrumbs/index.vue to better organize the component structure.

Issue addressed

#924

Before/after screenshots

NA

Changelog

• Description: Added visual tests for KBreadcrumbs and renamed KBreadcrumbs.vue to KBreadcrumbs/index.vue.

• Products impact: None

• Addresses: #924

• Components: KBreadcrumbs

• Breaking: No

• Impacts a11y: No

• Guidance: Visual tests are implemented in separate test files following the approach used for KButton visual tests. This ensures that different configurations of KBreadcrumbs render correctly and consistently.

Steps to test

1. Pull down the branch and build the project.
2. Run the visual tests using -- yarn test:visual
3. Verify that the visual tests for KBreadcrumbs pass for all scenarios.
4. Check the Percy build to confirm that snapshots are captured correctly.

Does this introduce any tech-debt items?

No, these changes follow the existing testing infrastructure and component guidelines.

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

• Verify that the visual tests run as expected and that Percy snapshots accurately reflect the UI changes.

• Confirm that renaming the component file to index.vue does not break any existing imports.

• Ensure that the new tests follow the pattern used in the KButton visual tests.

• [✅] Is the code clean and well-commented?

• [✅] Are there tests for this change?

Comments

Please let me know if there are any questions or further adjustments needed.

[GautamBytes]

@AlexVelezLl , I have tried to add visual test for mentioned scenarios , you can have a look and suggest if any changes are needed.

[github-actions[bot]]

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.

[GautamBytes]

Hi @AlexVelezLl , Currently going through semester exams till mid may but will try to do the suggested changes over the weekend. Thanks!

[AlexVelezLl]

Hey @GautamBytes! No worries! Please take your time, no rush! Thanks for letting us know! Good luck with your exams!

[MisRob]

Hi @GautamBytes, are you still planning to resolve review feedback?

[GautamBytes]

Hello @MisRob , Sorry for the delay but i am currently engaged with my internship in another program called summer of Bitcoin. You can assign someone else if they are interested otherwise if it is not time sensitive then i will solve this probably by 1st week of july.

[MisRob]

It's not time sensitive @GautamBytes so I will keep this for you if you wish. If you couldn't get back to it during July, would you message me? I hope you have a nice and meaningful internship experience :)

[GautamBytes]

Thanks for the wish @MisRob , I will surely try to fix it by 1st week of july . If there is any unknown issue then i will inform you. Thanks:)

[LianaHarris360]

Closing this, as we haven't heard from @GautamBytes in a while.