Migrate test from enzyme to vue testing library

[Pandaa007]

Description

• Added Vue testing library to the codebase
• Migrated one test from enzyme to Vue testing library as proof of concept.
• Since the library (node-sass) was deprecated and was causing installation errors in fresh environments as mine, I upgraded it to it's successor sass. Now the installation process completes without any error and we have gotten rid of old dependencies (https://stackoverflow.com/questions/74362396/i-can-not-install-node-sass)

Issue addressed

Fixes #510

Changelog

• Description: MIgrated test from enzyme to Vue testing library
• Products impact: none
• Addresses: Migrate to Vue Testing Library #510
• Components: none
• Breaking: no
• Impacts a11y: no
• Guidance: -

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

[MisRob]

cc @EshaanAgg if you're around and would like to join review, you're very welcome

[MisRob]

Thank you @Pandaa007!

[MisRob]

@rtibbles @bjester wanted to flag this note from the PR description - sounds good to you two? Could it have some implications for Kolibri and Studio?

Since the library (node-sass) was deprecated and was causing installation errors in fresh environments as mine, I upgraded it to it's successor sass

[rtibbles]

Could it have some implications for Kolibri and Studio?

Immediate implications, no - because this is only a dev dependency, so doesn't affect what gets installed in Kolibri and Studio.

This PR (and the NodeJS upgrade) was the only prerequisite to doing this dependency upgrade so this should be OK within KDS itself.

The main thing is that node-sass was incredibly outdated, had quite a few bugs, and also missing some SASS language features. I think we might have noticed, but it is possible that switching to sass may cause changes in styling because of SASS language features actually being supported - or if we start leaning on SASS language features that are not supported in node-sass this might have implications for Kolibri and Studio where styling does not behave identically to things in KDS, so if we do retain this dependency upgrade, we would want to expedite the upgrade in Kolibri and Studio also to minimize the chance of mismatches in behaviour. I think this will require finalizing the NodeJS 18 upgrade in Studio, which should hopefully happen in the next month or so, so this may be feasible.

But any merge of this should open correlated issues for sass upgrade on those two repos.

[EshaanAgg]

Thanks @Pandaa007! The PR looks great.

I have added a small nit related to the event simulation package, so it would be really helpful if you can address that!

Also, might be a bit unrelated to this PR, but it might be nice to have the eslint-plugin-jest-dom also configured in the repository now, as the same ensures that our tests are using the correct custom matcher's wherever possible! Would greatly appreciate if you can install the same and configure it as well!

As always, if you feel stuck, please do not hesitate to reach out for help!

[EshaanAgg]

Thanks for making the changes @Pandaa007! The PR looks good to me now! You can now wait for approval from other members of the team.

[nucleogenesis]

On code review, this LGTM - I'm a big fan of how the updated tests are more readable overall and it's a great start of a migration.

[Pandaa007]

Hey! Thanks @AlexVelezLl for your kind patience!

I have rebased the PR appropriately and made the changes as well. There are two design designs that I have taken in this PR that might be of relevance:

• I renamed the render function for visual testing from renderComponent to renderComponentForVisualTest as the same better conveys the intent for the use of the same, and also prevents the conflict of the name renderComponent, which according to the LE Testing guidelines is the recommended name of the wrapper function that we should be using. This will help prevent more conflicts with naming as we move forward! The same also conveys the difference between these two types of rendering better IMHO.

• I have also reverted my change of adding sass package and restored the old node-sass package in KDS. The primary reason behind the same is that during local testing, I realized that with the most recent version of sass, when we run the application in dev-only mode, the console gets filled with multiple warnings about deprecated ways of using sass styling. This led me to believe that this might not be a drag-and-drop replacement as I was hoping it to be, and thus, it would be better not to club this change in this PR, and we should research it more before proceeding with it.

The PR is now ready for review. Thank you all for working with me on this PR.