Skip to content

Commit 9bbf2ed

Browse files
gedinakovagedinakova
committed
refactor(*): Further fixes & updates of events tests.
1 parent 5be4ebc commit 9bbf2ed

File tree

1 file changed

+63
-98
lines changed

1 file changed

+63
-98
lines changed

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

Lines changed: 63 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { aTimeout, elementUpdated, expect, fixture } from '@open-wc/testing';
1+
import { elementUpdated, expect, fixture } from '@open-wc/testing';
22
import { html, nothing } from 'lit';
33
import { type SinonFakeTimers, spy, stub, useFakeTimers } from 'sinon';
44
import type IgcIconButtonComponent from '../button/icon-button.js';
@@ -121,7 +121,7 @@ describe('Chat', () => {
121121

122122
beforeEach(async () => {
123123
chat = await fixture<IgcChatComponent>(html`<igc-chat></igc-chat>`);
124-
clock = useFakeTimers({ toFake: ['setInterval'] });
124+
clock = useFakeTimers({ toFake: ['setTimeout'] });
125125
});
126126

127127
afterEach(() => {
@@ -215,31 +215,31 @@ describe('Chat', () => {
215215
});
216216

217217
it('should enable/disable the send button properly', async () => {
218-
const { input } = getChatDOM(chat);
218+
const { textarea, sendButton, fileInput } = getChatDOM(chat).input;
219219

220-
expect(input.sendButton.disabled).to.be.true;
220+
expect(sendButton.disabled).to.be.true;
221221

222222
// When there is a text in the text area, the send button should be enabled
223223
let value = 'Hello!';
224-
input.textarea.value = value;
225-
input.textarea.emitEvent('igcInput', { detail: value });
224+
textarea.value = value;
225+
textarea.emitEvent('igcInput', { detail: value });
226226
await elementUpdated(chat);
227227

228-
expect(input.sendButton.disabled).to.be.false;
228+
expect(sendButton.disabled).to.be.false;
229229

230230
// When there is no text in the text area, the send button should be disabled
231231
value = '';
232-
input.textarea.value = value;
233-
input.textarea.emitEvent('igcInput', { detail: value });
232+
textarea.value = value;
233+
textarea.emitEvent('igcInput', { detail: value });
234234
await elementUpdated(chat);
235235

236-
expect(input.sendButton.disabled).to.be.true;
236+
expect(sendButton.disabled).to.be.true;
237237

238238
// When there are attachments, the send button should be enabled regardless of the text area content
239-
simulateFileUpload(input.fileInput, files);
239+
simulateFileUpload(fileInput, files);
240240
await elementUpdated(chat);
241241

242-
expect(input.sendButton.disabled).to.be.false;
242+
expect(sendButton.disabled).to.be.false;
243243
});
244244

245245
it('should not render attachment button if `disableInputAttachments` is true', async () => {
@@ -579,33 +579,22 @@ describe('Chat', () => {
579579
},
580580
};
581581
await elementUpdated(chat);
582-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
583-
584-
expect(inputArea).shadowDom.to.equal(
585-
`<div part="input-container">
586-
<div aria-label="Attachments" part="attachments" role="list">
587-
<div>
588-
<a href=${draftMessage.attachments[0].url} target="_blank">
589-
${draftMessage.attachments[0].name}
590-
</a>
591-
</div>
592-
</div>
593-
<div part="input-wrapper">
594-
<igc-input type="text" placeholder="Type text here...">
595-
</div>
596-
<div part="buttons-container">
597-
<div>
598-
<igc-button type="button" variant="contained">Upload</igc-button>
599-
<igc-button type="button" variant="contained">Send</igc-button>
600-
</div>
601-
</div>
602-
</div>
603-
`
604-
);
605582

606-
expect(inputArea?.shadowRoot?.querySelector('igc-input')?.value).to.equal(
583+
const { self: inputArea, sendButton, fileInput } = getChatDOM(chat).input;
584+
585+
expect(inputArea.renderRoot.querySelector('igc-input')?.value).to.equal(
607586
draftMessage.text
608587
);
588+
expect(inputArea.renderRoot.querySelector('a')?.href).to.equal(
589+
draftMessage.attachments[0].url
590+
);
591+
592+
expect(sendButton).to.be.null;
593+
expect(fileInput).to.be.null;
594+
var buttons = inputArea.renderRoot.querySelectorAll(
595+
'igc-button[variant="contained"]'
596+
);
597+
expect(buttons.length).to.equal(2);
609598
});
610599

611600
it('should render messageHeader template', async () => {
@@ -629,29 +618,25 @@ describe('Chat', () => {
629618
describe('Click', () => {
630619
it('should update messages properly on send button click', async () => {
631620
const eventSpy = spy(chat, 'emitEvent');
632-
const textArea = getChatDOM(chat).input.textarea;
633-
textArea.setAttribute('value', 'Hello!');
634-
textArea.dispatchEvent(
621+
const { textarea, sendButton } = getChatDOM(chat).input!;
622+
textarea.setAttribute('value', 'Hello!');
623+
textarea.dispatchEvent(
635624
new CustomEvent('igcInput', { detail: 'Hello!' })
636625
);
637626
await elementUpdated(chat);
638627

639-
const sendButton = getChatDOM(chat).input.sendButton;
640628
simulateClick(sendButton);
641629
await elementUpdated(chat);
642630

643631
expect(eventSpy).calledWith('igcMessageCreated');
644-
const eventArgs = eventSpy.getCall(1).args[1]?.detail;
645-
const args =
646-
eventArgs && typeof eventArgs === 'object'
647-
? { ...eventArgs, text: 'Hello!', sender: 'user' }
648-
: { text: 'Hello!', sender: 'user' };
632+
const eventArgs = eventSpy.getCall(1).args[1]?.detail as IgcChatMessage;
633+
const args = { ...eventArgs, text: 'Hello!', sender: 'user' };
649634
expect(eventArgs).to.deep.equal(args);
650635
expect(chat.messages.length).to.equal(1);
651636
expect(chat.messages[0].text).to.equal('Hello!');
652637
expect(chat.messages[0].sender).to.equal('user');
653638
// The focus should be on the input area after send button is clicked
654-
expect(isFocused(textArea)).to.be.true;
639+
expect(isFocused(textarea)).to.be.true;
655640
});
656641

657642
it('should update messages properly on suggestion chip click', async () => {
@@ -711,18 +696,17 @@ describe('Chat', () => {
711696

712697
it('should disable send button on removing all attachments', async () => {
713698
const inputArea = getChatDOM(chat).input!;
714-
const fileInput = inputArea.fileInput;
699+
const { fileInput, sendButton } = inputArea;
715700

716701
simulateFileUpload(fileInput, files);
717702
await elementUpdated(chat);
718-
await elementUpdated(inputArea.self);
719703

720704
const attachments = inputArea.chips;
721705
simulateClick(attachments[1].renderRoot.querySelector('igc-icon')!);
722706
simulateClick(attachments[0].renderRoot.querySelector('igc-icon')!);
723707
await elementUpdated(inputArea.self);
724708

725-
expect(inputArea.sendButton.disabled).to.be.true;
709+
expect(sendButton.disabled).to.be.true;
726710
});
727711

728712
it('should update like button state on click', async () => {
@@ -888,21 +872,15 @@ describe('Chat', () => {
888872
});
889873
});
890874

891-
describe.skip('Events', () => {
875+
describe('Events', () => {
892876
it('emits igcAttachmentClick', async () => {
893877
const eventSpy = spy(chat, 'emitEvent');
894878
chat.messages = [messages[1]];
895879
await elementUpdated(chat);
896880

897-
const messageElement = chat.shadowRoot
898-
?.querySelector(`div[part='message-list'`)
899-
?.querySelector('igc-chat-message');
900-
901-
const attachmentHeader = messageElement?.shadowRoot
902-
?.querySelector('igc-message-attachments')
903-
?.shadowRoot?.querySelector(
904-
`div[part='attachment-header sent']`
905-
) as HTMLElement;
881+
const messageElement = getChatDOM(chat).messages[0];
882+
const attachment = getChatMessageDOM(messageElement).attachments[0];
883+
const attachmentHeader = getChatAttachmentDOM(attachment).header;
906884

907885
simulateClick(attachmentHeader);
908886
expect(eventSpy).calledWith('igcAttachmentClick', {
@@ -912,44 +890,43 @@ describe('Chat', () => {
912890

913891
it('emits igcTypingChange', async () => {
914892
const eventSpy = spy(chat, 'emitEvent');
915-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
916-
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea')!;
893+
const textArea = getChatDOM(chat).input.textarea!;
917894

918895
simulateFocus(textArea);
919896
simulateKeyboard(textArea, 'a');
920-
expect(eventSpy).calledWith('igcTypingChange', {
921-
detail: { isTyping: true },
897+
await elementUpdated(chat);
898+
899+
expect(eventSpy).calledWith('igcTypingChange');
900+
expect(eventSpy.getCall(1).args[1]?.detail).to.deep.equal({
901+
isTyping: true,
922902
});
923903

924-
aTimeout(3000).then(() => {
925-
expect(eventSpy).calledWith('igcTypingChange', {
926-
detail: { isTyping: false },
927-
});
904+
clock.tick(3000);
905+
await elementUpdated(chat);
906+
907+
expect(eventSpy).calledWith('igcTypingChange');
908+
expect(eventSpy.getCall(2).args[1]?.detail).to.deep.equal({
909+
isTyping: false,
928910
});
929911
});
930912

931913
it('emits igcInputFocus', async () => {
932914
const eventSpy = spy(chat, 'emitEvent');
933-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
934-
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea')!;
935915

936-
simulateFocus(textArea);
916+
simulateFocus(getChatDOM(chat).input.textarea);
937917
expect(eventSpy).calledWith('igcInputFocus');
938918
});
939919

940920
it('emits igcInputBlur', async () => {
941921
const eventSpy = spy(chat, 'emitEvent');
942-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
943-
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea')!;
944922

945-
simulateBlur(textArea);
923+
simulateBlur(getChatDOM(chat).input.textarea);
946924
expect(eventSpy).calledWith('igcInputBlur');
947925
});
948926

949927
it('emits igcInputChange', async () => {
950928
const eventSpy = spy(chat, 'emitEvent');
951-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
952-
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea')!;
929+
const textArea = getChatDOM(chat).input.textarea!;
953930

954931
textArea.setAttribute('value', 'Hello!');
955932
textArea.dispatchEvent(new CustomEvent('igcInput', { detail: 'Hello!' }));
@@ -964,13 +941,9 @@ describe('Chat', () => {
964941
chat.messages = [messages[0]];
965942
await elementUpdated(chat);
966943

967-
const messageElement = chat.shadowRoot
968-
?.querySelector(`div[part='message-list'`)
969-
?.querySelector('igc-chat-message');
970-
971-
const likeIcon = messageElement?.shadowRoot?.querySelector(
972-
'igc-icon-button[name="thumb_up_inactive"]'
973-
) as HTMLElement;
944+
const messageElement = getChatDOM(chat).messages[0];
945+
const likeIcon =
946+
getChatMessageDOM(messageElement).defaultActionButtons[1];
974947

975948
simulateClick(likeIcon);
976949
expect(eventSpy).calledWith('igcMessageReact', {
@@ -979,42 +952,34 @@ describe('Chat', () => {
979952
});
980953

981954
it('can cancel `igcMessageCreated` event', async () => {
982-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
983-
const sendButton = inputArea?.shadowRoot?.querySelector(
984-
'igc-icon-button[name="send_message"]'
985-
)!;
986-
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea')!;
955+
const inputArea = getChatDOM(chat).input;
956+
const { sendButton, textarea } = inputArea;
987957

988958
chat.addEventListener('igcMessageCreated', (event) => {
989959
event.preventDefault();
990960
});
991961

992-
textArea.setAttribute('value', 'Hello!');
993-
textArea.dispatchEvent(new CustomEvent('igcInput', { detail: 'Hello!' }));
962+
textarea.setAttribute('value', 'Hello!');
963+
textarea.dispatchEvent(new CustomEvent('igcInput', { detail: 'Hello!' }));
994964
await elementUpdated(chat);
995965
simulateClick(sendButton);
996966
await elementUpdated(chat);
997-
await clock.tickAsync(500);
998967

999968
expect(chat.messages.length).to.equal(0);
1000969
});
1001970

1002971
it('can cancel `igcAttachmentChange` event', async () => {
1003-
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
1004-
const fileInput = inputArea?.shadowRoot?.querySelector(
1005-
'input[type="file"]'
1006-
) as HTMLInputElement;
972+
const inputArea = getChatDOM(chat).input!;
973+
const fileInput = inputArea.fileInput;
1007974

1008-
chat.addEventListener('igcAttachmentChange', (event) => {
975+
chat.addEventListener('igcAttachmentAdded', (event) => {
1009976
event.preventDefault();
1010977
});
1011978

1012979
simulateFileUpload(fileInput, files);
1013980
await elementUpdated(chat);
1014981

1015-
expect(
1016-
inputArea?.shadowRoot?.querySelectorAll('igc-chip').length
1017-
).to.equal(0);
982+
expect(inputArea?.chips.length).to.equal(0);
1018983
});
1019984
});
1020985

0 commit comments

Comments
 (0)