Merge pull request #102 from WSU-4110/Jesse_developMagic

Update openModal.test.js

tests/openModal.test.js

@@ -1,71 +1,45 @@
 const VideoModal = require('../scripts/videopage');
 
-describe("VideoModal", () => {
-    let videoModal;
-
+document.body.innerHTML = 
+    `<div id="modal">
+        <iframe id="videoFrame"></iframe>
+    </div>
+    <button class="close"></button>
+    <div class="video-card" data-video-id="123">
+        <button class="like-btn"></button>
+        <span class="like-count">0 Likes</span>
+    </div>`;
+
+describe('VideoModal', () => {
     beforeEach(() => {
-        document.body.innerHTML = `
-            <div id="modal" style="display: none;"></div>
-            <iframe id="videoFrame"></iframe>
-            <button class="close"></button>
-            <div class="video-card" data-video-id="123">
-                <button class="like-btn"></button>
-                <span class="like-count"></span>
-            </div>
-        `;
-
-        // Mock fetch globally
-        global.fetch = jest.fn();
-
-        videoModal = new VideoModal("modal", "videoFrame", "close", ".video-card");
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it("should handle like states updating correctly", async () => {
-        // Update fetch mock for this test case
-        fetch.mockResolvedValueOnce({
-            ok: true,
-            json: () => Promise.resolve({
-                likes: 10,
-                liked: true
+        // Reset fetch mocks
+        jest.resetAllMocks();
+
+        // Set up fetch mock
+        global.fetch = jest.fn(() =>
+            Promise.resolve({
+                ok: true,
+                json: () => Promise.resolve({ likes: 1, liked: true })
             })
-        });
-
-        await videoModal.updateAllLikeStates();
-
-        const likeButton = document.querySelector('.like-btn');
-        const likeCountElement = document.querySelector('.like-count');
-
-        expect(likeCountElement.textContent).toBe("10 Likes");
-        expect(likeButton.classList.contains('liked')).toBe(true);
-        expect(likeButton.innerHTML).toContain('Liked');
+        );
     });
 
-    it("should handle errors when fetching like data", async () => {
-        fetch.mockRejectedValueOnce(new Error("Network error"));
-
+    it('should handle like states updating', async () => {
+        // Initialize video modal
+        const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
+
+        // Wait for the video modal's async operations to complete
         await videoModal.updateAllLikeStates();
 
+        // Get elements
+        const likeButton = document.querySelector('.like-btn');
         const likeCountElement = document.querySelector('.like-count');
-        expect(likeCountElement.textContent).toBe(""); // Assuming it clears or does not update on error
-    });
 
-    it("should correctly handle modal open and close", () => {
-        const modal = document.getElementById('modal');
-        const videoFrame = document.getElementById('videoFrame');
-        const closeButton = document.querySelector('.close');
-
-        // Open modal test
-        videoModal.openModal("https://youtube.com/watch?v=dQw4w9WgXcQ");
-        expect(modal.style.display).toBe("block");
-        expect(videoFrame.src).toBe("https://youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0");
-
-        // Close modal test
-        videoModal.closeModal();
-        expect(modal.style.display).toBe("none");
-        expect(videoFrame.src).toBe("");
+        // Assertions to check if the likes are updated correctly based on the mock response
+        expect(fetch).toHaveBeenCalledTimes(1);
+        expect(fetch).toHaveBeenCalledWith('/api/likes?videoId=123');
+        expect(likeCountElement.textContent).toBe('1 Likes');
+        expect(likeButton).toHaveClass('liked');
+        expect(likeButton.innerHTML).toContain('Liked');
     });
 });