[ADF-2353] replaced datatable with mat-list (#3085)

* [ADF-2353] replaced datatable with mat-list

* [ADF-2353] fixed test for the new mat-list comment

lib/process-services/comments/comment-list.component.spec.ts

@@ -18,8 +18,8 @@
 import { DatePipe } from '@angular/common';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CommentProcessModel, UserProcessModel } from '@alfresco/adf-core';
-import { DataRowEvent, ObjectDataRow } from '@alfresco/adf-core';
 import { CommentListComponent } from './comment-list.component';
+import { By } from '@angular/platform-browser';
 
 const testUser: UserProcessModel = new UserProcessModel({
     id: '1',
@@ -35,6 +35,13 @@ const testComment: CommentProcessModel = new CommentProcessModel({
     createdBy: testUser
 });
 
+const secondtestComment: CommentProcessModel = new CommentProcessModel({
+    id: 2,
+    message: '2nd Test Comment',
+    created: new Date().toDateString(),
+    createdBy: testUser
+});
+
 describe('CommentListComponent', () => {
 
     let commentList: CommentListComponent;
@@ -59,31 +66,52 @@ describe('CommentListComponent', () => {
         });
     }));
 
-    it('should emit row click event', (done) => {
-        let row = new ObjectDataRow(testComment);
-        let rowEvent = new DataRowEvent(row, null);
+    it('should emit row click event', async(() => {
+        commentList.comments = [testComment];
 
         commentList.clickRow.subscribe(selectedComment => {
             expect(selectedComment.id).toEqual(1);
             expect(selectedComment.message).toEqual('Test Comment');
             expect(selectedComment.createdBy).toEqual(testUser);
             expect(selectedComment.created).toEqual(testDate.toDateString());
-            done();
+            expect(selectedComment.isSelected).toBeTruthy();
         });
 
-        commentList.selectComment(rowEvent);
-    });
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            let comment = fixture.debugElement.query(By.css('#adf-comment-1'));
+            comment.triggerEventHandler('click', null);
+        });
+    }));
 
-    it('should not show comment list if no input is given', (done) => {
+    it('should deselect the previous selected comment when a new one is clicked', async(() => {
+        testComment.isSelected = true;
+        commentList.selectedComment = testComment;
+        commentList.comments = [testComment, secondtestComment];
+
+        commentList.clickRow.subscribe(selectedComment => {
+            fixture.detectChanges();
+            let commentSelectedList = fixture.nativeElement.querySelectorAll('.is-selected');
+            expect(commentSelectedList.length).toBe(1);
+            expect(commentSelectedList[0].textContent).toContain('2nd Test Comment');
+        });
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            let comment = fixture.debugElement.query(By.css('#adf-comment-2'));
+            comment.triggerEventHandler('click', null);
+        });
+    }));
+
+    it('should not show comment list if no input is given', async(() => {
         fixture.detectChanges();
 
         fixture.whenStable().then(() => {
             expect(fixture.nativeElement.querySelector('adf-datatable')).toBeNull();
-            done();
         });
-    });
+    }));
 
-    it('should show comment message when input is given', (done) => {
+    it('should show comment message when input is given', async(() => {
         commentList.comments = [testComment];
         fixture.detectChanges();
 
@@ -92,11 +120,10 @@ describe('CommentListComponent', () => {
             expect(elements.length).toBe(1);
             expect(elements[0].innerText).toBe(testComment.message);
             expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull();
-            done();
         });
-    });
+    }));
 
-    it('should show comment user when input is given', (done) => {
+    it('should show comment user when input is given', async(() => {
         commentList.comments = [testComment];
         fixture.detectChanges();
 
@@ -105,11 +132,10 @@ describe('CommentListComponent', () => {
             expect(elements.length).toBe(1);
             expect(elements[0].innerText).toBe(testComment.createdBy.firstName + ' ' + testComment.createdBy.lastName);
             expect(fixture.nativeElement.querySelector('#comment-user:empty')).toBeNull();
-            done();
         });
-    });
+    }));
 
-    it('should show comment date time when input is given', (done) => {
+    it('should show comment date time when input is given', async(() => {
         commentList.comments = [testComment];
         fixture.detectChanges();
 
@@ -118,22 +144,20 @@ describe('CommentListComponent', () => {
             expect(elements.length).toBe(1);
             expect(elements[0].innerText).toBe(commentList.transformDate(testDate.toDateString()));
             expect(fixture.nativeElement.querySelector('#comment-time:empty')).toBeNull();
-            done();
         });
-    });
+    }));
 
-    it('comment date time should start with Today when comment date is today', (done) => {
+    it('comment date time should start with Today when comment date is today', async(() => {
         commentList.comments = [testComment];
         fixture.detectChanges();
 
         fixture.whenStable().then(() => {
             element = fixture.nativeElement.querySelector('#comment-time');
             expect(element.innerText).toContain('Today');
-            done();
         });
-    });
+    }));
 
-    it('comment date time should start with Yesterday when comment date is yesterday', (done) => {
+    it('comment date time should start with Yesterday when comment date is yesterday', async(() => {
         testComment.created = new Date((Date.now() - 24 * 3600 * 1000));
         commentList.comments = [testComment];
         fixture.detectChanges();
@@ -141,11 +165,10 @@ describe('CommentListComponent', () => {
         fixture.whenStable().then(() => {
             element = fixture.nativeElement.querySelector('#comment-time');
             expect(element.innerText).toContain('Yesterday');
-            done();
         });
-    });
+    }));
 
-    it('comment date time should not start with Today/Yesterday when comment date is before yesterday', (done) => {
+    it('comment date time should not start with Today/Yesterday when comment date is before yesterday', async(() => {
         testComment.created = new Date((Date.now() - 24 * 3600 * 1000 * 2));
         commentList.comments = [testComment];
         fixture.detectChanges();
@@ -154,11 +177,10 @@ describe('CommentListComponent', () => {
             element = fixture.nativeElement.querySelector('#comment-time');
             expect(element.innerText).not.toContain('Today');
             expect(element.innerText).not.toContain('Yesterday');
-            done();
         });
-    });
+    }));
 
-    it('should show user icon when input is given', (done) => {
+    it('should show user icon when input is given', async(() => {
         commentList.comments = [testComment];
         fixture.detectChanges();
 
@@ -167,16 +189,6 @@ describe('CommentListComponent', () => {
             expect(elements.length).toBe(1);
             expect(elements[0].innerText).toContain(commentList.getUserShortName(testComment.createdBy));
             expect(fixture.nativeElement.querySelector('#comment-user-icon:empty')).toBeNull();
-            done();
         });
-    });
-
-    it('should hide the datatable header in comment-list as showHeader is false', (done) => {
-        fixture.detectChanges();
-        fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            expect(element.querySelector('.adf-datatable-header')).toBe(null);
-            done();
-        });
-    });
+    }));
 });