[ADF-3388] E2e tests for notification component added (#3630)

* [ADF-3388] E2e tests for notification component added

* [ADF-3388] Added missing function

demo-shell/src/app/components/notifications/notifications.component.html

@@ -16,7 +16,7 @@
             data-automation-id="notification-message">
     </mat-form-field>
 
-    <button mat-icon-button (click)="send()">
+    <button mat-icon-button (click)="send()" data-automation-id="notification-default-button">
         <mat-icon>send</mat-icon>
     </button>
 
@@ -28,53 +28,43 @@
         </mat-slide-toggle>
     </div>
 
-    <div data-automation-id="notification-action-output">
+    <div data-automation-id="notification-action-output" *ngIf="actionOutput">
         {{ actionOutput }}
     </div>
-    <mat-accordion>
-            <mat-expansion-panel>
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                        <h3>Custom Configuration</h3>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
     
-
+    <h2>Custom Configuration</h2>
+    
     <form [formGroup]="configForm">
         <mat-form-field>
-            <input matInput class="form-control" formControlName="announcementMessage" placeholder="Announcement Message" >
+            <mat-select class="form-control" formControlName="direction" placeholder="Direction" data-automation-id="notification-direction">
-        </mat-form-field>
-        <mat-form-field>
-            <mat-select class="form-control" formControlName="direction" placeholder="Direction">
                     <mat-option *ngFor="let direction of directions" [value]="direction.value">
                         {{ direction.title }}
                     </mat-option>
             </mat-select>
         </mat-form-field>
         <mat-form-field>
-            <input matInput type="number" class="form-control" formControlName="duration" placeholder="Duration" >
+            <input matInput type="number" class="form-control" formControlName="duration" placeholder="Duration" data-automation-id="notification-duration">
         </mat-form-field>
         <mat-form-field>
-            <mat-select class="form-control" formControlName="horizontalPosition" placeholder="Horizontal Position">
+            <mat-select class="form-control" formControlName="horizontalPosition" placeholder="Horizontal Position" data-automation-id="notification-horizontal-position">
                 <mat-option *ngFor="let horizontalPosition of horizontalPositions" [value]="horizontalPosition.value">
                     {{ horizontalPosition.title }}
                 </mat-option>
             </mat-select>
         </mat-form-field>
         <mat-form-field>
-            <mat-select class="form-control" formControlName="verticalPosition" placeholder="Vertical Position">
+            <mat-select class="form-control" formControlName="verticalPosition" placeholder="Vertical Position" data-automation-id="notification-vertical-position">
                 <mat-option *ngFor="let verticalPosition of verticalPositions" [value]="verticalPosition.value">{{ verticalPosition.title }}</mat-option>
             </mat-select>
         </mat-form-field>
-
+        <button mat-icon-button (click)="sendCustomConfig()" data-automation-id="notification-custom-config-button">
-        
+            <mat-icon>send</mat-icon>
+        </button>
     </form>
-
+    <div>
-    <button mat-icon-button (click)="sendCustomConfig()">
+        <h3>SnackBar Config</h3>
-        <mat-icon>send</mat-icon>
+        <p *ngIf="snackBarConfigObject" data-automation-id="notification-custom-object">
-    </button>
+            {{snackBarConfigObject}}
-
+        </p>
-</mat-expansion-panel>
+    </div>
-</mat-accordion>
-
 </div>

demo-shell/src/app/components/notifications/notifications.component.ts

@@ -29,6 +29,7 @@ export class NotificationsComponent implements OnInit {
     message = 'I ♥️ ADF';
     withAction = false;
     actionOutput = '';
+    snackBarConfigObject = '';
 
     configForm: FormGroup;
 
@@ -57,7 +58,6 @@ export class NotificationsComponent implements OnInit {
 
     ngOnInit() {
         this.configForm = this.formBuilder.group({
-            announcementMessage: new FormControl(''),
             direction: new FormControl(''),
             horizontalPosition: new FormControl(''),
             verticalPosition: new FormControl(''),
@@ -72,10 +72,6 @@ export class NotificationsComponent implements OnInit {
     }
 
     setSnackBarConfig(configFormValues: any) {
-
-        if (configFormValues.announcementMessage) {
-            this.snackBarConfig.announcementMessage = configFormValues.announcementMessage;
-        }
         if (configFormValues.direction) {
             this.snackBarConfig.direction = configFormValues.direction;
 
@@ -90,7 +86,6 @@ export class NotificationsComponent implements OnInit {
         if (configFormValues.verticalPosition) {
             this.snackBarConfig.verticalPosition = configFormValues.verticalPosition;
         }
-
     }
 
     send() {
@@ -110,7 +105,10 @@ export class NotificationsComponent implements OnInit {
 
     sendCustomConfig() {
         this.actionOutput = '';
-        console.log(this.snackBarConfig);
+        this.snackBarConfigObject = `{"direction": "${this.snackBarConfig.direction}",
+                                    "duration": "${this.snackBarConfig.duration}",
+                                    "horizontalPosition": "${ this.snackBarConfig.horizontalPosition}",
+                                    "verticalPosition": "${ this.snackBarConfig.verticalPosition}"}`;
 
         if (this.message) {
             if (this.withAction) {

e2e/content-services/notifications_component.e2e.ts

@@ -0,0 +1,111 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import LoginPage = require('../pages/adf/loginPage');
+
+import AcsUserModel = require('../models/ACS/acsUserModel');
+
+import TestConfig = require('../test.config');
+
+import AlfrescoApi = require('alfresco-js-api-node');
+
+import NotificationPage = require('../pages/adf/notificationPage');
+
+describe('Notifications Component', () => {
+
+    let loginPage = new LoginPage();
+    let notificationPage = new NotificationPage();
+
+    let acsUser = new AcsUserModel();
+
+    beforeAll(async (done) => {
+
+        this.alfrescoJsApi = new AlfrescoApi({
+            provider: 'ECM',
+            hostEcm: TestConfig.adf.url
+        });
+
+        await this.alfrescoJsApi.login(TestConfig.adf.adminEmail, TestConfig.adf.adminPassword);
+
+        await this.alfrescoJsApi.core.peopleApi.addPerson(acsUser);
+
+        await this.alfrescoJsApi.login(acsUser.id, acsUser.password);
+
+        loginPage.loginToContentServicesUsingUserModel(acsUser);
+
+        notificationPage.goToNotificationsPage();
+
+        done();
+    });
+
+    it('[C279977] Should show notification when the message is not empty and button is clicked', () => {
+        notificationPage.enterMessageField('Notification test');
+        notificationPage.clickDefaultNotificationButton();
+        notificationPage.checkNotificationSnackBarIsDisplayedWithMessage('Notification test');
+    });
+
+    it('[C279979] Should not show notification when the message is empty and button is clicked', () => {
+        notificationPage.enterMessageField('');
+        notificationPage.clickDefaultNotificationButton();
+        notificationPage.checkNotificationSnackBarIsNotDisplayed();
+    });
+
+    it('[C279978] Should show notification with action when the message is not empty and button is clicked', () => {
+        notificationPage.enterMessageField('Notification test');
+        notificationPage.clickActionToggle();
+        notificationPage.clickDefaultNotificationButton();
+        notificationPage.checkNotificationSnackBarIsDisplayedWithMessage('Notification test');
+        notificationPage.clickActionButton();
+        notificationPage.checkActionEvent();
+        notificationPage.clickActionToggle();
+    });
+
+    it('[C279981] Should show notification with action when the message is not empty and custom configuration button is clicked', () => {
+        notificationPage.enterMessageField('Notification test');
+        notificationPage.clickCustomNotificationButton();
+        notificationPage.checkNotificationSnackBarIsDisplayed();
+    });
+
+    it('[C279987] Should show custom notification during a limited time when a duration is added', () => {
+        notificationPage.enterMessageField('Notification test');
+        notificationPage.enterDurationField(1000);
+        notificationPage.clickCustomNotificationButton();
+        notificationPage.checkNotificationSnackBarIsDisplayed();
+        browser.sleep(1000);
+        notificationPage.checkNotificationSnackBarIsNotDisplayed();
+    });
+
+    it('[C280000] Should show notification with action when the message is not empty and custom button is clicked', () => {
+        notificationPage.enterMessageField('Notification test');
+        notificationPage.clickActionToggle();
+        notificationPage.clickCustomNotificationButton();
+        notificationPage.checkNotificationSnackBarIsDisplayedWithMessage('Notification test');
+        notificationPage.clickActionButton();
+        notificationPage.checkActionEvent();
+        notificationPage.clickActionToggle();
+    });
+
+    it('[C280001] Should meet configuration when a custom notification is set', () => {
+        notificationPage.enterMessageField('Notification test');
+        notificationPage.enterDurationField(1000);
+        notificationPage.selectHorizontalPosition('Right');
+        notificationPage.selectVerticalPosition('Top');
+        notificationPage.selectDirection('Left to right');
+        notificationPage.clickCustomNotificationButton();
+        expect(notificationPage.getConfigObject()).toBe('{"direction": "ltr", "duration": "1000", "horizontalPosition": "right", "verticalPosition": "top"}');
+    });
+});

e2e/pages/adf/notificationPage.js

@@ -19,10 +19,110 @@ var Util = require('../../util/util');
 
 var NotificationPage = function () {
 
+    var messageField = element(by.css("input[data-automation-id='notification-message']"));
+    var horizontalPosition = element(by.css("mat-select[data-automation-id='notification-horizontal-position']"));
+    var verticalPosition = element(by.css("mat-select[data-automation-id='notification-vertical-position']"));
+    var durationField = element(by.css("input[data-automation-id='notification-duration']"));
+    var direction = element(by.css("mat-select[data-automation-id='notification-direction']"));
+    var actionToggle = element(by.css("mat-slide-toggle[data-automation-id='notification-action-toggle']"));
+    var notificationSnackBar = element.all(by.css("simple-snack-bar")).first();
+    var actionOutput = element(by.css("div[data-automation-id='notification-action-output']"));
+    var actionButton = element(by.css("simple-snack-bar > button"));
+    var defaultNotificationButton = element(by.css("button[data-automation-id='notification-default-button']"));
+    var customNotificationButton = element(by.css("button[data-automation-id='notification-custom-config-button']"));
+    var selectionDropDown = element.all(by.css("div[class*='mat-select-content']")).first();
+    var notificationsPage = element(by.css("a[data-automation-id='Notifications']"));
+    var notificationConfig = element(by.css("p[data-automation-id='notification-custom-object']"));
+
     this.checkNotifyContains = function (message) {
         Util.waitUntilElementIsVisible(element(by.cssContainingText('simple-snack-bar', message)));
         return this;
     };
 
+    this.goToNotificationsPage = function () {
+        Util.waitUntilElementIsVisible(notificationsPage);
+        notificationsPage.click();
+    };
+
+    this.getConfigObject = function () {
+        Util.waitUntilElementIsVisible(notificationConfig);
+        return notificationConfig.getText();
+    };
+
+    this.getSnackBarText = function () {
+        return notificationSnackBar.getText();
+    };
+
+    this.checkNotificationSnackBarIsDisplayed = function () {
+        Util.waitUntilElementIsVisible(notificationSnackBar);
+        return this;
+    };
+
+    this.checkNotificationSnackBarIsDisplayedWithMessage = function (message) {
+        let notificationSnackBarMessage = element(by.cssContainingText("simple-snack-bar", message));
+        Util.waitUntilElementIsVisible(notificationSnackBarMessage);
+        return this;
+    };
+
+    this.checkNotificationSnackBarIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotVisible(notificationSnackBar);
+        return this;
+    };
+
+    this.enterMessageField = function (text) {
+        Util.waitUntilElementIsVisible(messageField);
+        messageField.clear().sendKeys(text);
+    };
+
+    this.enterDurationField = function (time) {
+        Util.waitUntilElementIsVisible(durationField);
+        durationField.clear().sendKeys(time);
+    };
+
+    this.selectHorizontalPosition = function (selectedItem) {
+        var selectItem = element(by.cssContainingText("span[class='mat-option-text']", selectedItem));
+        horizontalPosition.click();
+        Util.waitUntilElementIsVisible(selectionDropDown);
+        selectItem.click();
+    };
+
+    this.selectVerticalPosition = function (selectedItem) {
+        var selectItem = element(by.cssContainingText("span[class='mat-option-text']", selectedItem));
+        verticalPosition.click();
+        Util.waitUntilElementIsVisible(selectionDropDown);
+        selectItem.click();
+    };
+
+    this.selectDirection = function (selectedItem) {
+        var selectItem = element(by.cssContainingText("span[class='mat-option-text']", selectedItem));
+        direction.click();
+        Util.waitUntilElementIsVisible(selectionDropDown);
+        selectItem.click();
+    };
+
+    this.clickDefaultNotificationButton = function () {
+        Util.waitUntilElementIsVisible(defaultNotificationButton);
+        defaultNotificationButton.click();
+    };
+
+    this.clickCustomNotificationButton = function () {
+        Util.waitUntilElementIsVisible(customNotificationButton);
+        customNotificationButton.click();
+    };
+
+    this.checkActionEvent = function () {
+        Util.waitUntilElementIsVisible(actionOutput);
+        return this;
+    };
+
+    this.clickActionToggle = function () {
+        Util.waitUntilElementIsVisible(actionToggle);
+        actionToggle.click();
+    };
+
+    this.clickActionButton = function () {
+        actionButton.click();
+    };
 };
+
 module.exports = NotificationPage;