Merge pull request #114 from cse110-sp24-group26/staging

Staging

README.md

@@ -63,7 +63,7 @@ Development branches are to be named in the form of:
 - CSS: use rem as much as possible instead of px
 - Tab size: 4 spaces
 - Lines less than 100 characters
-- pascalCase
+- lowerCamelCase
 - Same line curly braces
 - Every function is documented, summary for complex files and funcctions with additional comments for complex logic, present tense
 - Include examples in comments for complex functions
@@ -88,7 +88,7 @@ Make sure to use our git commit message template when possible
 
 ## Additional Notes
 1. Make sure to follow our cipipeline when possible. I.e. create an issue and feature for each task. Once finished **submit a pull request to the staging branch NOT main**.
-2. Source files are present in the `src` directory.
+2. Source files are present in the `src` directory which you should be to host directly (i.e. `serve .` or LivePreview) to actually use the application
 3. Test files are present under `cypress/{e2e,component,unit}`
 4. Use `npm run docs` for generating documentation (locally) and `npm test` for running tests (in headless mode)
 5. Use `npm run lint` to run linter

cypress/component/calendar.cy.js

@@ -0,0 +1,121 @@
+describe('Initial Load Calendar Tests', () => {
+    beforeEach(() => {
+        //visting the html file
+        cy.visit('../../build/src/index.html');
+    });
+
+    cy.on('uncaught:exception', (err, runnable) => {
+        console.error('An error occurred:', err.message);
+        return false;
+    });
+
+    it ('Initial Calendar month', () => {
+        const date = new Date();
+        const currentMonth = date.getMonth();
+
+        cy.get('#month').invoke('val').then((monthNum) => {
+            expect(monthNum).to.equal(currentMonth.toString());
+        });
+    })
+
+    it('Initial Calendar year', () => {
+        const date = new Date();
+        const currentYear = date.getFullYear();
+
+        cy.get('#year').invoke('val').then((value) => {
+            cy.log("Selected value is: " + value);
+            expect(value).to.equal(currentYear.toString());
+        });
+    })
+
+    it('Initial current month dates', () => {
+        const date = new Date();
+        const month = date.getMonth();
+        const year = date.getFullYear();
+
+        const start = new Date(year, month, 1).getDay();
+        const endDate = new Date(year, month + 1, 0).getDate();
+        const end = new Date(year, month, endDate).getDay();
+        const endDatePrev = new Date(year, month, 0).getDate();
+        const expectedItems = [];
+
+        let added = 0;
+
+        for (let i = start; i > 0; i--) {
+            expectedItems.push((endDatePrev- i + 1).toString());
+            added += 1;
+        }
+
+        for (let i = 1; i <= endDate; i++) {
+            expectedItems.push(i.toString());
+            added += 1;
+        }
+
+        for (let i = end; i < 6; i++) {
+            expectedItems.push((i - end + 1).toString());
+            added += 1;
+        }
+
+        cy.get('.dates li').each((item, index) => {
+            cy.wrap(item).should('have.text', expectedItems[index]);
+        });
+    })
+
+    it('Initial currently selected date', () => {
+        const todaysDate = new Date().getDate();
+        cy.get(`.dates li.${'today'} button.${'selected'}`).should('have.text', todaysDate.toString());
+    })
+})
+
+describe('Calendar Navigation/Scrolling Tests', () => {
+    beforeEach(() => {
+        //visting the html file
+        cy.visit('../../build/src/index.html');
+    });
+
+    cy.on('uncaught:exception', (err, runnable) => {
+        console.error('An error occurred:', err.message);
+        return false;
+    });
+
+    it('Checking correct month and year with next nav', () => {
+        let date = new Date();
+        let nextMonth = (date.getMonth() + 1) % 12;
+        let year = date.getFullYear();
+
+        if (nextMonth === 0) {
+            year += 1;
+        }
+
+        cy.get('#next').click();
+
+        cy.get('#month').invoke('val').then((monthNum) => {
+            expect(monthNum).to.equal(nextMonth.toString());
+        });
+
+        cy.get('#year').invoke('val').then((yearNum) => {
+            expect(yearNum).to.equal(year.toString());
+        });
+    })
+
+    it('Checking correct month and year with prev nav', () => {
+        let date = new Date();
+        let prevMonth = (date.getMonth() - 1);
+        let year = date.getFullYear();
+
+        if (prevMonth === -1) {
+            year -= 1;
+            prevMonth = 11
+        }
+
+        cy.get('#prev').click();
+
+        cy.get('#month').invoke('val').then((monthNum) => {
+            expect(monthNum).to.equal(prevMonth.toString());
+        });
+
+        cy.get('#year').invoke('val').then((yearNum) => {
+            expect(yearNum).to.equal(year.toString());
+        });
+    })
+})

cypress/component/editor.cy.js

@@ -0,0 +1,19 @@
+describe('Markdown Editor Tests', () => {
+    beforeEach(() => {
+        cy.visit('../../build/src/index.html');
+    });
+
+    it('Text Saved In Each Entry', () => {
+        cy.get('#text-editor').type('hello!');
+        cy.reload();
+        cy.get('#text-editor').should('contain', 'hello!');
+    });
+
+    it('Apply Markdown Formatting To Selected Text', () => {
+        cy.get('#text-editor').type('# Heading\n**Bold**\n_Italics_');
+        //finds the descendent DOM elements for each span class formatting from main_editor.js
+        cy.get('#text-editor').find('span.editor-bold').should('contain', 'Bold');
+        cy.get('#text-editor').find('span.editor-italic').should('contain', 'Italics');
+        cy.get('#text-editor').find('span.editor-heading').should('contain', 'Heading');
+    });
+})

cypress/component/tabs.cy.js

@@ -0,0 +1,144 @@
+import {publishOpenDateEvent} from '../../src/state/events.js'
+
+
+
+
+// cypress/integration/tab_spec.js
+describe('Tab Functionality', () => {
+    beforeEach(() => {
+         //visting the html file
+         cy.visit('../../build/src/index.html');
+        // Clear the local storage before each test to start fresh
+        cy.clearLocalStorage();
+    });
+
+
+
+    // Quick note: When loading into website, todays date should always be a tab unless closed.
+
+
+    // Test: Initial tab state when first loaded in
+    // Ensures that a tab with today's date is present when the app first loads
+    it('Initial tab state when first loaded in', () => {
+        // Mock local storage with pre-saved tabs
+        const today = new Date().toDateString();
+
+
+        cy.get('m-tab').should('have.length', 1);
+        cy.get('m-tab').should('have.attr', 'date', today);
+        cy.get(`m-tab[date="${today}"]`).should('exist')
+
+
+    });
+
+
+
+
+    // Test: Load saved tabs on startup
+    // Verifies that tabs saved in local storage are loaded when the app reloads
+    it('should load saved tabs on startup', () => {
+        // Mock local storage with pre-saved tabs
+        const today = new Date().toDateString();
+        const tabs = [today, '2024-06-01', '2024-06-02'];
+        localStorage.setItem('user-tabs', JSON.stringify(tabs));
+
+        cy.reload();
+
+        cy.get('m-tab').should('have.length', tabs.length);
+        tabs.forEach((date, index) => {
+            cy.get('m-tab').eq(index).should('have.attr', 'date', date);
+        });
+    });
+
+
+
+
+    // Test: Add a new tab when a date is opened
+    // Ensures that opening a new date adds a new tab with that date
+    it('should add a new tab when a date is opened', () => {
+        const date = new Date('2000-06-04');
+
+        // Simulate opening a date
+        cy.window().then((win) => {
+            win.publishOpenDateEvent(date);
+        });
+
+        cy.get('m-tab').should('have.length', 2); // todays date and new date
+        cy.get(`m-tab[date="${date.toDateString()}"]`).should('exist')
+    });
+
+
+
+
+    // Test: Select a tab when clicked
+    // Checks that clicking a tab selects it (adds 'selected' class)
+    it('should select a tab when clicked', () => {
+        const date = new Date('2005-11-03');
+
+        // Simulate opening a date
+        cy.window().then((win) => {
+            win.publishOpenDateEvent(date);
+        });
+
+
+        cy.get(`m-tab[date="${date.toDateString()}"]`).click();
+        cy.get(`m-tab[date="${date.toDateString()}"]`).should('have.class', 'selected');
+    });
+
+
+    // Test: Close a tab when the close button is clicked
+    // Ensures that clicking the close button on a tab removes it
+    it('should close a tab when the close button is clicked', () => {
+        const date1 = new Date('2004-06-05');
+        const date2 = new Date('2004-06-06');
+
+        // Simulate opening dates
+        cy.window().then((win) => {
+            win.publishOpenDateEvent(date1);
+            win.publishOpenDateEvent(date2);
+        });
+
+
+
+
+        cy.get('m-tab').should('have.length', 3); /// todays date and 2 new dates
+
+        // Close the first tab
+        cy.get('m-tab').first().find('.close-button').click();
+        cy.get('m-tab').should('have.length', 2);
+        cy.get('m-tab').should('have.attr', 'date', date1.toDateString());
+    });
+
+
+    // Test: Clear all tabs
+    // Verifies that calling `clearAllSavedTabs` clears all tabs
+    it('should clear all tabs when clearAllSavedTabs is called', () => {
+        const tabs = ['2024-06-07', '2024-06-08'];
+        localStorage.setItem('user-tabs', JSON.stringify(tabs));
+
+        cy.reload();
+
+        cy.window().then((win) => {
+            win.clearAllSavedTabs();
+        });
+
+        cy.get('m-tab').should('have.length', 0);
+    });
+
+
+    // Test: Prevent duplicate dates from opening new tabs
+    // Ensures that opening the same date multiple times does not create duplicate tabs
+    it('when a dupilcate date is opened to new tab should be open', () => {
+        const date1 = new Date('2024-06-05');
+
+        // Simulate opening dates
+        cy.window().then((win) => {
+            win.publishOpenDateEvent(date1);
+            win.publishOpenDateEvent(date1);
+            win.publishOpenDateEvent(date1);
+        });
+
+        cy.get('m-tab').should('have.length', 2); // todays date and new date
+    });
+
+});

cypress/component/tags.cy.js

@@ -1,4 +1,3 @@
-
 //for future reference it is assumed that the date that is initially selected is today's date
 describe('Tags Test', () => {
     beforeEach(() => {