krishnaacharyaa / wanderlust

WanderLust is a MERN travel blog website 🚀 This project is aimed to help people to contribute in open source, upskill in react and master git.
https://wanderlust-beta.vercel.app/
MIT License
218 stars 1.23k forks source link

Adding integration tests in frontend #6

Closed krishnaacharyaa closed 4 months ago

krishnaacharyaa commented 1 year ago

Presently we do not have any test cases written in the application which ensures security, as the project grows in the size there are high chances that the application can break. So adding relevant test cases would be very handy. Mostly likes framework like jest can be used to achieve this, if any other framework which is better than this, we can discuss and proceed.

bajajcodes commented 11 months ago

Hey @krishnaacharyaa I would like to work on this issue.

I can deliver the proposed solution by 14/Dec/23(ETA).

krishnaacharyaa commented 11 months ago

Sure @shmbajaj, one setback you might face is, there are no unit tests which are already written, that would ease the process, kindly consider that one thing, you can suggest or take insights on how https://github.com/krishnaacharyaa/wanderlust/issues/72's assignee takes care of it.

And for the naming conventions we can follow similar to https://github.com/krishnaacharyaa/wanderlust/pull/54

p.s: The way we have thought of going forward for "integration test" is unit test without mocking db calls or any other services for that matter, trying to clarify upfront, so that we are in the same boat.

For any further discussion let's connect via discord channel :)

bajajcodes commented 11 months ago

Update

13/12/23: Setup Jest with Typescript

Using TDD or Automation Testing approach to ensure everything works as expected, as changes are done.

Three types of testing can be done:

Will be using jest and react-testing-library for unit and integration tests, and cypress for E2E tests.

Action Plan

14/12/23: Setup Jest with Typescript

15/12/23: Setup Jest with Typescript

Reference

chinmaykunkikar commented 10 months ago

Off topic

Loved the way you have kept everyone in the loop with these on point updates, @shmbajaj! Makes it easier for someone like me who hasn't been around lately. Thanks :)

bajajcodes commented 10 months ago

Update

01/01/2024

Integration testing tests the collaboration of multiple components. It is considerably more difficult than unit testing, as we would have to for example mock data from the server.

-React Testing Library Tutorial

krishnaacharyaa commented 10 months ago

@shmbajaj, Thank you for the precise update, just a request, if possible can we aim at both unit and integration test cases, we can take help of some other person from the discord ... As i feel it would take more time in the unit tests, but i feel it can go hand in hand,

  1. unit tests - mocks
  2. integration - actually lets it happen without mocking

p.s: You can refer to the backend unit test and integration tests closeness... you'll get an idea.

bajajcodes commented 10 months ago

@shmbajaj, Thank you for the precise update, just a request, if possible can we aim at both unit and integration test cases, we can take help of some other person from the discord ... As i feel it would take more time in the unit tests, but i feel it can go hand in hand,

  1. unit tests - mocks
  2. integration - actually lets it happen without mocking

p.s: You can refer to the backend unit test and integration tests closeness... you'll get an idea.

Integration tests without mocking become E2E tests, as per my knowledge. Integration tests with mocking become Unit tests, as frontend components are lesser.

I believe it is hard to draw fine line between these types of tests, at this point.

krishnaacharyaa commented 10 months ago

Integration tests without mocking become E2E tests, as per my knowledge. Integration tests with mocking become Unit tests, as frontend components are lesser

Arre then which is integration tests? XD In my opinion with mocking is unit tests, without mocking is integration and without mocking testing the overall application without separating it as frontend and back-end is E2E which is 1 for the entire application...

I believe it is hard to draw fine line between these types of tests, at this point.

True that!!

@chinmaykunkikar @kuldeepjambhulkar any inputs?

bajajcodes commented 10 months ago

Arre then which is integration tests? XD In my opinion with mocking is unit tests, without mocking is integration and without mocking testing the overall application without separating it as frontend and back-end is E2E which is 1 for the entire application...

Suggestion: Let's do integration and unit testing together and mock features where required and use local backend for api calls, What say?

krishnaacharyaa commented 10 months ago

In my opinion it's purely unit test, but we need to start from somewhere, let's go ahead... We'll later get the things sorted 🙂

bajajcodes commented 10 months ago

In my opinion it's purely unit test, but we need to start from somewhere, let's go ahead... We'll later get the things sorted 🙂

Agreeing... https://appliedtechnology.github.io/protips/mocking

bajajcodes commented 10 months ago

A unit test is not a unit test if it uses these external dependencies - that would rather be an integration test.

@krishnaacharyaa 😄

bajajcodes commented 10 months ago

Hey @chinmaykunkikar @krishnaacharyaa @kuldeepjambhulkar I request you guys please review the PR for Integration Test of HomePage route/component.

https://github.com/krishnaacharyaa/wanderlust/pull/96

krishnaacharyaa commented 7 months ago

Hi @bajajcodes, Please let us know if you can complete this, else will re-assign to potential candidate :)