search

rpaschoal / ng-chat

💬 A simple facebook/linkedin lookalike chat module for Angular applications.
MIT License
155 stars 92 forks source link

Add thumbnails for image type messages #158

Closed rrpuente closed 4 years ago

rrpuente commented 4 years ago

Thumbnails support in the chat-window component

rrpuente commented 4 years ago

Nice one @rrpuente ! Couple comments on things I believe we should address before merging and releasing this one.

Could you also please add some unit tests to verify the new image message behavior?

Good day @rpaschoal, I've thought about what tests can be done, but all I can think about is to add messages with the type 3 (Images) to the tests that are already implemented, Can you suggest what tests can be implemented?

rpaschoal commented 4 years ago

Thanks for pushing the changes requested @rrpuente

It would be nice to verify that the image message gets rendered. You might need to use a TestBed for that, you can check out the ng-chat-options test for example. Now that the window was recently broken down to a smaller component it might be easier to achieve this.

rpaschoal commented 4 years ago

Once we get coverage for these changes I think we'll be ready to merge and release it @rrpuente 🚀

rrpuente commented 4 years ago

Good day @rpaschoal, I've trying for several hours with no luck. It looks like the chat-component does not get the reference to the window or something like that. I just tried a similar test than the one you did for the scroll with the aim of creating a chat window with one message, but subject.chatMessages is always undefined, therefore the fixture cannot find the Html object. this is the code, can you please help? it('An image message must be rendered ', () => { const chattingToUser = new User(); const event = { keyCode: 13 }; let message: Message = { fromId: 1, toId: 99, message: '', type: 3 } chattingToUser.id = 99; const currentWindow = new Window(chattingToUser, false, false); currentWindow.messages.push(message); currentWindow.newMessage = "Test"; subject.onChatInputTyped(event, currentWindow); fixture.detectChanges(); let img = fixture.debugElement.query(By.css('.image-message')); let img1 = fixture.debugElement.query(By.css('img')); });

If I add the line subject.window = currentWindow, then I get the error: Error: The pipe 'emojify' could not be found!

rpaschoal commented 4 years ago

Hi @rrpuente , it seems that you're heading to the right direction from what I can see as there is a fixture in place to mount the Angular component.

From the error message it seems it is trying to render it but crashing for not finding the custom ng-chat emojify pipe. There are a few custom pipes in ng-chat and this is one.

Just as an idea from the error message, don't you have to register those pipes to the TestBed as depedencies?