Merge pull request #50 from 1FF/RZ-8828-image-and-video-sending

Rz 8828 image and video sending

__tests__/unit/chat-ui.spec.js

@@ -5,12 +5,16 @@ import { loadingDots, messageIncrementor } from '../__mocks__/htmlFixtures';
 import { loadingDots as loadingDotsObj } from '../../src/lib/utils';
 import { customEventTypes } from '../../src/lib/custom/tracking-events';
 import { actionService } from '../../src/lib/action-service';
+import { getStringInAngleBrackets } from '../../src/lib/helpers';
+
+const chatWidgets = require('../../src/lib/chat-widgets');
 
 jest.mock('../../src/lib/helpers', () => {
   const originalModule = jest.requireActual('../../src/lib/helpers');
   const mockHelpers = {
     __esModule: true,
     ...originalModule,
+    getStringInAngleBrackets: jest.fn().mockReturnValue(['https://mysite.com']),
   };
 
   // Define the different return values for getAnswerConfig
@@ -376,17 +380,109 @@ describe('ChatUi', () => {
     expect(expected).toBe(false);
   });
 
-  test('historyTraverse iterates over the history', () => {
+  test('should load assistant initial message and send it', async () => {
     // Arrange
+    sut.init({ translations: { paymentLoaderTexts: [] } });
+    sut.loadInitialMessageSettings = jest.fn();
+    sut.delay = jest.fn();
+    sut.elements = {
+      chatbotContainer: {
+        appendChild: jest.fn()
+      },
+      messageIncrementor: {
+        appendChild: jest.fn(),
+      },
+    };
     sut.appendHtml = jest.fn();
-    actionService.clearButtonCodes = jest.fn().mockReturnValue('element2', true);
+    sut.hideInput = jest.fn();
+
+    jest.spyOn(sut, 'sendAssistantInitialMessage');
+    jest.spyOn(sut.socket, 'emit');
+
+    // Act
+    await sut.loadAssistantInitialMessage();
+
+    // Assert
+    expect(sut.sendAssistantInitialMessage).toHaveBeenCalled();
+    expect(sut.socket.emit).toHaveBeenCalledWith('chat', {
+      message: assistant.initialMessage.content,
+      role: roles.assistant,
+      term,
+      user_id: 'userID',
+    });
+  });
+
+  describe('historyTraverse', () => {
+    test('iterates over the history with one element', () => {
+      sut.appendHtml = jest.fn();
+      sut.initMedia = jest.fn();
+
+      sut.historyTraverse([{ content: 'element1' }]);
+
+      expect(sut.appendHtml).toBeCalledTimes(1);
+      expect(sut.initMedia).toBeCalledTimes(1);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element1' }, true);
+    });
+
+    test('iterates over the history without action data with 2 elements', () => {
+      sut.appendHtml = jest.fn();
+      sut.initMedia = jest.fn();
+
+      actionService.clearButtonCodes = jest.fn().mockReturnValue('element2', true);
+
+      sut.historyTraverse([{ content: 'element1' }, { content: 'element2' }]);
+
+      expect(sut.initMedia).toBeCalledTimes(1);
+      expect(sut.appendHtml).toBeCalledTimes(2);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element1' }, false);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element2' }, true);
+      expect(actionService.clearButtonCodes).toBeCalled();
+    });
+
+    test('iterates over the history with two element with caret', () => {
+      sut.appendHtml = jest.fn();
+      sut.initMedia = jest.fn();
+      sut.initNewLine = jest.fn();
+
+      sut.historyTraverse([{ content: 'elem^ent1' }, { content: 'element2' }]);
+
+      expect(sut.appendHtml).toBeCalledTimes(1);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element2' }, true);
+      expect(sut.initNewLine).toBeCalledTimes(1);
+      expect(sut.initMedia).toBeCalledTimes(1);
+    });
+  });
 
-    sut.historyTraverse([{ content: 'element1' }, { content: 'element2' }]);
+  describe('initNewLine', () => {
+    test('adds new line in case of no caret', () => {
+      sut.appendHtml = jest.fn();
 
-    expect(sut.appendHtml).toBeCalledTimes(2);
-    expect(sut.appendHtml).toBeCalledWith({ content: 'element1' }, false);
-    expect(sut.appendHtml).toBeCalledWith({ content: 'element2' }, true);
-    expect(actionService.clearButtonCodes).toBeCalled();
+      sut.initNewLine({ content: 'element1' }, false);
+
+      expect(sut.appendHtml).toBeCalledTimes(1);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element1' }, false);
+    });
+
+    test('adds new line in case of caret', () => {
+      sut.appendHtml = jest.fn();
+
+      sut.initNewLine({ content: 'elem^ent1' }, false);
+
+      expect(sut.appendHtml).toBeCalledTimes(2);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'elem' }, false);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'ent1' }, false);
+    });
+  });
+
+  describe('initMedia', () => {
+    test('appends the media link to the dom', () => {
+      sut.appendMedia = jest.fn();
+
+      sut.initMedia(`Hi! I'm here to assist you. {Are you ready?} <https://mylink.com> [Let's start]`);
+
+      expect(getStringInAngleBrackets).toBeCalledTimes(1);
+      expect(sut.appendMedia).toBeCalledWith('https://mysite.com');
+    });
   });
 
   test('that processMessageInCaseOfCaret formats the string in the correct format', () => {
@@ -554,3 +650,36 @@ function setContainer() {
   container.id = 'chatbot-container';
   document.body.appendChild(container);
 }
+
+describe('appendMedia calls the proper media markup', () => {
+  test('appendMedia calls videoMarkup if the extractedLink is a video link', () => {
+    //Arrange
+    let extractedLink = 'https://www.youtube.com/embed/cptE_T8okoo';
+    const videoMarkupSpy = jest.spyOn(chatWidgets, 'videoMarkup');
+    const imageMarkupSpy = jest.spyOn(chatWidgets, 'imageMarkup');
+
+    //Act
+    ChatUi.appendMedia(extractedLink);
+
+    //Assert
+    expect(videoMarkupSpy).toBeCalledTimes(1);
+    expect(imageMarkupSpy).not.toBeCalled();
+  });
+
+  test('appendMedia calls imageMarkup if the extractedLink is of image', () => {
+    //Arrange
+    const extractedLink = 'www.google.com/image.jpg';
+    const imageMarkupSpy = jest.spyOn(chatWidgets, 'imageMarkup');
+    const videoMarkupSpy = jest.spyOn(chatWidgets, 'videoMarkup');
+    document.appendChild = jest.fn();
+    ChatUi.fullScreenImage = jest.fn();
+
+    //Act
+    ChatUi.appendMedia(extractedLink);
+
+    //Assert
+    expect(imageMarkupSpy).toBeCalledTimes(1);
+    expect(videoMarkupSpy).not.toBeCalled();
+  });
+});
+

__tests__/unit/chat-widgets.spec.js

@@ -1,4 +1,4 @@
-import { getPopUp } from '../../src/lib/chat-widgets';
+import { getPopUp, videoMarkup, imageMarkup } from '../../src/lib/chat-widgets';
 
 describe('getPopUp function', () => {
   it('should create the first modal when type is "1111"', () => {
@@ -57,3 +57,38 @@ describe('getPopUp function', () => {
     expect(subHeader.textContent).toBe('A few seconds until the chat starts');
   });
 });
+
+describe('videoMarkup and imageMarkup works correctly', () => {
+  it('should create an iframe element with the correct attributes', () => {
+    // Arrange
+    const extractedLink = 'https://example.com/video';
+
+    // Act
+    const result = videoMarkup(extractedLink);
+
+    // Assert
+    expect(result).toBeInstanceOf(HTMLIFrameElement);
+    expect(result.src).toBe(`${extractedLink}?enablejsapi=1&rel=0`);
+    expect(result.getAttribute('allow')).toBe('fullscreen');
+    expect(result.id).toBe('player');
+    expect(result.classList.contains('media-video')).toBe(true);
+  });
+
+  it('should create a div element containing an img element with the correct attributes', () => {
+    // Arrange
+    const extractedLink = 'https://example.com/image.jpg';
+
+    // Act
+    const result = imageMarkup(extractedLink);
+
+    // Assert
+    expect(result).toBeInstanceOf(HTMLDivElement);
+
+    const imgElement = result.querySelector('img');
+    expect(imgElement).toBeInstanceOf(HTMLImageElement);
+    expect(imgElement.src).toBe(extractedLink);
+    expect(imgElement.classList.contains('media-image')).toBe(true);
+
+    expect(result.classList.contains('image-wrapper')).toBe(true);
+  });
+});

__tests__/unit/helpers.spec.js

@@ -8,6 +8,8 @@ import {
   isExpired,
   splitText,
   clearCarets,
+  getStringInAngleBrackets,
+  removeStringInAngleBrackets,
 } from '../../src/lib/helpers';
 
 describe('extractLink', () => {
@@ -383,3 +385,29 @@ describe('isExpired', () => {
     expect(resultText).toBe('This is test text!');
   });
 });
+
+describe('getStringInAngleBrackets and removeStringInAngleBrackets', () => {
+  test('getStringInAngleBrackets should return the string between < >', () => {
+    //Arrange
+    let input = 'Hello <www.test.test> Goodbye';
+
+    //Act
+    const result = getStringInAngleBrackets(input);
+    const expected = ['www.test.test'];
+
+    //Assert
+    expect(result).toEqual(expected);
+  });
+
+  test('removeStringInAngleBrackets replaces the string in < > with empty string', () => {
+    //Arrange
+    let input = 'This is a test to remove the link! <https://youtube.com>';
+
+    //Act
+    const result = removeStringInAngleBrackets(input);
+    const expected = 'This is a test to remove the link! ';
+
+    //Assert
+    expect(result).toEqual(expected);
+  });
+});

__tests__/unit/initial-message.spec.js

@@ -19,13 +19,15 @@ jest.mock('../../src/lib/helpers.js', () => {
       extractedString: 'extracted-string',
       updatedMessage: 'updated-message',
     }),
+    getStringInAngleBrackets: jest.fn().mockReturnValue([''])
   };
 });
 
 jest.mock('../../src/lib/chat-widgets', () => {
   return {
     getPopUp: jest.fn().mockReturnValue('<div></div>'),
     timeMarkup: jest.fn().mockReturnValue('markup'),
+    imageMarkup: jest.fn()
   };
 });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "1ff-chat-ui",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "chatbot to communicate with taught ai",
   "main": "src/lib/chat-ui.js",
   "scripts": {