Update frontend and backend ci (#17)

* Update frontend and backend ci

* Fix import issue

* Fix import paths to include js extension

* Fix import path of reportWebVitals

* Use babel with jest

* Config jest for es modules

* Downgrade axios

* Update app.test

* Update tests

* Revert "Config jest for es modules"

This reverts commit 5316ede.

* Revert "Use babel with jest"

This reverts commit d3a95cb.

.github/workflows/backend.yml

@@ -2,11 +2,11 @@ name: Backend CI
 
 on:
   push:
-    paths:
-      - 'backend/**'
+    branches:
+      - main
   pull_request:
-    paths:
-      - 'backend/**'
+    branches:
+      - main
 
 jobs:
   build:

.github/workflows/frontend.yml

@@ -2,11 +2,11 @@ name: Frontend CI
 
 on:
   push:
-    paths:
-      - 'frontend/**'
+    branches:
+      - main
   pull_request:
-    paths:
-      - 'frontend/**'
+    branches:
+      - main
 
 jobs:
   build-and-test:

frontend/package.json

@@ -2,11 +2,12 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.7.7",
+    "axios": "^0.27.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",

frontend/src/App.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
-import SenderPage from "./components/SenderPage";
-import ReceiverPage from "./components/ReceiverPage";
+import SenderPage from "./components/SenderPage.js";
+import ReceiverPage from "./components/ReceiverPage.js";
 import styled from "styled-components";
 
 const Container = styled.div`

frontend/src/App.test.js

@@ -1,8 +1,31 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import SenderPage from "./components/SenderPage";
+import ReceiverPage from "./components/ReceiverPage";
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+describe("App Navigation", () => {
+  test("renders SenderPage when navigating to '/'", () => {
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <Routes>
+          <Route path="/" element={<SenderPage />} />
+        </Routes>
+      </MemoryRouter>
+    );
+    const senderHeading = screen.getByText(/Sender Page/i);
+    expect(senderHeading).toBeInTheDocument();
+  });
+
+  test("renders ReceiverPage when navigating to '/receiver'", () => {
+    render(
+      <MemoryRouter initialEntries={["/receiver"]}>
+        <Routes>
+          <Route path="/receiver" element={<ReceiverPage />} />
+        </Routes>
+      </MemoryRouter>
+    );
+    const receiverHeading = screen.getByText(/Receiver Page/i);
+    expect(receiverHeading).toBeInTheDocument();
+  });
 });

frontend/src/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App.js";
+import reportWebVitals from "./reportWebVitals.js";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />

frontend/src/setupTests.js

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";