Skip to content

Commit

Permalink
Merge pull request #104 from WSU-4110/Jesse_developMagic
Browse files Browse the repository at this point in the history 
Jesse develop magic
  • Loading branch information
@JesseNaser
JesseNaser authored Apr 16, 2024
2 parents 22a9b5c + 0410fa3 commit 2af7586
Show file tree
Hide file tree
Showing 7 changed files with 235 additions and 220 deletions.
32 changes: 18 additions & 14 deletions tests/attachCloseButtonEvent.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
const VideoModal = require('../scripts/videopage');

describe('VideoModal - attachCloseButtonEvent', () => {
beforeEach(() => {
// Mocking the DOM elements needed
const closeButton = { onclick: null };
beforeEach(() => {
// Mocking the DOM elements needed
const closeButton = {
onclick: null
};

document.getElementsByClassName = jest.fn().mockReturnValue([closeButton]);
document.querySelectorAll = jest.fn().mockReturnValue([]); // Not used in this specific test.
document.getElementsByClassName = jest.fn().mockReturnValue([closeButton]);
document.querySelectorAll = jest.fn().mockReturnValue([]); // Not used in this specific test.

// Additional mocking to ensure no unintended executions
document.getElementById = jest.fn().mockReturnValue({style: {}});
global.fetch = jest.fn(); // Mock fetch as it might be called in class constructor or methods
});
// Additional mocking to ensure no unintended executions
document.getElementById = jest.fn().mockReturnValue({
style: {}
});
global.fetch = jest.fn(); // Mock fetch as it might be called in class constructor or methods
});

it('sets onclick event on closeButton', () => {
const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
videoModal.attachCloseButtonEvent();
it('sets onclick event on closeButton', () => {
const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
videoModal.attachCloseButtonEvent();

expect(typeof videoModal.closeButton.onclick).toBe('function');
});
expect(typeof videoModal.closeButton.onclick).toBe('function');
});
});
133 changes: 70 additions & 63 deletions tests/closeModal.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,75 +2,82 @@ const VideoModal = require('../scripts/videopage');

// Mock for window.fetch
global.fetch = jest.fn(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({likes: 10, liked: true})
})
Promise.resolve({
ok: true,
json: () => Promise.resolve({
likes: 10,
liked: true
})
})
);

describe('VideoModal - closeModal', () => {
beforeEach(() => {
// Mocking DOM elements and their methods
document.getElementById = jest.fn((id) => {
if (id === 'modal') {
return {
style: {
display: ''
}
}; // Mock modal element
}
if (id === 'videoFrame') {
return {
src: ''
}; // Mock videoFrame element
}
return null;
});
beforeEach(() => {
// Mocking DOM elements and their methods
document.getElementById = jest.fn((id) => {
if (id === 'modal') {
return {
style: {
display: ''
}
}; // Mock modal element
}
if (id === 'videoFrame') {
return {
src: ''
}; // Mock videoFrame element
}
return null;
});

document.getElementsByClassName = jest.fn(className => {
if (className === 'close') return [{
onclick: jest.fn()
}];
return [];
});
document.getElementsByClassName = jest.fn(className => {
if (className === 'close') return [{
onclick: jest.fn()
}];
return [];
});

document.querySelectorAll = jest.fn(selector => {
if (selector === '.video-card') {
return [{
getAttribute: jest.fn(name => {
if (name === 'data-video-id') return '123';
}),
querySelector: jest.fn(() => ({
textContent: '',
classList: { toggle: jest.fn() },
innerHTML: '',
})),
addEventListener: jest.fn()
}];
} else if (selector === '.like-btn') {
return [{
addEventListener: jest.fn(),
classList: { toggle: jest.fn() },
nextElementSibling: {
textContent: ''
},
closest: jest.fn(() => ({
getAttribute: jest.fn(() => '123')
}))
}];
}
return [];
});
document.querySelectorAll = jest.fn(selector => {
if (selector === '.video-card') {
return [{
getAttribute: jest.fn(name => {
if (name === 'data-video-id') return '123';
}),
querySelector: jest.fn(() => ({
textContent: '',
classList: {
toggle: jest.fn()
},
innerHTML: '',
})),
addEventListener: jest.fn()
}];
} else if (selector === '.like-btn') {
return [{
addEventListener: jest.fn(),
classList: {
toggle: jest.fn()
},
nextElementSibling: {
textContent: ''
},
closest: jest.fn(() => ({
getAttribute: jest.fn(() => '123')
}))
}];
}
return [];
});

fetch.mockClear();
});
fetch.mockClear();
});

it('hides modal and clears videoFrame src', () => {
const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
videoModal.openModal('https://www.example.com');
videoModal.closeModal();
it('hides modal and clears videoFrame src', () => {
const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
videoModal.openModal('https://www.example.com');
videoModal.closeModal();

expect(videoModal.modal.style.display).toBe('none');
expect(videoModal.videoFrame.src).toBe('');
});
expect(videoModal.modal.style.display).toBe('none');
expect(videoModal.videoFrame.src).toBe('');
});
});
82 changes: 41 additions & 41 deletions tests/constructor.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
const VideoModal = require('../scripts/videopage');

describe("VideoModal Class", () => {
// Prepare your DOM elements and other required mocks
beforeAll(() => {
document.body.innerHTML = `
// Prepare your DOM elements and other required mocks
beforeAll(() => {
document.body.innerHTML = `
<div id="modal"></div>
<iframe id="videoFrame"></iframe>
<button class="close"></button>
Expand All @@ -17,42 +17,42 @@ describe("VideoModal Class", () => {
</div>
`;

// Mock fetch initially
global.fetch = jest.fn(() => Promise.resolve({
ok: true,
json: () => Promise.resolve({
likes: 1,
liked: true
})
}));
});

afterEach(() => {
// Restore the mocks back to the original state
jest.restoreAllMocks();
});

test('initializes class properties correctly', () => {
const videoModal = new VideoModal("modal", "videoFrame", "close", ".video-card");

expect(videoModal.modal).toBe(document.getElementById("modal"));
expect(videoModal.videoFrame).toBe(document.getElementById("videoFrame"));
expect(videoModal.closeButton).toBe(document.getElementsByClassName("close")[0]);
expect(videoModal.videoCards.length).toBe(1);
});

test('calls fetch and updates like state for video cards', async () => {
const videoModal = new VideoModal("modal", "videoFrame", "close", ".video-card");
await videoModal.updateAllLikeStates();

// Checking if fetch has been called with the correct URL
expect(fetch).toHaveBeenCalledWith(`/api/likes?videoId=123`);

// Ensure the DOM updates were made correctly
const likeCountElement = document.querySelector('.like-count');
const likeButton = document.querySelector('.like-btn');
expect(likeCountElement.textContent).toBe("1 Likes");
expect(likeButton.classList.contains('liked')).toBe(true);
expect(likeButton.innerHTML).toContain('Liked');
});
// Mock fetch initially
global.fetch = jest.fn(() => Promise.resolve({
ok: true,
json: () => Promise.resolve({
likes: 1,
liked: true
})
}));
});

afterEach(() => {
// Restore the mocks back to the original state
jest.restoreAllMocks();
});

test('initializes class properties correctly', () => {
const videoModal = new VideoModal("modal", "videoFrame", "close", ".video-card");

expect(videoModal.modal).toBe(document.getElementById("modal"));
expect(videoModal.videoFrame).toBe(document.getElementById("videoFrame"));
expect(videoModal.closeButton).toBe(document.getElementsByClassName("close")[0]);
expect(videoModal.videoCards.length).toBe(1);
});

test('calls fetch and updates like state for video cards', async () => {
const videoModal = new VideoModal("modal", "videoFrame", "close", ".video-card");
await videoModal.updateAllLikeStates();

// Checking if fetch has been called with the correct URL
expect(fetch).toHaveBeenCalledWith(`/api/likes?videoId=123`);

// Ensure the DOM updates were made correctly
const likeCountElement = document.querySelector('.like-count');
const likeButton = document.querySelector('.like-btn');
expect(likeCountElement.textContent).toBe("1 Likes");
expect(likeButton.classList.contains('liked')).toBe(true);
expect(likeButton.innerHTML).toContain('Liked');
});
});
89 changes: 49 additions & 40 deletions tests/init.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,59 @@
const VideoModal = require('../scripts/videopage');

describe('VideoModal - init', () => {
beforeEach(() => {
// Mocking DOM elements and fetch
document.getElementById = jest.fn((id) => {
if (id === 'modal') return { style: {} };
if (id === 'videoFrame') return { src: '' };
return null;
});
beforeEach(() => {
// Mocking DOM elements and fetch
document.getElementById = jest.fn((id) => {
if (id === 'modal') return {
style: {}
};
if (id === 'videoFrame') return {
src: ''
};
return null;
});

document.getElementsByClassName = jest.fn().mockReturnValue([{
onclick: jest.fn()
}]);
document.getElementsByClassName = jest.fn().mockReturnValue([{
onclick: jest.fn()
}]);

document.querySelectorAll = jest.fn().mockReturnValue([{
addEventListener: jest.fn(),
getAttribute: jest.fn().mockReturnValue('123'),
querySelector: jest.fn().mockReturnValue({
classList: { toggle: jest.fn() },
innerHTML: '',
textContent: ''
})
}]);
document.querySelectorAll = jest.fn().mockReturnValue([{
addEventListener: jest.fn(),
getAttribute: jest.fn().mockReturnValue('123'),
querySelector: jest.fn().mockReturnValue({
classList: {
toggle: jest.fn()
},
innerHTML: '',
textContent: ''
})
}]);

// Mock fetch call used in updateAllLikeStates
global.fetch = jest.fn(() => Promise.resolve({
ok: true,
json: () => Promise.resolve({ likes: 42, liked: false })
}));
});
// Mock fetch call used in updateAllLikeStates
global.fetch = jest.fn(() => Promise.resolve({
ok: true,
json: () => Promise.resolve({
likes: 42,
liked: false
})
}));
});

it('calls methods to attach event listeners and updates like states', async () => {
// Setup
const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
videoModal.attachVideoCardsEvents = jest.fn();
videoModal.attachCloseButtonEvent = jest.fn();
videoModal.attachWindowClickEvent = jest.fn();
videoModal.updateAllLikeStates = jest.fn();
it('calls methods to attach event listeners and updates like states', async () => {
// Setup
const videoModal = new VideoModal('modal', 'videoFrame', 'close', '.video-card');
videoModal.attachVideoCardsEvents = jest.fn();
videoModal.attachCloseButtonEvent = jest.fn();
videoModal.attachWindowClickEvent = jest.fn();
videoModal.updateAllLikeStates = jest.fn();

// Act
await videoModal.init();
// Act
await videoModal.init();

// Assert
expect(videoModal.attachVideoCardsEvents).toHaveBeenCalled();
expect(videoModal.attachCloseButtonEvent).toHaveBeenCalled();
expect(videoModal.attachWindowClickEvent).toHaveBeenCalled();
expect(videoModal.updateAllLikeStates).toHaveBeenCalled();
});
// Assert
expect(videoModal.attachVideoCardsEvents).toHaveBeenCalled();
expect(videoModal.attachCloseButtonEvent).toHaveBeenCalled();
expect(videoModal.attachWindowClickEvent).toHaveBeenCalled();
expect(videoModal.updateAllLikeStates).toHaveBeenCalled();
});
});
Loading

0 comments on commit 2af7586

Please sign in to comment.