feat(a11y-table): Define a standalone table component

e2e/cypress/component/message_list.ts

@@ -0,0 +1,37 @@
+const pick = (functions) => {
+    const randomIndex = Math.floor(Math.random() * functions.length);
+    return functions[randomIndex]; // Returns a randomly selected function
+};
+
+export function rangeCheckMessages(from, to) {
+    checkMessage(from)
+    cy.get('body').type('{shift}', { release: false }); // Press Shift
+    checkMessage(to)
+    cy.get('body').type('{shift}'); // Release Shift
+}
+
+function table() {
+    return cy.get('app-virtual-scroll-table');
+}
+
+export function firstMessage() {
+    return nthMessage(0)
+}
+
+export function nthMessage(n) {
+    return table().find('tbody').eq(n);
+}
+
+export function checkMessage(n) {
+    const checkboxClick = () => nthMessage(n).find('mat-checkbox').click()
+    const ctrlMessageClick = () => nthMessage(n).click({ ctrlKey: true })
+
+    return pick([
+        checkboxClick,
+        ctrlMessageClick,
+    ])()
+}
+
+export function checkedMessages() {
+    return cy.get('tbody .mat-checkbox-checked')
+}

e2e/cypress/integration/canvastable.ts

@@ -1,38 +1,44 @@
 /// <reference types="cypress" />
 
-describe('Selecting rows in canvastable', () => {
-    function canvas() {
-        return cy.get('canvastable canvas:first-of-type');
-    }
+import { checkMessage, checkedMessages, rangeCheckMessages } from '../component/message_list.ts';
 
-    function moveButton() {
-        return cy.get('button[mattooltip*="Move"]');
-    }
+function moveButton() {
+    return cy.get('button[mattooltip*="Move"]');
+}
 
-    it('should select one row', () => {
+describe('Selecting rows in canvastable', () => {
+    it('should select and deselect one row', () => {
         cy.viewport('iphone-6');
         cy.visit('/');
 
-        // select
-        canvas().click({ x: 15, y: 40 });
+        moveButton().should('not.exist');
+        checkMessage(0)
         moveButton().should('be.visible');
-        // unselect
-        canvas().click({ x: 21, y: 41, force: true });
+        checkedMessages().should('have.length', 1)
+        checkMessage(0)
         moveButton().should('not.exist');
     })
 
     it('should select multiple rows', () => {
         cy.viewport('iphone-6');
         cy.visit('/');
 
-        canvas().trigger('mousedown', { x: 15, y: 10 });
-        for (let ndx = 0; ndx <= 5; ndx++) {
-            canvas().trigger('mousemove', { x: 20, y: 36 * ndx + 11 });
-        }
+        rangeCheckMessages(0, 5)
+
+
+        // Verify multiple checkboxes are checked
+        checkedMessages().should('have.length', 6);
+
         moveButton().should('be.visible');
 
-        // unselect by moving mouse back up
-        canvas().trigger('mousemove', { x: 21, y: 12 });
+        checkMessage(0)
+
+        // Verify count decreases
+        checkedMessages().should('have.length', 5)
+
+        rangeCheckMessages(1, 5)
+        checkedMessages().should('have.length', 0)
         moveButton().should('not.exist');
-    })
+    });
+
 })

e2e/cypress/integration/compose.ts

@@ -1,5 +1,7 @@
 /// <reference types="cypress" />
 
+import { firstMessage } from '../component/message_list.ts';
+
 describe('Composing emails', () => {
   beforeEach(async () => {
       localStorage.setItem('221:localSearchPromptDisplayed', JSON.stringify('true'));
@@ -104,10 +106,7 @@ describe('Composing emails', () => {
     });
 
     it('closing a new reply should return to inbox', () => {
-        cy.visit('/');
-        cy.wait(1000);
         cy.visit('/#Inbox:1');
-        cy.get('canvastable canvas:first-of-type').click({ x: 300, y: 10 });
         cy.get('single-mail-viewer').should('exist');
         cy.get('button[mattooltip="Reply"]').click();
         cy.get('button[mattooltip="Close draft"').click();

e2e/cypress/integration/folder-switching.ts

@@ -1,19 +1,18 @@
 /// <reference types="cypress" />
 
 describe('Switching between folders (and not-folders)', () => {
-
     function goToInbox() {
         cy.get('rmm-folderlist mat-tree-node:contains(Inbox)', {'timeout':10000}).click();
         cy.url().should('match', /\/(#Inbox)?$/);
         cy.get('rmm-folderlist mat-tree-node:contains(Inbox)').should('have.class', 'selectedFolder');
     }
 
-  it('can switch from welcome to inbox', () => {
-    localStorage.setItem('221:localSearchPromptDisplayed', JSON.stringify('true'));
-    localStorage.setItem('221:localSearchPromptDisplayed', JSON.stringify('true'));
+    it('can switch from welcome to inbox', () => {
+        localStorage.setItem('221:localSearchPromptDisplayed', JSON.stringify('true'));
+        localStorage.setItem('221:localSearchPromptDisplayed', JSON.stringify('true'));
 
-    // start of on /welcome, like a fresh new user
-    cy.visit('/welcome');
+        // start of on /welcome, like a fresh new user
+        cy.visit('/welcome');
 
         // should be able to switch to inbox...
         goToInbox();

e2e/cypress/integration/folders.ts

@@ -1,13 +1,13 @@
 /// <reference types="cypress" />
 
-describe('Folder management', () => {
-    function canvas() {
-        return cy.get('canvastable canvas:first-of-type');
-    }
+import { firstMessage } from '../component/message_list.ts'
 
+describe('Folder management', () => {
     it('should create folder at root level', () => {
+        cy.intercept('GET', '/rest/v1/email_folder/list').as('getEmailFolders');
         cy.visit('/');
-
+        cy.wait('@getEmailFolders');
+        cy.wait(5000);
         cy.get('#createFolderButton').click();
         cy.get('.mat-dialog-title').should('contain', 'Add new folder');
         cy.get('mat-dialog-container mat-dialog-content').should('contain', 'root level');
@@ -32,9 +32,9 @@ describe('Folder management', () => {
     });
 
     it('should create new draft on templates folder message click', () => {
-	cy.visit('/')
-	cy.contains('mat-tree-node', 'Templates').click()
-        canvas().click({ x: 55, y: 40 });
+        cy.visit('/')
+        cy.contains('mat-tree-node', 'Templates').click()
+        firstMessage().click();
         cy.location().should((loc) => {
             expect(loc.pathname).to.eq('/compose');
         });

e2e/cypress/integration/mailviewer.ts

@@ -1,10 +1,8 @@
 /// <reference types="cypress" />
 
-describe('Interacting with mailviewer', () => {
-    function canvas() {
-        return cy.get('canvastable canvas:first-of-type');
-    }
+import { nthMessage } from '../component/message_list.ts'
 
+describe('Interacting with mailviewer', () => {
     beforeEach(async () => {
         localStorage.setItem('221:localSearchPromptDisplayed', JSON.stringify('true'));
         localStorage.setItem('221:Global:messageSubjectDragTipShown', JSON.stringify('true'));
@@ -26,30 +24,20 @@ describe('Interacting with mailviewer', () => {
     // });
 
     it('can open an email and go back and forth in browser history', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get11');
         cy.visit('/#Inbox:11');
-
-         cy.wait('@get11', {'timeout':10000});
-        // canvas().click(400, 300);
-
         cy.hash().should('equal', '#Inbox:11');
-        /* TODO: apparently forward broke at some point
-         * in headless mode. Works normally in a proper browser
+        nthMessage(1).click();
+        cy.hash().should('equal', '#Inbox:2');
         cy.go('back');
-        cy.hash().should('not.contain', 'Inbox:11');
-        cy.go('forward');
         cy.hash().should('equal', '#Inbox:11');
+        cy.go('forward');
+        cy.hash().should('equal', '#Inbox:2');
         cy.get('button[mattooltip="Close"]').click();
         cy.hash().should('equal', '#Inbox');
-        */
     });
 
     it('can reply to an email with no "To"', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get11');
         cy.visit('/#Inbox:11')
-        cy.wait('@get11', {'timeout':10000});
-        // cy.get('#messageContents');
-
         cy.get('button[mattooltip="Reply"]').click();
         cy.location().should((loc) => {
             expect(loc.pathname).to.eq('/compose');
@@ -59,11 +47,8 @@ describe('Interacting with mailviewer', () => {
     });
 
     it('can forward an email with no "To"', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get11');
         cy.visit('/');
-        cy.wait('@get11', {'timeout':10000});
         cy.visit('/#Inbox:11');
-        // cy.get('#messageContents');
 
         cy.get('button[mattooltip="Forward"]').click();
         cy.location().should((loc) => {
@@ -74,11 +59,8 @@ describe('Interacting with mailviewer', () => {
     });
 
     it('can reply to an email with no "To" or "Subject"', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get13');
         cy.visit('/');
-        cy.wait('@get13', {'timeout':10000});
         cy.visit('/#Inbox:13');
-        // cy.get('#messageContents');
 
         cy.get('button[mattooltip="Reply"]').click();
         cy.location().should((loc) => {
@@ -89,11 +71,8 @@ describe('Interacting with mailviewer', () => {
     });
 
     it('can forward an email with no "To" or "Subject"', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get13');
         cy.visit('/');
-        cy.wait('@get13', {'timeout':10000});
         cy.visit('/#Inbox:13');
-        // cy.get('#messageContents');
 
         cy.get('button[mattooltip="Forward"]').click();
         cy.location().should((loc) => {
@@ -104,9 +83,7 @@ describe('Interacting with mailviewer', () => {
     });
 
     it('Vertical to horizontal mode exposes full height button', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get11');
         cy.visit('/');
-        cy.wait('@get11', {'timeout':10000});
         cy.visit('/#Inbox:11');
 
         // Make sure we're in vertical mode
@@ -116,9 +93,7 @@ describe('Interacting with mailviewer', () => {
     });
 
     it('Changing viewpane height is stored', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get11');
         cy.visit('/');
-        cy.wait('@get11', {'timeout':10000});
         cy.visit('/#Inbox:11');
         // cy.hash().should('equal', '#Inbox:11');
 
@@ -133,9 +108,7 @@ describe('Interacting with mailviewer', () => {
     });
 
     it('Half height reduces stored pane height', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get11');
         cy.visit('/');
-        cy.wait('@get11', {'timeout':10000});
         cy.visit('/#Inbox:11');
         // cy.hash().should('equal', '#Inbox:11');
 
@@ -161,9 +134,7 @@ describe('Interacting with mailviewer', () => {
     });
 
     it('Revisit open email in horizontal mode loads it', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get11');
         cy.visit('/');
-        cy.wait('@get11', {'timeout':10000});
         cy.visit('/#Inbox:11');
         // cy.hash().should('equal', '#Inbox:11');
 
@@ -177,9 +148,7 @@ describe('Interacting with mailviewer', () => {
     });
 
     it('Can go out of mailviewer and back and still see our email', () => {
-        cy.intercept('/rest/v1/email/download/*').as('get12');
         cy.visit('/');
-        cy.wait('@get12',{'timeout':10000});
         cy.visit('/#Inbox:12');
         // cy.hash().should('equal', '#Inbox:12');