cypress/integration/signup.spec.js

+/// <reference types="Cypress" />
+/* globals cy */
+
+context('Signup Browser Testing', () => {
+  let username = 'testuser_creation_',
+      email = '',
+      password = 'testpwd';
+  before(() => {
+    cy.randomNum().then(num => {
+      username += num;
+      email = username + '@testemail.com';
+    });
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  it('should visit user login screen', () => cy.userLogin());
+  describe('Signup process', () => {
+    it('should click on signup page link', () => {
+      cy.get('.sib-link.sib-register-link').click();
+    });
+    it('should write incorrect user data', () => {
+      cy.get('#id_username').type('!"#$%&');
+      cy.get('#id_username').should('have.value', '!"#$%&');
+      cy.get('#id_email').type(email.split('.')[0]);
+      cy.get('#id_email').should('have.value', email.split('.')[0]);
+      cy.get('#id_password1').type(password + 'wrong1');
+      cy.get('#id_password1').should('have.value', password + 'wrong1');
+      cy.get('#id_password2').type(password + 'wrong2');
+      cy.get('#id_password2').should('have.value', password + 'wrong2');
+    });
+    it('should click on signup button', () => {
+      cy.get('.sib-registration-btn').click();
+    });
+    it('should provide errors about incorrect user data', () => {
+      cy.get('tbody tr:nth-child(1) ul.errorlist li')
+        .should('contain.text', 'Enter a valid username. This value may contain only letters, numbers, and ./+/-/_ characters.');
+      cy.get('tbody tr:nth-child(2) ul.errorlist li')
+        .should('contain.text', 'Enter a valid email address.');
+      cy.get('tbody tr:nth-child(4) ul.errorlist li')
+        .should('contain.text', 'The two password fields didn\'t match.');
+    });
+    it('should write correct user data', () => {
+      cy.get('#id_username').clear().type(username);
+      cy.get('#id_username').should('have.value', username);
+      cy.get('#id_email').clear().type(email);
+      cy.get('#id_email').should('have.value', email);
+      cy.get('#id_password1').clear().type(password);
+      cy.get('#id_password1').should('have.value', password);
+      cy.get('#id_password2').clear().type(password);
+      cy.get('#id_password2').should('have.value', password);
+    });
+    it('should click on signup button', () => {
+      cy.get('.sib-registration-btn').click();
+    });
+    it('should show email confirmation dialog', () => {
+      cy.contains('h1.text-center', 'Un e-mail d\'activation a été envoyé.').should("exist");
+      cy.contains('p.text-center', 'Vérifie ta boite mail et clique sur le lien pour activer ton compte.').should("exist");
+    });
+  });
+});

cypress/support/commands.js

@@ -23,3 +23,50 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+/* globals Cypress, cy, expect */
+
+import 'cypress-localstorage-commands';
+
+Cypress.Commands.add('login', () => {
+  cy.fixture('admin.json').then(admin => {
+    cy.get('#id_username').type(admin.username);
+    cy.get('#id_username').should('have.value', admin.username);
+    cy.get('#id_password').type(admin.password);
+    cy.get('#id_password').should('have.value', admin.password);
+    cy.get('.connection-btn').click();
+    cy.location('pathname').should('include', '/authorize');
+    cy.get('.accept-button').click();
+    cy.location().should(location => {
+      expect(location.pathname).to.eq('/');
+    });
+  });
+});
+
+Cypress.Commands.add('userLogin', () => {
+  cy.visit('/');
+  cy.location().should((loc) => {
+    expect(loc.pathname).to.eq('/auth/login/');
+  });
+});
+
+Cypress.Commands.add('encodeUrl', url => {
+  const encodeIdReplacement = [
+    ['~', '~~'],
+    ['.', '~!'],
+    [':', '~@'],
+    ['/', '~_'],
+  ];
+  encodeIdReplacement.forEach(([char, repl]) => {
+    url = url.split(char).join(repl);
+  });
+  return url;
+});
+
+Cypress.Commands.add('randomNum', () => {
+  return Math.floor(1000 + Math.random() * 9000);
+});
+
+Cypress.Commands.add('nextYear', increment => {
+  return new Date().getFullYear() + ( increment || 1 );
+});

cypress/support/index.js

@@ -13,8 +13,10 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+/* globals Cypress */
+
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 //require('cypress-terminal-report').installSupport();
 
@@ -27,4 +29,9 @@ Cypress.on('uncaught:exception', (err, runnable) => {
     return false;
 });
 
-Cypress.on('fail', () => Cypress.runner.abort())
+Cypress.on('fail', (error) => {
+    console.log(error);
+    if ( typeof Cypress.runner.abort == 'function' ) {
+        Cypress.runner.abort();
+    }
+});

package-lock.json

@@ -1468,6 +1468,12 @@
         }
       }
     },
+    "cypress-localstorage-commands": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cypress-localstorage-commands/-/cypress-localstorage-commands-1.2.1.tgz",
+      "integrity": "sha512-wWGElZS5fHAQDonZM8xtOA1tM+bTBUdwEMm6XrshLMKjq8Nxw4+Ysbl9/Yc+gZyv66EQe4hPNDLWANnp/zPkcA==",
+      "dev": true
+    },
     "cypress-terminal-report": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/cypress-terminal-report/-/cypress-terminal-report-1.2.1.tgz",

package.json

@@ -68,6 +68,7 @@
   },
   "devDependencies": {
     "cypress": "^4.5.0",
+    "cypress-localstorage-commands": "^1.2.1",
     "cypress-terminal-report": "^1.2.1"
   }
 }

src/dependencies.pug

@@ -31,7 +31,7 @@ if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
     //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
 
 if endpoints.users || (endpoints.get && endpoints.get.users)
-    script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.8" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-chat@1.0" defer)
     //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)
 
 script(src="/scripts/index.js" defer)

src/menu-left.pug

@@ -71,10 +71,12 @@ solid-router#navbar-router(default-route='dashboard')
     div.divider
   if endpoints.projects || (endpoints.get && endpoints.get.projects)
     div
-      solid-link(next='admin-project-list')
+      solid-link
+        //- (next='admin-project-list')
         div.menu
           div.menu-chevron
-            div.menu-icon.icon-arrow-right-circle
+            div.menu-icon
+            //- div.menu-icon.icon-arrow-right-circle
           div.menu-label  Projets
           div.menu-icon.icon-folder-alt
       solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
@@ -98,10 +100,12 @@ solid-router#navbar-router(default-route='dashboard')
     div.divider
   if endpoints.circles || (endpoints.get && endpoints.get.circles)
     div
-      solid-link(next='admin-circle-list')
+      solid-link
+        //- (next='admin-circle-list')
         div.menu
           div.menu-chevron
-            div.menu-icon.icon-arrow-right-circle
+            div.menu-icon
+            //- div.menu-icon.icon-arrow-right-circle
           div.menu-label  Cercles
           div.menu-icon.icon-folder-alt
       solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)

src/scripts/menu-toggle.js

+document.addEventListener("DOMContentLoaded", () => {
+    const menuWrappers = Array.from(document.querySelectorAll(".menu-wrapper"));
+  
+    //- Toggle sub-menus
+    menuWrappers.forEach(menuWrapper => {
+      const menu = menuWrapper.querySelector(".menu");
+      menu.addEventListener("click", e => {
+        menuWrapper.classList.toggle("is-closed");
+      });
+    });
+});  
\ No newline at end of file

src/scripts/unreads-menu.js

 document.addEventListener("DOMContentLoaded", function (event) {
   window.addEventListener('newMessage', event => {
     let jid = event.detail.jid;
-    Array.from(document.querySelectorAll('[data-jabberID="'+jid+'"]')).forEach(el => {
+    Array.from(document.querySelectorAll('[data-jabberID="' + jid + '"]')).forEach(el => {
       el.parentElement.parentElement.classList.add('unread');
     });
   });
@@ -9,7 +9,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
   window.addEventListener('read', (event) => {
     if (event.detail && event.detail.resource && event.detail.resource['@id']) {
       const badge = document.querySelector(`solid-badge[data-src="${event.detail.resource['@id']}"]`);
-      if (badge) badge.parentElement.parentElement.classList.remove('unread');
+      if (badge) {
+        badge.parentElement.parentElement.classList.remove('unread');
+        const project = badge.parentElement.parentElement.querySelector('.unread');
+        if (project) project.classList.remove('unread');
+      }
+
     }
   });
 });
\ No newline at end of file

src/styles/base/main.scss

@@ -61,7 +61,7 @@ solid-dashboard section {
     position: sticky;
     top: 0;
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: scroll;
   }
 
   &.jsLeftMenu {

src/styles/base/menu-left.scss

@@ -13,13 +13,21 @@
 
   solid-router {
     .menu-wrapper {
-      &.is-closed {
-        .sub-menu {
-          display: none;
+      .menu-icon.icon-arrow-up {
+        visibility: hidden;
+      }
+      @include breakpoint(lg) {
+        .menu-icon.icon-arrow-up {
+          visibility: visible;
         }
+        &.is-closed {
+          .sub-menu {
+            display: none;
+          }
 
-        .menu-chevron {
-          transform: rotate(180deg);
+          .menu-chevron {
+            transform: rotate(180deg);
+          }
         }
       }
     }

src/styles/base/user-thumb.scss

@@ -37,6 +37,21 @@
   margin-right: 1rem;
 }
 
+.user-thumb__send {
+  position: relative;
+  bottom: 7px;
+  left: -5px;
+
+  solid-link {
+    @include icon('speech');
+
+    &::before {
+      display: inline-block;
+      color: #FF6765;
+    }
+  }
+}
+
 .user-thumb__admin:not(:empty) {
   display: block !important;
   @extend %tag-admin;

src/templates/hubl-circle-team.pug

@@ -4,11 +4,15 @@ solid-widget(name='hubl-circle-team-template')
   template
     solid-display.user-thumb.is-spaced(
       data-src='${await value.user}'
-      fields='account.picture, sup(name, isadmin), sub(profile.city)'
+      fields='account.picture, sup(name, send, isadmin), sub(profile.city)'
       value-isadmin='${await value.is_admin}'
 
+      action-send="messages"
+      label-send=""
+
       class-account.picture='avatar user-thumb__picture'
       class-name='user-thumb__name'
+      class-send='user-thumb__send'
       class-isadmin='user-thumb__admin'
       class-profile.city='user-thumb__city'
 

src/templates/hubl-project-team.pug

 include hubl-user-avatar.pug
 
+solid-widget(name='hubl-project-team-contact')
+  template 
+    solid-link(data-src='\${value}', next='messages')
+
 solid-widget(name='hubl-project-team')
   template
     solid-display.user-thumb.is-spaced(
       data-src='${await value}'
-      fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)'
+      fields='user.account.picture, sup(user.name, user, isadmin), sub(user.profile.city, name)'
       value-isadmin='${await value.is_admin}'
 
-      class-user.account.picture='avatar user-thumb__picture'
+      widget-user='hubl-project-team-contact'
 
+      class-user.account.picture='avatar user-thumb__picture'
       class-user.name='user-thumb__name'
+      class-user='user-thumb__send'
       class-isadmin='user-thumb__admin'
       class-user.profile.city='user-thumb__city'
       class-name='user-thumb__lead'