Frontend Integration Tests not passing due to ECONNREFUSED errors

[lecegues]

Problem

Some frontend integration tests that explicitly reference localhost:3000 to [GET, POST] are giving ECONNREFUSED errors inside the CI Pipeline, causing tests to fail

Example Pipeline Failure: https://github.com/UniversityOfSaskatchewanCMPT371/term-project-2024-team-4/actions/runs/8405274261/job/23017788982

[lecegues]

Suspected Problem Debugging

These are some domains for which I have debugged to try and find the source of the bug

JSDOM Test Environment Handling Connectivity (e.g. Axios requests) differently

• Problem: JSDOM** simulates a browser environment, but has connectivity limitations
• Solution: For this, I added axios.defaults.adapter = 'http' to use the "http" adapter instead of the default XMLHTTPREQUEST adapter.
• Result: After this, the problem was still persisting; no changes to logs

Test Timeouts

• Problem: could have been due to test timing out (5000ms default) before it could get an answer from the backend
• Solution: For this, I increased the test timeouts to 1000ms
• Result: Problem still persisted; no changes to logs

Backend was not started/accessible

• Problem: Maybe the backend was not started/ localhost:3000 was not accessible
• Solution: Added a verbose health check to ping backend and database to see if they were accessible.
• Result: Backend, Database, and localhost were all accessible before using. Additionally, the verbose outputs showed 127.0.0.1 (localhost) address

IPV4 vs. IPV6 Addresses

• Problem: The error logs were showing connections to ::1 (IPV6); however, I remembered that localhost was being resolved to 127.0.0.1 (IPV4)
• Solution: Temporarily changed localhost:3000 addresses to 127.0.0.1 addresses to forcefully connect using IPV4; at this point, I believe that localhost is being resolved to IPV6.
• Result: Doing this caused the tests to pass; however, need to find a solution instead of hardcoding 127.0.01.

Currently

• Need to find a solution to resolve localhost to IPV4 addresses in the frontend

[lecegues]

Update

Added a commit to create a global axios configuration file (http.js) with an IPV4 baseURL: "http://127.0.0.1:3000" to keep a constant address in all environments. This lets the test pass. Problem solved upon branch merge

Development Changes

• With this change, will have to import http from "../http"; and use this instead of axios (including test files).
• When referring to an address, no need to put localhost, just put the API address: e.g. http.post('/users')

[lecegues]

Update

Login feature was not working due to the different addresses; localhost resolves as 127.0.0.1 however it is not the same value (e.g. localhost != 127.0.0.1), so CORS is handled differently.

Login Bug

The encountered bug: Does not assign the signed token as a cookie to the browser upon login.

Problem/Fix

Problem: localhost != 127.0.0.1 but it resolves to it; this means that technically requests made are cross-site requests (not the same site) Fix: when assigning cookies, must use secure: true, sameSite: "None" to allow cross-site requests