Skip to content

Commit

Permalink
add comments to puppeteer and calendar.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimseongah
kimseongah committed Jun 5, 2024
1 parent c33d5a0 commit 079c0d3
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 25 deletions.
57 changes: 42 additions & 15 deletions source/calendar/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,17 @@ var currDate = new Date();
var month = currDate.getMonth();
var year = currDate.getFullYear();

// Update the global date variables
/**
* Updates the global date variables to the current date.
*/
function updateDateGlobals() {
month = currDate.getMonth();
year = currDate.getFullYear();
}

// When page loads
/**
* Initializes the page when the DOM content is fully loaded.
*/
function init() {
// Initiaze the jump buttons
displayJump(year - 6, year + 5);
Expand All @@ -33,7 +37,9 @@ function init() {


// FUNCTIONS

/**
* Initializes the buttons for adding tasks, navigating months, and other functionalities.
*/
function initButtons() {

const addTaskBtn = document.querySelector(".add-task-btn");
Expand All @@ -50,13 +56,15 @@ function initButtons() {
nextBtn.addEventListener('click', next);

// JUMP HEADER BUTTONS
// LIST OF MONTHS
let monthJumpBtn = document.querySelectorAll(".month-btn");
monthJumpBtn.forEach(btn => {
btn.addEventListener("click", () => {
let monthValue = btn.getAttribute("value");
jump(monthValue, year);
});
});
// LIST OF YEARS
let yearJumpBtn = document.querySelectorAll(".year-btn");
yearJumpBtn.forEach(btn => {
btn.addEventListener("click", () => {
Expand Down Expand Up @@ -88,7 +96,9 @@ function next(){
displayCalendar();
}

// Function to goto previous month
/**
* Updates the global currDate to the previous month and displays the previous month's calendar.
*/
function prev() {
// Decrement the month
currDate.setMonth(currDate.getMonth() - 1);
Expand All @@ -97,12 +107,16 @@ function prev() {
}

/**
* Adds task to task list upon "Add Task" button click.
* Adds a task to the task list upon "Add Task" button click.
* @param {boolean} [loadTask=false] - Indicates whether the task is being loaded from storage.
* @returns {HTMLElement} - The newly created task element.
*/
function addTask(loadTask = false) {
// add a task to an element of task container
const taskList = document.querySelector(".task-container");
const task = document.createElement("li");
task.setAttribute("class", "task");
// add it at the first row
task.insertAdjacentHTML("beforeend", `
<div class="check-input-wrap">
<button id="task1" class="task-checkbox"></button>
Expand Down Expand Up @@ -216,7 +230,8 @@ function taskButtonsFunctionality(task) {
}

/**
* Saves the completed tasks per day
* Saves the completed tasks for a specific day.
* @param {HTMLElement} completedTaskElement - The task element that was completed.
*/
function saveCompleted(completedTaskElement) {
let data = getJournal();
Expand All @@ -233,7 +248,9 @@ function saveCompleted(completedTaskElement) {
displayCalendar();
}

// Function to display the calendar
/**
* Displays the calendar for the current month.
*/
function displayCalendar() {
// Get body and clear current calendar
let tbody = document.getElementById("tbody-calendar");
Expand Down Expand Up @@ -329,6 +346,11 @@ function displayCalendar() {
document.getElementById('year-dropdown').style.left = monthWidth + 5 + 'px';
}

/**
* Loads cell data such as rating, productivity, and tasks for a specific date in the calendar.
* @param {HTMLElement} cellData - The table cell element to populate with data.
* @param {Date} currCalendarMonth - The current month being displayed in the calendar.
*/
function loadCellDataTest(cellData, currCalendarMonth) {
let journals = getJournal();
let dateText = currCalendarMonth.toLocaleDateString();
Expand Down Expand Up @@ -401,7 +423,11 @@ function loadCellDataTest(cellData, currCalendarMonth) {
cellData.appendChild(aLink);
}

// Generate dropdown year range
/**
* Generates a dropdown for year and month selection.
* @param {number} startYear - The start year for the dropdown range.
* @param {number} endYear - The end year for the dropdown range.
*/
function displayJump(startYear, endYear) {
// YEARS
let yearDropdown = document.getElementById("year-dropdown")
Expand Down Expand Up @@ -463,7 +489,9 @@ function calendarHeader(){
thead.appendChild(headerRow);
}

// Resize header if width of window decreases
/**
* Adjusts the month header text based on the window width.
*/
function windowWidth() {
if (window.innerWidth < 920) {
// Initialize list of abbreviated months
Expand Down Expand Up @@ -523,13 +551,12 @@ function saveToStorage(data, dateText, key, value) {
}

/**
* Load journal entry from local storage
*
* @param {string} data - journal entry text in parsed json format
* @param {string} dateText - date of the journal entry in locale date string format
* @param {string} key - key to get the value from
* Load journal entry from local storage.
*
* @returns {string} value of the key in the data
* @param {Object} data - Journal entry text in parsed JSON format.
* @param {string} dateText - Date of the journal entry in locale date string format.
* @param {string} key - Key to get the value from.
* @returns {string|null} - Value of the key in the data or null if not found.
*/
function loadFromStorage(data, dateText, key) {
if (!(dateText in data)) {
Expand Down
39 changes: 29 additions & 10 deletions testing/puppeteer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,66 +174,85 @@ describe('Homepage task list tests', () => {
it('Add a task, set its title, and choose a color', async () => {
console.log('Testing task addition, title setting, and color selection...');

// Setting the viewport size for the page
await page.setViewport({ width: 1200, height: 800 });


// Clicking the button to add a new task
await page.click('.add-task-btn');

// Selector for the input field of the newly added task
const taskInputSelector = '.task-container .task:last-child .task-input';
await page.waitForSelector(taskInputSelector);
const taskInput = await page.$(taskInputSelector);

// Typing the title for the new task
const taskTitle = 'New Task Title for Testing';
await taskInput.type(taskTitle);

// Selector for the color button and choosing a color
const colorButton = '.task-container .task:last-child .color-buttons';
const colorButtonSelector = '.task-container .task:last-child .color-button';
await page.hover(colorButton);
await page.click(colorButtonSelector);

// Evaluating and retrieving the entered title from the DOM
const enteredTitle = await page.evaluate(selector => {
return document.querySelector(selector).textContent;
}, taskInputSelector);

// Evaluating and retrieving the background color of the new task
const backgroundColor = await page.evaluate(selector => {
const task = document.querySelector(selector);
return window.getComputedStyle(task).backgroundColor;
}, '.task-container .task:last-child');

// Asserting that the entered title matches the expected title
expect(enteredTitle).toBe(taskTitle);
expect(backgroundColor).toBe('rgb(195, 128, 204)');

// Asserting that the background color matches the expected color
expect(backgroundColor).toBe('rgb(195, 128, 204)');
});

it('Edit the task and delete it', async() => {

it('Edit the task and delete it', async () => {
// Selector for the input field of the last task
const taskInputSelector = '.task-container .task:last-child .task-input';
await page.waitForSelector(taskInputSelector);
const taskInput = await page.$(taskInputSelector);


// Clearing the current task title by pressing 'Backspace' multiple times
for (let i = 0; i < 27; i++) {
await taskInput.press('Backspace');
await taskInput.press('Backspace');
}


// Typing the new title for the task
const taskTitle = 'Editing Task Title';
await taskInput.type(taskTitle);

// Hovering over the color button and selecting a new color
const colorButton = '.task-container .task:last-child .color-buttons';
await page.hover(colorButton);

await page.evaluate(() => {
const colorButtonSelector = '.task-container .task:last-child .color-buttons #blue';
document.querySelector(colorButtonSelector).click();
});
});

// Evaluating and retrieving the entered title from the DOM
const enteredTitle = await page.evaluate(selector => {
return document.querySelector(selector).textContent;
}, taskInputSelector);

// Evaluating and retrieving the background color of the edited task
const backgroundColor = await page.evaluate(selector => {
const task = document.querySelector(selector);
return window.getComputedStyle(task).backgroundColor;
}, '.task-container .task:last-child');

// Asserting that the entered title matches the expected title
expect(enteredTitle).toBe(taskTitle);
expect(backgroundColor).toBe('rgb(107, 177, 217)');

// Asserting that the background color matches the expected color
expect(backgroundColor).toBe('rgb(107, 177, 217)');
});

// Resize the window to make the task-list slide out
Expand Down

0 comments on commit 079c0d3

Please sign in to comment.