Add data-testid to Announcer component and update tests to exclude announcer elements

Author: mgamis-msft

packages/react-components/src/components/Announcer.tsx

@@ -26,6 +26,7 @@ export const Announcer = (props: AnnouncerProps): JSX.Element => {
 
   return (
     <Stack
+      data-testid="announcer"
       aria-live={ariaLive}
       role={role}
       aria-atomic={true}

packages/react-components/src/components/InputBoxComponent.test.tsx

@@ -75,9 +75,9 @@ describe('InputBoxComponent should show mention popover', () => {
 
   const checkExpectedSuggestions = async (): Promise<void> => {
     for (const suggestion of suggestions) {
-      // Check that all suggestions are presented
-      const contextMenuItem = await screen.findByText(suggestion.displayText);
-      expect(contextMenuItem.classList.contains('ms-Persona-primaryText')).toBe(true);
+      // Check that all suggestions are presented (use selector to exclude announcer elements)
+      const contextMenuItem = await screen.findByText(suggestion.displayText, { selector: '.ms-Persona-primaryText' });
+      expect(contextMenuItem).toBeTruthy();
     }
   };
 
@@ -154,8 +154,9 @@ describe('InputBoxComponent should show mention popover for a custom trigger', (
 
   const checkExpectedSuggestions = async (): Promise<void> => {
     for (const suggestion of suggestions) {
-      const contextMenuItem = await screen.findByText(suggestion?.displayText);
-      expect(contextMenuItem.classList.contains('ms-Persona-primaryText')).toBe(true);
+      // Use selector to exclude announcer elements
+      const contextMenuItem = await screen.findByText(suggestion?.displayText, { selector: '.ms-Persona-primaryText' });
+      expect(contextMenuItem).toBeTruthy();
     }
   };
 
@@ -266,7 +267,8 @@ describe('InputBoxComponent should hide mention popover', () => {
 
   const checkSuggestionsNotShown = (): void => {
     for (const suggestion of suggestions) {
-      const contextMenuItem = screen.queryByText(suggestion?.displayText);
+      // Use selector to exclude announcer elements
+      const contextMenuItem = screen.queryByText(suggestion?.displayText, { selector: '.ms-Persona-primaryText' });
       expect(contextMenuItem).toBeNull();
     }
   };
@@ -276,8 +278,8 @@ describe('InputBoxComponent should hide mention popover', () => {
     if (!firstSuggestionText) {
       throw new Error('Suggestion text is not defined');
     }
-    const firstSuggestionMenuItem = await screen.findByText(firstSuggestionText);
-    expect(firstSuggestionMenuItem.classList.contains('ms-Persona-primaryText')).toBe(true);
+    // Use selector to exclude announcer elements
+    const firstSuggestionMenuItem = await screen.findByText(firstSuggestionText, { selector: '.ms-Persona-primaryText' });
     return firstSuggestionMenuItem;
   };
 

packages/react-components/src/components/MessageThread.test.tsx

@@ -396,13 +396,13 @@ describe('Message should display Mention correctly', () => {
       await userEvent.keyboard(' @');
     });
 
-    // Check that Everyone is an option
-    const everyoneMentionContextMenuItem = await screen.findByText('Everyone');
-    expect(everyoneMentionContextMenuItem.classList.contains('ms-Persona-primaryText')).toBe(true);
+    // Check that Everyone is an option (use selector to exclude announcer elements)
+    const everyoneMentionContextMenuItem = await screen.findByText('Everyone', { selector: '.ms-Persona-primaryText' });
+    expect(everyoneMentionContextMenuItem).toBeTruthy();
 
-    // Check that user1Name is an option
-    const user1MentionContextMenuItem = await screen.findByText(user1Name);
-    expect(user1MentionContextMenuItem.classList.contains('ms-Persona-primaryText')).toBe(true);
+    // Check that user1Name is an option (use selector to exclude announcer elements)
+    const user1MentionContextMenuItem = await screen.findByText(user1Name, { selector: '.ms-Persona-primaryText' });
+    expect(user1MentionContextMenuItem).toBeTruthy();
 
     // Select mention from popover for user1Name, verify plain text not contain mention html tag
     fireEvent.click(user1MentionContextMenuItem);

packages/react-components/src/components/SendBox.test.tsx

@@ -66,8 +66,8 @@ describe('SendBox should return correct value with a selected mention', () => {
     if (!suggestions[0]) {
       throw new Error('No suggestions found');
     }
-    const contextMenuItem = await screen.findByText(suggestions[0].displayText);
-    expect(contextMenuItem.classList.contains('ms-Persona-primaryText')).toBe(true);
+    // Use selector to exclude announcer elements
+    const contextMenuItem = await screen.findByText(suggestions[0].displayText, { selector: '.ms-Persona-primaryText' });
     contextMenuItem && fireEvent.click(contextMenuItem);
   };
 
@@ -161,8 +161,8 @@ describe('Clicks/Touch should select mention', () => {
     if (!suggestions[0]) {
       throw new Error('No suggestions found');
     }
-    const contextMenuItem = await screen.findByText(suggestions[0].displayText);
-    expect(contextMenuItem.classList.contains('ms-Persona-primaryText')).toBe(true);
+    // Use selector to exclude announcer elements
+    const contextMenuItem = await screen.findByText(suggestions[0].displayText, { selector: '.ms-Persona-primaryText' });
     fireEvent.click(contextMenuItem);
   };
 
@@ -421,8 +421,8 @@ describe('Keyboard events should be handled for mentions', () => {
     if (!suggestion) {
       throw new Error('Suggestion not found');
     }
-    const contextMenuItem = await screen.findByText(suggestion.displayText);
-    expect(contextMenuItem.classList.contains('ms-Persona-primaryText')).toBe(true);
+    // Use selector to exclude announcer elements
+    const contextMenuItem = await screen.findByText(suggestion.displayText, { selector: '.ms-Persona-primaryText' });
     fireEvent.click(contextMenuItem);
   };