e2e tests for /settings/appearance. Part 1

cypress/integration/appearance/layouts.spec.js

@@ -0,0 +1,109 @@
+import * as notification from '../../support/helpers/notification';
+import { clickAll } from '../../support/helpers/clickAll';
+
+const selectors = {
+    composerMaximized: '[data-cy-appearance-composer="maximized"]',
+    composerPopup: '[data-cy-appearance-composer="popup"]',
+    inboxColumn: '[data-cy-appearance-inbox="column"]',
+    inboxRow: '[data-cy-appearance-inbox="row"]',
+    conversationGroup: '[data-cy-appearance-conversations="group"]',
+    conversationSingleMessage: '[data-cy-appearance-conversations="single"]',
+    stickyLabels: '[data-cy-appearance="sticky-labels"]',
+    composerMode: '[data-cy-appearance="composer-mode"]',
+    composerTextDirection: '[data-cy-appearance="composer-text-direction"]'
+};
+
+function setDefault() {
+    clickAll([selectors.composerMaximized, selectors.inboxRow, selectors.conversationSingleMessage]);
+    cy.get(selectors.composerMode).select('Plain text');
+    cy.get(selectors.composerTextDirection).select('Right to Left');
+    notification.notificationContainerIsVisible(); //We should have at least 1 notification from previous tests.
+    notification.count(0); //Make sure the previous notifications are gone.
+}
+
+// it's possible to have multiple notifications with the same text.
+// This is makes it hard to distinguish the origin for each notification.
+const waitForFadeout = true;
+
+context('Layouts', () => {
+    before(() => {
+        cy.autoLogin('free');
+        cy.visit('/appearance');
+        cy.url().should('include', '/appearance');
+        setDefault();
+    });
+
+    describe('Composer size', () => {
+        it('Set composer size to popup', () => {
+            cy.get(selectors.composerPopup).click();
+            notification.hasText('Preference saved', waitForFadeout);
+        });
+
+        it('Set composer size to maximized', () => {
+            cy.get(selectors.composerMaximized).click();
+            notification.hasText('Preference saved', waitForFadeout);
+        });
+    });
+
+    describe('Inbox display', () => {
+        it('Set inbox display to column', () => {
+            cy.get(selectors.inboxColumn).click();
+            notification.hasText('Preference saved', waitForFadeout);
+        });
+
+        it('Set inbox display to row', () => {
+            cy.get(selectors.inboxRow).click();
+            notification.hasText('Preference saved', waitForFadeout);
+        });
+    });
+
+    describe('Conversation view', () => {
+        it('Enable conversation groups', () => {
+            cy.get(selectors.conversationGroup).click();
+            notification.hasText('Preference saved', waitForFadeout);
+        });
+
+        it('Enable single messages', () => {
+            cy.get(selectors.conversationSingleMessage).click();
+            notification.hasText('Preference saved', waitForFadeout);
+        });
+    });
+
+    describe('Sticky labels', () => {
+        it('Toggle sticky labels', () => {
+            //Sticky labels are enabled only when conversation mode is ON.
+            cy.get(selectors.conversationGroup).click();
+            notification.count(0); //Make sure the previous notification is gone.
+
+            cy.get(selectors.stickyLabels).click();
+            notification.hasText('Preference saved', true);
+
+            cy.get(selectors.stickyLabels).click();
+            notification.hasText('Preference saved', true);
+        });
+    });
+
+    describe('Composer mode', () => {
+        it('Set composer mode to normal', () => {
+            cy.get(selectors.composerMode).select('Normal');
+            notification.hasText('Preference saved', waitForFadeout);
+        });
+
+        it('Set composer mode to plain text', () => {
+            cy.get(selectors.composerMode).select('Plain text');
+            notification.hasText('Preference saved', waitForFadeout);
+        });
+    });
+
+    describe('Composer text direction', () => {
+        it('Left to right', () => {
+            cy.get(selectors.composerTextDirection).select('Left to Right');
+            notification.hasText('Preference saved', waitForFadeout);
+        });
+
+        it('Right to left', () => {
+            cy.get(selectors.composerTextDirection).select('Right to Left');
+            notification.hasText('Preference saved'); //Last test, don't need to wait for fadeout.
+        });
+    });
+});

cypress/integration/appearance/toolbars.spec.js

@@ -0,0 +1,30 @@
+import * as notification from '../../support/helpers/notification';
+import { clickAll as setDefault } from '../../support/helpers/clickAll';
+
+const selectors = {
+    readUnread: '[data-cy-appearance-toolbar="read-unread"]',
+    unreadRead: '[data-cy-appearance-toolbar="unread-read"]'
+};
+
+// it's possible to have multiple notifications with the same text.
+// This is makes it hard to distinguish the origin for each notification.
+const waitForFadeout = true;
+
+describe('Read/unread toolbar buttons', () => {
+    before(() => {
+        cy.autoLogin('free');
+        cy.visit('/appearance');
+        cy.url().should('include', '/appearance');
+        setDefault([selectors.unreadRead]);
+    });
+
+    it('Set toolbar to read-unread', () => {
+        cy.get(selectors.readUnread).click();
+        notification.hasText('Buttons position saved', waitForFadeout);
+    });
+
+    it('Set toolbar to unread-read', () => {
+        cy.get(selectors.unreadRead).click();
+        notification.hasText('Buttons position saved'); //Last test, don't need to wait for fadeout.
+    });
+});

cypress/support/helpers/clickAll.js

@@ -0,0 +1,5 @@
+export const clickAll = (selectors) => {
+    selectors.forEach((selector) => {
+        cy.get(selector).click();
+    });
+};

cypress/support/helpers/notification.js

@@ -0,0 +1,31 @@
+const selector = '[data-cy=notifications-container]';
+
+/*
+ *   The fadeIn / fadeOut animations last for 1 second.
+ *   The notification is displayed for ~2 seconds before the fadeOut starts.
+ */
+export const hasText = (notificationText, waitForAnimation) => {
+    cy.wait(1000); // The fadeIn animation
+    cy.get(selector).should('be.visible');
+    cy.get(selector)
+        .children()
+        .last()
+        .should('contain.text', notificationText)
+        .and('be.visible');
+
+    if (waitForAnimation) {
+        return cy.get(selector).should('be.hidden');
+    }
+};
+
+//Multiple notifications can be shown at once.
+export const count = (expected = 0) => {
+    return cy
+        .get(selector)
+        .children()
+        .should('have.length', expected);
+};
+
+export const notificationContainerIsVisible = () => {
+    return cy.get(selector).should('be.visible');
+};