MM-25003_Improve Onboarding screens for the desktop app - Intro Screen (#2220)

e2e/specs/startup/app.test.js

@@ -7,6 +7,7 @@
 const robot = require('robotjs');
 
 const env = require('../../modules/environment');
+const {asyncSleep} = require('../../modules/utils');
 
 describe('startup/app', function desc() {
     this.timeout(30000);
@@ -15,6 +16,11 @@ describe('startup/app', function desc() {
         env.createTestUserDataDir();
         env.cleanTestConfig();
         this.app = await env.getApp();
+
+        // Skip welcome screen modal
+        const welcomeScreenModal = this.app.windows().find((window) => window.url().includes('welcomeScreen'));
+        welcomeScreenModal.click('.WelcomeScreen .WelcomeScreen__button');
+        await asyncSleep(500);
     });
 
     afterEach(async () => {
@@ -41,10 +47,10 @@ describe('startup/app', function desc() {
         existingModal.should.not.be.null;
     });
 
-    it('MM-T4399_2 should show no servers configured in dropdown when no servers exist', async () => {
+    it('MM-T4985 should show app name in title bar when no servers exist', async () => {
         const mainWindow = this.app.windows().find((window) => window.url().includes('index'));
-        const dropdownButtonText = await mainWindow.innerText('.TeamDropdownButton');
-        dropdownButtonText.should.equal('No servers configured');
+        const titleBarText = await mainWindow.innerText('.app-title');
+        titleBarText.should.equal('Mattermost');
     });
 
     it('MM-T4400 should be stopped when the app instance already exists', (done) => {
@@ -62,4 +68,20 @@ describe('startup/app', function desc() {
             done(new Error('Second app instance exists'));
         });
     });
+
+    it('MM-T4975 should show the welcome screen modal when no servers exist', async () => {
+        if (this.app) {
+            await this.app.close();
+        }
+        await env.clearElectronInstances();
+        env.createTestUserDataDir();
+        env.cleanTestConfig();
+        this.app = await env.getApp();
+
+        await asyncSleep(500);
+
+        const welcomeScreenModal = this.app.windows().find((window) => window.url().includes('welcomeScreen'));
+        const modalButton = await welcomeScreenModal.innerText('.WelcomeScreen .WelcomeScreen__button');
+        modalButton.should.equal('Get Started');
+    });
 });

e2e/specs/startup/welcome_screen_modal.test.js

@@ -0,0 +1,142 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+'use strict';
+
+const env = require('../../modules/environment');
+const {asyncSleep} = require('../../modules/utils');
+
+describe('Welcome Screen Modal', function desc() {
+    this.timeout(30000);
+
+    beforeEach(async () => {
+        env.createTestUserDataDir();
+        env.cleanTestConfig();
+        await asyncSleep(1000);
+
+        this.app = await env.getApp();
+
+        welcomeScreenModal = this.app.windows().find((window) => window.url().includes('welcomeScreen'));
+    });
+
+    afterEach(async () => {
+        if (this.app) {
+            await this.app.close();
+        }
+        await env.clearElectronInstances();
+    });
+
+    let welcomeScreenModal;
+
+    it('MM-T4976 should show the slides in the expected order', async () => {
+        const welcomeSlideClass = await welcomeScreenModal.getAttribute('#welcome', 'class');
+        welcomeSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#nextCarouselButton');
+
+        const channelSlideClass = await welcomeScreenModal.getAttribute('#channels', 'class');
+        channelSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#nextCarouselButton');
+
+        const playbooksSlideClass = await welcomeScreenModal.getAttribute('#playbooks', 'class');
+        playbooksSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#nextCarouselButton');
+
+        const boardsSlideClass = await welcomeScreenModal.getAttribute('#boards', 'class');
+        boardsSlideClass.should.contain('Carousel__slide-current');
+    });
+
+    it('MM-T4977 should be able to move through slides clicking the navigation buttons', async () => {
+        let welcomeSlideClass = await welcomeScreenModal.getAttribute('#welcome', 'class');
+        welcomeSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#nextCarouselButton');
+
+        const channelSlideClass = await welcomeScreenModal.getAttribute('#channels', 'class');
+        channelSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#prevCarouselButton');
+
+        welcomeSlideClass = await welcomeScreenModal.getAttribute('#welcome', 'class');
+        welcomeSlideClass.should.contain('Carousel__slide-current');
+    });
+
+    it('MM-T4978 should be able to move through slides clicking the pagination indicator', async () => {
+        const welcomeSlideClass = await welcomeScreenModal.getAttribute('#welcome', 'class');
+        welcomeSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#PaginationIndicator3');
+
+        const boardsSlideClass = await welcomeScreenModal.getAttribute('#boards', 'class');
+        boardsSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#PaginationIndicator2');
+
+        const playbooksSlideClass = await welcomeScreenModal.getAttribute('#playbooks', 'class');
+        playbooksSlideClass.should.contain('Carousel__slide-current');
+    });
+
+    it('MM-T4979 should be able to move forward through slides automatically every 5 seconds', async () => {
+        const welcomeSlideClass = await welcomeScreenModal.getAttribute('#welcome', 'class');
+        welcomeSlideClass.should.contain('Carousel__slide-current');
+
+        await asyncSleep(5500);
+
+        const channelSlideClass = await welcomeScreenModal.getAttribute('#channels', 'class');
+        channelSlideClass.should.contain('Carousel__slide-current');
+    });
+
+    it('MM-T4980 should show the slides in the expected order', async () => {
+        const welcomeSlideClass = await welcomeScreenModal.getAttribute('#welcome', 'class');
+        welcomeSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#nextCarouselButton');
+
+        const channelSlideClass = await welcomeScreenModal.getAttribute('#channels', 'class');
+        channelSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#nextCarouselButton');
+
+        const playbooksSlideClass = await welcomeScreenModal.getAttribute('#playbooks', 'class');
+        playbooksSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#nextCarouselButton');
+
+        const boardsSlideClass = await welcomeScreenModal.getAttribute('#boards', 'class');
+        boardsSlideClass.should.contain('Carousel__slide-current');
+    });
+
+    it('MM-T4981 should be able to move from last to first slide', async () => {
+        await welcomeScreenModal.click('#PaginationIndicator3');
+
+        const boardsSlideClass = await welcomeScreenModal.getAttribute('#boards', 'class');
+        boardsSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#nextCarouselButton');
+
+        const welcomeSlideClass = await welcomeScreenModal.getAttribute('#welcome', 'class');
+        welcomeSlideClass.should.contain('Carousel__slide-current');
+    });
+
+    it('MM-T4982 should be able to move from first to last slide', async () => {
+        const welcomeSlideClass = await welcomeScreenModal.getAttribute('#welcome', 'class');
+        welcomeSlideClass.should.contain('Carousel__slide-current');
+
+        await welcomeScreenModal.click('#prevCarouselButton');
+
+        const boardsSlideClass = await welcomeScreenModal.getAttribute('#boards', 'class');
+        boardsSlideClass.should.contain('Carousel__slide-current');
+    });
+
+    it('MM-T4983 should be able to click the get started button and be redirected to new server modal', async () => {
+        await welcomeScreenModal.click('#getStartedWelcomeScreen');
+
+        const newServerModal = await this.app.waitForEvent('window', {
+            predicate: (window) => window.url().includes('newServer'),
+        });
+        const modalTitle = await newServerModal.innerText('#newServerModal .modal-title');
+        modalTitle.should.equal('Add Server');
+    });
+});

e2e/utils/artifacts.js

@@ -1,7 +1,6 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-
 /* eslint-disable no-console,consistent-return */
 
 const fs = require('fs');

e2e/utils/test_cases.js

@@ -1,7 +1,6 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-
 /* eslint-disable no-console */
 
 // See reference: https://support.smartbear.com/tm4j-cloud/api-docs/