wanderlust icon indicating copy to clipboard operation
wanderlust copied to clipboard

Adding integration tests in frontend

Open krishnaacharyaa opened this issue 2 years ago • 14 comments

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.

krishnaacharyaa avatar Oct 29 '23 06:10 krishnaacharyaa

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

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

bajajcodes avatar Dec 12 '23 16:12 bajajcodes

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 :)

krishnaacharyaa avatar Dec 12 '23 16:12 krishnaacharyaa

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:

  • Unit testing (tests component functionality)
  • Integrating testing (tests the collaboration of multiple components)
  • E2E testing (tests the system as a whole)

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

Action Plan

  • Installing and Configure testing libraries/packages for test env.
  • Initiate Automation testing by covering essentials/critical parts of app.
  • Drive TDD method of development by setting up feature PRs.
  • TODO: Deterministic Action Plan (more to be added)

14/12/23: Setup Jest with Typescript

  • Failed to setup jest, react-testing-library with typescript, will try to finish by tomorrow.

15/12/23: Setup Jest with Typescript

  • Raised PR to setup jest, rtl for react-ts project using vite PR #84

Reference

bajajcodes avatar Dec 13 '23 17:12 bajajcodes

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 :)

chinmaykunkikar avatar Dec 16 '23 18:12 chinmaykunkikar

Update

01/01/2024

  • Started evaluating code and integration test for frontend.
  • TODO: List integration tests
  • Integration Tests:
    • / route
    • /add-blog route
    • /details-page/:title/:postId route
  • What Next: 3 PR's for integration testing on listed routes.
  • PR1: feat:test-home-route

    ETA: expected 3/01/23, actual 06/01/23 delayed because of personal commitments. https://github.com/krishnaacharyaa/wanderlust/pull/96
  • PR2: feat:add-blog-route

    ETA: 6/01/23
  • PR3: feat:details-page/:title/:postId-route

    ETA: 10/01/23

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

bajajcodes avatar Jan 01 '24 09:01 bajajcodes

@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.

krishnaacharyaa avatar Jan 01 '24 16:01 krishnaacharyaa

@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.

bajajcodes avatar Jan 01 '24 16:01 bajajcodes

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?

krishnaacharyaa avatar Jan 01 '24 16:01 krishnaacharyaa

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?

bajajcodes avatar Jan 01 '24 16:01 bajajcodes

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 🙂

krishnaacharyaa avatar Jan 01 '24 16:01 krishnaacharyaa

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 avatar Jan 05 '24 18:01 bajajcodes

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

@krishnaacharyaa 😄

bajajcodes avatar Jan 05 '24 18:01 bajajcodes

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

bajajcodes avatar Jan 05 '24 18:01 bajajcodes

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

krishnaacharyaa avatar Mar 27 '24 01:03 krishnaacharyaa