Test

tests/constructor.test.js

@@ -1,7 +1,13 @@
 const VideoModal = require('../scripts/videopage');
 
-describe('VideoModal - constructor', () => {
+// Globally mock fetch
+global.fetch = jest.fn();
+
+describe('VideoModal', () => {
     beforeEach(() => {
+        // Reset fetch mocks before each test
+        fetch.mockReset();
+
         // Mock DOM elements
         document.getElementById = jest.fn().mockImplementation(id => {
             if (id === 'modal') {
@@ -11,19 +17,17 @@ describe('VideoModal - constructor', () => {
                 return { src: '' };  // Mock videoFrame element
             }
         });
-        
+
         document.getElementsByClassName = jest.fn().mockReturnValue([{
             onclick: jest.fn()
         }]);  // Mock for className 'close'
 
         document.querySelectorAll = jest.fn().mockReturnValue([{
             getAttribute: jest.fn(name => {
-                switch (name) {
-                    case 'data-video-id':
-                        return '123';
-                    default:
-                        return null;
+                if (name === 'data-video-id') {
+                    return '123';
                 }
+                return null;
             }),
             addEventListener: jest.fn(),
             querySelector: jest.fn().mockReturnValue({
@@ -36,16 +40,39 @@ describe('VideoModal - constructor', () => {
 
     it('initializes class properties correctly', () => {
         const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
-
+        
         expect(document.getElementById).toHaveBeenCalledWith('modal');
         expect(document.getElementById).toHaveBeenCalledWith('videoFrame');
         expect(document.getElementsByClassName).toHaveBeenCalledWith('close');
         expect(document.querySelectorAll).toHaveBeenCalledWith('.video-card');
-
-        // Add additional assertions to check if the properties are correctly set if necessary
         expect(videoModal.modal).toBeTruthy();
         expect(videoModal.videoFrame).toBeTruthy();
         expect(videoModal.closeButton).toBeTruthy();
         expect(videoModal.videoCards.length).toBe(1);
     });
+
+    it('calls fetch and updates like state for video cards', async () => {
+        fetch.mockResolvedValue({
+            ok: true,
+            json: () => Promise.resolve({
+                liked: true,
+                likes: 10
+            })
+        });
+
+        const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
+        await videoModal.updateAllLikeStates();
+
+        // Assertions to check the fetch mechanism and results
+        expect(fetch).toHaveBeenCalledTimes(1);
+        expect(fetch).toHaveBeenCalledWith('/api/likes?videoId=123');
+
+        const card = document.querySelectorAll.mock.results[0].value[0];
+        const likeCountElement = card.querySelector.mock.results[1].value;
+        const likeButton = card.querySelector.mock.results[0].value;
+
+        expect(likeCountElement.textContent).toBe('10 Likes');
+        expect(likeButton.classList.toggle).toHaveBeenCalledWith('liked', true);
+        expect(likeButton.innerHTML).toContain('Liked');
+    });
 });

tests/openModal.test.js

@@ -1,42 +1,43 @@
 const VideoModal = require('../scripts/videopage');
 
+// Mocking fetch globally
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({ likes: 10, liked: true })
+  })
+);
+
 describe('VideoModal - openModal', () => {
+    let mockModal, mockVideoFrame;
+
     beforeEach(() => {
+        // Reset mocks before each test
+        fetch.mockClear();
+
         // Mock modal and videoFrame elements
-        document.getElementById = jest.fn((id) => {
-            if (id === 'modal') {
-                return { style: { display: 'none' } }; // Mock modal element with style
-            }
-            if (id === 'videoFrame') {
-                return { src: '' }; // Mock videoFrame element with src
-            }
-            return null;
-        });
+        mockModal = { style: { display: 'none' } };
+        mockVideoFrame = { src: '' };
 
-        document.getElementsByClassName = jest.fn(className => {
-            if (className === 'close') return [{ onclick: null }];
-            return [];
+        document.getElementById = jest.fn().mockImplementation((id) => {
+            if (id === 'modal') return mockModal;
+            if (id === 'videoFrame') return mockVideoFrame;
+            return null;
         });
 
-        document.querySelectorAll = jest.fn(selector => {
-            if (selector === '.video-card') {
-                return [{
-                    addEventListener: jest.fn(),
-                    getAttribute: jest.fn(name => {
-                        if (name === 'data-video-url') return 'https://www.example.com/watch?v=example';
-                    })
-                }];
-            }
-            return [];
-        });
+        document.getElementsByClassName = jest.fn().mockReturnValue([{ onclick: null }]);
+        document.querySelectorAll = jest.fn().mockReturnValue([{ 
+            addEventListener: jest.fn(),
+            getAttribute: jest.fn().mockReturnValue('https://www.example.com/watch?v=example')
+        }]);
     });
 
     it('sets videoFrame src and displays modal', () => {
         const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
         const testUrl = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
         videoModal.openModal(testUrl);
 
-        expect(videoModal.videoFrame.src).toContain('https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0');
-        expect(videoModal.modal.style.display).toBe('block');
+        expect(mockVideoFrame.src).toContain('https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0');
+        expect(mockModal.style.display).toBe('block');
     });
 });

tests/transformVideoUrl.test.js

@@ -2,12 +2,11 @@ const VideoModal = require('../scripts/videopage');
 
 describe('VideoModal - transformVideoUrl', () => {
     it('transforms YouTube watch URL to embed URL correctly', () => {
-        // Mocking the constructor parts that are not needed for this test
-        document.getElementById = jest.fn();
-        document.getElementsByClassName = jest.fn();
-        document.querySelectorAll = jest.fn();
+        // Mocking the DOM elements to provide necessary mock values
+        document.getElementById = jest.fn(() => document.createElement('div'));
+        document.getElementsByClassName = jest.fn(() => [document.createElement('button')]);
+        document.querySelectorAll = jest.fn(() => [document.createElement('div')]);
 
-        // Test case for transformVideoUrl
         const videoModal = new VideoModal('dummyModalId', 'dummyVideoFrameId', 'dummyCloseButtonClass', 'dummyVideoCardClass');
         const inputUrl = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
         const expectedUrl = 'https://www.youtube.com/embed/dQw4w9WgXcQ';