Skip to content

Commit 0d78411

Browse files
teodosiahteodosiah
committed
refactor(chat): fix using classes in tests, add undefined checks
1 parent b3d7800 commit 0d78411

File tree

2 files changed

+53
-27
lines changed

2 files changed

+53
-27
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ export default class IgcChatInputComponent extends LitElement {
195195

196196
private setupDragAndDrop() {
197197
const container = this.shadowRoot?.querySelector(
198-
'.input-container'
198+
`div[part='input-container']`
199199
) as HTMLElement;
200200
if (container) {
201201
container.addEventListener('dragenter', this.handleDragEnter.bind(this));

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

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -351,25 +351,26 @@ describe('Chat', () => {
351351

352352
const messageContainer = chat.shadowRoot
353353
?.querySelector('igc-chat-message-list')
354-
?.shadowRoot?.querySelector('.message-list');
354+
?.shadowRoot?.querySelector(`div[part='message-list']`);
355355

356+
expect(messageContainer).not.to.be.undefined;
356357
expect(chat.messages.length).to.equal(3);
357358

358359
messageContainer
359360
?.querySelectorAll('igc-chat-message')
360361
.forEach((messageElement, index) => {
361362
if (index !== 2) {
362363
expect(
363-
messageElement.shadowRoot
364-
?.querySelector(`div[part='message-container']`)
365-
?.classList.contains('sent')
366-
).to.be.false;
364+
messageElement.shadowRoot?.querySelector(
365+
`div[part='message-container ']`
366+
)
367+
).not.to.be.undefined;
367368
} else {
368369
expect(
369-
messageElement.shadowRoot
370-
?.querySelector(`div[part='message-container']`)
371-
?.classList.contains('sent')
372-
).to.be.true;
370+
messageElement.shadowRoot?.querySelector(
371+
`div[part='message-container sent']`
372+
)
373+
).not.to.be.undefined;
373374
}
374375
});
375376
});
@@ -531,6 +532,7 @@ describe('Chat', () => {
531532
await elementUpdated(chat);
532533
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
533534
const element = inputArea?.shadowRoot?.querySelector('igc-file-input');
535+
expect(element).not.to.be.undefined;
534536
if (element) {
535537
expect(element.accept).to.equal('image/*');
536538

@@ -615,11 +617,13 @@ describe('Chat', () => {
615617

616618
const messageElements = chat.shadowRoot
617619
?.querySelector('igc-chat-message-list')
618-
?.shadowRoot?.querySelector('.message-list')
620+
?.shadowRoot?.querySelector(`div[part='message-list']`)
619621
?.querySelectorAll('igc-chat-message');
622+
expect(messageElements).not.to.be.undefined;
620623
messageElements?.forEach((messageElement, index) => {
621624
const messsageContainer =
622-
messageElement.shadowRoot?.querySelector('.bubble');
625+
messageElement.shadowRoot?.querySelector(`div[part='bubble']`);
626+
expect(messsageContainer).not.to.be.undefined;
623627
expect(messsageContainer).dom.to.equal(
624628
`<div part="bubble">
625629
<div>
@@ -642,7 +646,7 @@ describe('Chat', () => {
642646
<div part="details">
643647
<slot name="attachment-icon">
644648
<igc-icon
645-
part="medium"
649+
part="attachment-icon"
646650
collection="material"
647651
name="image"
648652
>
@@ -677,7 +681,7 @@ describe('Chat', () => {
677681
<div part="details">
678682
<slot name="attachment-icon">
679683
<igc-icon
680-
part="medium"
684+
part="attachment-icon"
681685
collection="material"
682686
name="file"
683687
>
@@ -801,11 +805,13 @@ describe('Chat', () => {
801805

802806
const messageElements = chat.shadowRoot
803807
?.querySelector('igc-chat-message-list')
804-
?.shadowRoot?.querySelector('.message-list')
808+
?.shadowRoot?.querySelector(`div[part='message-list']`)
805809
?.querySelectorAll('igc-chat-message');
810+
expect(messageElements).not.to.be.undefined;
806811
messageElements?.forEach((messageElement, index) => {
807812
const messsageContainer =
808-
messageElement.shadowRoot?.querySelector('.bubble');
813+
messageElement.shadowRoot?.querySelector(`div[part='bubble']`);
814+
expect(messsageContainer).not.to.be.undefined;
809815
const attachments = messsageContainer?.querySelector(
810816
'igc-message-attachments'
811817
);
@@ -834,24 +840,27 @@ describe('Chat', () => {
834840

835841
const messageElements = chat.shadowRoot
836842
?.querySelector('igc-chat-message-list')
837-
?.shadowRoot?.querySelector('.message-list')
843+
?.shadowRoot?.querySelector(`div[part='message-list']`)
838844
?.querySelectorAll('igc-chat-message');
839-
845+
expect(messageElements).not.to.be.undefined;
840846
messageElements?.forEach((messageElement, index) => {
841847
const messsageContainer =
842-
messageElement.shadowRoot?.querySelector('.bubble');
848+
messageElement.shadowRoot?.querySelector(`div[part='bubble']`);
849+
expect(messsageContainer).not.to.be.undefined;
843850
const attachments = messsageContainer?.querySelector(
844851
'igc-message-attachments'
845852
);
846853

847-
const details = attachments?.shadowRoot?.querySelector('.details');
854+
const details =
855+
attachments?.shadowRoot?.querySelector(`div[part='details']`);
848856
expect(details).dom.to.equal(
849857
`<div part="details">
850858
<h5>Custom ${chat.messages[index].attachments?.[0].name}</h5>
851859
</div>`
852860
);
853861

854-
const actions = attachments?.shadowRoot?.querySelector('.actions');
862+
const actions =
863+
attachments?.shadowRoot?.querySelector(`div[part='actions']`);
855864
expect(actions).dom.to.equal(
856865
`<div part="actions">
857866
<igc-button type="button" variant="contained">?</igc-button>
@@ -875,11 +884,13 @@ describe('Chat', () => {
875884
await aTimeout(500);
876885
const messageElements = chat.shadowRoot
877886
?.querySelector('igc-chat-message-list')
878-
?.shadowRoot?.querySelector('.message-list')
887+
?.shadowRoot?.querySelector(`div[part='message-list']`)
879888
?.querySelectorAll('igc-chat-message');
889+
expect(messageElements).not.to.be.undefined;
880890
messageElements?.forEach((messageElement, index) => {
881891
const messsageContainer =
882-
messageElement.shadowRoot?.querySelector('.bubble');
892+
messageElement.shadowRoot?.querySelector(`div[part='bubble']`);
893+
expect(messsageContainer).not.to.be.undefined;
883894
expect(messsageContainer).dom.to.equal(
884895
`<div part="bubble">
885896
<div>
@@ -901,11 +912,13 @@ describe('Chat', () => {
901912
await aTimeout(500);
902913
const messageElements = chat.shadowRoot
903914
?.querySelector('igc-chat-message-list')
904-
?.shadowRoot?.querySelector('.message-list')
915+
?.shadowRoot?.querySelector(`div[part='message-list']`)
905916
?.querySelectorAll('igc-chat-message');
917+
expect(messageElements).not.to.be.undefined;
906918
messageElements?.forEach((messageElement, index) => {
907919
const messsageContainer =
908-
messageElement.shadowRoot?.querySelector('.bubble');
920+
messageElement.shadowRoot?.querySelector(`div[part='bubble']`);
921+
expect(messsageContainer).not.to.be.undefined;
909922
if (index === 0) {
910923
expect(messsageContainer).dom.to.equal(
911924
`<div part="bubble">
@@ -1005,6 +1018,8 @@ describe('Chat', () => {
10051018
'igc-icon-button[name="send-message"]'
10061019
);
10071020
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea');
1021+
expect(sendButton).not.to.be.undefined;
1022+
expect(textArea).not.to.be.undefined;
10081023

10091024
if (sendButton && textArea) {
10101025
textArea.setAttribute('value', 'Hello!');
@@ -1102,9 +1117,11 @@ describe('Chat', () => {
11021117
it('should be able to drag & drop files based on the types listed in `acceptedFiles`', async () => {
11031118
const eventSpy = spy(chat, 'emitEvent');
11041119
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input')!;
1105-
const dropZone =
1106-
inputArea?.shadowRoot?.querySelector('.input-container');
1120+
const dropZone = inputArea?.shadowRoot?.querySelector(
1121+
`div[part='input-container']`
1122+
);
11071123

1124+
expect(dropZone).not.to.be.undefined;
11081125
if (dropZone) {
11091126
const mockDataTransfer = new DataTransfer();
11101127
files.forEach((file) => {
@@ -1157,6 +1174,9 @@ describe('Chat', () => {
11571174
);
11581175
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea');
11591176

1177+
expect(sendButton).not.to.be.undefined;
1178+
expect(textArea).not.to.be.undefined;
1179+
11601180
if (sendButton && textArea) {
11611181
textArea.setAttribute('value', 'Hello!');
11621182
textArea.dispatchEvent(new Event('input'));
@@ -1309,6 +1329,7 @@ describe('Chat', () => {
13091329
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
13101330
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea');
13111331

1332+
expect(textArea).not.to.be.undefined;
13121333
if (textArea) {
13131334
simulateFocus(textArea);
13141335
simulateKeyboard(textArea, 'a');
@@ -1328,6 +1349,7 @@ describe('Chat', () => {
13281349
const eventSpy = spy(chat, 'emitEvent');
13291350
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
13301351
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea');
1352+
expect(textArea).not.to.be.undefined;
13311353

13321354
if (textArea) {
13331355
simulateFocus(textArea);
@@ -1339,6 +1361,7 @@ describe('Chat', () => {
13391361
const eventSpy = spy(chat, 'emitEvent');
13401362
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
13411363
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea');
1364+
expect(textArea).not.to.be.undefined;
13421365

13431366
if (textArea) {
13441367
simulateBlur(textArea);
@@ -1351,6 +1374,7 @@ describe('Chat', () => {
13511374
const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
13521375
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea');
13531376

1377+
expect(textArea).not.to.be.undefined;
13541378
if (textArea) {
13551379
textArea.setAttribute('value', 'Hello!');
13561380
textArea.dispatchEvent(new Event('input'));
@@ -1367,6 +1391,8 @@ describe('Chat', () => {
13671391
'igc-icon-button[name="send-message"]'
13681392
);
13691393
const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea');
1394+
expect(sendButton).not.to.be.undefined;
1395+
expect(textArea).not.to.be.undefined;
13701396

13711397
chat.addEventListener('igcMessageCreated', (event) => {
13721398
event.preventDefault();

0 commit comments

Comments
 (0)