Feature - Vitest test suite for utility functions

[barrymun]

Description

• Adding the vitest package.
• Writing a sample test for the utils/slugify.ts utility function.
• Updating the various ignore lists so we don't lint or spell check the test output files/directories.
• Update the slugify function so that unnecessary escape chars are removed (function tested before and after the changes using the tests).
• Update pre-commit scripts (including the GitHub workflow script) to include this new test command.

Type of Change

• ✨ New snippet
• 🛠 Improvement to an existing snippet
• 🐞 Bug fix
• 📖 Documentation update
• 🔧 Other (please describe): Feature - Adding a new test suite for utility functions. Component testing suite to come later.

Checklist

• I have tested my code and verified it works as expected.
• My code follows the style and contribution guidelines of this project.
• Comments are added where necessary for clarity.
• Documentation has been updated (if applicable).
• There are no new warnings or errors from my changes.

Related Issues

Closes #135

Additional Context

Screenshots (Optional)

Click to view screenshots

[netlify]

✅ Deploy Preview for quicksnip ready!

Name	Link
🔨 Latest commit	f5ea3ed
🔍 Latest deploy log	https://app.netlify.com/sites/quicksnip/deploys/6777d0d8415fe60008fa72b0
😎 Deploy Preview	https://deploy-preview-137--quicksnip.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Mathys-Gasnier]

Looks good to me, but i would prefer for tests to be in the /tests folder instead of mixed with the source code

[barrymun]

Looks good to me, but i would prefer for tests to be in the /tests folder instead of mixed with the source code

Thanks for reviewing. Personally I prefer to keep all files together (this could be the .ts|.tsx, the .test.ts|.tsx, the .css|.scss, the .stories, the .md (if applicable), etc.) within the same directory as (for me) it makes it much easier to find all associated files. Placing all test files within the /tests directory is fine too, but if the project gets bigger it may become more difficult to find tests directly associated to a given file, especially if file names are similar but within different parent directories.

It is a matter of preference though, so let me know your thoughts. Thanks

[Mathys-Gasnier]

IMO the repo shouldn't grow that much bigger, it's still a small project, appart from the snippet quantity

[barrymun]

@Mathys-Gasnier In that case we'll keep it simple. All test files are now contained within the tests directory. Thanks

[Mathys-Gasnier]

Btw could you add more tests to your PR, so we don't merge just to merge one test and "forget" about it ?
Feel free to ask if you dont know what you could add tests for

[barrymun]

I'm not sure what you mean - slugify was the only util function that I could see that could benefit from tests for the moment. Of course component tests would also be useful, but I was going to add this in a separate feature so that the work was split.

As for forgetting about tests - I think most contributors would also want to test a util function when added or modified so I do not think this will be a problem in the long run. Even if this occurs when drafting a PR the reviewers would catch it. The first line of the checklist also requests that contributors test their code; perhaps the language here could be extended to encompass the addition of unit tests where applicable?

[Mathys-Gasnier]

There is the utils root folder, with the scripts to check/consolidate snippets, but one of the file snippetParser.js is a util, that could benefit from tests

[barrymun]

Let me see what I can do.

[barrymun]

@Mathys-Gasnier I've made a lot of changes to try and expand the test suite. Firstly, I've added the tsx package and changed the scripts within the /utils directory so that they are now typescript files. tsx will then be used to run these files instead of node. This will ensure additional type safety, and it allows us to move some of the utility functions into the src directory where they can be re-used. I've also added more unit tests for these functions. I've also updated the references in the workflow scripts so that they will use tsx instead of node as well. This should be tested to make sure they are working on GitHub. I would also recommend you re-test the scripts yourself to make sure I haven't altered the functionality in an unexpected way.

[Mathys-Gasnier]

Impressive work, didn't knew tsx was a thing, I always use ts-node, some little changes, but overall really good work

[Mathys-Gasnier]

Oh and forgot, why did changing to TS change the consolidated snippets ? it's just a change of order of the fields, but i'm not a big fan that it changes that

[barrymun]

Oh and forgot, why did changing to TS change the consolidated snippets ? it's just a change of order of the fields, but i'm not a big fan that it changes that

I reverted those as I did not mean for that to happen.

[barrymun]

Thanks, I think the tsx package is very cool. I personally prefer using it over ts-node as I've had config issues with the latter in the past.

[Mathys-Gasnier]

Once you are done, could you ping me on discord ? So i can clone your branch and test the scripts are working correctly

[Mathys-Gasnier]

Really good work, let's wait on another review and I think we are good to merge

[psychlone77]

Looks good. 👍

[barrymun]

Updated and ready for merge. I have tested the scripts locally but it might be worth checking these again as the scripts have changed since they were modified.