[AAE-10125] Storybook stories for Comments component (#7741)

* [AAE-10125] Storybook stories for Comments component * [AAE-10125] Storybook stories for Comments component * Added missing type & defaultValue for nodeId prop * Fixed MaterialModule imports * Removed unnecessary module imports * Created new Stories about comment with & without an avatar * trigger travis * travis fix
2025-10-01 14:41:32 +00:00 · 2022-08-04 11:28:24 +02:00
parent 80588782d2
commit ac1b77a32d
13 changed files with 575 additions and 105 deletions
--- a/lib/core/mock/comment-content-service.mock.ts
+++ b/lib/core/mock/comment-content-service.mock.ts
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright 2019 Alfresco Software, Ltd.
+ * Copyright 2022 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.
@@ -15,76 +15,30 @@
 * limitations under the License.
 */

-export const fakeUser1 = {
-    enabled: true,
-    firstName: 'firstName',
-    lastName: 'lastName',
-    email: 'fake-email@dom.com',
-    emailNotificationsEnabled: true,
-    company: {},
-    id: 'fake-email@dom.com',
-    avatarId: '123-123-123'
-};
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { CommentModel } from '../models/comment.model';
+import { CommentContentServiceInterface } from '../services/comment-content.service.interface';
+import { testUser } from '../mock/comment-content.mock';

-export const fakeUser2 = {
-    enabled: true,
-    firstName: 'some',
-    lastName: 'one',
-    email: 'some-one@somegroup.com',
-    emailNotificationsEnabled: true,
-    company: {},
-    id: 'fake-email@dom.com',
-    avatarId: '001-001-001'
-};
+@Injectable()
+export class CommentContentServiceMock implements CommentContentServiceInterface {
+    private comments: CommentModel [] = [];

-export const fakeContentComments = {
-    list: {
-        pagination: {
-            count: 4,
-            hasMoreItems: false,
-            totalItems: 4,
-            skipCount: 0,
-            maxItems: 100
-        },
-        entries: [{
-            entry: {
-                createdAt: '2018-03-27T10:55:45.725+0000',
-                createdBy: fakeUser1,
-                edited: false,
-                modifiedAt: '2018-03-27T10:55:45.725+0000',
-                canEdit: true,
-                modifiedBy: fakeUser1,
-                canDelete: true,
-                id: '35a0cea7-b6d0-4abc-9030-f4e461dd1ac7',
-                content: 'fake-message-1'
-            }
-        }, {
-            entry: {
-                createdAt: '2018-03-27T10:55:45.725+0000',
-                createdBy: fakeUser2,
-                edited: false,
-                modifiedAt: '2018-03-27T10:55:45.725+0000',
-                canEdit: true,
-                modifiedBy: fakeUser2,
-                canDelete: true,
-                id: '35a0cea7-b6d0-4abc-9030-f4e461dd1ac7',
-                content: 'fake-message-2'
-            }
-        }
-        ]
+    addNodeComment(nodeId: string, message: string): Observable<CommentModel> {
+        const comment = new CommentModel({
+            id: nodeId,
+            message: message,
+            created: new Date(),
+            createdBy: testUser,
+            isSelected: false
+        });
+        this.comments.push(comment);
+
+        return of(comment);
    }
-};

-export const fakeContentComment = {
-    entry: {
-        createdAt: '2018-03-29T11:49:51.735+0000',
-        createdBy: fakeUser1,
-        edited: false,
-        modifiedAt: '2018-03-29T11:49:51.735+0000',
-        canEdit: true,
-        modifiedBy: fakeUser1,
-        canDelete: true,
-        id: '4d07cdc5-f00c-4391-b39d-a842b12478b2',
-        content: 'fake-comment-message'
-    }
-};
+    getNodeComments(_nodeId: string): Observable<CommentModel[]>{
+        return of(this.comments);
+    };
+}
--- a/lib/core/mock/comment-content.mock.ts
+++ b/lib/core/mock/comment-content.mock.ts
@@ -0,0 +1,209 @@
+/*!
+ * @license
+ * Copyright 2022 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 { CommentModel, EcmCompanyModel, EcmUserModel } from '../models';
+
+export const fakeUser1 = {
+    enabled: true,
+    firstName: 'firstName',
+    lastName: 'lastName',
+    email: 'fake-email@dom.com',
+    emailNotificationsEnabled: true,
+    company: {},
+    id: 'fake-email@dom.com',
+    avatarId: '123-123-123'
+};
+
+export const fakeUser2 = {
+    enabled: true,
+    firstName: 'some',
+    lastName: 'one',
+    email: 'some-one@somegroup.com',
+    emailNotificationsEnabled: true,
+    company: {},
+    id: 'fake-email@dom.com',
+    avatarId: '001-001-001'
+};
+
+export const fakeContentComments = {
+    list: {
+        pagination: {
+            count: 4,
+            hasMoreItems: false,
+            totalItems: 4,
+            skipCount: 0,
+            maxItems: 100
+        },
+        entries: [{
+            entry: {
+                createdAt: '2018-03-27T10:55:45.725+0000',
+                createdBy: fakeUser1,
+                edited: false,
+                modifiedAt: '2018-03-27T10:55:45.725+0000',
+                canEdit: true,
+                modifiedBy: fakeUser1,
+                canDelete: true,
+                id: '35a0cea7-b6d0-4abc-9030-f4e461dd1ac7',
+                content: 'fake-message-1'
+            }
+        }, {
+            entry: {
+                createdAt: '2018-03-27T10:55:45.725+0000',
+                createdBy: fakeUser2,
+                edited: false,
+                modifiedAt: '2018-03-27T10:55:45.725+0000',
+                canEdit: true,
+                modifiedBy: fakeUser2,
+                canDelete: true,
+                id: '35a0cea7-b6d0-4abc-9030-f4e461dd1ac7',
+                content: 'fake-message-2'
+            }
+        }
+        ]
+    }
+};
+
+export const fakeContentComment = {
+    entry: {
+        createdAt: '2018-03-29T11:49:51.735+0000',
+        createdBy: fakeUser1,
+        edited: false,
+        modifiedAt: '2018-03-29T11:49:51.735+0000',
+        canEdit: true,
+        modifiedBy: fakeUser1,
+        canDelete: true,
+        id: '4d07cdc5-f00c-4391-b39d-a842b12478b2',
+        content: 'fake-comment-message'
+    }
+};
+
+const fakeCompany: EcmCompanyModel = {
+    organization: '',
+    address1: '',
+    address2: '',
+    address3: '',
+    postcode: '',
+    telephone: '',
+    fax: '',
+    email: ''
+};
+
+const johnDoe: EcmUserModel = {
+    id: '1',
+    email: 'john.doe@alfresco.com',
+    firstName: 'John',
+    lastName: 'Doe',
+    company: fakeCompany,
+    enabled: true,
+    isAdmin: undefined,
+    avatarId: '001'
+};
+
+const janeEod: EcmUserModel = {
+    id: '2',
+    email: 'jane.eod@alfresco.com',
+    firstName: 'Jane',
+    lastName: 'Eod',
+    company: fakeCompany,
+    enabled: true,
+    isAdmin: undefined
+};
+
+const robertSmith: EcmUserModel = {
+    id: '3',
+    email: 'robert.smith@alfresco.com',
+    firstName: 'Robert',
+    lastName: 'Smith',
+    company: fakeCompany,
+    enabled: true,
+    isAdmin: undefined
+};
+
+export const testUser: EcmUserModel = {
+    id: '44',
+    email: 'test.user@hyland.com',
+    firstName: 'Test',
+    lastName: 'User',
+    company: fakeCompany,
+    enabled: true,
+    isAdmin: undefined,
+    avatarId: '044'
+};
+
+export const getDateXMinutesAgo = (minutes: number) => new Date(new Date().getTime() - minutes * 60000);
+
+export const commentsNodeData: CommentModel[] = [
+    {
+      id: 1,
+      message: `I've done this component, is it cool?`,
+      created: getDateXMinutesAgo(30),
+      createdBy: johnDoe,
+      isSelected: false
+    },
+    {
+      id: 2,
+      message: 'Yeah',
+      created: getDateXMinutesAgo(15),
+      createdBy: janeEod,
+      isSelected: false
+    },
+    {
+      id: 3,
+      message: '+1',
+      created: getDateXMinutesAgo(12),
+      createdBy: robertSmith,
+      isSelected: false
+    },
+    {
+      id: 4,
+      message: 'ty',
+      created: new Date(),
+      createdBy: johnDoe,
+      isSelected: false
+    }
+];
+
+export const commentsTaskData: CommentModel[] = [
+    {
+      id: 1,
+      message: `I've done this task, what's next?`,
+      created: getDateXMinutesAgo(30),
+      createdBy: johnDoe,
+      isSelected: false
+    },
+    {
+      id: 2,
+      message: `I've assigned you another one 🤠`,
+      created: getDateXMinutesAgo(15),
+      createdBy: janeEod,
+      isSelected: false
+    },
+    {
+      id: 3,
+      message: '+1',
+      created: getDateXMinutesAgo(12),
+      createdBy: robertSmith,
+      isSelected: false
+    },
+    {
+      id: 4,
+      message: 'Cheers',
+      created: new Date(),
+      createdBy: johnDoe,
+      isSelected: false
+    }
+];
--- a/lib/core/mock/comment-process-service.mock.ts
+++ b/lib/core/mock/comment-process-service.mock.ts
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright 2019 Alfresco Software, Ltd.
+ * Copyright 2022 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.
@@ -15,28 +15,55 @@
 * limitations under the License.
 */

-import { CommentModel } from '../models/comment.model';
-import { UserProcessModel } from '../models/user-process.model';
+import { Injectable } from '@angular/core';
+import { Observable, from, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { CommentModel, UserProcessModel } from '../models';
+import { CommentProcessServiceInterface } from '../services/comment-process.service.interface';
+import { testUser, fakeUser1 } from '../mock/comment-content.mock';

-export const fakeUser1 = { id: 1, email: 'fake-email@dom.com', firstName: 'firstName', lastName: 'lastName' };
+@Injectable()
+export class CommentProcessServiceMock implements CommentProcessServiceInterface {
+    private comments: CommentModel [] = [];

-export const fakeUser2 = { id: 1001, email: 'some-one@somegroup.com', firstName: 'some', lastName: 'one' };
+    addTaskComment(taskId: string, message: string): Observable<CommentModel> {
+        const comment = new CommentModel({
+            id: taskId,
+            message: message,
+            created: new Date(),
+            createdBy: testUser,
+            isSelected: false
+        });
+        this.comments.push(comment);

-export const fakeTasksComment = {
-    size: 2, total: 2, start: 0,
-    data: [
-        {
-            id: 1, message: 'fake-message-1', created: '', createdBy: fakeUser1
-        },
-        {
-            id: 2, message: 'fake-message-2', created: '', createdBy: fakeUser1
-        }
-    ]
-};
+        return of(comment);
+    }

-export const fakeProcessComment = new CommentModel({id: 1, message: 'Test', created: new Date('2016-11-10T03:37:30.010+0000'), createdBy: new UserProcessModel({
-    id: 13,
-    firstName: 'Wilbur',
-    lastName: 'Adams',
-    email: 'wilbur@app.com'
-})});
+    getTaskComments(_taskId: string): Observable<CommentModel[]> {
+        return of(this.comments);
+    }
+
+    getProcessInstanceComments(_processInstanceId: string): Observable<CommentModel[]> {
+        const user = new UserProcessModel(fakeUser1);
+
+        this.comments.push(new CommentModel({
+            id: 46,
+            message: 'Hello from Process Model',
+            created: new Date('2022-08-02T03:37:30.010+0000'),
+            createdBy: user
+        }));
+
+        return of(this.comments);
+    }
+
+    addProcessInstanceComment(_processInstanceId: string, _message: string): Observable<CommentModel> {
+        return from(this.comments).pipe(
+            map((response) => new CommentModel({
+                id: response.id,
+                message: response.message,
+                created: response.created,
+                createdBy: response.createdBy
+            }))
+        );
+    }
+}
--- a/lib/core/mock/comment-process.mock.ts
+++ b/lib/core/mock/comment-process.mock.ts
@@ -0,0 +1,42 @@
+/*!
+ * @license
+ * Copyright 2022 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 { CommentModel } from '../models/comment.model';
+import { UserProcessModel } from '../models/user-process.model';
+
+export const fakeUser1 = { id: 1, email: 'fake-email@dom.com', firstName: 'firstName', lastName: 'lastName' };
+
+export const fakeUser2 = { id: 1001, email: 'some-one@somegroup.com', firstName: 'some', lastName: 'one' };
+
+export const fakeTasksComment = {
+    size: 2, total: 2, start: 0,
+    data: [
+        {
+            id: 1, message: 'fake-message-1', created: '', createdBy: fakeUser1
+        },
+        {
+            id: 2, message: 'fake-message-2', created: '', createdBy: fakeUser1
+        }
+    ]
+};
+
+export const fakeProcessComment = new CommentModel({id: 1, message: 'Test', created: new Date('2016-11-10T03:37:30.010+0000'), createdBy: new UserProcessModel({
+    id: 13,
+    firstName: 'Wilbur',
+    lastName: 'Adams',
+    email: 'wilbur@app.com'
+})});