general improvements (#483)

* changes * add m/M shortcut for side menu * add tests for shortcuts --------- Co-authored-by: Andi Braimllari <>
OpenCovenant · May 6, 2024 · 9d1dd3e · 9d1dd3e
1 parent 6f0b26e
commit 9d1dd3e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 6 deletions.
diff --git a/cypress/e2e/general-flows.cy.js b/cypress/e2e/general-flows.cy.js
@@ -31,12 +31,12 @@ describe("general flows", () => {
 
     it("should mark typos in the editor", () => {
         cy.get('[data-test="editor"]').type("gabmim ");
-        cy.get('[data-test="editor"] > p > .typo').should("be.visible");
+        cy.get('.typo').should("be.visible");
     });
 
     it("should mark loanwords in the editor", () => {
         cy.get('[data-test="editor"]').type("lider ");
-        cy.get('[data-test="editor"] > p > .loanword').should("be.visible");
+        cy.get('.loanword').should("be.visible");
     });
 
     it("should open and close the side menu as expected", () => {
@@ -207,7 +207,7 @@ describe("general flows", () => {
             .find('[data-test="blur-marking-button"]')
             .click();
         cy.get(".typo").first().click();
-        cy.get("#editor > p > .typo")
+        cy.get(".typo")
             .should("have.length", 3)
             .should("be.visible");
 
@@ -216,15 +216,15 @@ describe("general flows", () => {
             .first()
             .click();
         cy.get(".typo").first().click();
-        cy.get("#editor > p > .typo")
+        cy.get(".typo")
             .should("have.length", 2)
             .should("be.visible");
 
         cy.get('[data-test="marking-card"]')
             .find('[data-test="suggestion"]')
             .first()
             .click();
-        cy.get("#editor > p > .typo")
+        cy.get(".typo")
             .should("have.length", 1)
             .should("be.visible");
 

diff --git a/cypress/e2e/shortcuts.cy.js b/cypress/e2e/shortcuts.cy.js
@@ -37,6 +37,12 @@ describe("Shortcuts", () => {
             });
         });
 
+        cy.get("#offcanvasStart").should("not.be.visible");
+        cy.get("body").type("m");
+        cy.get("#offcanvasStart").should("be.visible");
+        cy.get("body").type("M");
+        cy.get("#offcanvasStart").should("not.be.visible");
+
         cy.get('[data-test="modal-dialog"]').should("not.be.visible");
         cy.get("body").type("h");
         cy.get('[data-test="modal-dialog"]').should("be.visible");
@@ -76,6 +82,12 @@ describe("Shortcuts", () => {
             });
         });
 
+        cy.get("#offcanvasStart").should("not.be.visible");
+        cy.get("body").type("M");
+        cy.get("#offcanvasStart").should("be.visible");
+        cy.get("body").type("m");
+        cy.get("#offcanvasStart").should("not.be.visible");
+
         cy.get('[data-test="modal-dialog"]').should("not.be.visible");
         cy.get("body").type("h");
         cy.get('[data-test="modal-dialog"]').should("be.visible");

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -7,6 +7,7 @@
     >
         <div class="header-name-gear-icon">
             <button
+                id='off-canvas-start-button'
                 class="off-canvas-start-button"
                 [ngClass]="{
                     'header-button-dark-mode': darkModeService.isDarkMode

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -403,7 +403,7 @@
                                     processedText?.markings?.[
                                         highlightedMarkingIndex
                                     ]?.type
-                                }}"
+                                }}-marking-header"
                                 data-test="highlighted-marking"
                                 >{{
                                     getTextOfMarking(highlightedMarkingIndex)

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -1409,6 +1409,10 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
                         this.copyToClipboard();
                         return;
                     }
+                    case 'm':
+                    case 'M': {
+                        document.getElementById('off-canvas-start-button')!.click();
+                    }
                 }
             }