From 431a94b972940c9882dee024ff1fadbc6ffb7b08 Mon Sep 17 00:00:00 2001
From: Johnny Zheng <jzheng2@emich.edu>
Date: Wed, 19 Mar 2025 00:02:18 -0400
Subject: [PATCH] working on tests
---
package-lock.json | 5 +-
package.json | 2 +-
tests/commentSection.test.tsx | 107 ++++++++++++++++++++++++++++++
tests/login.test.tsx | 76 ---------------------
tests/react-player.d.ts | 4 ++
tests/signup.test.tsx | 120 ----------------------------------
tsconfig.app.json | 2 +-
7 files changed, 117 insertions(+), 199 deletions(-)
create mode 100644 tests/commentSection.test.tsx
delete mode 100644 tests/login.test.tsx
create mode 100644 tests/react-player.d.ts
delete mode 100644 tests/signup.test.tsx
diff --git a/package-lock.json b/package-lock.json
index 40ee2b5..b1653b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,6 @@
"@testing-library/user-event": "^14.6.1",
"@types/react-swipeable": "^4.3.0",
"axios": "^1.7.9",
- "axios-mock-adapter": "^2.1.0",
"bcryptjs": "^2.4.3",
"concurrently": "^9.1.2",
"cors": "^2.8.5",
@@ -55,6 +54,7 @@
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
+ "axios-mock-adapter": "^2.1.0",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
@@ -2875,6 +2875,7 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-2.1.0.tgz",
"integrity": "sha512-AZUe4OjECGCNNssH8SOdtneiQELsqTsat3SQQCWLPjN436/H+L9AjWfV7bF+Zg/YL9cgbhrz5671hoh+Tbn98w==",
+ "dev": true,
"license": "MIT",
"dependencies": {
"fast-deep-equal": "^3.1.3",
@@ -4160,6 +4161,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+ "dev": true,
"license": "MIT"
},
"node_modules/fast-glob": {
@@ -4878,6 +4880,7 @@
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
"integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+ "dev": true,
"funding": [
{
"type": "github",
diff --git a/package.json b/package.json
index 2b6f213..48e7c0c 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
"@testing-library/user-event": "^14.6.1",
"@types/react-swipeable": "^4.3.0",
"axios": "^1.7.9",
- "axios-mock-adapter": "^2.1.0",
"bcryptjs": "^2.4.3",
"concurrently": "^9.1.2",
"cors": "^2.8.5",
@@ -62,6 +61,7 @@
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
+ "axios-mock-adapter": "^2.1.0",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
diff --git a/tests/commentSection.test.tsx b/tests/commentSection.test.tsx
new file mode 100644
index 0000000..f87ffcb
--- /dev/null
+++ b/tests/commentSection.test.tsx
@@ -0,0 +1,107 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import axios from "axios";
+import AxiosMockAdapter from "axios-mock-adapter";
+import App from "../src/App";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import React from "react";
+import ReactPlayer from 'react-player';
+import '@testing-library/jest-dom';
+
+
+// Create an axios mock adapter instance.
+const mock = new AxiosMockAdapter(axios);
+
+vi.mock('react-player', () => {
+ return {
+ __esModule: true,
+ default: () => <div>Mocked ReactPlayer</div>,
+ };
+});
+
+describe("Comment Section Interactions", () => {
+ beforeEach(() => {
+ mock.reset();
+ });
+
+
+ it("Comment input field does not exist if user is not logged in", async () => {
+
+ render(<App />);
+
+ // Click the COMMENT button to reveal the comment section.
+ const commentButton = screen.getByRole("button", { name: /comment/i });
+ fireEvent.click(commentButton);
+
+ expect(screen.queryByPlaceholderText("Write a comment...")).toBeNull()
+ });
+
+
+ it("Comment input field exists if user is logged in", async () => {
+ localStorage.setItem("authToken", "dummy.jwt.token");
+
+ mock.onGet("http://localhost:8081/current-user-id").reply(200, { userId: 1 });
+
+ // --- Mock backend responses ---
+ mock.onGet("http://localhost:3001/video-list").reply(200, [
+ { fileName: "video.mp4" }
+ ]);
+ mock.onGet("http://localhost:3001/get-comments").reply(200, [
+ {
+ id: 1,
+ user_id: 1,
+ content: "Test comment",
+ created_at: "2025-01-01",
+ likeCount: 0,
+ liked: 0,
+ replies: []
+ }
+ ]);
+ mock.onGet("http://localhost:3001/user").reply(200, { id: 1, username: "TestUser" });
+
+ // Render the App with the loggedIn state set to true
+ render(<App />);
+
+ // Click the COMMENT button to reveal the comment section.
+ const commentButton = screen.getByRole("button", { name: /comment/i });
+ fireEvent.click(commentButton);
+
+ // Wait until the comment section is visible (by checking for the comment input).
+ await waitFor(() => {
+ expect(screen.getByPlaceholderText("Write a comment...")).toBeInTheDocument();
+ });
+ });
+
+ // it("submits a new comment successfully", async () => {
+ // mock.onPost("/api/comments").reply(201, {
+ // id: 2,
+ // username: "User2",
+ // created_at: "2025-03-18",
+ // comment: "New comment",
+ // });
+
+ // render(<App />);
+
+ // // Simulate login
+ // const loginButton = screen.queryByText(/log in/i);
+ // if (loginButton) {
+ // fireEvent.click(loginButton);
+ // }
+
+ // // Open comment section
+ // const commentButton = screen.getByRole("button", { name: /comment/i });
+ // fireEvent.click(commentButton);
+
+ // // Enter a comment
+ // const input = screen.getByPlaceholderText("Write a comment...");
+ // fireEvent.change(input, { target: { value: "New comment" } });
+
+ // // Submit comment
+ // const submitButton = screen.getByRole("button", { name: /send/i });
+ // fireEvent.click(submitButton);
+
+ // // Wait for the comment to appear
+ // await waitFor(() => {
+ // expect(screen.getByText("New comment")).toBeInTheDocument();
+ // });
+ // });
+});
diff --git a/tests/login.test.tsx b/tests/login.test.tsx
deleted file mode 100644
index 2d9e225..0000000
--- a/tests/login.test.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { describe, it, expect } from "vitest";
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom"; // Import BrowserRouter
-import Login from "../src/login.tsx";
-
-describe("Login Component", () => {
- // Test case 1: Empty email and password
- it("should display validation errors for empty email and password", () => {
- // Step 1: Render the component wrapped in BrowserRouter
- render(
- <BrowserRouter>
- <Login />
- </BrowserRouter>
- );
-
- // Step 2: Simulate form submission without filling in the fields
- const loginButton = screen.getByRole("button", { name: /login/i });
- fireEvent.click(loginButton);
-
- // Step 3: Check for email validation error
- const emailError = screen.getByText(/email is required/i);
- expect(emailError).toBeInTheDocument();
-
- // Step 4: Check for password validation error
- const passwordError = screen.getByText(/password is required/i);
- expect(passwordError).toBeInTheDocument();
- });
- // Test case 2: Invalid password format
- it("should display validation error for invalid password format", () => {
- render(
- <BrowserRouter>
- <Login />
- </BrowserRouter>
- );
-
- // Enter an invalid password
- const passwordInput = screen.getByPlaceholderText(/enter password/i);
- fireEvent.change(passwordInput, { target: { value: "weak" } });
-
- // Simulate form submission
- const loginButton = screen.getByRole("button", { name: /login/i });
- fireEvent.click(loginButton);
-
- // Check for password validation error
- const passwordError = screen.getByText(/password is invalid/i);
- expect(passwordError).toBeInTheDocument();
- });
- // Test case 3: Valid email and password
- it("should not display validation errors for valid email and password", () => {
- render(
- <BrowserRouter>
- <Login />
- </BrowserRouter>
- );
-
- // Enter a valid email
- const uesrnameOrEmail = screen.getByPlaceholderText(/Enter Username OR Email/i);
- fireEvent.change(uesrnameOrEmail, { target: { value: "valid@example.com" } });
-
- // Enter a valid password
- const passwordInput = screen.getByPlaceholderText(/enter password/i);
- fireEvent.change(passwordInput, { target: { value: "StrongPassword1@" } });
-
- // Simulate form submission
- const loginButton = screen.getByRole("button", { name: /login/i });
- fireEvent.click(loginButton);
-
- // Check that no validation errors are displayed
- const emailError = screen.queryByText(/email is required/i);
- expect(emailError).not.toBeInTheDocument();
-
- const passwordError = screen.queryByText(/password is required/i);
- expect(passwordError).not.toBeInTheDocument();
- });
-});
diff --git a/tests/react-player.d.ts b/tests/react-player.d.ts
new file mode 100644
index 0000000..21206d7
--- /dev/null
+++ b/tests/react-player.d.ts
@@ -0,0 +1,4 @@
+declare module 'react-player' {
+ const ReactPlayer: any;
+ export default ReactPlayer;
+ }
\ No newline at end of file
diff --git a/tests/signup.test.tsx b/tests/signup.test.tsx
deleted file mode 100644
index 1176b62..0000000
--- a/tests/signup.test.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { describe, it, expect } from "vitest";
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom"; // Import BrowserRouter
-import Signup from "../src/signup"; // Adjust path if necessary
-
-describe("Signup Component", () => {
- // Test case 1: Empty name
- it("should display validation error for missing name", () => {
- render(
- <BrowserRouter>
- <Signup />
- </BrowserRouter>
- );
-
- // Simulate checking the "I agree to the Terms" checkbox to enable the submit button
- const checkbox = screen.getByLabelText(
- /i agree to the terms and conditions/i
- );
- fireEvent.click(checkbox);
-
- // Simulate form submission without entering a name
- const submitButton = screen.getByRole("button", { name: /sign up/i });
- fireEvent.click(submitButton);
-
- // Check for name validation error
- const nameError = screen.getByText(/name is required/i);
- expect(nameError).toBeInTheDocument();
- });
- // Test case 2: Invalid password format
- it("should display validation error for password not meeting the requirements", () => {
- render(
- <BrowserRouter>
- <Signup />
- </BrowserRouter>
- );
-
- // Simulate checking the checkbox to enable the submit button
- const checkbox = screen.getByLabelText(
- /i agree to the terms and conditions/i
- );
- fireEvent.click(checkbox);
-
- // Enter a password that doesn't meet the requirements
- const passwordInput = screen.getByPlaceholderText(/enter password/i);
- fireEvent.change(passwordInput, { target: { value: "password" } });
-
- // Simulate form submission
- const submitButton = screen.getByRole("button", { name: /sign up/i });
- fireEvent.click(submitButton);
-
- // Check for password validation error
- const passwordError = screen.getByText(
- /password must be at least 8 characters long/i
- );
- expect(passwordError).toBeInTheDocument();
- });
- // Test case 3: Passwords do not match
- it("should display validation error when passwords do not match", () => {
- render(
- <BrowserRouter>
- <Signup />
- </BrowserRouter>
- );
-
- // Simulate checking the checkbox to enable the submit button
- const checkbox = screen.getByLabelText(
- /i agree to the terms and conditions/i
- );
- fireEvent.click(checkbox);
-
- // Enter different passwords in the password and confirm password fields
- const passwordInput = screen.getByPlaceholderText(/enter password/i);
- fireEvent.change(passwordInput, { target: { value: "password123!" } });
-
- const confirmPasswordInput =
- screen.getByPlaceholderText(/confirm password/i);
- fireEvent.change(confirmPasswordInput, {
- target: { value: "differentPassword123!" },
- });
-
- // Simulate form submission
- const submitButton = screen.getByRole("button", { name: /sign up/i });
- fireEvent.click(submitButton);
-
- // Check for password mismatch error
- const confirmPasswordError = screen.getByText(/passwords do not match/i);
- expect(confirmPasswordError).toBeInTheDocument();
- });
- // Test case 4: Disabled submit button
- it("should disable submit button if terms and conditions are not checked", () => {
- render(
- <BrowserRouter>
- <Signup />
- </BrowserRouter>
- );
-
- // Simulate form submission with terms unchecked
- const submitButton = screen.getByRole("button", { name: /sign up/i });
- expect(submitButton).toBeDisabled();
- });
- // Test case 5: Enabled submit button
- it("should enable submit button if terms and conditions are checked", () => {
- render(
- <BrowserRouter>
- <Signup />
- </BrowserRouter>
- );
-
- // Check the checkbox to agree to terms
- const agreeToTermsCheckbox = screen.getByLabelText(
- /i agree to the terms and conditions/i
- );
- fireEvent.click(agreeToTermsCheckbox);
-
- // Now the submit button should be enabled
- const submitButton = screen.getByRole("button", { name: /sign up/i });
- expect(submitButton).toBeEnabled();
- });
-});
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 358ca9b..d1067e7 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -22,5 +22,5 @@
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
- "include": ["src"]
+ "include": ["src", "tests/react-player.d.ts"]
}
--
GitLab