test: Add snapshot tests

[AntoineDeveloppeur]

Description

Implement snapshot tests

• Fixes: Add Jest Snapshot Testing for Frontend Components #163

Checklist

• Ran npx prettier --write . (for formatting)
• Ran gofmt -w . (for Go backend)
• Ran npm test (for JS/TS testing)
• Added unit tests, if applicable
• Verified all tests pass
• Updated documentation, if needed

Additional Notes

• Use @testing-library/react with Jest
• Snapshot tests written in already existing rendering test files.
• Snapshot test inside another "describe" to clarify test file
• Snapshot files are saved in ComponentToTest/_test_/_snapshots_

Obsolete note when not testing snapshots

When running npm run test:without-snapshot, Jest reports snapshots as obsolete. This message is unnecessary in this context and only serves as a distraction. I looked for a way to suppress it, but haven’t found a solution yet.

Test script logic

To ensure all tests are run before developers commit, I chose to keep the default npm run test command for both rendering and snapshot tests. Here’s the current setup:

    "test": "jest",
    "test:without-snapshot": "jest --testNamePattern=\"^(?!.*snapshot).*$\"",
    "test:snapshot": "jest --testNamePattern='snapshot'",

No changes are needed for GitHub Actions, as it already runs npm run test.

Alternative Approach

An Alternative would be to separate test snapshot testing entirely :

    "test": "jest --testNamePattern=\"^(?!.*snapshot).*$\"",
    "test:snapshot": "jest --testNamePattern='snapshot'",

and add a dedicated Github actions step for snapshot tests.

I believe the first option encourages developers to treat snapshots as integral tests, ensuring better compliance. However, I can implement the alternative if preferred.

[its-me-abhishek]

hi @AntoineDeveloppeur , this implementation looks great overall, the snapshots residing in __tests__/__snapshots__ also makes sense. Though one thing I think that needs to be done is addition of a testing script for snapshots in the package.json, and it should be separate from npm test ( this is because one may not want to run snapshots everytime they run tests). so a script named as snapshots would be good. And finally integrating that into our frontend-testing workflow for testing via Github actions, inside /.github/workflows/frontend-test.yml

[AntoineDeveloppeur]

Thanks for your feedback. I agree with your suggestions and will handle it.

[AntoineDeveloppeur]

Hi @its-me-abhishek pull request is now ready for review

[its-me-abhishek]

Please remove all the tests from ui directory, as they are mostly from shadcn

[AntoineDeveloppeur]

@its-me-abhishek done

[its-me-abhishek]

Please fix the prettier issues

[AntoineDeveloppeur]

I fixed Devlog.test LocalTime issue
I can't figure out what is workflow issue below

I run npm run lint. This changed Task file and 2 others. Then I did git add -A and git commit -m"..." but there was nothing to commit.
Maybe there is something related to endOfLine configuration with prettier. I am on windows so I use CRLF. CI/CD runs on Linux = LF

[its-me-abhishek]

Maybe there is something related to endOfLine configuration with prettier. I am on windows so I use CRLF. CI/CD runs on Linux = LF

yeah you;d need to revert that in order to make these workflows run

[AntoineDeveloppeur]

It looks like the PR is now ready to pass the workflows! :)

I spent quite a bit of time trying to convert from CRLF to LF in my Windows environment, but without success. The solution ended up being to use WSL (Ubuntu) to run npm run lint. Below is a screenshot of the changes it made:

I’m still not sure why there’s such a difference between operating systems—it doesn’t seem like a typical CRLF/LF issue to me.

On the bright side, I learned that I can run the GitHub workflow locally on my repo to test it, and the Prettier workflow is now passing.

[its-me-abhishek]

I learned that I can run the GitHub workflow locally on my repo to test it, and the Prettier workflow is now passing.

That's great! I was reading this a while ago while looking for a similar fix. Might be a good read.

As of now currently One test is failing @ HomePage, please fix that, will merge it afterwards

Edit: Typo

[AntoineDeveloppeur]

Thank you for the article and your patience.

It appears that the test failing (HomePage rendering test) is not one that I implemented.
After investigating, I found a solution:

First, I notice that :
npm run test all tests passes
npm run test homepage one test fails

This test might be a flaky test. No control over the resolution of a promise while expecting to see :

• the promise pending first
• then he promise resolved

In the last commit my proposal to improve this test