Fix mock service worker issue

Maheima commented 1 year ago

Problem:

Earlier, we were facing problems in working with msw because of the error mentioned in #411

Solution:

Added an async call to initialise the mocks reference to the documentation used to fix this in next JS here
(Additionally) Converted all the files required for mock service worker setup to .ts files

How to use it for testing?:

Replace the current contents of .env.development to the contents below:

NEXT_PUBLIC_BASE_URL='https://localhost'
NEXT_PUBLIC_GITHUB_IMAGE_URL='https://raw.githubusercontent.com/Real-Dev-Squad/website-static/main/members'
NEXT_PUBLIC_API_MOCKING='ON'

Spin up the server and go to http://localhost:3000

Note that you may get Axios error on the first go. Try going to some other tab e.g., idle users and then, click on tasks again and also, the tabs that get response from an API with no event handler won't show data Here's the video explaining the correct behavious as of now: https://www.loom.com/share/12176c319bea4aeca25cd997de6c9bae Ticket for a permanent fix of this https://github.com/Real-Dev-Squad/website-status/issues/444

How to check if it is working right?

The data shown on the page should be the one that is mocked in handlers and not from the prod API

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
status-app	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 6, 2023 at 6:15PM (UTC)

Maheima commented 1 year ago

Fixed the changes you had mentioned @ankushdharkar

vvaibhavdesai commented 1 year ago

@Maheima can we have a better description for this PR? PR description misses a lot of details about the network error on page load. what will the UI look like to know the test is working and etc?

bajajcodes commented 1 year ago

@Maheima can we have a better description for this PR? PR description misses a lot of details about the network error on page load. what will the UI look like to know the test is working and etc?

+1

Maheima commented 1 year ago

@vvaibhavdesai and @shmbajaj I have updated the description please check

RitikJaiswal75 commented 1 year ago

Hey, @Maheima I checked out the discord message mentioned in the issue ticket. Could you confirm if that was the reason for this PR, in the issue ticket you mentioned that you were not sure

Which amongst the mentioned reasons was it?

Maheima commented 1 year ago

Hey, @Maheima I checked out the discord message mentioned in the issue ticket. Could you confirm if that was the reason for this PR, in the issue ticket you mentioned that you were not sure

Which amongst the mentioned reasons was it?

That message was just Vaibhav debugging the issue ticket that is going to be resolved by this PR. We don't need any certificates anymore because we'll use it on localhost @RitikJaiswal75

Real-Dev-Squad / website-status