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

June 5th Deployment after initial testing

README.md

@@ -5,6 +5,32 @@
 
 Developer Journal
 
+## Usage
+
+To use the developer journal, visit the app site [here](https://cse110-sp24-group26.github.io/final-project/). You should be greeted by a page that looks like the image below. The high level idea of this project is that you can log markdown entries to certain days and revisit them in the future.
+
+![home page](landing.png)
+
+### Tabs and Entries
+
+The journal allows you to create and edit a single entry for each unique day of the calendar. You can do so by selecting a date on the calendar. This will open a tab where you can edit the entry for that day in the editor. You can have multiple tabs open, and when you're done editing an entry, you can close out the tab by hitting the x on the tab label.
+
+### Calendar Navigation
+
+To navigate to different months and years of the calendar, you can use the arrows to go to next and previous months, or click on the month or year text and select which ever you want from the dropdown.
+
+### Tags
+
+When a tab is open for a day's entry, you can click the tags underneath the calendar to toggle which tags you want to apply to the day. Clicking toggled tags once more allows you to untoggle them for that day. You can right-click the tags to rename them, allowing you to categorize your entries however you please.
+
+### Search
+
+The search bar at the very top center of the screen allows you to search for entries based on their content. For example, by selecting the bar and typing in `UI planning`, you will be shown entries that contain `UI planning` if any. You may also type in dates in the format of `2024-06-01` to quick open the entry for that date if you've opened it before. Finally, you may search for entries with certain tags.
+
+### Text Editor
+
+When typing out your entry, you can enclose your text with underscores `_like so_` to italicize your text, with two asterisks `**like so**` to bolden your text, or with both to italicize AND bolden `**_like so_**`. You can also start lines with `#` to mark it as a heading.
+
 ## Development Process
 1. During team meetings or on Slack, decide what needs to be worked on in terms of bugs, features, documentation, etc and create issues list
 2. For each issue in the list, open an issue accoridng to one of several provided templates. If applicable make sure to assign the person working on that feature in the issue itself

cypress/component/.gitignore

@@ -0,0 +1 @@
+!.gitignore

cypress/component/search_bar.cy.js

@@ -0,0 +1,60 @@
+import {initDB, saveEntry, searchQuery } from '../../src/state/database.js'
+
+describe('Search Bar Component Test', () => {
+    beforeEach(() => {
+        cy.visit('../../build/src/index.html'); 
+    });
+
+    cy.on('uncaught:exception', (err, runnable) => {
+        console.error('An error occurred:', err.message);
+        return false;
+    });
+
+    it('Search Bar Component Test', () => {
+        cy.log("Search Bar Component Test");
+        cy.wrap(initDB()).then(() => {
+            return cy.wrap(saveEntry('2024-10-11', "Text Content", [0, 1]));
+        }).then(() => {
+            cy.get('#search-field').should('be.visible').type('Text Content');
+            cy.get('#expandable-select').find('div').should('have.length', 1)
+                .and((options) => {
+                    expect(options.first()).to.contain.text('2024-10-11 "Text Content..."');
+                });
+            cy.get('#expandable-select').find('div').first().click();
+
+            const newDate = new Date('2024-10-11T00:00:00');
+
+            cy.get('m-tab').should('exist').and('have.attr', 'date', newDate.toDateString());
+        });
+
+        cy.wrap(initDB()).then(() => {
+            return cy.wrap(saveEntry('2024-10-29', "Text Content", [0, 1]));
+        }).then(() => {
+            cy.get('#search-field').should('be.visible').type('29');
+            cy.get('#expandable-select').find('div').should('have.length', 1)
+                .and((options) => {
+                    expect(options.first()).to.contain.text('2024-10-29 ');
+                });
+            cy.get('#expandable-select').find('div').first().click();
+
+            const newDate = new Date('2024-10-29T00:00:00');
+
+            cy.get('m-tab').should('exist').and('have.attr', 'date', newDate.toDateString());
+        });
+
+        cy.wrap(initDB()).then(() => {
+            return cy.wrap(saveEntry('2024-10-6', "Text Content", [0, 2]));
+        }).then(() => {
+            cy.get('#search-field').should('be.visible').type('Tag 3');
+            cy.get('#expandable-select').find('div').should('have.length', 1)
+                .and((options) => {
+                    expect(options.first()).to.contain.text('2024-10-6 [tag] Tag 3');
+                });
+            cy.get('#expandable-select').find('div').first().click();
+
+            const newDate = new Date('2024-10-06T00:00:00');
+
+            cy.get('m-tab').should('exist').and('have.attr', 'date', newDate.toDateString());
+        });
+    });
+});

cypress/component/tags.cy.js

@@ -0,0 +1,58 @@
+
+//for future reference it is assumed that the date that is initially selected is today's date
+describe('Tags Test', () => {
+    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;
+    });
+
+    //checks if all tags are initially inactive 
+    it('inital tag state', () => {
+        cy.log("Initial Tag State");
+
+        //constant number of tags 
+        const TAGS_COUNT = 6;
+
+        //checking that each tag is inactive up inital start up
+        for(let i = 0; i< TAGS_COUNT; i++){
+            cy.get(`#tag-${i}`).should('have.class', 'tag-inactive');
+        }
+
+    });
+
+    //renames a tag and checks if its properly updated
+    it('tag renaming', async () => {
+        cy.log("Tag Renaming");
+
+        //providing a fixed reponse to the subsequent prompt 
+        cy.window().then(win => {
+            cy.stub(win, 'prompt').returns('New Tag Name');
+        });
+
+        //right-clicking tag-0
+        await cy.get('#tag-0').find('button').rightclick();
+
+        //checking if tag name has been updated
+        cy.get('#tag-0').within(() => {
+            cy.get('button').should('have.text', 'New Tag Name');
+        });
+
+    });
+
+    //toggles to active and checks if its properly updated
+    it('tag toggling', async () => {
+        cy.log("Tag Toggling");
+
+        //initial click of tag-0 on current date
+        await cy.get('#tag-0').find('button').click();
+
+        //checking if tag selection was saved (only tag-0 should be active)
+        cy.get('#tag-0').should('have.class', 'tag-active');
+    });
+
+  })

cypress/e2e/application.cy.js

@@ -0,0 +1,54 @@
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+describe('Overall Test', () => {
+	it('basic search test', () => {
+		cy.visit('../../build/src/index.html');
+		const editor = cy.get('#text-editor');
+		editor.type("Text Query");
+
+		const search = cy.get('m-search-bar').find('#search-field');
+		search.type("Text ** \n# hello _italic_ ** bold __");
+		sleep(100);
+		search.type('{enter}');
+		search.type('{downArrow}');
+		search.type('{upArrow}');
+
+		cy.get('.selected').should('exist');
+
+		cy.reload();
+	});
+
+	it('open date test', () => {
+		cy.visit('../../build/src/index.html');
+
+		const first = cy.get("#1");
+		first.click();
+		const second = cy.get("#2");
+		second.click();
+
+		let childrenCount;
+		cy.get('.tabs').children().then(children => {
+			childrenCount = children.length;
+			expect(childrenCount).to.be.greaterThan(2);
+		});
+
+		const select = cy.get('.tab-button').first();
+		select.click();
+
+		const close = cy.get(".close-button").first();
+		close.click();
+
+		cy.get('.tabs').children().then(children => {
+			expect(children.length).to.equal(childrenCount - 1);
+		});
+
+	});
+
+	it('change tag test', () => {
+		cy.visit('../../build/src/index.html');
+		const tag = cy.get('#tag-0').find('button');
+		tag.click();
+	});
+})

cypress/unit/search_bar.cy.js

@@ -2,7 +2,7 @@ import {initDB, saveEntry, searchQuery } from '../../src/state/database.js'
 
 describe('Search Bar Test', () => {
     beforeEach(() => {
-        cy.visit('../../src/index.html'); 
+        cy.visit('../../build/src/index.html'); 
     });
 
     cy.on('uncaught:exception', (err, runnable) => {
@@ -22,4 +22,4 @@ describe('Search Bar Test', () => {
                 });
         });
     });
-  })
+  })