Merge branch 'main' into develop

.github/workflows/A2_Part1.yml

@@ -0,0 +1,45 @@
+name: CI Pipeline | Build Docker Image
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build_and_push_docker_image:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+
+    - name: Install Docker Compose
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y curl
+        sudo curl -L "https://github.com/docker/compose/releases/download/v2.21.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+        sudo chmod +x /usr/local/bin/docker-compose
+        docker-compose --version
+      
+    - name: Login to Docker Hub
+      uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+    - name: Build the Docker images 
+      run: docker-compose build
+
+    - name: Tag and push the Docker images
+      run: |
+        docker tag cscc01-linkup_frontend:latest ${{ secrets.DOCKERHUB_USERNAME }}/cscc01-linkup_frontend:latest
+        docker tag cscc01-linkup_backend:latest ${{ secrets.DOCKERHUB_USERNAME }}/cscc01-linkup_backend:latest
+        docker push ${{ secrets.DOCKERHUB_USERNAME }}/cscc01-linkup_frontend:latest
+        docker push ${{ secrets.DOCKERHUB_USERNAME }}/cscc01-linkup_backend:latest
+
+    - name: List Docker images
+      run: docker images

.github/workflows/A2_Part2.yml

@@ -0,0 +1,47 @@
+name: CD Pipeline | Pull and Deploy Docker Container & Run Automated Tests
+
+on:
+  workflow_run: 
+    workflows: ["CI Pipeline | Build Docker Image"]
+    types: 
+      - completed
+
+jobs:
+  deploy_and_run_automated_tests:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - name: Login to Docker Hub
+      uses: docker/login-action@v2
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+    - name: Pull Docker images
+      run: |
+        docker pull ${{ secrets.DOCKERHUB_USERNAME }}/cscc01-linkup_frontend:latest
+        docker pull ${{ secrets.DOCKERHUB_USERNAME }}/cscc01-linkup_backend:latest
+
+    - name: Deploy Containers
+      run: |
+        docker stop frontend || true
+        docker rm frontend || true
+        docker stop backend || true
+        docker rm backend || true
+        docker run -d --name frontend -p 80:3000 ${{ secrets.DOCKERHUB_USERNAME }}/cscc01-linkup_frontend:latest
+        docker run -d --name backend -p 5000:5000 ${{ secrets.DOCKERHUB_USERNAME }}/cscc01-linkup_backend:latest
+        
+    - name: Run Automated Tests for Backend
+      run: |
+          ls
+          cd backend
+          npm install
+          npm test
+
+    - name: Run Automated Tests for Frontend
+      run: |
+            cd frontend
+            npm install
+            npm test

.github/workflows/README.md

@@ -0,0 +1,25 @@
+## **To run this CI/CD Workflow:**
+-  Simply, make a PR to the `main` branch or push changes to the `main` branch
+- Go to the `Actions` Tab to view the status of the workflow.
+
+## Details of Implementation
+- **CI Pipeline**
+  - Specify that the CI Pipeline is triggered on PR or push to `main`
+  - Checkout code via `Github Actions`
+  - Install `docker-compose`
+  - Log in to Docker Hub 
+  - Run `docker-compose build` to build frontend and backend images
+    - **Note**: we have defined a redis container within the docker-compose file in case that we want to implement a test suite that requires redis to run
+  - Tag frontend and backend images and push them to Docker Hub
+  - List docker images 
+- **CD Pipeline**
+  - Specify workflow to run only after CI Pipeline has been completed
+  - Run code on `ubuntu-latest` 
+  - Checkout code via `Github Actions`
+  - Log in to Docker Hub
+  - Pull Docker backend and frontend images
+  - Deploy backend and frontend containers
+  - Run Automated Tests on backend and frontend
+    - We first install necessary packages (i.e. `npm install`)
+    - Then, we run `npm test` for the respective containers each having their own test suite
+

.github/workflows/SystemDesign.md

@@ -0,0 +1,24 @@
+## **System Design for Building, Pushing, Deploying Docker**
+### **CI Pipeline**
+- `A2_Part1.yml` file
+  - Responsible for building docker images for the frontend and backend and pushing them to DockerHub
+- `A2_Part2.yml` file
+  - Responsible for pulling frontend and backend containers and running automated tests within their respective containers
+
+
+
+## **System Design for Automated Testing**
+### **Backend**
+- In `package.json`:
+- `npm test`
+    - runs `jest --coverage --forceExit --maxWorkers=2`
+- In `__ tests __` :
+  - `setProfilePic.test.js`
+    - verify that making `POST` request at `/set-profile-pic` endpoint results in 200 response code
+###  **Frontend**
+- In `package.json`:
+  - `npm test`
+    - runs `jest --coverage --transformIgnorePatterns \"node_modules/(?!axios)/\"`
+- In `__ tests __` :
+  - `LoginPage.test.js`:
+    - check that the Login component contains the phrase “Swipe. Match. Network.”

README.md

@@ -40,16 +40,24 @@ To build and run the LinkUp project, follow these steps after setting up the pre
    ```bash
    npm install
    ```
-2. **Navigate back to the frontend directory in your terminal:**
+6. **Install Redis (if not already installed)**
+   ```bash
+   sudo apt-get install redis-server
+   ```
+7. **Start the Redis server**
+   ```bash
+   redis-server
+   ```
+8. **Navigate back to the frontend directory in your terminal:**
    ```bash
    cd .. & cd frontend
    ```
-6. **Start the application:**
+9. **Start the application:**
    ```bash
    npm start
    ```
 
-7. **Open your browser and visit the following URL to access the Linkup web application:**
+10. **Open your browser and visit the following URL to access the Linkup web application:**
 Once you have started the server, Visual Studio Code or your terminal should automatically open your browser. If it does not, you can manually open your browser and visit the following URL to access the Linkup web application:
 
    ```plaintext

backend/.gitignore

@@ -8,4 +8,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# coverage testing
 coverage/

backend/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:latest
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN npm install
+
+COPY . .
+
+CMD ["npm", "start"]

backend/__tests__/setProfilePic.test.js

@@ -0,0 +1,51 @@
+// __tests__/setProfilePic.test.js
+
+const request = require('supertest');
+const express = require('express');
+const cors = require('cors');
+const mongoose = require('mongoose');
+const User = require('../schema/user'); // Adjust path as necessary
+const setProfilePic = require('../API/setProfilePic');
+
+// Initialize express app and use the route
+const app = express();
+app.use(cors());
+app.use(express.json());
+app.post('/set-profile-pic', setProfilePic);
+
+describe('POST /set-profile-pic', () => {
+  beforeAll(async () => {
+    // Connect to test database
+    await mongoose.connect(process.env.MONGODB_URI || 'mongodb+srv://Cluster20901:[email protected]/linkup?retryWrites=true&w=majority&appName=Cluster20901', {
+      useNewUrlParser: true,
+      useUnifiedTopology: true
+    });
+
+    // Seed test data if necessary
+    await User.create({ anon_username: 'testuser', avatar: '' });
+  });
+
+  afterAll(async () => {
+    // Clean up database and close connection
+    await User.deleteMany({ anon_username: 'testuser'});
+    await mongoose.disconnect();
+  });
+
+  it('should return a 200 status and expected response', async () => {
+    const requestData = {
+      username: 'testuser',
+      filename: 'new-avatar.png'
+    };
+
+    const response = await request(app)
+      .post('/set-profile-pic')
+      .send(requestData);
+
+    expect(response.statusCode).toBe(200);
+    expect(response.body).toEqual({ message: 'updated' });
+
+    // Verify that the profile picture was updated in the database
+    const user = await User.findOne({ anon_username: 'testuser' });
+    expect(user.avatar).toBe('new-avatar.png');
+  });
+});