test(chat): fix tests after exposing empty message list slot

Author: teodosiah

src/components/chat/chat.spec.ts

@@ -193,8 +193,10 @@ describe('Chat', () => {
                             </igc-button>
                         </slot>
                     </div>
-                    <igc-chat-message-list>
-                    </igc-chat-message-list>
+                    <div class="empty-state">
+                      <slot name="empty-state">
+                      </slot>
+                    </div>
                     <div aria-label="Suggestions" class="suggestions-container" role="list">
                         <slot name="suggestions" part="suggestions">
                         </slot>
@@ -204,17 +206,6 @@ describe('Chat', () => {
                 </div>`
       );
 
-      const messageList = chat.shadowRoot?.querySelector(
-        'igc-chat-message-list'
-      );
-
-      expect(messageList).shadowDom.to.equal(
-        `<div aria-activedescendant="" aria-label="Message list" class="message-container" role="group" tabindex="0">
-                </div>
-                <div class="message-list">
-                </div>`
-      );
-
       const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
 
       expect(inputArea).shadowDom.to.equal(
@@ -259,24 +250,29 @@ describe('Chat', () => {
         html`<igc-chat .messages=${messages}> </igc-chat>`
       );
 
-      const messageContainer = chat.shadowRoot
-        ?.querySelector('igc-chat-message-list')
-        ?.shadowRoot?.querySelector('.message-list');
+      const messageList = chat.shadowRoot?.querySelector(
+        'igc-chat-message-list'
+      );
+      const messageContainer =
+        messageList?.shadowRoot?.querySelector('.message-list');
 
-      expect(chat.messages.length).to.equal(4);
-      expect(messageContainer).dom.to.equal(
-        `<div class="message-list">
-                    <igc-chat-message id="message-1" role="option">
+      expect(messageList).shadowDom.to.equal(
+        `<div aria-activedescendant="" aria-label="Message list" class="message-container" role="group" tabindex="0">
+                  </div>
+                  <div class="message-list">
+                   <igc-chat-message id="message-1" role="option">
                     </igc-chat-message>
                     <igc-chat-message id="message-2" role="option">
                     </igc-chat-message>
                     <igc-chat-message id="message-3" role="option">
                     </igc-chat-message>
                     <igc-chat-message id="message-4" role="option">
                     </igc-chat-message>
-                </div>`
+                  </div>`
       );
 
+      expect(chat.messages.length).to.equal(4);
+
       expect(
         messageContainer?.querySelectorAll('igc-chat-message')[0]
       ).shadowDom.to.equal(