[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
This commit is contained in:
Radosław Terelak 2022-08-04 11:28:24 +02:00 committed by GitHub
parent 80588782d2
commit ac1b77a32d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 575 additions and 105 deletions

View File

@ -0,0 +1,66 @@
/*!
* @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 { Meta, moduleMetadata, Story } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { CommentModel } from '../models/comment.model';
import { CoreStoryModule } from '../testing/core.story.module';
import { CommentListComponent } from './comment-list.component';
import { CommentsModule } from './comments.module';
import { commentsTaskData, commentsNodeData } from '../mock/comment-content.mock';
import { EcmUserService } from '../services';
export default {
component: CommentListComponent,
title: 'Core/Components/Comments/Comment List',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CommentsModule],
providers: [
{ provide: EcmUserService, useValue: { getUserProfileImage: () => '../assets/images/logo.png' } }
]
})
],
argTypes: {
comments: {
type: CommentModel,
description: 'CommentModel array',
table: {
type: {
summary: 'CommentModel'
}
}
}
}
} as Meta;
const template: Story<CommentListComponent> = (args: CommentListComponent) => ({
props: {
...args,
clickRow: action('clickRow')
}
});
export const taskBased = template.bind({});
taskBased.args = {
comments: commentsTaskData
};
export const nodeBased = template.bind({});
nodeBased.args = {
comments: commentsNodeData
};

View File

@ -0,0 +1,117 @@
/*!
* @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 { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CommentContentService, CommentProcessService, EcmUserService } from '../services';
import { CoreStoryModule } from '../testing/core.story.module';
import { CommentsComponent } from './comments.component';
import { CommentsModule } from './comments.module';
import { CommentModel } from '../models/comment.model';
import { CommentContentServiceMock } from '../mock/comment-content-service.mock';
import { CommentProcessServiceMock } from '../mock/comment-process-service.mock';
import { commentsTaskData, commentsNodeData } from '../mock/comment-content.mock';
export default {
component: CommentsComponent,
title: 'Core/Components/Comments/Comment',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CommentsModule],
providers: [
{ provide: CommentContentService, useClass: CommentContentServiceMock },
{ provide: CommentProcessService, useClass: CommentProcessServiceMock },
{ provide: EcmUserService, useValue: { getUserProfileImage: () => '../assets/images/logo.png' } }
]
})
],
argTypes: {
comments: {
type: CommentModel,
description: 'CommentModel array',
table: { type: { summary: 'CommentModel' } }
},
readOnly: {
control: 'boolean',
description: 'Displays input area to add new comment',
table: { type: { summary: 'boolean' } }
},
nodeId: {
control: 'text',
description: 'Necessary in order to add a new Node comment',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
},
type: { required: true },
if: { arg: 'taskId', exists: false }
},
taskId: {
control: 'text',
description: 'Necessary in order to add a new Task comment',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
},
type: { required: true },
if: { arg: 'nodeId', exists: false }
}
}
} as Meta;
const template: Story<CommentsComponent> = (args: CommentsComponent) => ({
props: args
});
export const singleCommentWithAvatar = template.bind({});
singleCommentWithAvatar.args = {
comments: [commentsNodeData[0]],
nodeId: undefined,
readOnly: true,
taskId: undefined
};
export const singleCommentWithoutAvatar = template.bind({});
singleCommentWithoutAvatar.args = {
comments: [commentsTaskData[1]],
nodeId: undefined,
readOnly: true,
taskId: undefined
};
export const noComments = template.bind({});
noComments.args = {
comments: [],
nodeId: undefined,
readOnly: true,
taskId: undefined
};
export const nodeComments = template.bind({});
nodeComments.args = {
comments: commentsNodeData,
nodeId: '-fake-',
readOnly: false,
taskId: undefined
};
export const taskComments = template.bind({});
taskComments.args = {
comments: commentsTaskData,
nodeId: undefined,
readOnly: false,
taskId: '-fake-'
};

View File

@ -18,10 +18,12 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { MaterialModule } from '../material.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DataColumnModule } from '../data-column/data-column.module';
import { DataTableModule } from '../datatable/datatable.module';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatLineModule } from '@angular/material/core';
import { FormsModule } from '@angular/forms';
import { PipeModule } from '../pipes/pipe.module';
import { CommentListComponent } from './comment-list.component';
@ -30,13 +32,14 @@ import { CommentsComponent } from './comments.component';
@NgModule({
imports: [
PipeModule,
DataColumnModule,
DataTableModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
CommonModule,
TranslateModule
TranslateModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatListModule,
MatLineModule
],
declarations: [
CommentListComponent,

View File

@ -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);
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'
return of(comment);
}
getNodeComments(_nodeId: string): Observable<CommentModel[]>{
return of(this.comments);
};
}

View File

@ -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
}
];

View File

@ -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
}))
);
}
}

View File

@ -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'
})});

View File

@ -0,0 +1,24 @@
/*!
* @license
* Copyright 2019 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 { Observable } from 'rxjs';
import { CommentModel } from '../models/comment.model';
export interface CommentContentServiceInterface {
addNodeComment(nodeId: string, message: string): Observable<CommentModel>;
getNodeComments(nodeId: string): Observable<CommentModel[]>;
}

View File

@ -17,7 +17,7 @@
import { TestBed } from '@angular/core/testing';
import { CommentModel } from '../models/comment.model';
import { fakeContentComment, fakeContentComments } from '../mock/comment-content-service.mock';
import { fakeContentComment, fakeContentComments } from '../mock/comment-content.mock';
import { CommentContentService } from './comment-content.service';
import { setupTestBed } from '../testing/setup-test-bed';
import { CoreTestingModule } from '../testing/core.testing.module';

View File

@ -22,11 +22,12 @@ import { AlfrescoApiService } from '../services/alfresco-api.service';
import { LogService } from '../services/log.service';
import { map, catchError } from 'rxjs/operators';
import { CommentEntry, CommentsApi } from '@alfresco/js-api';
import { CommentContentServiceInterface } from './comment-content.service.interface';
@Injectable({
providedIn: 'root'
})
export class CommentContentService {
export class CommentContentService implements CommentContentServiceInterface {
_commentsApi: CommentsApi;
get commentsApi(): CommentsApi {

View File

@ -0,0 +1,26 @@
/*!
* @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 { Observable } from 'rxjs';
import { CommentModel } from '../models/comment.model';
export interface CommentProcessServiceInterface {
addTaskComment(taskId: string, message: string): Observable<CommentModel>;
getTaskComments(taskId: string): Observable<CommentModel[]>;
getProcessInstanceComments(processInstanceId: string): Observable<CommentModel[]>;
addProcessInstanceComment(processInstanceId: string, message: string): Observable<CommentModel>;
}

View File

@ -17,7 +17,7 @@
import { TestBed } from '@angular/core/testing';
import { CommentModel } from '../models/comment.model';
import { fakeProcessComment, fakeTasksComment, fakeUser1 } from '../mock/comment-process-service.mock';
import { fakeProcessComment, fakeTasksComment, fakeUser1 } from '../mock/comment-process.mock';
import { CommentProcessService } from './comment-process.service';
import { setupTestBed } from '../testing/setup-test-bed';
import { CoreTestingModule } from '../testing/core.testing.module';

View File

@ -23,11 +23,12 @@ import { AlfrescoApiService } from './alfresco-api.service';
import { LogService } from './log.service';
import { map, catchError } from 'rxjs/operators';
import { ActivitiCommentsApi } from '@alfresco/js-api';
import { CommentProcessServiceInterface } from './comment-process.service.interface';
@Injectable({
providedIn: 'root'
})
export class CommentProcessService {
export class CommentProcessService implements CommentProcessServiceInterface {
_commentsApi: ActivitiCommentsApi;
get commentsApi(): ActivitiCommentsApi {