cypress/e2e/edit-channel.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('Edit Channel Browser Testing', () => {
+  let channelName = 'Edited Test Channel ',
+      description = 'Edited Test Description ',
+      menuQuery = [
+        'solid-display.circle-tab',
+        'solid-display:last-child',
+        'solid-display[order-by="name"]'
+      ];
+  before(() => {
+    cy.randomNum().then(num => {
+      channelName += num;
+      description += num;
+    });
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screen', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('Channel Edition process', () => {
+    it('should visit the channel list screen', () => {
+      cy.visit('/admin-circles');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/admin-circles');
+      });
+    });
+    it('should visit the last channel edit screen', () => {
+      cy.get(menuQuery.join(' '))
+        .invoke('attr', 'data-src')
+        .then(url => cy.encodeUrl(url).then(id  => {
+          cy.visit('/circles/@' + id + '/circles-information/circles-edit');
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.eq('/circles/@' + id + '/circles-information/circles-edit');
+          });
+        }));
+    });
+    it('should enter new channel data', () => {
+      cy.get('#circles-edit input[name="name"]').clear().type(channelName);
+      cy.get('#circles-edit input[name="name"]').should('have.value', channelName);
+      cy.get('#circles-edit input[name="description"]').clear().type(description);
+      cy.get('#circles-edit input[name="description"]').should('have.value', description);
+    });
+    it('should click button to save the channel', () => {
+      cy.get('#circles-edit input[value="Enregistrer"]').click();
+    });
+    it('should land on channel information screen', () => {
+      cy.get(menuQuery.join(' '))
+        .invoke('attr', 'data-src')
+        .then(url => cy.encodeUrl(url).then(id  => {
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.eq('/circles/@' + id + '/circles-information');
+          });
+        }));
+    });
+    it('should show edited channel data on channel information screen', () => {
+      cy.contains('solid-display-value[name="name"]', channelName).should("exist");
+      cy.contains('solid-display-value[name="description"]', description).should("exist");
+    });
+  });
+});

cypress/e2e/edit-job-offer.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('Edit Job Offer Browser Testing', () => {
+  let jobDate = '',
+      jobTitle = 'Edited Test Job Offer ',
+      description = 'Edited Test Description ',
+      menuQuery = [
+        'solid-display.job-board__list',
+        'solid-display:last-child'
+      ];
+  before(() => {
+    cy.nextYear(2).then(year => {
+      jobDate = year + '-12-31';
+    });
+    cy.randomNum().then(num => {
+      jobTitle += num;
+      description += num;
+    });
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screen', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('Job Offer Edition process', () => {
+    it('should visit the job offers list screen', () => {
+      cy.visit('/job-offers');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/job-offers');
+      });
+    });
+    it('should visit the last job offer edit screen', () => {
+      cy.get(menuQuery.join(' '))
+        .invoke('attr', 'data-src')
+        .then(url => cy.encodeUrl(url).then(id  => {
+          cy.visit('/job-offers/job-offers-edit/@' + id);
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.eq('/job-offers/job-offers-edit/@' + id);
+          });
+        }));
+    });
+    it('should enter new job offer data', () => {
+      cy.get('#job-offers-edit input[name="closingDate"]').clear().type(jobDate);
+      cy.get('#job-offers-edit input[name="closingDate"]').should('have.value', jobDate);
+      cy.get('#job-offers-edit input[name="title"]').clear().type(jobTitle);
+      cy.get('#job-offers-edit input[name="title"]').should('have.value', jobTitle);
+      cy.get('#job-offers-edit textarea[name="description"]').clear().type(description);
+      cy.get('#job-offers-edit textarea[name="description"]').should('have.value', description);
+    });
+    it('should click button to save the job offer', () => {
+      cy.get('#job-offers-edit input[type="submit"]').click();
+    });
+    it('should land on job offers list screen', () => {
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/job-offers');
+      });
+    });
+    it('should show edited job offer data on job offer information screen', () => {
+      cy.contains('solid-display-value[name="title"]', jobTitle).should("exist");
+      cy.contains('solid-display-value[name="description"]', description).should("exist");
+    });
+  });
+});

cypress/e2e/edit-project.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('Edit Project Browser Testing', () => {
+  let projectName = 'Edited Test Project ',
+      customerName = 'Edited Test Customer ',
+      description = 'Edited Test Description ',
+      menuQuery = [
+        'solid-display.project-tab',
+        'solid-display:last-child',
+        'solid-display[order-by="customer.name"]'
+      ];
+  before(() => {
+    cy.randomNum().then(num => {
+      projectName += num;
+      customerName += num;
+      description += num;
+    });
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screen', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('Project Edition process', () => {
+    it('should visit the project list screen', () => {
+      cy.visit('/admin-projects');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/admin-projects');
+      });
+    });
+    it('should visit the last project edit screen', () => {
+      cy.get(menuQuery.join(' '))
+        .invoke('attr', 'data-src')
+        .then(url => cy.encodeUrl(url).then(id  => {
+          cy.visit('/projects/@' + id + '/projects-information/projects-edit');
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.eq('/projects/@' + id + '/projects-information/projects-edit');
+          });
+        }));
+    });
+    it('should enter new project data', () => {
+      cy.get('#projects-edit input[name="customer.name"]').clear().type(customerName);
+      cy.get('#projects-edit input[name="customer.name"]').should('have.value', customerName);
+      cy.get('#projects-edit input[name="name"]').clear().type(projectName);
+      cy.get('#projects-edit input[name="name"]').should('have.value', projectName);
+      cy.get('#projects-edit textarea[name="description"]').clear().type(description);
+      cy.get('#projects-edit textarea[name="description"]').should('have.value', description);
+    });
+    it('should click button to save the project', () => {
+      cy.get('#projects-edit input[value="Enregistrer"]').click();
+    });
+    it('should land on project information screen', () => {
+      cy.get(menuQuery.join(' '))
+        .invoke('attr', 'data-src')
+        .then(url => cy.encodeUrl(url).then(id  => {
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.eq('/projects/@' + id + '/projects-information');
+          });
+        }));
+    });
+    it('should show edited project data on project information screen', () => {
+      cy.contains('solid-display-value[name="customer.name"]', customerName).should("exist");
+      cy.contains('solid-display-value[name="name"]', projectName).should("exist");
+    });
+  });
+});

cypress/e2e/edit-user.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('Edit User Browser Testing', () => {
+  let userFirstName = 'Edited User First Name ',
+      userLastName = 'Edited User Last Name ',
+      jobDescription = 'Edited Job Description ',
+      city = 'Edited City ',
+      phone = '+1234',
+      website = 'https://test.site/';
+  before(() => {
+    cy.randomNum().then(num => {
+      userFirstName += num;
+      userLastName += num;
+      jobDescription += num;
+      city += num;
+      phone += num;
+      website += num;
+    });
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screen', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('User Edition process', () => {
+    it('should visit the user edit screen', () => {
+      cy.visit('/members/members-edit-profile');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/members/members-edit-profile');
+      });
+    });
+    /// Workaround - Routing bug - user won't land on edit profile screen
+    it('should navigate to user edit screen', () => {
+      cy.get('#members-my-profile solid-link[next="members-edit-profile"]').click();
+    });
+    /// End workaround
+    it('should enter new user data', () => {
+      cy.get('#members-edit-profile input[name="first_name"]').clear().type(userFirstName);
+      cy.get('#members-edit-profile input[name="first_name"]').should('have.value', userFirstName);
+      cy.get('#members-edit-profile input[name="last_name"]').clear().type(userLastName);
+      cy.get('#members-edit-profile input[name="last_name"]').should('have.value', userLastName);
+      cy.get('#members-edit-profile textarea[name="profile.job"]').clear().type(jobDescription);
+      cy.get('#members-edit-profile textarea[name="profile.job"]').should('have.value', jobDescription);
+      cy.get('#members-edit-profile input[name="profile.city"]').clear().type(city);
+      cy.get('#members-edit-profile input[name="profile.city"]').should('have.value', city);
+      cy.get('#members-edit-profile input[name="profile.phone"]').clear().type(phone);
+      cy.get('#members-edit-profile input[name="profile.phone"]').should('have.value', phone);
+      cy.get('#members-edit-profile input[name="profile.website"]').clear().type(website);
+      cy.get('#members-edit-profile input[name="profile.website"]').should('have.value', website);
+    });
+    it('should click button to save the user', () => {
+      cy.get('#members-edit-profile input[value="ENREGISTRER"]').click();
+    });
+    it('should land on user information screen', () => {
+      cy.location().should(location => {
+        /// Workaround - Routing bug - route pathname won't be /profile as it should
+        expect(location.pathname).to.eq('/');
+        // expect(location.pathname).to.eq('/members');
+        /// End workaround
+      });
+    });
+    it('should show edited user data on user information screen', () => {
+      cy.contains('solid-display-value[name="name"]', userFirstName + ' ' + userLastName).should("exist");
+      cy.contains('solid-display-value[name="profile.job"]', jobDescription).should("exist");
+      cy.contains('solid-display-value[name="profile.city"]', city).should("exist");
+      cy.contains('directory-link-tel a', phone).should("exist");
+      cy.contains('directory-website a', website).should("exist");
+    });
+  });
+});

cypress/e2e/leave-channel.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('Leave Channel Browser Testing', () => {
+  let tableQuery = [
+    'solid-display.table-body',
+    'solid-display:last-child',
+    'orbit-admin-circle-leave-button',
+    'solid-delete'
+  ],
+  tableListQuery = [
+    'solid-display[nested-field="circles"]',
+    'div >',
+    'solid-display'
+  ];
+  before(() => {
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screend', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('Channel Leaving process', () => {
+    it('should visit the channels list screen', () => {
+      cy.visit('/admin-circles');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/admin-circles');
+      });
+    });
+    it('should click the last channel leave button', () => {
+      cy.get(tableListQuery.join(' ')).its('length').as('channelsLength');
+      cy.get(tableQuery.join(' ')).click();
+    });
+    it('should check if channel was left', () => {
+      cy.get(tableListQuery.join(' ')).its('length').should(length => {
+        expect(length).to.eq(this.channelsLength - 1);
+      });
+    });
+  });
+});

cypress/e2e/leave-project.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('Leave Project Browser Testing', () => {
+  let tableQuery = [
+    'solid-display.table-body',
+    'solid-display:last-child',
+    'orbit-admin-project-leave-button',
+    'solid-delete'
+  ],
+  tableListQuery = [
+    'solid-display[nested-field="projects"]',
+    'div >',
+    'solid-display'
+  ];
+  before(() => {
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screend', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('Project Leaving process', () => {
+    it('should visit the projects list screen', () => {
+      cy.visit('/admin-projects');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/admin-projects');
+      });
+    });
+    it('should click the last project leave button', () => {
+      cy.get(tableListQuery.join(' ')).its('length').as('projectsLength');
+      cy.get(tableQuery.join(' ')).click();
+    });
+    it('should check if project was left', () => {
+      cy.get(tableListQuery.join(' ')).its('length').should(length => {
+        expect(length).to.eq(this.projectsLength - 1);
+      });
+    });
+  });
+});

cypress/e2e/list-job-offers.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('List Job Offers Browser Testing', () => {
+  let listQuery = 'solid-display.job-board__list',
+      filtersQuery = [
+        listQuery,
+        'solid-form',
+        'input'
+      ],
+      listingCountQuery = [
+        listQuery,
+        'solid-display'
+      ],
+      firstListingQuery = [
+        listQuery,
+        'solid-display:first-child',
+        'solid-display-value'
+      ];
+  before(() => {
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screen', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('Job Offer Listing process', () => {
+    let listingTitle,
+        listingDesccription,
+        listingCount;
+    it('should visit the job offers listing screen', () => {
+      cy.visit('/job-offers');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/job-offers');
+      });
+    });
+    it('should get the listing count', () => {
+      cy.get(listingCountQuery.join(' ')).its('length').then(length => listingCount = length);
+    });
+    it('should get the first job offer listing data', () => {
+      cy.get(firstListingQuery.join(' ') + '[name="title"]').invoke('text').then(text => listingTitle = text);
+      cy.get(firstListingQuery.join(' ') + '[name="description"]').invoke('text').then(text => listingDesccription = text);
+    });
+    // TO-DO: Search by title and description
+    /*it('should filter the listing by first name', () => {
+      cy.get(filtersQuery.join(' ') + '[name="title"]').clear().type(listingTitle);
+      cy.get(filtersQuery.join(' ') + '[name="title"]').should('have.value', listingTitle);
+    });
+    it('should get filtered listing count', () => {
+      cy.get(listingCountQuery.join(' ')).its('length').then(length => {
+        expect(length).to.eq(1);
+      });
+    });
+    it('should clear the first name filter', () => {
+      cy.get(filtersQuery.join(' ') + '[name="title"]').clear();
+      cy.get(filtersQuery.join(' ') + '[name="title"]').should('have.value', '');
+    });
+    it('should get previous listing count', () => {
+      cy.get(listingCountQuery.join(' ')).its('length').then(length => {
+        expect(length).to.eq(listingCount);
+      });
+    });
+    it('should filter the listing by first name', () => {
+      cy.get(filtersQuery.join(' ') + '[name="description"]').clear().type(listingDesccription);
+      cy.get(filtersQuery.join(' ') + '[name="description"]').should('have.value', listingDesccription);
+    });
+    it('should get filtered listing count', () => {
+      cy.get(listingCountQuery.join(' ')).its('length').then(length => {
+        expect(length).to.eq(1);
+      });
+    });
+    it('should clear the first name filter', () => {
+      cy.get(filtersQuery.join(' ') + '[name="description"]').clear();
+      cy.get(filtersQuery.join(' ') + '[name="description"]').should('have.value', '');
+    });
+    it('should get previous listing count', () => {
+      cy.get(listingCountQuery.join(' ')).its('length').then(length => {
+        expect(length).to.eq(listingCount);
+      });
+    });*/
+  });
+});

cypress/e2e/list-users.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('List Users Browser Testing', () => {
+  let listQuery = 'solid-display#members-list__content',
+      filtersQuery = [
+        listQuery,
+        'solid-form',
+        'input'
+      ],
+      listingCountQuery = [
+        listQuery,
+        'div:first-child',
+        'span'
+      ],
+      firstListingQuery = [
+        listQuery,
+        'solid-display:first-child',
+        'solid-display-value'
+      ];
+  before(() => {
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screen', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('User Listing process', () => {
+    let listingFirstName,
+        listingLastName,
+        listingJob,
+        listingCity,
+        listingCount;
+    it('should visit the users listing screen', () => {
+      cy.visit('/members');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/members');
+      });
+    });
+    it('should get the listing count', () => {
+      cy.get(listingCountQuery.join(' ')).invoke('text').then(text => listingCount = text);
+    });
+    it('should get the first user listing data', () => {
+      cy.get(firstListingQuery.join(' ') + '[name="first_name"]').invoke('text').then(text => listingFirstName = text);
+      cy.get(firstListingQuery.join(' ') + '[name="last_name"]').invoke('text').then(text => listingLastName = text);
+      cy.get(firstListingQuery.join(' ') + '[name="profile.job"]').invoke('text').then(text => listingJob = text);
+      cy.get(firstListingQuery.join(' ') + '[name="profile.city"]').invoke('text').then(text => listingCity = text);
+    });
+    it('should filter the listing by first name', () => {
+      cy.get(filtersQuery.join(' ') + '[name="name"]').clear().type(listingFirstName);
+      cy.get(filtersQuery.join(' ') + '[name="name"]').should('have.value', listingFirstName);
+    });
+    it('should get filtered listing count', () => {
+      cy.get(listingCountQuery.join(' ')).invoke('text').then(text => {
+        expect(text).to.eq('1 membres');
+      });
+    });
+    it('should clear the first name filter', () => {
+      cy.get(filtersQuery.join(' ') + '[name="name"]').clear();
+      cy.get(filtersQuery.join(' ') + '[name="name"]').should('have.value', '');
+    });
+    it('should get previous listing count', () => {
+      cy.get(listingCountQuery.join(' ')).invoke('text').then(text => {
+        expect(text).to.eq(listingCount);
+      });
+    });
+    it('should filter the listing by last name', () => {
+      cy.get(filtersQuery.join(' ') + '[name="name"]').clear().type(listingLastName);
+      cy.get(filtersQuery.join(' ') + '[name="name"]').should('have.value', listingLastName);
+    });
+    it('should get filtered listing count', () => {
+      cy.get(listingCountQuery.join(' ')).invoke('text').then(text => {
+        expect(text).to.eq('1 membres');
+      });
+    });
+    it('should clear the last name filter', () => {
+      cy.get(filtersQuery.join(' ') + '[name="name"]').clear();
+      cy.get(filtersQuery.join(' ') + '[name="name"]').should('have.value', '');
+    });
+    it('should get previous listing count', () => {
+      cy.get(listingCountQuery.join(' ')).invoke('text').then(text => {
+        expect(text).to.eq(listingCount);
+      });
+    });
+    it('should filter the listing by job description', () => {
+      cy.get(filtersQuery.join(' ') + '[name="profile.job"]').clear().type(listingJob);
+      cy.get(filtersQuery.join(' ') + '[name="profile.job"]').should('have.value', listingJob);
+    });
+    it('should get filtered listing count', () => {
+      cy.get(listingCountQuery.join(' ')).invoke('text').then(text => {
+        expect(text).to.eq('1 membres');
+      });
+    });
+    it('should clear the job description filter', () => {
+      cy.get(filtersQuery.join(' ') + '[name="profile.job"]').clear();
+      cy.get(filtersQuery.join(' ') + '[name="profile.job"]').should('have.value', '');
+    });
+    it('should get previous listing count', () => {
+      cy.get(listingCountQuery.join(' ')).invoke('text').then(text => {
+        expect(text).to.eq(listingCount);
+      });
+    });
+    it('should filter the listing by city', () => {
+      cy.get(filtersQuery.join(' ') + '[name="profile.city"]').clear().type(listingCity);
+      cy.get(filtersQuery.join(' ') + '[name="profile.city"]').should('have.value', listingCity);
+    });
+    it('should get filtered listing count', () => {
+      cy.get(listingCountQuery.join(' ')).invoke('text').then(text => {
+        expect(text).to.eq('1 membres');
+      });
+    });
+    it('should clear the city filter', () => {
+      cy.get(filtersQuery.join(' ') + '[name="profile.city"]').clear();
+      cy.get(filtersQuery.join(' ') + '[name="profile.city"]').should('have.value', '');
+    });
+    it('should get previous listing count', () => {
+      cy.get(listingCountQuery.join(' ')).invoke('text').then(text => {
+        expect(text).to.eq(listingCount);
+      });
+    });
+  });
+});

cypress/e2e/retire-channel.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('Retire Channel Browser Testing', () => {
+  let menuQuery = [
+        'solid-display.circle-tab',
+        'solid-display:last-child',
+        'solid-display[order-by="name"]'
+      ],
+      menuCountQuery = [
+        'solid-display.circle-tab',
+        'solid-display',
+        'solid-display[order-by="name"]'
+      ];
+  before(() => {
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screend', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('Channel Retirement process', () => {
+    let channelsLength;
+    it('should visit the channels list screen', () => {
+      cy.visit('/admin-circles');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/admin-circles');
+      });
+    });
+    it('should visit the last channel edit screen', () => {
+      cy.get(menuQuery.join(' '))
+        .invoke('attr', 'data-src')
+        .then(url => cy.encodeUrl(url).then(id  => {
+          cy.visit('/circles/@' + id + '/circles-information/circles-edit');
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.eq('/circles/@' + id + '/circles-information/circles-edit');
+          });
+        }));
+    });
+    it('should count the number of joined channels', () => {
+      cy.get(menuCountQuery.join(' ')).its('length').then(length => channelsLength = length);
+    });
+    it('should click button to retire the channel', () => {
+      cy.get('solid-multiple[name="members"] solid-delete[data-label="Retirer"] button').click();
+    });
+    it('should stay on channel edit screen', () => {
+      cy.get(menuQuery.join(' '))
+        .invoke('attr', 'data-src')
+        .then(url => cy.encodeUrl(url).then(id  => {
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.eq('/circles/@' + id + '/circles-information/circles-edit');
+          });
+        }));
+    });
+    it('should check if channel was retired', () => {
+      cy.get(menuCountQuery.join(' ')).its('length').should(length => {
+        expect(length).to.eq(channelsLength - 1);
+      });
+    });
+  });
+});

cypress/e2e/retire-project.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('Retire Project Browser Testing', () => {
+  let menuQuery = [
+        'solid-display.project-tab',
+        'solid-display:last-child',
+        'solid-display[order-by="customer.name"]'
+      ],
+      menuCountQuery = [
+        'solid-display.project-tab',
+        'solid-display',
+        'solid-display[order-by="customer.name"]'
+      ];
+  before(() => {
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null });
+    cy.clearCookies({ domain: null });
+  });
+  beforeEach(() => cy.restoreLocalStorage());
+  afterEach(() => cy.saveLocalStorage());
+  it('should visit user login screend', () => cy.userLogin());
+  it('should login', () => cy.login());
+  describe('Project Retirement process', () => {
+    let projectsLength;
+    it('should visit the projects list screen', () => {
+      cy.visit('/admin-projects');
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/admin-projects');
+      });
+    });
+    it('should visit the last project edit screen', () => {
+      cy.get(menuQuery.join(' '))
+        .invoke('attr', 'data-src')
+        .then(url => cy.encodeUrl(url).then(id  => {
+          cy.visit('/projects/@' + id + '/projects-information/projects-edit');
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.eq('/projects/@' + id + '/projects-information/projects-edit');
+          });
+        }));
+    });
+    it('should count the number of joined projects', () => {
+      cy.get(menuCountQuery.join(' ')).its('length').then(length => projectsLength = length);
+    });
+    it('should click button to retire the project', () => {
+      cy.get('solid-multiple[name="members"] solid-delete[data-label="Retirer"] button').click();
+    });
+    it('should stay on project edit screen', () => {
+      cy.get(menuQuery.join(' '))
+        .invoke('attr', 'data-src')
+        .then(url => cy.encodeUrl(url).then(id  => {
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.eq('/projects/@' + id + '/projects-information/projects-edit');
+          });
+        }));
+    });
+    it('should check if project was retired', () => {
+      cy.get(menuCountQuery.join(' ')).its('length').should(length => {
+        expect(length).to.eq(projectsLength - 1);
+      });
+    });
+  });
+});

cypress/e2e/signin.cy.js

+/// <reference types="Cypress" />
+/* globals cy, expect */
+
+context('Browser testing', () => {
+  before(() => {
+    cy.clearLocalStorageSnapshot();
+    cy.clearLocalStorage({ domain: null});
+    cy.clearCookies({ domain: null });
+  });
+  it('should visit user login screen', () => cy.userLogin());
+  describe('Login process', () => {
+    it('should write "admin" on username field and "password" on password field', () => {
+      cy.get('#id_username').type('admin');
+      cy.get('#id_username').should('have.value', 'admin');
+      cy.get('#id_password').type('password');
+      cy.get('#id_password').should('have.value', 'password');
+    });
+    it('should click on login button', () => {
+      cy.get(':nth-child(1) > .flex-column > [type="submit"]').click();
+    });
+    it('should provide an error, username and password mismatch.', () => {
+      cy.get('.error').should('contain.text', 'Ton nom d\'utilisateur et ton mot de passe ne correspondent pas. Réessaye.');
+    });
+    it('should write "admin" on password field then press the login button', () => {
+      cy.get('#id_password').type('admin');
+      cy.get('#id_password').should('have.value', 'admin');
+      cy.get(':nth-child(1) > .flex-column > [type="submit"]').click();
+    });
+    it('should ask for user permission to access their datas.', () => {
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/authorize');
+      });
+      cy.get('.accept-button').click();
+    });
+//      it('should redirect the user to the app.', () => {
+//        cy.get('.accept-button').click();
+//        cy.location().should((loc) => {
+//          expect(loc.protocol + "//" + loc.host).to.eq(Cypress.config().baseUrl);
+//          expect(loc.pathname).to.eq('/');
+//        });
+//      });
+//    });
+//    describe('Main interface', () => {
+//      // it('should show my name on top right', () => {
+//      //   cy.get('solid-display-value').contains('Admin');
+//      // });
+//      it('should show my username on the left menu', () => {
+//        cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > solid-display-div > div').contains('admin');
+//      });
+//      it('should open a chat with myself', () => {
+//        cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > solid-display-div > div').click();
+//        cy.get('.name').contains('admin');
+//      });
+//      it('should not work, because I have no Prosody configured', () => {
+//        cy.get('.content-box > .chat-view > solid-xmpp-chat').should('be.empty');
+//      });
+//      describe('Circles', () => {
+//        it('should navigate the Administration from left menu', () => {
+//          cy.get('.create > solid-link').click();
+//          cy.get('#admin-circles > .content-box > .content-box__header > .without-margin').contains('Administration');
+//          cy.get('#admin-circles > .content-box__info > .admin-header > .admin-header__title').contains('Circles');
+//        });
+//        it('should navigate to Circle creation', () => {
+//          cy.get('#admin-circles > .content-box__info > .admin-header > .button').click();
+//          cy.location().should((loc) => {
+//            expect(loc.pathname).to.contain('admin-circles-create');
+//          });
+//        });
+//        var name = new Uint32Array(1);
+//        crypto.getRandomValues(name);
+//        name = "Test Circle " + name;
+//        it('should allow Circle Creation', () => {
+//          cy.get('form > solid-form-label-text[name="name"] > label > input').type(name);
+//          cy.get('.content-box__info > solid-form > form > solid-form-label-text[name="description"] > label > input').type('With a great description!');
+//          cy.get('#admin-circles-create > .content-box__info > solid-form > form > [type="submit"]').click();
+//          cy.get('#admin-circles > div > div.table > solid-display').contains(name);
+//        });
+//        it('should open the circle information page', () => {
+//          cy.screenshot();
+//          cy.get('#navbar-router').contains(name).click();
+//          cy.get('[name="circles-information"] > li').click();
+//        });
+//        it('should delete the circle', () => {
+//          cy.get('.box-button > solid-ac-checker > .button').click();
+//          cy.get('#navbar-router').should('not.contain', name);
+//        });
+//      });
+//    });
+//    describe('Logout process', () => {
+//      it('should properly log out the user', () => {
+//        cy.get('#user-controls__profile > div').click();
+//        cy.get('#user-controls__panel > nav > button').click();
+//        // Dirty fix for logout, targeting logout button is not enough.
+//        cy.clearLocalStorage({ domain: null });
+//        cy.clearCookies({ domain: null });
+//        cy.location().should((loc) => {
+//          expect(loc.pathname).to.eq('/auth/login/');
+//        });
+//      });
+  });
+});

cypress/e2e/signup.cy.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/fixtures/admin.json

+{
+    "username": "admin",
+    "password": "admin"
+}
\ No newline at end of file

cypress/fixtures/example.json

+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
\ No newline at end of file

cypress/support/commands.js

+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- 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/e2e.js

+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+/* globals Cypress */
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+//require('cypress-terminal-report').installSupport();
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+Cypress.on('uncaught:exception', (err, runnable) => {
+    // returning false here prevents Cypress from
+    // failing the test
+    console.log('Cypress detected uncaught exception', err);
+    return false;
+});
+
+Cypress.on('fail', (error) => {
+    console.log(error);
+    if ( typeof Cypress.runner.abort == 'function' ) {
+        Cypress.runner.abort();
+    }
+});

index.html

+<!DOCTYPE html>
+<html lang="{{ @root.client.i18n.lang }}" translate="no">
+  {{> head }}
+  <body class="bg-color-grey">
+    {{> integrated/autoLogin }}
+    {{> integrated/registering }}
+    <div class="notLoggedIn" style="visibility: hidden; overflow: hidden; white-space: nowrap;">
+      {{> integrated/menu-left }}
+      <main id="content" class="segment three-quarter sm-full text-top">
+        {{> integrated/menu-top }}
+        {{> widgets }}
+        {{#each @root.components as | component |}}
+        {{#unless component.parameters.disabled}}
+        {{#if component.route}}
+        <div id="{{component.route}}" data-view="{{component.route}}" hidden="">
+          {{#if (includes component.integration "replacement")}}
+          <{{component.parameters.replacement}}{{mergeAttributes component.attributes}}></{{component.parameters.replacement}}>
+          {{else}}
+          {{#if (includes component.integration "routing")}}
+          <div class="scrollbar-content whitespace-normal padding-top-xlarge padding-right-xsmall padding-bottom-xlarge padding-left-xsmall sm-padding-top-medium">
+            <solid-{{component.type}}{{mergeAttributes component.attributes}}></solid-{{component.type}}>
+          </div>
+          {{/if}}
+          {{#if (any_are component.type "about" "rocketchat" "chat" "circles" "events" "job-board" "polls" "directory" "projects" "resources")}}
+          {{> (get_legacy_view component.type) component=component }}
+          {{/if}}
+          {{/if}}
+        </div>
+        {{else}}
+        {{#if (includes component.integration "replacement")}}
+        {{#if (includes component.integration "routing")}}
+        <{{component.parameters.replacement}}{{mergeAttributes component.attributes}}></{{component.parameters.replacement}}>
+        {{/if}}
+        {{else}}
+        {{#if (is component.type "admin")}}
+        {{> (get_legacy_view "admin") }}
+        {{/if}}
+        {{#if (is component.type "analytics")}}
+        <solid-analytics type="{{component.parameters.type}}" url="{{component.parameters.url}}" id="{{component.parameters.id}}"></solid-analytics>
+        {{/if}}
+        {{#if (is component.type "notification")}}
+        {{> notifications }}
+        {{/if}}
+        {{#if (is component.type "lang")}}
+        <orbit-lang hidden="" lang="{{component.parameters.name}}" file="{{component.parameters.file}}"></orbit-lang>
+        {{/if}}
+        {{/if}}
+        {{/if}}
+        {{/unless}}
+        {{/each}}
+        {{#if (hasComponent "circles")}}
+        <div class="scrollbar-content bg-color-white" id="{{getRoute 'circles' true}}-left" hidden="" data-view="{{getRoute 'circles' true}}-left" no-render="">
+          {{> (get_legacy_view "circles/circle-left")}}
+        </div>
+        {{/if}}
+        {{#if (hasComponent "projects")}}
+        <div class="scrollbar-content bg-color-white" id="{{getRoute 'projects' true}}-left" hidden="" data-view="{{getRoute 'projects' true}}-left" no-render="">
+          {{> (get_legacy_view "projects/project-left")}}
+        </div>
+        {{/if}}
+      </main>
+    </div>
+    <div class="loggedIn-loader bg-color-grey global-loader">
+      <div>
+        <solid-loader position="none"></solid-loader>
+        <div id="something-goes-wrong" hidden="">
+          <br />
+          <span data-trans="errors.somethingGoesWrong"></span>
+          <span>&nbsp;</span>
+          <a data-trans='errors.reload' href="/"></a>
+        </div>
+      </div>
+    </div>
+    {{#if @root.client.i18n}}
+    <orbit-fallback-lang hidden="" lang="{{@root.client.i18n.lang}}"{{#if @root.client.i18n.force}} force="{{@root.client.i18n.force}}"{{/if}}></orbit-fallback-lang>
+    {{/if}}
+    <div id="swal-content-text" hidden="" data-trans="success"></div>
+  </body>
+</html>

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@helpers/*": ["./src/helpers/*"],
+      "@partials/*": ["./src/partials/*"],
+      "@styles/*": ["./src/styles/*"]
+    }
+  }
+}

package.json

 {
-  "name": "sib-app",
-  "version": "1.0.0",
+  "name": "orbit",
+  "version": "2.0.0",
   "license": "MIT",
+  "private": true,
   "repository": {
     "type": "git",
-    "url": "https://git.startinblox.com/applications/sib-app.git"
+    "url": "https://git.startinblox.com/applications/hubl.git"
   },
   "scripts": {
-    "build": "run-p copy:* build:*",
-    "build:css": "node-sass src/styles/index.scss -o dist/styles/",
-    "build:js": "babel 'src/scripts/*.js' -o dist/scripts/index.js",
-    "build:html": "pug src/index.pug -o dist/ --obj config.json",
-    "copy:font": "copyfiles -f src/fonts/* dist/fonts",
-    "copy:image": "copyfiles -f src/images/* dist/images",
-    "serve": "pushstate-server -d ./dist -p 3000",
-    "watch": "run-p copy:* watch:* serve",
-    "watch:css": "npm run build:css && npm run build:css -- -w",
-    "watch:js": "babel --watch \"src/scripts/*.js\" -o dist/scripts/index.js",
-    "watch:pug": "pug --watch src/index.pug -o dist/ --obj config.json"
-  },
-  "release": {
-    "branches": [
-      "master"
-    ],
-    "plugins": [
-      [
-        "@semantic-release/commit-analyzer",
-        {
-          "preset": "angular",
-          "releaseRules": [
-            {
-              "type": "major",
-              "release": "major"
-            },
-            {
-              "type": "minor",
-              "release": "minor"
-            },
-            {
-              "type": "*",
-              "release": "patch"
-            }
-          ]
-        }
-      ],
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/gitlab"
-    ]
+    "watch": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "cypress:open": "cypress open",
+    "cypress:verify": "cypress verify",
+    "cypress:info": "cypress info",
+    "test": "cypress run"
   },
+  "browserslist": [
+    "last 2 Chrome versions"
+  ],
   "dependencies": {
-    "@babel/cli": "^7.7.0",
-    "@babel/core": "^7.7.0",
-    "copyfiles": "^2.1.1",
-    "include-media": "^1.4.9",
-    "node-sass": "^4.13.0",
-    "normalize.css": "^8.0.1",
-    "npm-run-all": "^4.1.5",
-    "pug": "^2.0.4",
-    "pug-cli": "^1.0.0-alpha6",
-    "pushstate-server": "^3.1.0"
+    "@lit/task": "^1.0.1",
+    "@startinblox/orbit-styling-framework": "^1.9.21",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "default-composer": "^0.6.0",
+    "lit": "^3.2.1",
+    "markdown-it": "^14.1.0",
+    "markdown-it-link-attributes": "^4.0.1",
+    "postcss": "^8.4.47",
+    "postcss-preset-env": "^9.6.0",
+    "postcss-scss": "^4.0.9",
+    "sass": "^1.80.6",
+    "sweetalert2": "^11.14.5",
+    "vite": "^5.4.10",
+    "vite-plugin-handlebars": "^2.0.0",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-pwa": "^0.20.5"
+  },
+  "devDependencies": {
+    "cypress": "^13.15.2",
+    "cypress-localstorage-commands": "^2.2.6"
   }
 }