[Visual testing]: Add visual tests for KBreadcrumbs

[AlexVelezLl]

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Context

We recently introduced a new visual testing system in KDS to prevent visual regressions and ensure UI consistency, and we want to start populating our KDS components with visual tests.

If you are not familiar yet with our visual testing system. Please refer to our Visual Testing Guide. You can also check the existing tests for KButton as an example.

Additionally, see the KBreadcrumbs documentation for reference.

Desired behavior

KBreadcrumbs should have visual tests to cover at least these snapshots:

• 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.

Note

Since we currently dont have a test file for KBreadcrumbs. Please move the current KBreadcrumbs.vue file to be a folder KBreadcrumbs/index.vue and create the test file in KBreadcrumbs/__tests__/KBreadcrumbs.spec.js

Acceptance criteria

• A new visual test suite is created for KBreadcrumbs.
• The test includes all required snapshots.
• The test runs successfully and captures the expected snapshots.

[RONAK-AI647]

@AlexVelezLl May i work on this issue , assign it to me please.

[AlexVelezLl]

Hey @RONAK-AI647! Sure thing! I will assign this to you. Please let us know if you have any question 👐.

[RONAK-AI647]

@AlexVelezLl I have some questions : firstly I am facing issue in setting the local environment. I went through the visual testing guide and

this command is linux/mac specific , so the rest windows contributors facing problem with this command not working , may run this command "set PERCY_TOKEN=your-token-here" (in cmd)and the last "yarn test:visual" command is failing simultaneously.

[MisRob]

Hi @RONAK-AI647, thanks for letting us know. We really don't recommend Windows for development and unfortunately don't have a way to try it out ourselves. However many contributors have successfully set up their development environment on Windows using WSL or a Linux image in VirtualBox.Y ou may need to experiment some more. In case it's not possible, feel free to message us and find another issue instead.

[adibmbrk]

Hi @RONAK-AI647, I'd recommend using virtualbox as well, However as a workaround for this issue you can try adding the PERCY_TOKEN as a PATH variable. I have linked a video for your reference.

[RONAK-AI647]

@adibmbrk Thank You , virtualbox is great recommendation . I myself use virtualbox , there was some error with the version control whose work is on progress. Thank You, the link helped.