Adding integration tests in frontend

[krishnaacharyaa]

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]

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

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

[krishnaacharyaa]

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 #72 assignee takes care of it.

And for the naming conventions we can follow similar to #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]

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 feat-#6: Setup jest rtl #84

Reference

• Full Stack Open Testing Frontend

[chinmaykunkikar]

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]

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.
  #6: Integration Test Home Route #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

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

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

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]

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]

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]

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]

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]

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

@krishnaacharyaa 😄

[bajajcodes]

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

#96

[krishnaacharyaa]

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