Fix broken tests and re-enable them

[dhruvkb]

Description Presently the card and header tests have been de-activated by changing the name from .test.js to .test.js.x. This is because the card tests are flaky (#327) and because there is an inexplicable error in the header test. The goal is to fix both test suites, update code, styling and snapshots as required and make them pass.

Reproduction Re-enable the tests and run on GitHub Actions.

Expected behavior Tests should pass.

[arushivii]

Can i take this?

[arushivii]

How to run on actions? how do i test them?

[dhruvkb]

@av-00 GitHub Actions will automatically run on your PR. You can however run the tests by following the contribution instructions in the Storybook.

[arushivii]

Can you please explain the difference between tests passed and snapshots passed as mentioned?

[dhruvkb]

Each test suite contains multiple tests. Each of these tests is associated with a single snapshot. So the number of passing tests will equal the number of passing snapshots.

[Cronus1007]

@dhruvkb Shall I implement this one?

[dhruvkb]

@Cronus1007 we are currently not enabling visual regression testing on our apps because of large dev overhead.

[Cronus1007]

@dhruvkb So shall I close this PR #847

[github-actions[bot]]

Stale issue message

[Lovelynchristian]

I would love this to be assigned to me please

[brylie]

Thanks, @Lovelynchristian! I've assigned you to the issue :smile:

[Lovelynchristian]

Great! Thanks

[Lovelynchristian]

Good evening @brylie , I'm having issues installing Docker on my mac and windows. Please i need your assistance. Thanks.

[brylie]

@Lovelynchristian, Docker isn't required for Vocabulary development. All that is needed are Node and npm. Please follow the Vocabulary installation instructions to get started with development.

[Lovelynchristian]

@brylie Thank you.

[Lovelynchristian]

Hi @brylie , trust you're doing great. In trying to replicate this issue on my local machine, I've been able to install all necessary dependencies and run the unit test within the unit directory. It took me sometime to locate the header.test.js file eventually i found out that the current version of the main branch does not have this file. How do i get a version of a branch that has all the necessary files for me to fix this issue?

[brylie]

@dhruvkb, are you able to assist @Lovelynchristian with their question?

[dhruvkb]

@Lovelynchristian this file was likely removed during the restructuring. You can get that file from an older commit. Here it is.

[Lovelynchristian]

@dhruvkb Thank you.

[Lovelynchristian]

@dhruvkb, Thanks once again.

However, I still am not able to replicate the broken issue, on the latest version of the vocabulary repo. All test seems to pass with no failures. I was also able to get the test.js.x file as mentioned. It does not seem to impact the current version from my findings.

Kindly assist. I will like to first replicate the issue.

[Lovelynchristian]

@brylie Please i would appreciate your assistance .I would need response to my question. Thankyou.

[brylie]

@Lovelynchristian it would help if I could try out the changes you have made. Would you open a pull request with the changes you have tried so I can review them?