Skip to content

Commit c703225

Browse files
gedinakovagedinakova
committed
fix(*): Fixed failing interaction & events tests
1 parent ad879b1 commit c703225

File tree

2 files changed

+77
-99
lines changed

2 files changed

+77
-99
lines changed

‎src/components/chat/chat-input.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,8 @@ export default class IgcChatInputComponent extends LitElement {
160160
}
161161

162162
private _handleKeydown(event: KeyboardEvent): void {
163-
const isSendRequest = event.key === enterKey && !event.shiftKey;
163+
const isSendRequest =
164+
event.key.toLowerCase() === enterKey.toLowerCase() && !event.shiftKey;
164165

165166
if (isSendRequest) {
166167
event.preventDefault();

‎src/components/chat/chat.spec.ts‎

Lines changed: 75 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
} from '../common/utils.spec.js';
1616
import { simulateFileUpload } from '../file-input/file-input.spec.js';
1717
import IgcInputComponent from '../input/input.js';
18+
import IgcListItemComponent from '../list/list-item.js';
1819
import IgcTextareaComponent from '../textarea/textarea.js';
1920
import IgcChatComponent from './chat.js';
2021
import IgcChatInputComponent from './chat-input.js';
@@ -115,8 +116,6 @@ describe('Chat', () => {
115116
new File(['image data'], 'image.png', { type: 'image/png' }),
116117
];
117118

118-
const messageActions = () => '';
119-
120119
let chat: IgcChatComponent;
121120
let clock: SinonFakeTimers;
122121

@@ -626,23 +625,18 @@ describe('Chat', () => {
626625
});
627626
});
628627

629-
describe.skip('Interactions', () => {
628+
describe('Interactions', () => {
630629
describe('Click', () => {
631630
it('should update messages properly on send button click', async () => {
632631
const eventSpy = spy(chat, 'emitEvent');
633-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
634-
const sendButton = inputArea?.shadowRoot?.querySelector(
635-
'igc-icon-button[name="send_message"]'
636-
)!;
637-
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea')!;
638-
expect(sendButton).not.to.be.null;
639-
expect(textArea).not.to.be.null;
640-
632+
const textArea = getChatDOM(chat).input.textarea;
641633
textArea.setAttribute('value', 'Hello!');
642634
textArea.dispatchEvent(
643635
new CustomEvent('igcInput', { detail: 'Hello!' })
644636
);
645637
await elementUpdated(chat);
638+
639+
const sendButton = getChatDOM(chat).input.sendButton;
646640
simulateClick(sendButton);
647641
await elementUpdated(chat);
648642

@@ -667,9 +661,9 @@ describe('Chat', () => {
667661
};
668662
await elementUpdated(chat);
669663

670-
const suggestionItems = chat.shadowRoot
671-
?.querySelector('igc-list')
672-
?.querySelectorAll('igc-list-item')!;
664+
const suggestionItems = getChatDOM(
665+
chat
666+
).suggestionsContainer.querySelectorAll(IgcListItemComponent.tagName);
673667

674668
expect(suggestionItems.length).to.equal(2);
675669
simulateClick(suggestionItems[0]);
@@ -685,115 +679,101 @@ describe('Chat', () => {
685679
expect(chat.messages.length).to.equal(1);
686680
expect(chat.messages[0].text).to.equal('Suggestion 1');
687681
expect(chat.messages[0].sender).to.equal('user');
682+
688683
// The focus should be on the input area after suggestion click
689-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
690-
const textArea = inputArea?.shadowRoot?.querySelector(
691-
'igc-textarea'
692-
) as HTMLElement;
693-
expect(isFocused(textArea)).to.be.true;
684+
expect(isFocused(getChatDOM(chat).input.textarea)).to.be.true;
694685
});
695686

696687
it('should remove attachment on chip remove button click', async () => {
697688
const eventSpy = spy(chat, 'emitEvent');
698-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
699-
const fileInput = inputArea?.shadowRoot?.querySelector(
700-
'input[type="file"]'
701-
) as HTMLInputElement;
689+
const fileInput = getChatDOM(chat).input.fileInput;
702690
simulateFileUpload(fileInput, files);
703691
await elementUpdated(chat);
704692

705-
expect(
706-
inputArea?.shadowRoot?.querySelectorAll('igc-chip').length
707-
).to.equal(2);
708-
const removeFileButton = inputArea?.shadowRoot
709-
?.querySelectorAll('igc-chip')[0]
710-
?.shadowRoot?.querySelector('igc-icon') as HTMLElement;
693+
expect(eventSpy).calledOnce;
694+
expect(eventSpy.calledWith('igcAttachmentAdded')).to.be.true;
695+
696+
const attachments = getChatDOM(chat).input.chips;
697+
expect(attachments.length).to.equal(2);
698+
const removeFileButton = attachments[1]?.renderRoot.querySelector(
699+
'igc-icon'
700+
) as HTMLElement;
711701
simulateClick(removeFileButton);
712702
await elementUpdated(chat);
713703

714704
expect(eventSpy).calledTwice;
715-
expect(eventSpy.alwaysCalledWith('igcAttachmentChange')).to.be.true;
716-
const eventArgs = eventSpy.getCall(1).args[1]?.detail;
717-
const argsArr = Array.isArray(eventArgs) ? [...eventArgs] : [];
718-
expect(argsArr.length).to.equal(1);
719-
expect(argsArr[0].name).to.equal(files[1].name);
705+
expect(eventSpy.calledWith('igcAttachmentRemoved')).to.be.true;
706+
const detail = eventSpy.getCall(1).args[1]?.detail;
707+
expect((detail as IgcChatMessageAttachment).name).to.equal(
708+
files[1].name
709+
);
720710
});
721711

722712
it('should disable send button on removing all attachments', async () => {
723-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
724-
const fileInput = inputArea?.shadowRoot?.querySelector(
725-
'input[type="file"]'
726-
) as HTMLInputElement;
713+
const inputArea = getChatDOM(chat).input!;
714+
const fileInput = inputArea.fileInput;
715+
727716
simulateFileUpload(fileInput, files);
728717
await elementUpdated(chat);
729-
await elementUpdated(inputArea!);
730-
731-
const attachments =
732-
inputArea?.shadowRoot?.querySelectorAll('igc-chip')!;
733-
simulateClick(attachments[1].shadowRoot?.querySelector('igc-icon')!);
734-
simulateClick(attachments[0].shadowRoot?.querySelector('igc-icon')!);
735-
await elementUpdated(inputArea!);
718+
await elementUpdated(inputArea.self);
736719

737-
const sendButton = inputArea?.shadowRoot?.querySelector(
738-
'igc-icon-button[name="send_message"]'
739-
)! as IgcIconButtonComponent;
720+
const attachments = inputArea.chips;
721+
simulateClick(attachments[1].renderRoot.querySelector('igc-icon')!);
722+
simulateClick(attachments[0].renderRoot.querySelector('igc-icon')!);
723+
await elementUpdated(inputArea.self);
740724

741-
expect(sendButton.disabled).to.be.true;
725+
expect(inputArea.sendButton.disabled).to.be.true;
742726
});
743727

744728
it('should update like button state on click', async () => {
745729
chat.messages = [messages[0]];
746730
await elementUpdated(chat);
747731

748-
const messageContainer = chat.shadowRoot?.querySelector(
749-
'div[part="message-list"]'
750-
) as HTMLElement;
751-
let firstMessage =
752-
messageContainer?.querySelectorAll('igc-chat-message')[0];
753-
expect(firstMessage).shadowDom.to.equal(
754-
`<div part="message-container">
755-
<pre part="plain-text">
756-
Hello! How can I help you today?
757-
</pre>
758-
${firstMessage?.message?.sender !== 'user' ? messageActions() : ''}
759-
</div>`
760-
);
732+
const firstMessage = getChatDOM(chat).messages[0];
733+
// click on like (inactive) icon
734+
const likeIcon =
735+
getChatMessageDOM(firstMessage).defaultActionButtons[1];
736+
simulateClick(likeIcon);
737+
await elementUpdated(chat);
738+
739+
expect(likeIcon.name).to.equal('thumb_up_active');
740+
// click on like (active) icon
741+
simulateClick(likeIcon);
742+
await elementUpdated(chat);
743+
744+
expect(likeIcon.name).to.equal('thumb_up_inactive');
761745

762746
// click on like (inactive) icon
763-
let likeIcon = firstMessage?.shadowRoot?.querySelector(
764-
'igc-icon-button[name="thumb_up_inactive"]'
765-
) as HTMLElement;
766747
simulateClick(likeIcon);
767748
await elementUpdated(chat);
749+
expect(likeIcon.name).to.equal('thumb_up_active');
750+
});
768751

769-
firstMessage =
770-
messageContainer?.querySelectorAll('igc-chat-message')[0];
771-
expect(firstMessage).shadowDom.to.equal(
772-
`<div part="message-container">
773-
<pre part="plain-text">
774-
Hello! How can I help you today?
775-
</pre>
776-
${firstMessage?.message?.sender !== 'user' ? messageActions() : ''}
777-
</div>`
778-
);
752+
it('should toggle like/dislike state on click', async () => {
753+
chat.messages = [messages[0]];
754+
await elementUpdated(chat);
779755

780-
// click on like (active) icon
781-
likeIcon = firstMessage?.shadowRoot?.querySelector(
782-
'igc-icon-button[name="thumb_up_active"]'
783-
) as HTMLElement;
756+
const firstMessage = getChatDOM(chat).messages[0];
757+
// click on like (inactive) icon
758+
const likeIcon =
759+
getChatMessageDOM(firstMessage).defaultActionButtons[1];
784760
simulateClick(likeIcon);
785761
await elementUpdated(chat);
786762

787-
firstMessage =
788-
messageContainer?.querySelectorAll('igc-chat-message')[0];
789-
expect(firstMessage).shadowDom.to.equal(
790-
`<div part="message-container">
791-
<pre part="plain-text">
792-
Hello! How can I help you today?
793-
</pre>
794-
${firstMessage?.message?.sender !== 'user' ? messageActions() : ''}
795-
</div>`
796-
);
763+
const dislikeIcon =
764+
getChatMessageDOM(firstMessage).defaultActionButtons[2];
765+
expect(dislikeIcon.name).to.equal('thumb_down_inactive');
766+
// click on dislike (active) icon
767+
simulateClick(dislikeIcon);
768+
await elementUpdated(chat);
769+
770+
expect(likeIcon.name).to.equal('thumb_up_inactive');
771+
expect(dislikeIcon.name).to.equal('thumb_down_active');
772+
773+
// click on like (inactive) icon
774+
simulateClick(likeIcon);
775+
await elementUpdated(chat);
776+
expect(likeIcon.name).to.equal('thumb_up_active');
797777
});
798778

799779
it('should handle the copy action properly', async () => {
@@ -829,8 +809,8 @@ describe('Chat', () => {
829809

830810
it('should be able to drag & drop files based on the types listed in `acceptedFiles`', async () => {
831811
const eventSpy = spy(chat, 'emitEvent');
832-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input')!;
833-
const dropZone = inputArea?.shadowRoot?.querySelector(
812+
const inputArea = getChatDOM(chat).input.self!;
813+
const dropZone = inputArea?.renderRoot.querySelector(
834814
`div[part='input-container']`
835815
);
836816

@@ -853,7 +833,7 @@ describe('Chat', () => {
853833
dropZone?.dispatchEvent(dragEnterEvent);
854834
await elementUpdated(chat);
855835

856-
expect(eventSpy.callCount).to.equal(1);
836+
expect(eventSpy).calledOnce;
857837
expect(eventSpy).calledWith('igcAttachmentDrag');
858838

859839
const dropEvent = new DragEvent('drop', {
@@ -868,21 +848,19 @@ describe('Chat', () => {
868848
await elementUpdated(chat);
869849

870850
expect(eventSpy).calledWith('igcAttachmentDrop');
871-
const attachments =
872-
inputArea?.shadowRoot?.querySelectorAll('igc-chip');
851+
const attachments = getChatDOM(chat).input.chips;
873852
expect(attachments?.length).to.equal(1);
874853
expect(attachments?.[0]?.textContent?.trim()).to.equal('test.txt');
875854
expect(eventSpy).calledWith('igcAttachmentDrop');
876-
expect(eventSpy).calledWith('igcAttachmentChange');
855+
expect(eventSpy).calledWith('igcAttachmentAdded');
877856
}
878857
});
879858
});
880859

881860
describe('Keyboard', () => {
882861
it('should update messages properly on `Enter` keypress when the textarea is focused', async () => {
883862
const eventSpy = spy(chat, 'emitEvent');
884-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
885-
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea')!;
863+
const textArea = getChatDOM(chat).input.textarea;
886864

887865
textArea.setAttribute('value', 'Hello!');
888866
textArea.dispatchEvent(
@@ -892,7 +870,6 @@ describe('Chat', () => {
892870
simulateFocus(textArea);
893871
simulateKeyboard(textArea, enterKey);
894872
await elementUpdated(chat);
895-
await clock.tickAsync(500);
896873

897874
expect(eventSpy).calledWith('igcMessageCreated');
898875
const eventArgs = eventSpy.getCall(2).args[1]?.detail;

0 commit comments

Comments
 (0)