fix: Empty messages can be sent #133

Author: szuperaz

package-lock.json

@@ -81,7 +81,7 @@
     "pretty-bytes": "^5.6.0",
     "rxjs": "~6.6.0",
     "stream-chat": "^4.3.0",
-    "stream-chat-css": "^1.0.22",
+    "stream-chat-css": "^1.0.23",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.0",
     "uuidv4": "^6.2.12",

package.json

@@ -13,7 +13,7 @@
     "@angular/core": "^12.2.0 || ^13.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0",
     "stream-chat": "^4.3.0",
-    "stream-chat-css": "^1.0.22"
+    "stream-chat-css": "^1.0.23"
   },
   "dependencies": {
     "@ctrl/ngx-emoji-mart": "^6.0.1",

projects/stream-chat-angular/package.json

@@ -1,4 +1,9 @@
-<div class="str-chat__input-flat">
+<div
+  class="str-chat__input-flat"
+  [class.str-chat__input-flat-has-attachments]="
+    (attachmentUploads$ | async)!.length > 0
+  "
+>
   <div class="str-chat__input-flat-wrapper">
     <div class="str-chat__input-flat--textarea-wrapper">
       <stream-attachment-preview-list

projects/stream-chat-angular/src/lib/message-input/message-input.component.html

@@ -135,6 +135,7 @@ describe('MessageInputComponent', () => {
     const spy = jasmine.createSpy();
     component.messageUpdate.subscribe(spy);
     component.message = mockMessage();
+    fixture.detectChanges();
     updateMessageSpy.and.rejectWith(new Error('Error'));
     await component.messageSent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
@@ -147,6 +148,7 @@ describe('MessageInputComponent', () => {
 
   it('should emit #messageUpdate event if message update was successful', async () => {
     component.message = mockMessage();
+    fixture.detectChanges();
     const spy = jasmine.createSpy();
     component.messageUpdate.subscribe(spy);
     await component.messageSent(new KeyboardEvent('keydown', { key: 'Enter' }));
@@ -265,13 +267,10 @@ describe('MessageInputComponent', () => {
       { file, state: 'success', url: 'url/to/image' },
     ]);
     const files = [file];
-    attachmentService.resetAttachmentUploads.and.returnValue([]);
-    attachmentService.mapToAttachments.and.returnValue([]);
     await component.filesSelected(files as any as FileList);
     await component.messageSent();
-    await component.messageSent();
 
-    expect(sendMessageSpy).toHaveBeenCalledWith(jasmine.any(String), []);
+    expect(attachmentService.resetAttachmentUploads).toHaveBeenCalledWith();
   });
 
   it(`shouldn't send message, if file uploads are in progress`, async () => {
@@ -372,4 +371,26 @@ describe('MessageInputComponent', () => {
       attachments
     );
   });
+
+  it(`shouldn't send empty message`, () => {
+    const textarea = queryTextarea();
+    const event = new KeyboardEvent('keydown', { key: 'Enter' });
+    spyOn(event, 'preventDefault');
+    textarea?.dispatchEvent(event);
+    fixture.detectChanges();
+
+    expect(sendMessageSpy).not.toHaveBeenCalled();
+    expect(event.preventDefault).toHaveBeenCalledWith();
+  });
+
+  it('should apply CSS class if attachments are present', () => {
+    const cssClass = 'str-chat__input-flat-has-attachments';
+
+    expect(nativeElement.querySelector(`.${cssClass}`)).toBeNull();
+
+    attachmentService.attachmentUploads$.next([{} as any as AttachmentUpload]);
+    fixture.detectChanges();
+
+    expect(nativeElement.querySelector(`.${cssClass}`)).not.toBeNull();
+  });
 });

projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts

@@ -111,8 +111,11 @@ export class MessageInputComponent implements OnChanges, OnDestroy {
       }
       return;
     }
-    const text = this.messageInput.nativeElement.value;
     const attachments = this.attachmentService.mapToAttachments();
+    const text = this.messageInput.nativeElement.value;
+    if (!text && (!attachments || attachments.length === 0)) {
+      return;
+    }
     if (!this.isUpdate) {
       this.messageInput.nativeElement.value = '';
     }